Slayt Manşet Eklentisi , Nasil Yapilir

Merhaba arkadaşlar bugün size kendi sitemde (www.gokhaninguncesi.com) kullanmış olduğum ve çok beğendim bir eklentinin nasıl kendi sitenize ekyeceğinizi anlatmaya çalışacağım umarım faydalı olur.eğer yapamdığınız veya takıldığınız yerler olursa yorum yaz kısmında konunun altına yorum yaparsanız en gördüğüm zaman hemen cevap vermeye çalışacağım

1.Adım: Şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki script kodlarını ekleyin.

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js' type='text/javascript'/>

    <script type='text/javascript'>
        $(document).ready(function(){
            $(&quot;#featured&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
        });
    </script>

2.Adım: Şablonunuzdan ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki stil kodlarını ekleyin.

    #featured{
    float:left;
    width:900px;
    height:300px;
    padding:0;
    margin-bottom:30px;
    position:relative;
    overflow:hidden;
    border:3px solid #4494c5;
    background:#000;
    }

    #featured ul.ui-tabs-nav{
    position:absolute;
    top:0;
    left:610px;
    list-style:none;
    padding:0;
    margin:0;
    width:300px;
    height:292px;
    overflow:auto;
    overflow-x:hidden;
    z-index:100;


    }

    #featured ul.ui-tabs-nav li{
    padding:0 0 0 15px;
    }

    #featured ul.ui-tabs-nav li img{
    float:left;
    margin:0 5px 0 0;
    background:#fff;
    padding:3px;
    width:70px !important;
    height: 57px !important;
    }

    #featured ul.ui-tabs-nav li span{
    position:relative;
    left:0;
    top:13%;
    line-height:1.3em;
    }

    #featured li.ui-tabs-nav-item a{
    background:#000;
    color:#fff;
    display:block;
    padding:5px;
    height:63px;
    text-decoration:none;
    line-height:1.2em;
    outline:none;
    width: 300px;
    font-family: verdana;

    }

    #featured li.ui-tabs-selected{
    background:url(http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/resultset-previous-icon.png) center left no-repeat;
    z-index:100;
    }

    #featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#4494c5;
    color:#FFF;
    }

    #featured .ui-tabs-panel{
    width:630px;
    height:292px;
    position:relative;
    padding:0;
    margin:0;
    z-index:50;
    }

    #featured .ui-tabs-panel img{
    width:630px !important;
    height:290px !important;
    z-index:50;
    }

    #featured .ui-tabs-panel .info{
    position:absolute;
    padding:5px 20px 5px 20px;
    bottom:0;
    left:0;
    overflow:hidden;
    height:63px;
    width:610px;
    background:#111;
    opacity:0.85;
    filter:alpha(opacity=85);
    .width: 100%; /* IE */
    z-index:50;
    }

    #featured .info h3{
    font-size:18px;
    padding:0;
    margin:0;
    overflow:hidden;
    font-family: Verdana;
    font-style: bold;
    }

    #featured .info p{
    margin:0;
    padding: 5px 20px 5px 0px;
    line-height:1.4em;
    color:#fff;
    }

    #featured .info a, #featured .info a:visited{
    text-decoration:none;
    color:#56c0fd;
    }

    #featured .info a:hover{
    text-decoration:underline;
    }

    #featured .ui-tabs-hide{
    display:none
    }

3.Adım: Blogger’ın kendi şablonlarından birini kullanıyorsanız <div class='columns-inner'> kodunun altına, özel bir tema kullanıyorsanız <div id='content-wrapper'> kodunun altına aşağıdaki HTML kodlarını ekleyin.

