Ekim 01, 2012

Blogger Resimlerinize Animasyonlu Açıklama Ekleyin



Blogger Resimlerinize Animasyonlu Açıklama Ekleyin 

Yeniden merhaba, bloglamazamani takipçileri. Bugün CSS3 kodu ile düzenlenmiş resimlerinize açıklama eklemek için kullanılan bir kod paylaşacağım.

Aşağıda doğru açılan ve resme hareketlilik kazandıran bu kod ile bloğunuza ekleyeceğiniz önemli bir yer ,
şehir veya tarihi yerlerin altına açıklama yapabileceksiniz. Üstelik bu kod ile resimlerinize zoom efekti de eklemiş olacaksınız.
Blogger için CSS3 kullanarak Açıklamalı Kayan  Panel Kodu bloğunu daha çok resim paylaşan veya gezdiği yerleri yazan blogcular için ideal olacaktır.
Bu kodu kullanarak ziyaretçileriniz resimlerin üzerine geldiğinde önce resme zoom yapılacak ve daha sonra aşağı doğru bir açıklama çıkacak. Daha çok animasyon gibi dursa da bu kod birçok blogcunun işine yarayacağını tahmin ediyorum.
Şimdi gelelim ; CSS3 ile düzenlenen Resimlere açıklamalı panel şekilde kullanılan kodu bloğumuza nasıl ekleyeceğimize ?

Şu yolu izleyin: Kumanda Paneli > Şablon > Widget Genişlet 
Aşağıdaki CSS kodlarını; 
]]></b:skin>
bu kodun üzerine ekliyoruz.
/*================ Resimlere Açılır Panel Şeklinde Açıklama Kod Bloglamazamani ================*/

.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}

.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/*================ Resimlere Açılır Panel Şeklinde Açıklama Kod Sonu Bloglamazamani================*/
Kodu ekledikten sonra Şablonu kaydedin ve tasarım bölümünden çıkın.
Şimdi Yeni bir konu açın. Yeni konu açarken "Oluştur" ve "HTML" seçenekleri mevcut siz HTML olanı seçin ki bu kodu HTML olarak kullanacağız.
HTML kısmına geldiyseniz şimdi aşağıdaki kodu geldiğiniz bölüme yapıştırın ;
<center><div class="imagepluscontainer" style="width:263px;">
<img src="RESMİN URL">
<div class="desc downslide">
AÇIKLAMA
</div>
</div></center>

Down: yazan yere up,right or left gibi seçeneklerden birini yazabilirsiniz ya da down şeklinde de kalabilir.
Panelin genişliğini ayarlamak için eklediğiniz resme göre şu ayarı değiştirin ; width:263px;
Resmin URL ve Açıklamasını kısmını yukarıda kırmızı ile işaretledim. 
Merak edenler olacaktır bende onlar için bir demo hazırladım, ona buradan bakabilirsiniz
Güle güle kullanın eklentiyi. Herkese kolay gelsin. İyi bloglamalar.

Not : Eklenti hakkında fikir ve görüşlerinizi, sorunlarınız bu başlık altından iletirseniz elimden gelen yardımı sağlarım.

0 yorum :

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.