Blogger için otomatik olarak çalışan slider (slayt) eklentisi

ads

ads

     Blogger kullanıcıları için  sahane bir eklenti   kendiminde kullandığı bu eklenti websitenize ayrı guzel bir gorunumun yanında manset slayt seklinde içeriklerinizi  resimlerinizi yayınlayabileceksiniz bu manset eklentisi otomatik çalısmaktadır en guzel yanıda  kesinlikle  budur  siz oklara basmasanızda kendi oto slayt gorevini yerine getirmekte bir cok kisinin  bu  eklentiyi aradıgını dusunerek tanıtmak istedim


    Simdi gelelim kurulumuna

ilk basta  Tasarım > Sayfa Ögeleri > HTML’yi Düzenle kısmına giriş yapıyoruz.

Hemen ardından </head> Kodunu buluyorsunuz bulamayanlar soyle arasınlar ctrl + f basarak kutucuga bu kodu yazıp aratın

Asağıdaki kodu yukarıdaki kodun hemen bir ustune gelicek sekilde ekleyelim

<script src='http://teknobeyin.googlecode.com/files/auto-slider.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Ve daha sonra  asağıdaki kodu arayarak bulalım

]]></b:skin>

Asağıdaki koduda bir onceki kod  gibi hemen bir oncesine gelicek vaziyette ekleyiniz

#myslides{
background-color: #f5f5f5;
border:2px solid #ddd;
width: 650px;
height:165px;margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#f7f7f7;
height:120px;
border:1px solid #cccccc;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#f9f9f9; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
border:1px solid #ddd;
}

Ve  tekrar </head> kodunu buluyoruz

Asagıdaki kodu  hemen oncesine ekliyoruz ( altına değil  ustune ekliyoruz )

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://www.yukleresim.com/dm-OAXA.jpg&#39;, -48, 0], rightnav: [&#39;http://www.yukleresim.com/dm-FEX1.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

Eklentiyi kullanmak için ise; Tasarım > Sayfa Ögeleri > Gadget Ekle > HTML/JavaScript Ekle kısmına aşağıdaki kodları ekliyoruz;

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div>
<!-- 2nd Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a>
</div>
<!-- end code of 2nd -->
<!-- 3rd Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a>
</div >
<!-- end code of 3rd -->
<!-- 4th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div><!-- end code of 4th -->
<!-- 5th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a>
</div><!-- end code of 5th -->
<!-- 6th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/> </a>
</div><!-- end code of 6th -->
<!-- 7th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div>
<!-- end code of 7th -->
<!-- 8th Template -->
<div class="panel">
<a href="link" target="blank" title="resimbasligi">
<img width="160" alt="resimaciklamasi" src="resim" height="110"/>
</a></div>
<!-- end code of 8th -->
</div>
</div>
</div>

Not: Yukarıdaki kırmızı renkli yazıları kendi ayarlarınıza gore değistiriniz

Her sey yolunda giderse  websitenizde su sekilde gozukecektir Resimler ornektir

 

HOSCAKALIN

     

ads