Blogunuzdaki resimleri müthiş bir resim-galerisi ile sergilemek isterseniz bu yazıyı mutlaka okumalısınız.Sadece
2 adımda herkesin rahatlıkla bloguna ekleyebileceği
JQuery/Javascript ile hazırlanmış, çok cazip olan eklentiyi blogunuza
widget olarak ekleyip, görünmesini istediğiniz yerde sergileyebilirsiniz.Galeriden biraz bahsedecek olursak,Üzerine geldiğiniz resim animasyonlu olarak,göze hoş gelecek bir hareketle zoomlanarak büyüyecek ve resme tıkladığınızda ziyaretçiyi resim için vermiş olduğunuz linke yönlendirecek. Sözü fazla uzatmadan blogunuza resim galerisi eklemeyi 1. adımla anlatmaya başlıyalım.
DEMO GÖRÜNÜM İÇİN TIKLAYIN.
1.Adım:Galeri Kodunu Şablonunuza Ekleme
Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz.Widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içerisinde
]]></b:skin> kodunu
Ctrl+F yardımıyla aratıp buluyoruz.
Aşşağıdaki kodu bulduğumuz kodun hemen üst satırına yapıştırıyoruz.
/* Blogger Zoom Gallery By Blogokulu.blogspot.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHtO0h_eRCNeWQ6ip2IT08ngMHewcrGrGW48mtyCG58_VWD0h_nNeXuVkRardHrGQEXPqiatzDhE7ARW88K9E0Qr43q8eZAasR0U6wEPio40RjhAHurgKq0RBV8nWy4xvRkjFq3izxOig/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
Yine kodlar içerisinde
</head> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz
</head> kodundan önceki kısma, yani bir üst satırına yapıştırıyoruz.
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
Ardından şablonumuzu kaydedip
2.adıma geçiyoruz.
2.Adım: Resim Galerisini Gadget Olarak Ekleyeceğiz:
1.Adımdaki şablonumuza kod yerleştirme işlemini yaptıktan sonra;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine kaydediyoruz.
<ul class="thumb">
<li><a href="URL-1"><img src="1.Resim Linkiniz" alt="" /></a></li>
<li><a href="URL-2"><img src="2.Resim Linkiniz" alt="" /></a></li>
<li><a href="URL-3"><img src="3.Resim Linkiniz" alt="" /></a></li>
<li><a href="URL-4"><img src="4.Resim Linkiniz" alt="" /></a></li>
</ul>
Kod içerisinde
Resim Linkiniz: yazdığımız yere görünmesini istediğiniz resmin
URL adresini
"URL-1" Yerine resme tıklandığında açılmasını istediğiniz adresi yazıyorsunuz.
Eğer
galeriye daha fazla resim eklemek isterseniz aşşağıdaki kodu tekrarlamanız yeterli olacaktır.
<li><a href="URL"><img src="Resim Linkiniz" alt="" /></a></li>
