7 Adımda Otomatik Slider Yapımı

Blogger otomatik duyarlı slayt kutusu yapımı. Bloğunuza gadget olarak ekleyebileceğiniz bir slayt alanı oluşturmak için bu yazımı okuyun.

Gadget olarak istediğiniz yere ekleyebilirsiniz. 

Paylaşacağım bu slayt eklentisi duyarlıdır, yani gadget olarak eklediğiniz yerin boyutuna göre otomatikman küçülür veya büyür. Aynı şekilde değişik ekran boyutlarına göre şekil alması anlamına gelir. 

Slaytlar arası geçişlerde değişik efektler var ki bu şık olmasında bir etken.

Bu slideri bloğunuzda vitrin olarak kullanabilirsiniz yani böyle de düşünebiliriz zaten çok şık bir yapısı var. 

Slayt alanında son yazılarınız otomatik gösterilir. Kaç yazınızın görüneceğini siz ayarlayabilirsiniz. 
Blog başlığınızın altında güzel duracağını düşündüğüm bu slayt alanının nasıl yapıldığına geçelim isterseniz. Yapımı çok basit bakmayın kodların uzun olmasına. Kopyala yapıştır yapacaksınız yani :)

DEMO
Buraya Tıkla

Blogger Otomatik Slayt Alanı Nasıl Yapılır?

1. Blogger giriş.

2. Şablon

3. HTML'yi Düzenle

4. Kodlar üzerinde bir yere tıklayın CTRL F tuşlarına basarak arama kutusunu açın ve ]]></b:skin> kodunu bulun.

4. Bu kodun üst satırına aşağıdaki kodları yapıştırın.

/* Blog Bakkalı Slayt Alanı */
#skitterslideshow{padding:4px;border:1px solid #DDD;box-shadow:0 1px 5px rgba(0,0,0,.15)}
#slider-wrapper-indzign{padding:0;background-color:#FDFDFD;box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:3px;height:250px;position:relative;z-index:8888}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{background-color:#fbfbfb;transition:background-color linear .3s}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden;position:relative;width:100%;height:100%}
.box_skitter .image{overflow:hidden;max-width:100%;max-height:100%}
.box_skitter .image img{display:none;width:100%;height:100%}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute;top:0;width:620px;height:310px;max-width:630px;left:0;z-index:19}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:padding:5px 0 5px 5px;border-radius:5px;opacity:0.75}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.box_skitter .info_slide_thumb{border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00;float:left;margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:#FFF no-repeat left top;width:32px;height:32px}
.label_skitter{z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.9;background:#000}
.label_skitter p{padding:5px;margin:0}
.box_skitter .progressbar{background:#000;position:absolute;bottom:5px;left:10px;height:5px;width:940px;z-index:99;border-radius:20px}
.preview_slide{display:none;position:absolute;z-index:999;bottom:40px;left:-40px;width:100px;height:50px;border:3px solid #FFF;background:rgba(0,0,0,.5);box-shadow:rgba(0,0,0,0.7) 0 0 10px;overflow:hidden}
.preview_slide ul{width:100px;height:50px;padding:0;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0}
.preview_slide ul li{width:100px;height:55px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block}
.preview_slide ul li img{position:absolute;top:0;left:0;height:55px;width:100px}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxsuCnonVEaCTFG_Ry_ql2ME6DQfQiZc8lS9qXRz2l2TN4GRFf07S8tE7Rj-7PSUma487wR4ljC9UMQ_r_dc4h97iLQNcxzNmGfPSQu-c7f8MBgKGJeO9euEI6dWXyqWA2UAVE5JIM9UY/s1600/skitterloading.gif);background-position:center center;background-repeat:no-repeat}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{border:1px solid #FFF;box-shadow:0 1px 3px rgba(0,0,0,0.3);border-radius:0}
.box_skitter_home.indzign-theme .info_slide{}
.box_skitter_home.indzign-theme .info_slide_dots{bottom:-16px;width:110px;left:50%!important;margin-left:-65px;height:30px;padding:0 8px;z-index:99}
.box_skitter_home.indzign-theme .info_slide_dots span{transition:background linear .3s;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XEKRM2Ca7W6O1eEC5dc5FLphx4yU5wTITXlZLJsFIa4a84XKNL9SWc-dIWdq07ficMxFhnh4ewNvqaaqBJoCpr-Lq6AQ-75sXoozR-oA0WIeqW-U8KfYmS6vXMr-it00fIMqogO9xMjS/s1600/light-overlay.png);background-repeat:repeat-x;background-position:left -13px;background-color:#d1d1d1;color:#777;border-radius:50%;border-bottom:1px solid #FFF;display:block;width:10px;height:10px;text-indent:-9999px;float:left;margin:10px 6px 0 6px}
.box_skitter_home.indzign-theme .info_slide_dots span:hover{background-color:#666}
.box_skitter_home.indzign-theme .info_slide_dots span.image_number_select{background-color:#5ebc00;border:none;width:14px;height:14px;margin:8px 3px 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button{display:block;width:75px;height:22px;line-height:30px;text-decoration:none;font-size:10px;text-transform:uppercase;transition:none;text-indent:0;bottom:-12px;top:auto;color:#777;z-index:98;cursor:pointer}
.box_skitter_home.indzign-theme .prev_button:hover,.box_skitter_home.indzign-theme .next_button:hover,.box_skitter_home.indzign-theme .prev_button:active,.box_skitter_home.indzign-theme .next_button:active{opacity:1!important}
.box_skitter_home.indzign-theme .next_button{right:28.5%;padding-right:5px;text-align:right;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .next_button span{padding-right:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmOM7kG6fiMINWchMQ7aZf_Q710xwxBVswtG3GBRf96kCSV1Z-917hjeYpU12dAVYDQhA055K_POQ2U4tGd8CHIJ3KPh2FgBZDG-GVSMwoKv-2r7ARCpYvA2Eej8uH5qSWO0fsbG8G0GA/s1600/nav-next.png) no-repeat left top;background-position:right center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .prev_button{left:28.5%;padding-left:5px;text-align:left;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .prev_button span{padding-left:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlERFUO8fBqxKO1GLfGthrhzrvll15mVt83nMm9ssbfuzgqqP6kZPgnZ72H3aYEwfNPLWi4i9MVHGQSog9I8eD1TC-fISLv9TDtikuKYXoNg9y6lflvYdcyLI5uW7dpiN10BiLSlf-bwWf/s1600/nav-prev.png) no-repeat left top;background-position:left center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .label_skitter{background:#49afcd;width:90%;padding:5px 8px 5px;left:50%;margin-left:-45%;bottom:10%;text-align:left;height:auto;border-right:2px solid #fff;border-left:2px solid #fff;color:#fff;font-size:12px}
.box_skitter_home.indzign-theme .label_skitter p{padding:0;margin:0;text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.indzign-theme .label_skitter h4{margin:0;font-size:135%;text-shadow:0 1px 0 rgba(0,0,0,.3);color:white;padding:0 0 10px}
.box_skitter_home.indzign-theme .label_skitter a{color:#fff;text-decoration:none}
.box_skitter_home.indzign-theme .label_skitter a:hover{color:#eee}
.box_skitter_home.indzign-theme .info_slide_thumb{background-color:#fff}
.box_skitter.indzign-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,.box_skitter .container_skitter .cm{font-size:100%}
.box_skitter .container_skitter .date span{margin-right:3px}
@media only screen and (max-width:960px){.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media only screen and (max-width:768px){#slider-wrapper-indzign{height:220px}.box_skitter .box_clone img{width:422px;height:220px}.box_skitter_home.indzign-theme .next_button{right:19.5%}.box_skitter_home.indzign-theme .prev_button{left:19.5%}}
@media only screen and (max-width:640px){.box_skitter_home.indzign-theme .next_button{right:26.5%}.box_skitter_home.indzign-theme .prev_button{left:26.5%}}
@media only screen and (max-width:480px){#slider-wrapper-indzign{height:200px}.box_skitter .box_clone img{width:280px;height:220px}.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media screen and (max-width:320px){.box_skitter_home.indzign-theme .label_skitter p{display:none}.box_skitter_home.indzign-theme .next_button{right:5.5%}.box_skitter_home.indzign-theme .prev_button{left:5.5%}}

5. Şimdi </body> kodunu bulun, üst satırına aşağıdaki kodları yapıştırın. 

<script src="http://yourjavascript.com/815401201522/vitrin.js" type="text/javascript"/>

6. Şablonu kaydedin.
7. Şimdi Yerleşim/Gadget Ekle/HTML Jawascript Ekle yolunu takip ederek aşağıdaki kodları ekleyin ve kaydedin. 

Slayt alanınızın nerede görünmesini istiyorsanız gadget i o kutucuğa doğru sürüleyip Düzenlemeyi Kaydet diyebilirsiniz.

<div id='skitterslideshow'></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'http://blogbakkali.blogspot.com.tr/',
        MaxPost: 5,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "Yorum",
        NoCmtext: "Yorum Yok",
        pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7dW5904l-10wfimFNh_FvbISxfIh788WNueyQac9KbXxcBqZM2HQQOnhltZ2V0hPVJ7vqUPzDVZsxYe60Zxd3OOkIFyML19aZqzo-wrwTDyLsTbLSLEEdwMwFStXD1S0BA2cO6fH2Qjs/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>

Kırmızıyla boyadığım yere kendi blog adresinizi veya hangi blogtan yayın göstermek istiyorsanız onun adresini yazın.5 gösterilen slayt yazı sayısı siz istediğinizle değiştirin.

8. Eveet blogger otomatik slayt alanımız hazır. İyi günlerde kullanın. Yorumunuzla güzellik katın veya sormak istediğiniz yerleri sorun. İyi bloglamalar :D

Paylaş Facebook

Paylaş Twitter

Paylaş Google+

Paylaş LinkedIn