<style type="text/css">
#mcis { 
display: none; 
}
#sliderFrame { 
position: relative; 
width: 500px; 
margin: 0 auto; 
        border:5px solid #000; 
}
#ribbon { 
width: 111px; 
height: 111px; 
position: absolute; 
top: -4px; 
left: -4px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYm2lJqzmSvRhRx7fLe5sewsc07h-QFHDFveG-qJ0bis2YfJCbomxntaYi4T7MyuaQasWKiV-6aTB0zOhNFh9m23bPaZdTXaCNeBLgxlf7zGeAYHfXTIISnZdkgujWfkSLYoLUleASYhs/s109/ribbon-ozellikli.png) no-repeat; 
z-index: 7; 
}
#slider { 
width: 500px; 
height: 218px; 
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9LjE6yhly_UXrC5BSYc1TtpiLcpKk94cfpp9xGjVUDGsk6W3n3GLgyofGjBFSHdrLRfNzbYfb5HTOgSCAZRaNBQorUCVkiYOKK5LD8aBZfzg2PVoxXU9_R_56sGRJ2sfo95ZpM-um5F4/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; 
position: relative; 
margin: 0 auto; 
box-shadow: 0px 1px 5px #999999; 
}
#slider img { 
position: absolute; 
border: none; 
display: none; 
}
#slider a.imgLink { 
z-index: 2; 
display: none; 
position: absolute; 
top: 0px; 
left: 0px; 
border: 0; 
padding: 0; 
margin: 0; 
width: 100%; 
height: 100%; 
}
div.mc-caption-bg, div.mc-caption-bg2 { 
position: absolute; 
width: 100%; 
height: auto; 
padding: 0; 
left: 0px; 
bottom: 0px; 
z-index: 3; 
overflow: hidden; 
font-size: 0; 
}
div.mc-caption-bg { 
background-color: black; 
}
div.mc-caption { 
font: bold 14px/20px Arial; 
color: #EEE; 
z-index: 4; 
padding: 10px 0; 
text-align: center; 
}
div.mc-caption a { 
color: #FB0; 
}
div.mc-caption a:hover { 
color: #DA0; 
}
div.navBulletsWrapper { 
top: 250px; 
left: 190px; 
width: 150px; 
background: none; 
padding-left: 20px; 
position: relative; 
z-index: 5; 
cursor: pointer; 
}
div.navBulletsWrapper div { 
width: 11px; 
height: 11px; 
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglspebUKy7Fck_oLOH8xjsL9h9Fw4weOdasGPEA-2IrVAHIARqCw0oCr2mj_42pvRzb5dAJcT8FDrFBjKJoNa8nVpoB3-uGBX3ElxbFlWsQt9QcgZPu0z19xF_cx7nKhvtjg38WesbcOc/s22/bullet.png) no-repeat 0 0; 
float: left; 
overflow: hidden; 
vertical-align: middle; 
cursor: pointer; 
margin-right: 11px; 
_position: relative; 
}
div.navBulletsWrapper div.active { 
background-position: 0 -11px; 
}
#slider { 
transform: translate3d(0,0,0); 
-ms-transform: translate3d(0,0,0); 
-moz-transform: translate3d(0,0,0); 
-o-transform: translate3d(0,0,0); 
-webkit-transform: translate3d(0,0,0); 
} 
</style> 
<script src="https://dl.dropbox.com/u/60346665/bloghocam-slayt.js" type="text/javascript"></script>
<div id="sliderFrame"> 
     
            <div id="slider">
<a href="http://gokhaninguncesi.blogspot.com/p/arsiv_20.html"><img src="http://img545.imageshack.us/img545/2964/arsiv.jpg" alt=""/></a>
<a href="http://gokhaninguncesi.blogspot.com/p/ataturk-hakknda-bilgiler.html"><img src="http://img109.imageshack.us/img109/3576/atatrkksesi.jpg" alt=""/></a>
<a href="http://gokhaninguncesi.blogspot.com/p/iletisim.html"><img src="http://img440.imageshack.us/img440/8713/iletisimk.jpg" alt=""/></a>
<a href=" http://www.facebook.com/gokhaninguncesi "><img src="http://img210.imageshack.us/img210/453/facebooksayfamiz.jpg" alt=""/></a>

                </div></div>

Arkadaşlar Düzenlemeniz gereken yerler de benim kendi sitemde kullandığım resimler var onları kendinize göre düzenleyin mansetteki şuanda olan resim linkleri şunlar:

ARŞİV RESMSİ :

http://img545.imageshack.us/img545/2964/arsiv.jpg

ATATÜRK HAKKINDAKİ BİLGİLER RESMİ

http://img109.imageshack.us/img109/3576/atatrkksesi.jpg

İLETİŞİM RESMİ

http://img440.imageshack.us/img440/8713/iletisimk.jpg

FACEBOOK SAYFAMIZ RESMİ

http://img210.imageshack.us/img210/453/facebooksayfamiz.jpg