Blogger Resimlerinize Özel Efektler Verin

Blogger Resimlerinize Özel Efektler Verin 

Blog resimleriniz için beş harika CSS stillerinde farklı efekt ve gölgeler ile farklı bir blog tarzı sunabilirsiniz bu eklenti ile.Aşağıdaki beş stildeki şekiller ile daha güzel bir görünümde verebilirsiniz.Oldukça eklemesi basit bir eklenti sayesinde blogunuzdaki resimlere farklı özel bir efekt sunabilirsiniz.CSS stillerinin demosunu yazımın en altında sizlere paylaşıyorum kendinize uyanı ve güzel bulduğunuzu blogunuza ekleyebilirsiniz.

Blogger Paneline Girin. .

Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodlardan hangisini seçiyorsanız hemen üstüne yerleştiriyoruz

Şekil 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; /* Gölge */ border-radius: 50%; /* Yuvarlatılmış kenar*/ -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } ____________________________________ Şekil 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; } ___________________________________ Şekil 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; } ______________________________________ Şekil 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; } _____________________________________ Şekil 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; } Kaynak: Bloggerturkey