Bloggeriniza Jquery Ile Slider Manseti Ekleyin

slider for blogger
Featured Content Slider for Blogger Using jQuery

Blogger sadece başlangıç webmasterları için bir platform değildir. Blogger’da profesyoneller için bir kullanım merkezi olabilir. Bir blogunuz var ve sizde bir manşet eklentisi istiyorsunuz. O zaman yapmanız gereken bu yazıyı sonuna kadar okumak ve gerekli kodları, gerekli yerlere yerleştirmek. Neyse fazla uzatmadan yazımıza geçebiliriz.

Adım 1: <head> bu kodu bulun. Bu kodu bulduktan sonra aşağıdaki kodu hemen <head> kodunun altına yapışıtırın.

<link href='http://sites.google.com/site/bloggermintcom/style1.css' rel='stylesheet' type='text/css'/>
Adım 2:   Yandaki kodu bulunuz :     ]></b:skin> 

Aşağıdaki kodu ]></b:skin>  bu koddan önce yapıştırınız.
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('https://i47.tinypic.com/6jojr4.jpg') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('https://2.bp.blogspot.com/_ubwIhqPcR6M/TNv3EFphS6I/AAAAAAAABHE/iZ0jSrh-E_c/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
3.adım: Yandaki kodu bulunuz : <div id=’content-wrapper’> Bu kodu bulduktan sonra hemen aşağıdaki kodu bu koddan önce yapıştırın
<div id='featured'>
     <ul class='ui-tabs-nav'>
         <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='https://i49.tinypic.com/e1aohv.jpg'/><span>Yazınızın Başlığı</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='https://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>Yazınızın Başlığı</span></a></li>
         <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='https://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>Yazınızın Başlığı</span></a></li>
        <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='https://i50.tinypic.com/34xfg4m.jpg'/><span>Yazınızın Başlığı</span></a></li>
     </ul>
     <!-- First Content -->
     <div class='ui-tabs-panel' id='fragment-1' style=''>
        <img alt='mac' src='https://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
         <h3><a href='#'Yazınızın Başlığı</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek..<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
         </div>
     </div>
     <!-- Second Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
         <img alt='' src='https://i50.tinypic.com/33kprh5.jpg'/>
         <div class='info'>
         <h3><a href='#'>Yazınız ile ilgili tanım buraya gelecek.</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek....<a href='#'>Devamını oku</a></p>
        </div>
    </div>
     <!-- Third Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
         <img alt='' src='https://i47.tinypic.com/2191lqt.jpg'/>
         <div class='info'>
         <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek....<a href='#'>devamı</a></p>
         </div>
     </div>
     <!-- Fourth Content -->
     <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
         <img alt='' src='https://i48.tinypic.com/10pwp3o.jpg'/>
         <div class='info'>
         <h3><a href='#'>Yazınızın Başlığı</a></h3>
         <p>Yazınız ile ilgili tanım buraya gelecek....<a href='#'>devamı</a></p>
         </div>
     </div>  </div>

Resim Url’sini kendi Url’niz işe düzenleyin. En büyük resim boyutu : 400 * 250 En küçük resim boyutu : 80 * 50. Resimlerinizi belirli düzeylere göre ayarlamalısınız ki yukarıdaki ölçülere göre resimleriniz bozulmasın.
Adım 4: Şimdi slayt şovu başlatmak için yandaki kodun hemen altına aşağıdaki kodları yapıştırıyoruz.   <head>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
$(&quot;#featured&quot;).hover(
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,0,true);
},
function() {
$(&quot;#featured&quot;).tabs(&quot;rotate&quot;,5000,true);
}
);
});
</script>
Adım 5:Eğer blogunuza daha önceden  jQuery and jQuery UI kodları eklediyseniz bu kısmı atlayayabilirsiniz. Eğer daha önceden bu kodları eklemediyseniz. Yani jQuery’den bahsediyorum.  Bu koddan hemen sonra  aşağıdaki kodları ekleyiniz. <head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
Sizde bu kodların demosunu izlemek istiyorsanız buyrun Demo