Makale İçi Resimlere Efekt Vermek

Merhaba sevgili okuyucu dostlarım;

Bu makalemde sizlere Blogger kullananlar için güzel bir eklenti paylaşacağım. Bu eklenti sayesinde kendi blogumda da görebilirsiniz, makale içindeki resimlere CSS sayesinde şekiller veriyor. Herhangi bir kurulum vs. bir şey gerektirmiyor ve çok kısa bir süre içinde kurulumu bitiyor. Lafı uzatmadan eklentiye geçelim;

İlk önce admin (kumanda) panelinden şablonumuzu düzenlediğimiz bölüme geliyoruz.

]]></b:skin>

Kodumuzu girdikten sonra hemen üstüne aşağıda verdiğim kodları yapıştırıyoruz.

Eklemek istediğiniz stilin kodunu yazın, tek tek sıraladım.

 STİL 1 :

.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Arkadaki gölgeyi verir. Değerlerle isterseniz oynayabilirsiniz. */
border-radius: 50%; /* Border Radius : Kenarın yuvarlanmasıdır. Yüzde ile oynayabilirsiniz.*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 2 :

.post-body img {
background:#FFF; /*Çevresindeki arka plan rengi  */
padding:15px; 
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Gölge*/
border-radius: 0% 50%; /* Yuvarlatılmış kenar  */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 3 : 

.post-body img {
background:#FFF; /* Çevresindeki arka plan rengi */
padding:15px; /* Sınır Arasındaki Boşluk ve Görüntü */
border-radius: 50% 0; /*  Yuvarlatılmış kenar */
box-shadow: 0px 0px 15px #000; /* Gölge */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Bu işlem ile sınır yuvarlaklık (değeri 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 4 : 

.post-body img {
box-shadow: 0px 0px 15px #000; /* Gölge*/
border-radius: 50%; /* Yuvarlatılmış kenar */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Bu gölge (değeri 0) */
border-radius: 0; /* Bu işlem ile sınır yuvarlaklık (değeri 0)*/
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

STİL 5 : 

 .post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Gölge */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /*  Bu yuvarlaklığını sınır (değeri 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Eğer beğendiyseniz ne mutlu bana. İyi bloglamalar efenim :)