Blogger Galeri Sayfası Nasıl Oluşturulur

0

Eğer sizde Blogger tabanlı bir web sitesi kullanıyorsanız kodlarlar uğraşmak zorunda kalabilirsiniz. Çünkü blogger tabanlı web sitelerine eklenti kurulmuyor. Bu makalemizde Blogger da yazı içine sayfa galerisi nasıl oluşturulur onu anlatacağım.

1. Adım olarak Blogger Panelinden Tema Sekmesine tıklayarak açılan sayfada HTML’ yi düzenleyin sekmesine tıklayın. Açılan kod bölümünde Crtl+f kombinasyonu ile ]]></b:skin>  bu kodu arayın ve hemen üzerine aşağıdaki kodu yapıştırın.

/* Blogger Zoom Gallery  */
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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */

2. Adım olarak yine tema dosyamızın içerisindeyken </head> kodunu bulup hemen üstüne aşağıdaki kodu eklıyoruz.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

3. Adım olarak ise yeni Sayfa oluşturun ve aşağıdaki kodu galerinin görünmesini istediğiniz yere ekleyin.

<ul class="thumb">
<li><a href="#"><img src="Resim 1 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 2 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 3 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 4 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 5 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 6 Link" alt="" /></a></li>
</ul>

Not : Düzenleyeme başlamadan önce muhakkak temanızın yedeğini alın. Aksi halde oluşabilecek sorunlardan sitemiz sorumlu tutulamaz. Sitede paylaştığımız kod denenmiş ve çalışmaktadır.
Kaynak:bloghocam.blogspot.com

Bir Cevap Yazın