Blogger için Özelleştirilmiş Nivo Slider

Uzun bir aradan sonra tekrar sizler ile birlikteyiz.. Bugun sizlere Blogger için Özelleştirilmiş Nivo Slider eklentimizin kurulumunu anlatıcaz.. Eklentimizin Demo'su yukarıdaki resimde göründüğü gibidir.. Kurulumu çok basit olan bu eklentimiz işinize çok yarıyacaktır.. Önemli paylaşımları eski paylaşımları öne çıkarıp ziyaretçilerinizin ilgisini çektirebilirsiniz.. Tek yapmanız gereken Gadget Olarak eklemek..

1. Adım HTML Kodlarını Blogger'a ekleyin

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/AVvXsEjN0fvIuoWi68jZ19E1uLMuBMhMJ3WAIHZXLy5cIeSU1n5XFGVUeg5gBDI2O_hDZ6t8M7kTx9sv7LLO3jCVksvd9E3L3uTRSrs2pC3t7gEpo2kNRFP9FoZCMJMyoC7Hm2qRWcuPLrbazRY/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/AVvXsEhxcxB5Zce7y70zrLInA4MJh5-qBsVwC_dlx_GxmuVtgwP8Wr_II3BdkPcvygtHDogExmjSgz9NaiIVCS8ZUDo6vyFc5tvSpJ32tlQ0t1c8Scl_EYnzftRTn57GeVwbW7q3Ai0z7QtsbIE/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUERFO1kjc0RfNeSfixhstNYOEVUTeGl2QNh4JQdBuVzYj9TFQZ6F9IALYc0Ej7C-PNRKYDxkTIowCQ8grBega3WyKPKvQB-v1yFvymjjZAEql4uJqFpRIA5GS2JJzKRIFhk5_FrbE94c/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX7vvrLIyYTIWtBLnCZ4EptzIgruxEayq8df0IsdNhbKGir0FddHCMtGM2BAEHj7Cz_jNbYhIcYrPzH_bmUY0M1AyuSCMQ54BGN0LWbHkHM6zvkQj4YBVarTlH4JFLW_pl90KHb93JjpA/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUgXcw4DHamI7VBkB3uMt6D7mK4PHjAFRoTea3f9xvFir2kjxWUWt1EG-BQmqAsg2FHh9V85-j9AX709U-M2GJfv-op7zASN03r-6ljd7LlatFGRThl4mJLTLZGo3LwphtaPp5WKg_daI/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>

Not : Renklendirmiş olduğumuz kısımları kendinize göre düzenleyiniz.

Alıntıdır:http://bloggereklentileri.blogspot.com