Blogger Slideshow (Manşet Atma)

Daha önce blogger sayfanıza manşet atmak için bir slideshow çeşidini burada vermiştim. Şimdi farklı ve daha estetik görünen yeni bir slide show ile karşınızdayım :)) Örnek yapıma buradan bakabilirsiniz.Benimde blogumda manşetim olsun diyorsanız hiç zaman kaybetmeden paragraf başı yapın :)))


1. Lütfen şablonunuzun yedeğini alınız...
2. Yerleşim---->HTML'yi Düzenle--->Widget Şablonlarını Genişlet
3. ]]></b:skin> kodunu bulup hem üst satırına aşağıdaki css kodunu ekliyoruz.
/* s3slider
----------------------------------------------- */
#s3slider {
width: 720px;
height: 300px;
position: relative;
overflow: hidden;
}

#s3sliderContent {
width: 720px;
position: absolute;
top: 0;
padding: 0px;
margin-left: 0;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 15px/20px Arial, Helvetica, sans-serif;
padding: 30px 13px;
width: 720px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
bottom: 0;

}

.clear {
clear: both;
}

4.]]></b:skin> kodunun hemen alt satırına ya da </head> kodunu hemen üst satırına alttaki kodu yapıştırıyoruz.

<script src='http://www.sigmirror.com/files/34677_q058u/jquery.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/34676_swmrs/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 3000 /* geçiş hızı*/

});
});
</script>


5. <div id='content-wrapper'> kodunu aratarak hemen altında bulunan
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

kod parçasında showaddelement='no' kısmını showaddelement='yes' olarak değiştiriyoruz.


6. Slideshow'u blogumuza iki şekilde ekleyebiliriz. Ya yazılarımızın (post bölümünün) hemen üst kısmına yazılarımızın genişliği ile aynı ebatta ekleyebiliriz.

Sidebar kısmını almadan sadece yazılarımızın (post kısmına) üstüne eklemek için şablonumuzda <div id='main-wrapper'> kodunu bulurak hemen altına alttaki kodu yapıştırıyoruz.


<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://hadipaylasblog.blogspot.com/2009/06/yorumlara-yuz-ifadesi-smiley-ekleme.html'><img src='http://img2.pict.com/44/65/9d/d12a63ff67e5cc2d1dd187fa9c/75mPZ/emoticonsthumb.png'/></a>
<span>Yorumlara Yüz İfadesi (smiley) Ekleme</span>
</li>
<li class='s3sliderImage'>
<a href='http://hadipaylasblog.blogspot.com/2009/06/jquery-sekmeli-arayuz-sekmeli-menu-yaps.html'><img src='http://i39.tinypic.com/aew493.png'/></a>
<span>jQuery Sekmeli Arayüz / Sekmeli Menü Yapısı</span>
</li>
<div class='clear s3sliderImage'/>
</ul>
</div>


İkinci olarak yazılarımızın ve sidebarın hemen üstünde sayfamızın genişliği kadar ebatta ekleyebiliriz. Bunun için ise <div id='content-wrapper'> kodunu bularak hemen altına üstteki kodu ekliyoruz.

Burada dikkat etmeniz gereken css kod bölümdeki renkli kısımlarla gösterdiğim yerleri şablonunuza uygun ebatlar ile değiştirmeniz.


Not: Lütfen alıntı yaparken kaynak gösterin.