Blogger Sayfa İle Hareket Eden Widget Ekleme

Web sitelerinde ekran boyunca bizimle beraber ilerleyen site elemanları her zaman dikkatimizi çekmiştir. Bu tarz elemanlar daha yüksek bir tıklama oranını bize sağlayabilirler. Okuyucularımızın dikkatini çekmesini istediğimiz her hangi bir konu yada içerik için sidebarımızda bu tarzda bir site elemanı kullanmak bize fayda sağlayacaktır.

Blogumuda kullandığımız ve dikkat çeksin istediğimiz widgetimizi sabitleyerek okuyucularımızın dikkatini o yöne doğru çekebiliriz. Örnek vermek gerekirse son yazılarımızın, fotoğraflarımızın yada RSS abonelerimiz çoğaltabilmek adına RSS bağlantımızı sayfa ile hareket etmesini sağlayabilir ve bu şekilde RSS abonelerimizi çoğaltabiliriz.

NOT: Sayfa ile hareket eden widgetimizde reklamlarımızı yayınlayabiliriz. Fakat kullandığımız reklam şirketlerinin yayın şartlarına uygun olmayabilir. Reklamlarımızı bu tarz bir widgete eklemeden önce reklam şirketimizin yayın şartlarını incelemeliyiz.

ÖNİZLEME

Blogumuza sayfa ile hareket widgetimizi nasıl ekleyeceğimize gelirsek;

Yapmamız gereken ilk şey herhangi bir aksilik yada bir hata olmasına karşılık şablonumuzun yapısını bozmamak için şablonumuzun yedeğini almayı unutmamalıyız.

Blogger Kontrol Paneli > Şablon > Html'yi Düzenle yolunu takip ederek açılan kod penceresinde CTRL+F yardımıyla </body> etiketini aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<script>
/*<![CDATA[*/
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
 </script>

Bu işlemi yaptıktan sonra Blogger Kontrol Panel > Yerleşim > Gadget Ekle diyerek blogumuza yen bir gadget ekliyoruz. Daha sonra eklediğimiz gadgetimizi düzenle diyerek açtığımız pencerede adres çubuğunda yazan URL'nin en sonunda gadgetimizin ID'sini gösteren özel bir isim bulunuyor.

Eklediğimiz gadgetin ID'sini öğrendikten sonra tekrar Blogger Kontrol Paneli > Şablon > Html'yi Düzenle diyerek şablonumuzun kod yapısına ulaşıyoruz.

Kodların hemen üzerinde bulunan Widget'e Atla sekmesinden az önce ID'sini öğrendiğimiz widgetimize tıklayarak ulaşmak istediğimiz widgetin kodlarına ulaşıyoruz. wigdetimizin kodları aşağıdaki gibi olacaktır.

<b:widget id='HTML3' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Bulduğumuz bu kodların içerisinde kırmızı yerleri aşağıdaki kodlarla değiştiriyoruz.

<b:includable id='main'>
      <div id='mblfloater' style='z-index:99999;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>

UYARI: Örnekte Widget id='HTML3' olarak gösterilen widget id'si sizin eklediğiniz Widget id'si ile farklı olabilir.

Tüm işlemleri tamamladıktan sonra şablonumuzu kaydediyoruz. Sayfa ile hareket eden widgetimiz hazır durumda olacaktır.