6 Yorum Blogger Nivo Slider Kodu

Merhaba arkadaşlar dün yeni bir konu paylaşamadım fakat telafisini edeceğim.Hiç o konuda şüpheniz olmasın bu konumuzda nivo slideri paylaşacağım.Bu slider hakkatten kolay kullanıma ve kolay yüklenime sahip bir slider.Size vereceğim kodu sitenize ekledinizmi bu iş biter.

Yapmanız Gerekenler

1. İlk olarak resimleri toplayın ve aynı boyutta(650x350px) düzenleyin.
2. Ve sonra hizliresim.com kullanarak resimleri upload edip url linklerini alın.
3. Yerleşim > Gadget ekle > Html ve Javascript > Size verdiğimiz kodu kopyalayın ve
4. Blog kayıtları gadgetinin üstüne yeni açtığınız gadgeti sürükleyin.

Kod

<!-- http://www.zamaneblog.org/ -->
<!-- Kod Paylasim Merkezi -->
<div id="slider" class="nivoSlider">
 <img src="http://i.hizliresim.com/ml79X1.jpg" alt="Blogger 2014 Son Yazılar Eklentisi" title="Blogger 2014 Son Yazılar Eklentisi"> <img src="http://i.hizliresim.com/El61O8.jpg" alt="Blogger Müzik/Radyo Teması" title="Blogger Müzik/Radyo Teması"> <img src="http://i.hizliresim.com/jJ17qn.jpg" alt="Ne Yazacağımı Bilemiyorum ?" title="Ne Yazacağımı Bilemiyorum ?"> <img src="http://i.hizliresim.com/27N0Oj.jpg" alt="Üzerine Gelince Aşağı Kayan Resim" title="Üzerine Gelince Aşağı Kayan Resim"> <img src="http://i.hizliresim.com/BX6BOv.jpg" alt="Camtasia Studio 8.3 Full İndir+Key" title="Camtasia Studio 8.3 Full İndir+Key"> </div>
<style> #slider { position:absolute !important; top:50%; left:50%; width:650px; height:350px; margin-top:-175px; margin-left:-325px; -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2); box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2); } .nivoSlider img { position:absolute; top:0; left:0; display:none; } .nivoSlider a { border:0; display:block; } .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } .nivo-caption { position:absolute; left:75px; bottom:29px; width:498px; padding-top:13px; padding-bottom:13px; z-index:8; border:1px solid #000; border-left-color:rgba(0,0,0,.5); border-right-color:rgba(0,0,0,.5); -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7); -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7); box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7); background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 ); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .nivo-caption p { margin:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; color:#fff; text-align:center; text-shadow:0px -1px 0px #000; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } .nivo-directionNav a { position:absolute; bottom:30px; z-index:9; cursor:pointer; text-indent:-9999px; width:45px; height:39px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7FjkH5LN0A0QAGoWIv-WY6CnWkclb_0WI5oGQ18hWrYItjBOr8gZ98co3rCI_q_jIHkZOYA0xMyONvv9xzr5I4Wk-_2jMVQcqNGepmt0NI9T3JJJn_Bo38WkxyXlDD2PwYbdWeJANOk/s1600/helperblogger.com-arrows.png); background-repeat:no-repeat; } .nivo-prevNav { left:75px; background-position:0 0; box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4); } .nivo-nextNav { right:77px; background-position:-45px 0px; box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script Language='Javascript'>
<!--
document.write(unescape('%3C%73%63%72%69%70%74%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%63%6F%64%65%2E%68%65%6C%70%65%72%62%6C%6F%67%67%65%72%2E%63%6F%6D%2F%6A%71%75%65%72%79%2E%6E%69%76%6F%2E%73%6C%69%64%65%72%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%20%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3E%20%24%28%77%69%6E%64%6F%77%29%2E%6C%6F%61%64%28%66%75%6E%63%74%69%6F%6E%20%28%29%20%7B%20%24%28%27%2E%6E%69%76%6F%53%6C%69%64%65%72%27%29%2E%6E%69%76%6F%53%6C%69%64%65%72%28%7B%20%65%66%66%65%63%74%3A%20%27%73%6C%69%63%65%44%6F%77%6E%27%2C%20%64%69%72%65%63%74%69%6F%6E%4E%61%76%48%69%64%65%3A%20%66%61%6C%73%65%2C%20%63%61%70%74%69%6F%6E%4F%70%61%63%69%74%79%3A%20%31%2C%20%63%6F%6E%74%72%6F%6C%4E%61%76%3A%20%66%61%6C%73%65%20%7D%29%3B%20%7D%29%3B%20%3C%2F%73%63%72%69%70%74%3E%20%0A%0A%3C%64%69%76%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%7A%61%6D%61%6E%65%62%6C%6F%67%2E%6F%72%67%2F%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%78%2D%73%6D%61%6C%6C%3B%22%3E%53%69%74%65%6E%65%20%45%6B%6C%65%3C%2F%73%70%61%6E%3E%3C%2F%61%3E%3C%2F%64%69%76%3E%0A'));
//-->
</Script>
<!-- Kod Paylasim Merkezi -->
<!-- http://www.zamaneblog.org/ -->

Önizleme

Önizleme İçin Tıklayınız

Özelleştirme

• Slidere daha fazla resim eklemek için kod

<img src="http://i.hizliresim.com/27N0Oj.jpg" alt="Üzerine Gelince Aşağı Kayan Resim" title="Üzerine Gelince Aşağı Kayan Resim">

Kod İçerisindeki Şifrelenmiş Kısmı Kesinlikle Silmeyiniz #Aksi Taktirde Eklenti Çalışmaz.