Blogger Resim Gölgelendirme Efektli Menü

Blogger Resim Gölgelendirme Efektli Menü Oluşturmak 

Blogger Dersleri kuşağında farklı tarzda gölgelendirme efekti bulunan bir Blogger menüsünü sizlere sunmak istiyorum.

Genişleyen Resim Demosunu Gör

Blogger Dersleri - Blogger Resim Gölgelendirme Efektli Menü 

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.

2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu buluyoruz. 

3 ) ]]></b:skin> kodunun öncesine aşağıdaki Blogger Resim Gölgelendirme Efekti Menü kodunu dizinini ekliyoruz. 

.gallery{
  list-style: none;
  margin: 50px auto; padding: 0;
  width: 642px;
  font-size: 0; /* fix inline-block spacing */
}
.gallery li{
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 200px; height: 150px;
    margin: 2px;
    border: 5px solid #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    transition: all .3s ease;        
}
.gallery:hover li:not(:hover){       
    -webkit-filter: blur(2px) grayscale(1);
    opacity: .7; /* fallback */        
}

• Kırmızı ile belirlenmiş alan menünüzün görünecek resimlerinin boyutunu belirler.
• Mavi alan ise menünün genişliğini ayarlamanız için.r     

Blogger Dersleri Resim Gölgelendirme Efektli Menü Kullanımı 

Blogger Dersleri - Blogger Resim Gölgelendirme Efektli Menü Blogger Resim Zoomlama efektini kullanmak için  Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak aşağıda ki kodları ekleyin .

Eğer yazı içerisinde kullanmak istiyorsanız yayın eklerken HTML bölümüne geçerek aşağıda ki kodları ekleyin.

<ul class="gallery">
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVGmOuv96BjvTZRERdB1PQ7nVYPr0HpJJ0XbS1MHzjp_nONStfLePLkEtxmzggmvVhe1VQ2OLZB431__94NX0zPVndUDE_4NGyxhp_J7kF7X22wOSeJ_i2qlo-rz0ea7MNNPYHIZRgSg/s1600/blogger-resim-golgelendirme-efekti-1.jpg" /></a></li>
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5sehk2O0fVIFtPbwlGPRDe2D71b7DnYHzLmziupD_Z-tK4u4-roMzloUMWefGySogTqUC62aeE4rX93hFWNSRLjJh7CHfYippNUhnahZHE2m-m955-OJ7pdMs2t2fOapWRxhqfT_ko0/s1600/blogger-resim-golgelendirme-efekti-2.jpg" /></a></li>
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0UMdDFNwD-mX_e4JZMPrrXyMgVJyynRTKvtQ0Pm7prSalQ7g-qXnr9kZ43Ftp3h8PGJlEunuJaHufggDt7oxT5UTqLD58MOHDc3nJu90bspy-rgZKo5zZFxcXArgxh8IAfGtQ02zL4Zw/s1600/blogger-resim-golgelendirme-efekti-3.jpg" /></a></li>
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCFLN-S_ZdvMxs5WWelmmWlVBpzKTz4Ou1iplYR54oc4WOUUH2LMpQbREoEE6sA6DtMtAm20eTZ0sHaMEybHx7WkwdXGZBulHC5zEitVpveR5nXqAD2lTuHq6ltkzBhmBpr-bLtlsnMhA/s1600/blogger-resim-golgelendirme-efekti-4.jpg" /></a></li>
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnW3z1uHe-vccgzDxrAysM2A0_AW5FbgDkjZESbeZbh1f6VGB9aXCMLbbXtBW8aqmB02iEZbffbfeltUcPzcLuXQvVVGFTBYnKhFDIvdcvmetq8ahsCLHTZE7HFasRuP90Cwl3mKngEzY/s1600/blogger-resim-golgelendirme-efekti-5.jpg" /></a></li>
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWMB5xh_4N0V5BKdPjpRZDT7NlNy2gcJCfHdXiTXJsBkLf3qYyBiDJLWCyZVQctzGHKTkm8Gzq2xsPidPg7qOc9rQknwAw0peDo0OIebxeW2NAV33jEaYIbUYeHiZY9UChw6LFS8OucjQ/s1600/blogger-resim-golgelendirme-efekti-6.jpg" /></a></li>
</ul>
<div>
<br /></div>

 Blogger Dersleri - Blogger Resim Gölgelendirme Efekti Düzenlemesi 

• Mavi ile belirlenmiş olan alana resme tıklandığında ulaşılması istenilen site adresini yazmanız gerekiyor. 
• Kırmızı ile yazılmış alanlar ise resim linkleriniz. Kendinize göre düzenlemelisiniz. 

Gölgelendirme yeterli değil ben aynı zamanda Zoomlama özelliği istiyorum diyorsanız buradan buyurun : Blogger Dersleri - Blogger Resim Zoomlama ve Gölgelendirme >> 

Tweet