Blogger Resimlerinize Özel Resim Efektleri Ekleyin

   Blogger sitenizde yüklemiş olduğunuz veya hazırlamış olduğunuz makalelerinizde ki resimlere özel 5 farklı efektler vererek farklılık yaratmak isterseniz bu efektleri kullanabilirsiniz.

   Uygulamaya Geçelim;

1- Önce blogger hesabınıza giriş yapın.
2- Kumanda Paneli > Şablon > HTML Düzenle yolunu izleyin.
3- Ctrl+F kısayol tuşları ile şablon kodlarınızı içerisinde ]]></b:skin> kodunu aradın.
4- Bulduğunuz ]]></b:skin> kodunun hemen üstüne aşağıdaki 5 ayrı özel efektli resim kodlarından birini ekleyin ve şablonu kaydedin.

CSS STİL > 1

            .post-body img {<br /> border:0;<br /> padding:0;<br /> -moz-transition: all 1s;<br /> -webkit-transition: all 1s;<br /> -o-transition: all 1s;<br /> }<br /> .post-body img:hover {<br /> box-shadow: 0px 0px 15px #000; /* Gölge */<br /> border-radius: 50%; /* Yuvarlatılmış kenar*/<br /> -moz-transition: all 1s;<br /> -webkit-transition: all 1s;<br /> -o-transition: all 1s;<br /> cursor:pointer;<br /> }<br />
CSS STİL > 2

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

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

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

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


Bizi Takip Edin.
Pinterest>> Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...