Blogger için slider eklentisi : Revolution slider

2
48

Blogger için slider eklentisi arıyorsanız bu makalede anlatacağım muhteşem görünümlü ve özellikli slider eklentisini  mutlaka denemelisiniz.

Blogger için slider eklentisi

[su_divider top=”no” divider_color=”#dedede” size=”5″][/su_divider]

Slider eklemek hem görsel açıdan dikkat uyandıran hem de önemli konuları bir araya toplayan oldukça kullanışlı bir görsel sistemdir. WordPress için bu sistem hazır olarak eklentiler ile yapılabiliyorken Blogger platformunda ise sadece birkaç kod düzenlemesi ile eklemek mümkün.

[su_button url=”http://dersler.sadriercan.com/slider/index.html” style=”stroked” icon=”icon: arrow-circle-down”]Slider Demo[/su_button] [su_button url=”https://www.sadriercan.com/wp-content/uploads/2016/07/slider.zip” style=”stroked” icon=”icon: arrow-circle-down”]Slider İndir[/su_button]

Öncelikle Blogger hesabımıza giriş yaparak Sol menü içerisinden Şablon tıklayıp HTML’yi Düzenle seçiyoruz. Ve gelen kod ekranında <head> kodunun altına aşağıdaki kodları ekliyoruz.

Güncelleme (9-10-2016) : Google Drive sunucusu hata verdiği için header kısmına eklediğimiz kodlar çalışmamaktadır. Bu yüzden .js ve .css dosyalarını farklı bir yerde barındırmalısınız. Slider için tüm dosyaları üstteki butondan indirebilirsiniz.

blogger için slider eklentisi kod ekleme

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B9PHeW8ibG4Gbzd6Z21KOF9kWkE" media="screen" />
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B9PHeW8ibG4GV1V1Zi1KWlhGTDA" media="screen" />
<script type="text/javascript" src="https://googledrive.com/host/0B9PHeW8ibG4GdjZEYnBaNEJ3dVk"></script> <!-- jQuery Library (aynı sayfada iki adet kullanmayın) -->
<script type="text/javascript" src="https://googledrive.com/host/0B9PHeW8ibG4GaUNDZ3ZCd3l1dFU"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B9PHeW8ibG4GS3kwVzltOWxBM0E"></script>

Şablonu kaydet tıklayarak bu kısımdaki işlemi tamamlıyoruz. Yine sol menüden Yerleşim tıklıyoruz ve gelen ekrandan Gadget Ekle tıklayıp gelen Gadget seçenekleri içerisinden HTML / Javascript seçip kod kısmına aşağıdaki kodları ekliyoruz.

<div class="rev_bannercontainer">
<div class="rev_banner">

    <ul>

      

      <!-- slide 1 -->

      <li data-transition="curtain-3" data-slotamount="5"  data-masterspeed="300" data-thumb="images/fish1.png" > <img src="images/slide1_a.jpg">

        <div class="caption sfb" data-x="490" data-y="40" data-speed="6900" data-start="500" data-easing="easeOutBack"><img src="images/fish1.png"></div>

        <div class="caption sfb" data-x="450" data-y="70" data-speed="7900" data-start="900" data-easing="easeOutBack"><img src="images/fish1.png"></div>

        <div class="caption lfr" data-x="550" data-y="120" data-speed="3700" data-start="800" data-easing="easeOutExpo"><img src="images/fish2.png"></div>

        <div class="caption lfr" data-x="620" data-y="240" data-speed="4700" data-start="1000" data-easing="easeOutExpo"><img src="images/fish3.png"></div>

        <div class="caption lfr" data-x="490" data-y="200" data-speed="2700" data-start="800" data-easing="easeOutExpo"><img src="images/fish4.png"></div>

        <div class="caption lfr" data-x="660" data-y="50" data-speed="8700" data-start="800" data-easing="easeOutExpo"><img src="images/fish5.png"></div>

        <div class="caption lfr" data-x="377" data-y="290" data-speed="2700" data-start="800" data-easing="easeOutExpo"><img src="images/fish6.png"></div>

        <div class="caption lfb big_white"  data-x="50" data-y="47" data-speed="900" data-start="1700" data-easing="easeOutBack" style="padding:15px;"> Revolution Slider</div>

        <div class="caption lft big_white"  data-x="50" data-y="119" data-speed="900" data-start="1900" data-easing="easeOutBack" style="padding:9px;">Dünyanın <span style="font-weight:normal;">#1 Numaralı</span><em> Slideri</em></div>

        <div class="caption lfr medium_grey"  data-x="60" data-y="190" data-speed="300" data-start="2500" data-easing="easeOutExpo">Sınırsız Geçiş Efektleri</div>

        <div class="caption sfl" data-x="60" data-y="230" data-speed="300" data-start="2600" data-easing="easeOutExpo"><img src="images/check.png"></div>

        <div class="caption lfr small_text"  data-x="120" data-y="228" data-speed="300" data-start="2600" data-easing="easeOutExpo">Sliding, Fading, Slots, Box Transitions<br/>

          <span style="color: #ccc;">SLIDER REVOLUTION</span> hepsine sahip!</div>

        <div class="caption sfl" data-x="60" data-y="280" data-speed="300" data-start="2900" data-easing="easeOutExpo"><img src="images/check.png"></div>

        <div class="caption lfr small_text"  data-x="120" data-y="287" data-speed="300" data-start="2900" data-easing="easeOutExpo">Responsive & Mobile Uyumlu</div>

        <div class="caption sfl" data-x="60" data-y="330" data-speed="300" data-start="3200" data-easing="easeOutExpo"><img src="images/check.png"></div>

        <div class="caption lfr small_text"  data-x="120" data-y="328" data-speed="300" data-start="3200" data-easing="easeOutExpo">Düzenlenebilir Navigasyon<br/>

          Arrows, Bullets, Küçük Resimler</div>

        <div class="caption sfb" data-x="55" data-y="380" data-speed="1000" data-start="3500" data-easing="easeOutBack"><a href="https://www.sadriercan.com" target="_blank" class="button blue small">Sadriercan.com</a></div>

      </li>

      

      <!-- slide 2 -->

      <li data-transition="boxfade" data-slotamount="12"  data-masterspeed="300"  data-link="http://www.nasa.gov" title="Visit NASA Website" data-thumb="images/thumbs/regular_thumb2.jpg"> <img src="images/slide2_a.jpg"  >

        <div class="caption lft big_white"  data-x="350" data-y="80" data-speed="900" data-start="1200" data-easing="easeOutBack">Gezegenler</div>

        <div class="caption sfl" data-x="-270" data-y="0" data-speed="700" data-start="1700" data-easing="easeOutBack"><img src="images/slide2_b.gif"></div>

        <div class="caption sfb" data-x="160" data-y="210" data-speed="800" data-start="1200" data-easing="easeOutBack"><img src="images/slide2_c.png"></div>

        <div class="caption sfb" data-x="210" data-y="215" data-speed="900" data-start="1300" data-easing="easeOutBack"><img src="images/slide2_d.png"></div>

        <div class="caption sfb" data-x="290" data-y="220" data-speed="1000" data-start="1400" data-easing="easeOutBack"><img src="images/slide2_e.png"></div>

        <div class="caption sfb" data-x="370" data-y="240" data-speed="1100" data-start="1500" data-easing="easeOutBack"><img src="images/slide2_f.png"></div>

        <div class="caption sfb" data-x="410" data-y="230" data-speed="1200" data-start="1600" data-easing="easeOutBack"><img src="images/slide2_g.png"></div>

        <div class="caption sfb" data-x="540" data-y="225" data-speed="1300" data-start="1700" data-easing="easeOutBack"><img src="images/slide2_h.png"></div>

        <div class="caption sfb" data-x="700" data-y="210" data-speed="1400" data-start="1800" data-easing="easeOutBack"><img src="images/slide2_i.png"></div>

        <div class="caption sfb" data-x="760" data-y="200" data-speed="1500" data-start="1900" data-easing="easeOutBack"><img src="images/slide2_j.png"></div>

        <div class="caption sfb" data-x="825" data-y="190" data-speed="1600" data-start="2000" data-easing="easeOutBack"><img src="images/slide2_k.png"></div>

        <div class="caption sfb small_text" style="padding:8px;"  data-x="350" data-y="120" data-speed="300" data-start="2600" data-easing="easeOutExpo">Muhteşem Güneş sistemi</div>

      </li>

      

      <!-- slide 3 -->

      <li data-transition="slotfade-horizontal" data-slotamount="1" data-masterspeed="300"  data-thumb="images/regular_thumb3.jpg"> <img src="images/slide3_a.jpg"  >

        <div class="caption sfb" data-x="340" data-y="30" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="images/slide3_b.png"></div>

        <div class="caption lfl" data-x="290" data-y="160" data-speed="700" data-start="800" data-easing="easeOutExpo"><img src="images/slide3_c.png"></div>

        <div class="caption sfb" data-x="470" data-y="300" data-speed="700" data-start="1200" data-easing="easeOutExpo"><img src="images/slide3_d.png"></div>

        <div class="caption sfb medium_grey" style="padding:8px;"  data-x="40" data-y="320" data-speed="300" data-start="1800" data-easing="easeOutExpo">www.sadriercan.com</div>

        <div class="caption lfl very_big_white"  data-x="40" data-y="50" data-speed="300" data-start="1200" data-easing="easeOutExpo" style="padding:9px;">PC</div>

        <div class="caption lfl very_big_white"  data-x="40" data-y="140" data-speed="300" data-start="1300" data-easing="easeOutExpo" style="padding:9px;">Tablet</div>

        <div class="caption lfl very_big_white"  data-x="40" data-y="230" data-speed="300" data-start="1400" data-easing="easeOutExpo" style="padding:9px;">Mobil</div>

        <div class="caption lfb medium_grey"  data-x="40" data-y="400" data-speed="300" data-start="1500" data-easing="easeOutExpo" style="padding:9px;"><a href="https://www.sadriercan.com">Ziyaret Et</a></div>

      </li>

      

      <!-- slide 4 -->

      <li data-transition="slideup" data-slotamount="20" data-masterspeed="300" data-delay="10000" data-thumb="images/regular_thumb5.jpg"> <img src="images/slide4_a.jpg"  >

        <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack">

          <iframe src="https://player.vimeo.com/video/49224248?title=0&byline=0&portrait=0;api=1" width="460" height="259"></iframe>

        </div>

        <div class="caption sft big_black"  data-x="550" data-y="120" data-speed="300" data-start="1200" data-easing="easeOutExpo">Video Desteği</div>

        <div class="caption sft big_white"  data-x="550" data-y="157" data-speed="300" data-start="1300" data-easing="easeOutExpo">Vimeo Örneği</div>

        <div class="caption lfb medium_grey"  data-x="550" data-y="210" data-speed="300" data-start="1400" data-easing="easeOutExpo">Kolayca</div>

        <div class="caption lfb medium_grey"  data-x="550" data-y="234" data-speed="300" data-start="1500" data-easing="easeOutExpo">Vimeo Videoları</div>

        <div class="caption lfb medium_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">Ekleyebilirsiniz</div>

        <div class="caption sfb" data-x="0" data-y="0" data-speed="300" data-start="200" data-easing="easeOutBack"><img src="images/vimeo.jpg"></div>

      </li>

      

      <!-- slide 5 -->

      <li data-transition="slidedown" data-slotamount="14"  data-masterspeed="300" data-delay="10000" data-thumb="images/regular_thumb6.jpg"> <img src="images/slide5_a.jpg"  >

        <div class="caption lft boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack">

          <iframe src="https://www.youtube.com/embed/JYKpIr1lSG0?hd=1&wmode=opaque&controls=1&showinfo=0" width="460" height="259"></iframe>

        </div>

        <div class="caption sft big_black"  data-x="550" data-y="120" data-speed="300" data-start="1200" data-easing="easeOutExpo">Video Desteği</div>

        <div class="caption sft big_white"  data-x="550" data-y="157" data-speed="300" data-start="1300" data-easing="easeOutExpo">Youtube Örneği</div>

        <div class="caption lfb medium_grey"  data-x="550" data-y="210" data-speed="300" data-start="1400" data-easing="easeOutExpo">Kolayca</div>

        <div class="caption lfb medium_grey"  data-x="550" data-y="234" data-speed="300" data-start="1500" data-easing="easeOutExpo">Youtube Videoları</div>

        <div class="caption lfb medium_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">Ekleyebilirsiniz</div>

        <div class="caption sfb" data-x="0" data-y="0" data-speed="300" data-start="200" data-easing="easeOutBack"><img src="images/youtube.png"></div>

      </li>

    </ul>

    <div class="tp-bannertimer"></div>

  </div>

</div>

<!-- DC Revolution Slider End -->

<div class="dc_clear"></div> <!-- line break/clear line -->

<br/>

<center><h2><a href="">Blogger İçin Slider Ekleme Makalesine Git</a></h2></center>



<!-- DC Revolution Slider Settings -->

<script type="text/javascript">

                var tpj=jQuery;

                tpj.noConflict();

                tpj(document).ready(function() {

                if (tpj.fn.cssOriginal!=undefined)

                    tpj.fn.css = tpj.fn.cssOriginal;

                    tpj('.rev_banner').revolution(

                        {

                            delay:6000,

                            startheight:490,

                            startwidth:890,

                            hideThumbs:200,

                            thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)

                            thumbHeight:50,

                            thumbAmount:5,

                            navigationType:"bullet",                    //bullet, thumb, none, both     (No Thumbs In FullWidth Version !)

                            navigationArrows:"verticalcentered",        //nexttobullets, verticalcentered, none

                            navigationStyle:"navbar",               //round,square,navbar

                            touchenabled:"on",                      // Enable Swipe Function : on/off

                            onHoverStop:"on",                       // Stop Banner Timet at Hover on Slide on/off

                            navOffsetHorizontal:0,

                            navOffsetVertical:20,

                            shadow:1,                               //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)

                            fullWidth:"off",                            // Turns On or Off the Fullwidth Image Centering in FullWidth Modus

                            stopLoop:"off"                          // on == Stop loop at the last Slie,  off== Loop all the time.

                        });

                    });
</script>

Üst kodlar içerisinde yer alan tüm resim ve yazıları kendinize göre düzenlemelisiniz.

NOT : Slider genişliği 600px olarak belirlenmiştir. eğer daha küçük yada büyük ebatlarda olmasını istiyorsanız, ilk kısımda anlattığım kod ekleme işlemi gibi aşağıdaki css kodunu <head> etiketinin altına ekleyin ve 600px yazan kısmı kendinize göre düzenleyin.

<style>
.rev_bannercontainer {width:600px !important;}
.rev_banner{width:600px !important;}
</style>

Blogger için internette birçok slider eklentisi bulunmaktadır. Fakat çok az miktarı gerçekten güzel görünüme sahiptir.

2 Yorumlar

  1. Google drive sunucusu hata veriyor. Dolayısıyla css ve js kodlarını başka bir yede barındırmak gerekiyor. Bunun için sliderin tüm dosyalarını makaleye ekledim.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz