Blogger için Basit Şık Görünümlü Slayt Alanı

Blogger için tasarlanmış kurulumu basit görünümü şık olan bir salyt alanı ile daha karşınızdayız.Genişliğini ve yüksekliğini ayarlayabileceğiniz, slayt geçişi otomatik veya tıklamalı olan  jQuery slayt alanını blogunuzda görselliği ön plana çıkarmak istiyorsanız mutlaka kullanmalısınız.Bu slayt alanını blogunuza uygulamak için.
DEMO GÖRÜNÜM 1-Blogger Hesabımızla Giriş yapıyoruz.
2-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işareetliyoruz.
3-Html kodları içierisnde Ctl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodunun hemen üstüne yapıştırıyoruz.

/* Start Slider Code From http://www.blogokulu.org/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://www.blogokulu.org/ */

4-Html kodları içierisnde yine Ctl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<!-- Start Slider Code From http://www.blogokulu.org/ -->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.blogokulu.org/ -->

Kod içerisinde 940 değeri genişlik 340 değeri yüksekliği belirtir.Bu değerleri değiştirerek slayt alanını kendinize göre boyutlandırabilirsiniz.
5-Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşağıdaki kodu kopyalayıp yapıştırıyoruz.

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="Resim1 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAdLfZ8-66-flKhX1OK7zaUZ1r9MvEBzEVRqLnnQd6A_oSLOpDXbNJqTHK1sgNBgjNwbfqfonxfIktnZb7aNOshn9eg283TsZfLMmDmWtey1_Za0R6RxR3GvruZ5Uu3PTUJ_7fGgMvxeK/s1600/slider-image1.jpg"/></li>

<li><img title="Resim2 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyiRki99Jgt66whhf5vcjfAAlrcvTtzFf4XU2nT1rB28Ev7FhXWpeLSc0CayCOliV5b8K1tTAGtXUIrcPGCy3HnI5UamjsmApSRKSsuEvk05rhLrFBKOEsaLy1-LoYP6TC-Iq4wYRsZ5D/s1600/slider-image2.jpg"/></li>

<li><img title="Resim3 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDYUueygPpr7AHfCwhtgJZdLCTPrPmjz-5NJot0yCgH1bHtYbIZdUWCv3VQqverL4UcBS1LzztGdAwVuK7hAbHjZPzWVSDUKfOlvJLj22jiBOg7eyjk_TOJ9prOmBF-_p33yjyrZasfOp/s1600/slider-image-3.jpg"/></li>

<li><img title="Resim4 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicMUxWYumi1q42guTDzaZj9ckxrP35uJZ0eaUBV4CaR6R_wcBE9Z7ZQJKK-lbcN4M-yW7rv3RPp8IwcGGxHli3nVUsVfCepe_IuTtZHhYXWPPUhcqf_6zh55-6oH3Mi2vcnkHgWwydlC-M/s1600/slider-image4.jpg"/></li>

<li><img title="Resim5 Başlığı Buraya Yazılacak" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_0SLJpEMGVhI3flzH4WElE6QLG5ektQ6GKBlrjDuRuMweLFq8aFe0tDYp_cCgWxCmPHD9grHfQ9MO-2tVRAwC11j6m7dlW0BINccMR6sl-2v-fCztJzoI1Xx-9qt0T6F0__5E-b3xz8l/s1600/slider-image5.jpg"/></li>
</ul>
</div>

Son olarak aşağı resimde gösterdiğim yere yani başlığın hemen altına eklediğimiz gadgeti sürükleyip bırakıyoruz.

Videolu Anlatım: