 |
| 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.
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 .<ul class="gallery">
<li><a href="http://www.bloggerdersleri.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrx6LVYHo3tIAy6jkMbHsjkRy2yul3lDV-qt5fbRt0nS3yj-HwSJy5-VVYUjv_y8pFP6wEjsyXSNNNL2q7S1fPi690qqxnffNVPdxYh6G1Zuggq7mBMwJ5QytK-6sTcFO3l0l7I304xtQ/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/AVvXsEikI0EQxXoLIyIKIMycBA9BRIq_O1I4G-O0_OSc7EboRzdNtEn8X2YVknxKcE8dtQORCJ_w1UlHhobU3PDroL-7YkfT2Qsjdjyf6QeY1LcnOJwcH50yTZpoqnhDDNHAM9zUTf3hZxdGMj4/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/AVvXsEgd3rbLUe0CQwSfw0Iyr2Z_nYzGDRnKE7sWEsbCNkoa6jrsyPQPgVT3lA9eYnKXB9V9DzrNe7F4uYxMeWPJLbVwIsVXqf8F6wqLo3fZ2yXczlicUQAWvJgIGIRL-wTBC0wAcny0zHiG4NY/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/AVvXsEjh21UTZ3Ug7dP9_ggzmAWCmpQH_LIBfiMdmU5qKxTczxAFFlo324tpMSI3Rdfry5Ptckakq_khXcNvfsqkTUglzkjAboOZQM5PSFCSsjqhGLsVGfVP-kCzK-Utn7vKJSqjmEHOJbhIkOo/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/AVvXsEiOgqMCi50CqchOLICUcBhDY-ctw-x73srA7cyK91Bg7L91czSYz1XFrPm-VMZfEQO0N-_hJLSVFbFc0dOtO5-0MwagwfwIsW8rPlwYHa0FPfG6KSR9JuBJHIU6Qvg7NzAj86Lg8qCCDL4/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/AVvXsEhiuhfDoe-rk3XIyrmbAI-5IfV0PAW1kxxnbvnFoaKnzAUiOO8rEXj6mYJlTzL57-thgZ9AqhKf40T1MgSAPXyjcvj25enIfsJrkSFZuzziCF1L8DaCFWQtbIrK3GajEU0NsPmqO1TSVSE/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 >>
Yorum Gönder