Blogger Nivo Slider Eklentisi

Merhaba Arkadaşlar bugün sizlere blogger için özelleştirilmiş olan Nivo Slider ( demo olarak sliderin Resmini koydum )eklentisinin kurulumundan bahsetmeye çalışacağım elimden geldiği kadar.umarım faydalı olur peki bu eklenti ile neler yaabilirsiniz , ne işimize yarar bu eklenti dediğinizi duyar gibiyim kısaca bahsedeyim örneğin anasayfanızda paylaştığınız bir makaleniz var ve onu devamlı ziyaretçilerinize anasayfanızda göstermek istiyorsunuz makalenizi ve resimi buraya uygun bir şekilde ekleyip daha çok ilgi çekebilirsiniz veya ziyaretçilerinizi yönlendirmek istediğiniz yerlerin ( sitelerin) bağlantısını buraya uygun bir resim ile ekleyip direkt olarak ziyaretçilerinizi istediğiniz yere yönlendirebilirsiniz eklentiyi kurmak oldukça kolay tek yapmanız gereken aşağıda vereceğim kodları GATGET olarak eklemenidir adımları takip ederek yapabilirsiniz umarım faydalı olur.Eğer yapamayan olursa veya eklenti ile ilgili bişey soracak olan olursa konu altına yorum yaparsa yardımcı olacağım.

1.ADIM: Yeleşim - Gittikten sonra - Gadget ekle diyoruz ve HTML/JavaScript aşağıdaki Kodlarımızı ekliyoruz ve Manşet Haber eklentimizi kurmuş oluyoruz.

 <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/AVvXsEhNfs7Jm-zRksHV6_9utJ4NpjMmmNIjGUFhnH2IhG19trBtbSvg8MS7Vnv0n-FXCgaRKsTCsADzC_EmtKfTFxZQbZQ7qVbsaSFn5H5gAjPjl49v7gX20PPuxWOsJKxjKTiJ8zuSpyAqeRQ/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 src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="RESİM URL ADRESİ"
    alt="Slider Image 1" title="RESİMİN BAŞLIĞI">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4pdjrzH6apAx3oqxLoCKAIGp3D2iCh8eDOs0UEpg8VfRBERwP4s35q4gUtZLJWPKAFT6OFHLFnsyqrjsBYOvPATmdJAkyC4eTB3jWLsWeQ9qA4YyD-XoerRirHNDDk6dF9ecnwfos1k/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5pTBjhT5AhtVeEdFnL1yyjBXvQtLcn_ZmWoOnDq4ofTpQ-1KaN9vf8ShAD8bWXqO9Ne483eXBRiT0N65EtUHuKvV06TN7deCHXWQedoPIIHG0FVPGK_eXU6IIb1OiEt0fb4qsKyK75Kg/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYX9zG0mB6Hn5tgFgeGf5bmTLDFgW__6g_fVYyQ5bcySwdcyW29x514-HibdsSr7W2KKkN_LtxG-yfLx-gvj1OOCnFUeAEq6qAx92QPxatH610YgfBhyj13s1zG4-1XRISU-geOCkEJUY/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH-8BlP0dYi0_p60yCD5QlGN06PoN1u_vlGU7Y26uDQbb0HIc-HfhC_adjDTOFk86_Mvllp94d4aUJalKuxZ3iWkFA0SGZJeI2pazoC9uZFwC9boJ_cJ6S834JBBHil6xUks8FL9idwgg/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>