Blogger – Makale İçindeki Resimlere Efekt Vermek

Merhabalar. Blogger konulu makalelerime sonunda başlayabildim. Bunların ilki başlıkta da görmüş olduğunuz gibi makalenin içine eklediğimiz resimlere efekt vermek. Tam olarak ne demek oluyor derseniz; ziyaretçi eğer imleciyle bizim eklemiş olduğumuz resimlerin üstüne gelirse, o resmin hareketleneceği ve şekil değiştireceği anlamına geliyor. İşin en güzel tarafı ise bu eklentinin sadece CSS kodlar içeriyor olması. Bu sayede işlemimizi çok kolay bir şekilde tamamlayabileceğiz.

İlk yapacağımız işlem blogumuzun admin paneline yani Türkçe adıyla kumanda paneline erişmemiz gerekiyor. Panele ulaştıktan sonra ekranımızın sol tarafında bulunan dikey menüden Tema‘ya tıklıyoruz.

Tema‘ya tıkladıktan sonra yapacağımız işlem ise ekranımızın ortasında bulunan iki butondan HTML’yi Düzenle butonuna basmak olacak.

Yapacağımız işlemler az kaldı. Ha gayret! Son olarak ise karşımıza kodlarla dolu bir pencere geldi. Şimdi o kodlar içerisinden bir kodu arayacağız. Bunun için CTRL + F tuşlarına aynı anda basıyoruz. Önce CTRL’ye basılı tutup ardından bir kereliğine F tuşuna bassanız da olur. Bu işlemi yaptıktan sonra sağ üst köşede bir arama çubuğu gelecek. Oraya aşağıda yazdığım kodu yapıştırın ve Enter tuşuna basarak arama yapın.

]]></b:skin>

Bu kodu bulduktan sonra aşağıda listelenmiş olan animasyonlardan hangisini beğenirseniz, o animasyonun altında olan kod parçacıklarını bu yukarıdaki resimde görmüş olduğunuz kodun üstüne yapıştırıyorsunuz. Ardından Temayı Kaydet butonuna tıklayın ve işlemimiz tamamlanıyor.

Stil 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;


}

Stil 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;
}

Stil 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;
}

Stil 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;
}

Stil 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;
}

 

Makalemiz burada sona eriyor. Herhangi bir sorun, problem, öneri veya şikayetinizi yorum olarak belirtebilirsiniz.

Blogger – Makale İçindeki Resimlere Efekt Vermek” için 4 yorum

  • 21 Ağustos 2017 tarihinde, saat 22:53
    Permalink

    çok estetik gerçekten.. kodları note pad ile kaydettim.. mutlaka blog sayfamda kullanacağım. paylaşım için teşekkürler..

    Kolay gelsin.

    Yanıtla
  • 22 Ağustos 2017 tarihinde, saat 12:09
    Permalink

    Ne güzelmiş. Başka bir programa ihtiyaç duymadan blogger üzerinden resimlere şekil vermek güzel. Güzel bir paylaşım olmuş. Eline sağlık.

    Yanıtla
    • 22 Ağustos 2017 tarihinde, saat 15:09
      Permalink

      Değerli yorumun için teşekkür ederim Yasemin abla’cım 🙂 Bu ve benzeri paylaşımlara devam edeceğim.

      Yanıtla

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir