Blogger icin JQuery ile Son Yazilar Slayt Alani Ekle

Blog Okulu Blogger çin tasralanmış farklı slayt alanlarını (Slider) sizlerle paylaşmaya devam ediyor.Popüler yazılarınızı slayt olarak göstermek için daha önce 3  farklı Popüler Yazılar Slayt alanını ( 1.    2.    3. ) sizlerle paylaşmıştık, yoğun istek üzerine son yazılarınızı da slayt alanı olarak gösteren eklentiyi sizlerle paylaşmaya karar verdik.Son Yazıları Slayt Olarak Görüntüleme eklentisini kurduğunuzda en son yazdığınız yazıdan,

kısa bir not ve bu yazıya ait en baştaki resim, (slayt alanınızda resimler otomatik olarak slayt alanınzın boyutuna uygun hale getirilip) yayınlanacaktır.
Blogger için Otomatik Son Yazılar Slayt Alnını Blogunuza Eklemek için;
1.Adım CSS Kodunu Ekleme:
Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

/* START EasySlider By blogokulu.blogspot.com */
 
#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}
 
#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}
 
.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}
 
.slide-desc h2 {
    display: block;
}
 
.crosscol .widget-content {
    position: relative;
}
 
#slider ul, #slider li,
 
#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#slider2 {
    margin-top: 1em;
}
 
#slider li, #slider2 li {
/*
 
define width and height of list item (slide)
 
entire slider area will adjust according to the parameters provided here
 
*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}
 
#prevBtn, #nextBtn,
 
#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}
 
#nextBtn, #slider1next {
    left: 520px !important;
}
 
#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}
 
#prevBtn a, #nextBtn a,
 
#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
 
#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
 
/* numeric controls */
 
ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}
 
ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}
 
ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}
 
ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}
 
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}
 
/* END EasySlider By blogokulu.blogspot.com */

2.Adım Script Kodlarını Ekliyoruz:
Html kodları içersinde yine Ctrl+F yardımı ile </body> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz </body> kodundan sonraki kısma yapıştırıyoruz.

<!-- Start easy content slider by blogokulu.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by blogokulu.blogspot.com -->

Script kodumuzu ekledikten sonra şablonumuzu kaydedip çıkıyoruz.
3.Adım Gadget Ekleme:
işlemimizin son basamağıda gadget ekleme işlemi.
Kumanda Paneli >Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.

<div id="slider">
<script style="text/javascript" src="http://helperblogger.webs.com/files/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://blogadresiniz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Eklediğimiz Gadget kodu içerisinde:
blogadresiniz yazan yere kendi blog adresinizi yazıyorsunuz.
var numpost_gal=6 değeri görüntülenecek son yazı sayısını,
var numchars_gal=150 değeri yazınızdan slayt alanında görüntülenecek kelime sayısını (Kısa Not) göstermektedir.
Gadgetimizi kaydedip çıkıyoruz.Son olarakta, Blogger Son Yazılar Slayt Alanı için eklediğimiz gadgeti  blog kayıtlarının üzerine sürükleyip bırakıyoruz.Şablonumuzu kaydedip çıkıyoruz.Blogger için JQuery ile yapılmış Son Yazılar Slayt Alanı kullanıma hazır.