Blogger Animasyonlu Slayt Alanı (Nivo Slider)

Bloglardaki slayt alanlarının, yada türk bloggerler arasında blogger manşet alanı olarak adlandırılan geçişleri farklı animasyonlarla süslenmiş blogger nivo slider olarak bilinen müthiş bir blogger slayt alanı yada blogger manşet alanı eklentisi ile karşınızdayız.Blogger nivo slider slayt alanını blogunuza ekleme işlemi oldukça basit.Üstellik emsallerine göre yani bu kadar kaliteli olan slayt alanlarına göre ilk etapta açılış hızı da oldukça iyi.

Yani blogunuzun açılış hızını pek te etkilemeyen ve blogger slayt alanları içerisinde benimde en çok beğendiğim blogger slayt alanı eklentisi olan blogger nivo slider i blogunuza eklemek için:
DEMO GÖRÜNÜM 1-Blogger hesabımızla giriş yapıyoruz.Her ihtimale karşı blogger şablonumuzu yedeğini alıyoruz.
2-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
3-Html kodları içerisinde Ctrl+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.

<!-- blogger nivo slider www.oyun04.com araba oyunlari code start-->
<style type="text/css">
/* <![CDATA[ */
    #blogokuluSlideContainer           {position: relative;display: block;}
    #blogokuluNivoSlider               {position:relative;width:600px  !important;height:300px  !important;min-height:225px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnT1PECCci_pimXmHSpwiylh4-LNYoBKXKG0HQNQ6in2wggaFm7x7GUyHmQw0svlt59sPmiD_fyp2GUZwSWenEXgteMPcofGIx8KKXgKEpDm1_Dq4lVuWF12nuqwclgacSSxFC89xGzndh/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
    #blogokuluNivoSlider img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunzq0ma3IJ7vXlZX3_DHL3KdZ8WKqwt6nhtpOxiAwPKLvOtwMJDHlFO8WlqIdH9FLlozDKacaAbR-Pn1nq9ef26la2xr35mwRnN_zNP_ESKqvC-pHQOX6VglMeeGelorRT3meKtxbQRYo/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
    .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4dFpb3mfXOPlsDkbMZoP8nTnLMy8gldAgx7z8et4gZZkYGAjWhnLRZP-YA4KQKxaR9JNOrJChj2vzDfHpmYyI_183mhy4evIXU1HwV682NA-DQmE9d5JMqkkwnJZGC0w9txFVQeLZvia/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#blogokuluNivoSlider').nivoSlider({
        effect           : 'random',
        slices           : 15,
        boxCols          : 8,
        boxRows          : 4,
        animSpeed        : 500,
        pauseTime        : 3000,
        startSlide       : 0,
        directionNav     : true,
        directionNavHide : true,
        controlNav       : true,
        keyboardNav      : false,
        pauseOnHover     : true,
        captionOpacity   : 0.8
    });
});
/* ]]> */
</script>
<!-- blogger nivo slider www.oyun04.com araba oyunlari code end-->

bu kod içerinde: renkli olarakta belirttiğimiz. 
width:600px blogger slayt alanı genişlik değeri

height:300px blogger slayt alanı genişlik değeri
        animSpeed    : 500, slayt geçiş hızı
        pauseTime    : 3000, bir resmin slaytta bekleme süresi
        startSlide      : 0, hangi slayttan başlayacağını seçiyoruz.
daha sonra şablonumuzu kaydedip çıkıyoruz.
4-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip aşağıdaki kodu kopyalayıp açılan gadget içerisine yapıştırıyoruz.

<div id="blogokuluSlideContainer">
    <div id="blogokuluNivoSlider">
<a href="URL ADRESİ-1"><img src="RESİM URL ADRESİ-1" title="RESİM AÇIKLAMA SATIRI-1" alt=""/></a>
<a href="URL ADRESİ-2"><img src="RESİM URL ADRESİ-2" title="RESİM AÇIKLAMA SATIRI-2" alt=""/></a>
<a href="URL ADRESİ-3"><img src="RESİM URL ADRESİ-3" title="RESİM AÇIKLAMA SATIRI-3" alt=""/></a>
<a href="URL ADRESİ-4"><img src="RESİM URL ADRESİ-4" title="RESİM AÇIKLAMA SATIRI-3" alt=""/></a>      
    </div>
</div>

kod içerisinde:
URL ADRESİ-1:Yerine blogger salyt alanındaki resme tıklayınca yönlendirmek istediğimizadresin URL sini yazıyoruz.
RESİM URL ADRESİ-1:Slayt alanında görüntülemek istediğimiz resmin URL adresini yazıyoruz. 
RESİM AÇIKLAMA SATIRI-1:Blogger Slayt alanı altında görünen açıklama satırı.Bu kısma reklediğiniz resimle ilgil kısa bir açıklama yazabilirsiniz.
Yaptığınız değişiklikler neticesinde görünüm aşağıdaki gibi olacaktır.
<a href="www.blogokulu.org"><img src="http://imageshack.us/a/img89/8497/arabaoyunlari.png" title="Blogger Eklentileri,blogger widget ve blogger hakkında güzel şeyler bulabileceğiniz bir blog.Blog Okulu" alt=""/></a>
Gerekli eklemeleri ve düzenlemeleri yaptıktan sonra eklediğiniz gadgeti blog kayıtlarının üzerine sürükleyip bırakın.Blogger slayt alanı,blogger manşet alanı kullanıma hazır.