Blogger için Duyarlı Yüzen Sosyal Paylaşım Widget Eklentisi

Bloğunuz için Sayfa ile birlikte hareket eden duyarlı sosyal paylaşım eklentisi eklemek ister misiniz? O zaman aşağıda ki adımları anlatmaya başlayalım sizler için ;

Öncelikle Şablon editör sayfamızı açıyoruz. Ve editör sayfamızın içinde bulunan Ctrl+F yardımıyla birlikte </head> kodunu aratıyoruz ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki JQuery kodunu ekliyoruz.

<script type='text/javascript'>//<![CDATA[
 if (typeof(jQuery) == 'undefined') {
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}       //]]>
       </script>

Şimdi sıra diğer kodumuz da yani CSS kodunda yine editör sayfamız da Ctrl+F yardımıyla birlikte ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim.

/*Share Buttons For Blogger By www.TwistBlogg.com*/
/** Keep this Credit In-tact **/
#share-bar {
  display: block;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.sharing-providers {
  list-style-type: none;
}
.sharing-providers {
  padding: 0;
  margin: 0;
}
.sharing-providers > li {
  display: block;
  text-align: center;
  width: 45px;
  height: 45px;
  padding: 0;
  margin: 0;
  background: #777777;
  transition: 0.5s all;
}
.sharing-providers.circle > li {
  border-radius:50%;
  margin: 2px;
}
#share-bar.left {
 left: 0;
}
#share-bar.left .sharing-providers > li {
 margin-left: 0;
}
#share-bar.right {
 right: 0;
}
#share-bar.right .sharing-providers > li {
 margin-right: 0;
}

.sharing-providers > li > a {
  text-decoration: none !important;
  font-family: 'FontAwesome';
  width: 45px;
  height: 45px;
  line-height: 45px;
  display: block;
}
.sharing-providers.circle > li > a {
  border-radius: 50%;
}
.sharing-providers > li > a {
  color: white;
  font-size: 25px;
}
.sharing-providers > li > a {
  color: white;
  font-size: 25px;
  text-decoration: none;
}
.sharing-providers > li > a:hover {
  text-decoration: none;
  background: #777777;
}

#share-bar.animate .sharing-providers > li:hover {
  transform: translateX(5px);
}

#share-bar.right.animate .sharing-providers > li:hover {
  transform: translateX(-5px);
}

.sharing-providers > li.facebook {
  background: #4267B2;  
}

.sharing-providers > li.twitter {
  background: #1DA1F2;
}

.sharing-providers > li.linkedin {
  background: #0077B5;
}

.sharing-providers > li.tumblr {
  background: #2c4762;
}

.sharing-providers > li.reddit {
  background: #5f99cf;
}

.sharing-providers > li.pinterest {
  background: #cb2027;
}

.sharing-providers > li.stumbleupon {
  background: #EB4924;
}

.sharing-providers > li.email {
  background: #E3A129;
}

.sharing-providers >li.whatsapp{
background:#43d854
}

@media (max-width: 1348px) {
  #share-bar {
    bottom: 0;
    top: auto;
    transform: translate(-50%, 0);
    left: 50% !important;
    right: auto;
    background: white;
    width: 100%;
    text-align: center;
    padding: 8px;
  }
  #share-bar .sharing-providers > li {
    display: inline-block;
  }
  #share-bar.animate .sharing-providers > li:hover {
    transform: translateX(0px) !important;
    transform: translateY(-5px) !important;
  }
}

Sıra geldi bu kodların nerede görünmesini istemeye ben yazı sonuna veya yazının yanına eklemek istediğim için <data:post.body/> kodunun bir satır altına ve <div class='post-footer'> bir satır altına ekledim.

<div id='share-bar'/>

Şimdi bir de </body> kodu için bir ekleme yapalım ama bu kodun üzerine gelecek şekilde yine olsun.

<script type='text/javascript'>
// <![CDATA[
// Share Plugin By www.TwistBlogg.com
// jquery-social-share-bar
// Copyright: Jesse Nieminen, Viima Solutions Oy
// License: MIT
// Modified from https://github.com/Viima/jquery-social-share-bar
// Developed from https://github.com/ewebdev/jquery-share
// Show hide floating social buttons by mybloggertricks.com
$(window).load(function() {
var stickElement = $('#share-bar'),hideTrigger = $('.rrssb-buttons'),top = stickElement.offset().top;
$(window).scroll(function () {var y = $(this).scrollTop();var maxY = hideTrigger.offset().top;if (y < maxY) {$('#share-bar').fadeIn(500);} else {$('#share-bar').fadeOut();}});});
(function ($, window, undefined) {
  "use strict";
  $.fn.share = function (method) {
    var helpers = {
      channels: {
        facebook: {url: 'https://www.facebook.com/share.php?u=|u|'},
        twitter: {url: 'https://twitter.com/share?url=|u|&text=|140|'},
        linkedin: {url: 'https://www.linkedin.com/shareArticle?mini=true&url=|u|&title=|t|&summary=|d|'},
        tumblr: {url: 'https://www.tumblr.com/share?v=3&u=|u|'},
        whatsapp:{url:'https://api.whatsapp.com/send?text=|t|&url=|u|'},
        reddit: {url: 'https://reddit.com/submit?url=|u|'},
        pinterest: {url: 'https://pinterest.com/pin/create/button/?url=|u|&media=&description=|d|'},
        stumbleupon: {url: 'https://www.stumbleupon.com/submit?url=|u|&title=|t|'},
        email: {url: 'mailto:?subject=|t|&body=You might want to check this out: |u|'}
      }
    };
    var methods = {
      init: function (options) {
        this.share.settings = $.extend({}, this.share.defaults, options);
        var settings = this.share.settings,
          pageTitle = settings.title || document.title || '',
          pageUrl = settings.pageUrl || window.location.href,
          pageDesc = settings.pageDesc || $('head > meta[name="description"]').attr("content") || '',
          position = settings.position || 'left',
          theme = settings.theme || 'circle',
          animate = settings.animate === false ? false : true,
          u = encodeURIComponent(pageUrl),
          t = encodeURIComponent(pageTitle);
        // Each instance of this plugin
        return this.each(function () {
          var $element = $(settings.containerTemplate(settings)).appendTo($(this)),
            id = $element.attr("id"),
            d = pageDesc.substring(0, 250),
            href;
          // Add class for positioning and animation of the widget
          $(this).addClass(position);
          if (animate) {
            $(this).addClass('animate');
          }
          // Add class for theming the widget
          $element.addClass(theme);
          // Append HTML for each network button
          for (var item in settings.channels) {
            item = settings.channels[item];
            href = helpers.channels[item].url;
            href = href.replace('|u|', u).replace('|t|', t).replace('|d|', d)
              .replace('|140|', t.substring(0, 130));
            $(settings.itemTemplate({provider: item, href: href, itemTriggerClass: settings.itemTriggerClass})).appendTo($element);
          }
          // Bind click
          $element.on('click', '.' + settings.itemTriggerClass, function (e) {
            e.preventDefault();
            var top = (screen.height / 2) - (settings.popupHeight / 2),
              left = (screen.width / 2) - (settings.popupWidth / 2);
            window.open($(this).data('href') || $(this).attr('href'), 't', 'toolbar=0,resizable=1,status=0,copyhistory=no,width=' + settings.popupWidth + ',height=' + settings.popupHeight + ',top=' + top + ',left=' + left);
          });
        });// End plugin instance
      }
    };
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method "' + method + '" does not exist in social plugin');
    }
  };
  $.fn.share.defaults = {
    popupWidth: 640,
    popupHeight: 528,
    channels: ['facebook', 'twitter', 'linkedin','pinterest' , 'email','reddit','whatsapp','stumbleupon','tumblr'],
    itemTriggerClass: 'js-share',
    containerTemplate: function (props) {
      return '<ul class="sharing-providers"></ul>';
    },
    itemTemplate: function (props) {
      var iconClasses = {
        'facebook': 'fab fa-facebook-f',
        'twitter': 'fab fa-twitter',
        'linkedin': 'fab fa-linkedin-in',
        'pinterest': 'fab fa-pinterest-p',
        'tumblr': 'fab fa-tumblr',
        'stumbleupon': 'fab fa-stumbleupon',
        'reddit': 'fab fa-reddit-alien',
        'email': 'fas fa-envelope',
        'whatsapp':'fab fa-whatsapp'
      }

      var providerName = props.provider === 'email' ? 'email' :props.provider.charAt(0).toUpperCase() + props.provider.slice(1);
      return '<li class="' + props.provider + '">' +
        '<a href="#" data-href="' + props.href + '" title="Share this page ' + (props.provider === 'email' ? 'via ' : 'on ') + providerName + '" class=' + props.itemTriggerClass + ' ' + props.provider + '">' +
        '<i class="' + iconClasses[props.provider] + '"></i>' +
        '</a>' +
        '</li>';
    }
  };
  $.fn.share.settings = {};
})(jQuery, window);
//]]>
</script>

Bu kodların diğer bir versiyonunu kullanmak istiyorsanız aşağıda ki kodları deneyebilirsiniz.

<script type='text/javascript'>
// <![CDATA[
// Share Plugin By www.TwistBlogg.com
// jquery-social-share-bar
// Copyright: Jesse Nieminen, Viima Solutions Oy
// License: MIT
// Modified from https://github.com/Viima/jquery-social-share-bar
// Developed from https://github.com/ewebdev/jquery-share
// Show hide floating social buttons by mybloggertricks.com
$(window).load(function() {
var stickElement = $('#share-bar'),hideTrigger = $('.rrssb-buttons'),top = stickElement.offset().top;
$(window).scroll(function () {var y = $(this).scrollTop();var maxY = hideTrigger.offset().top;if (y < maxY) {$('#share-bar').fadeIn(500);} else {$('#share-bar').fadeOut();}});});
(function ($, window, undefined) {
  "use strict";
  $.fn.share = function (method) {
    var helpers = {
      channels: {
        facebook: {url: 'https://www.facebook.com/share.php?u=|u|'},
        twitter: {url: 'https://twitter.com/share?url=|u|&text=|140|'},
        linkedin: {url: 'https://www.linkedin.com/shareArticle?mini=true&url=|u|&title=|t|&summary=|d|'},
        tumblr: {url: 'https://www.tumblr.com/share?v=3&u=|u|'},
        whatsapp:{url:'https://api.whatsapp.com/send?text=|t|&url=|u|'},
        reddit: {url: 'https://reddit.com/submit?url=|u|'},
        pinterest: {url: 'https://pinterest.com/pin/create/button/?url=|u|&media=&description=|d|'},
        stumbleupon: {url: 'https://www.stumbleupon.com/submit?url=|u|&title=|t|'},
        email: {url: 'mailto:?subject=|t|&body=You might want to check this out: |u|'}
      }
    };
    var methods = {
      init: function (options) {
        this.share.settings = $.extend({}, this.share.defaults, options);
        var settings = this.share.settings,
          pageTitle = settings.title || document.title || '',
          pageUrl = settings.pageUrl || window.location.href,
          pageDesc = settings.pageDesc || $('head > meta[name="description"]').attr("content") || '',
          position = settings.position || 'left',
          theme = settings.theme || 'square',
          animate = settings.animate === false ? false : true,
          u = encodeURIComponent(pageUrl),
          t = encodeURIComponent(pageTitle);
        // Each instance of this plugin
        return this.each(function () {
          var $element = $(settings.containerTemplate(settings)).appendTo($(this)),
            id = $element.attr("id"),
            d = pageDesc.substring(0, 250),
            href;
          // Add class for positioning and animation of the widget
          $(this).addClass(position);
          if (animate) {
            $(this).addClass('animate');
          }
          // Add class for theming the widget
          $element.addClass(theme);
          // Append HTML for each network button
          for (var item in settings.channels) {
            item = settings.channels[item];
            href = helpers.channels[item].url;
            href = href.replace('|u|', u).replace('|t|', t).replace('|d|', d)
              .replace('|140|', t.substring(0, 130));
            $(settings.itemTemplate({provider: item, href: href, itemTriggerClass: settings.itemTriggerClass})).appendTo($element);
          }
          // Bind click
          $element.on('click', '.' + settings.itemTriggerClass, function (e) {
            e.preventDefault();
            var top = (screen.height / 2) - (settings.popupHeight / 2),
              left = (screen.width / 2) - (settings.popupWidth / 2);
            window.open($(this).data('href') || $(this).attr('href'), 't', 'toolbar=0,resizable=1,status=0,copyhistory=no,width=' + settings.popupWidth + ',height=' + settings.popupHeight + ',top=' + top + ',left=' + left);
          });
        });// End plugin instance
      }
    };
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method "' + method + '" does not exist in social plugin');
    }
  };
  $.fn.share.defaults = {
    popupWidth: 640,
    popupHeight: 528,
    channels: ['facebook', 'twitter', 'linkedin','pinterest' , 'email','reddit','whatsapp','stumbleupon','tumblr'],
    itemTriggerClass: 'js-share',
    containerTemplate: function (props) {
      return '<ul class="sharing-providers"></ul>';
    },
    itemTemplate: function (props) {
      var iconClasses = {
        'facebook': 'fab fa-facebook-f',
        'twitter': 'fab fa-twitter',
        'linkedin': 'fab fa-linkedin-in',
        'pinterest': 'fab fa-pinterest-p',
        'tumblr': 'fab fa-tumblr',
        'stumbleupon': 'fab fa-stumbleupon',
        'reddit': 'fab fa-reddit-alien',
        'email': 'fas fa-envelope',
        'whatsapp':'fab fa-whatsapp'
      }

      var providerName = props.provider === 'email' ? 'email' :props.provider.charAt(0).toUpperCase() + props.provider.slice(1);
      return '<li class="' + props.provider + '">' +
        '<a href="#" data-href="' + props.href + '" title="Share this page ' + (props.provider === 'email' ? 'via ' : 'on ') + providerName + '" class=' + props.itemTriggerClass + ' ' + props.provider + '">' +
        '<i class="' + iconClasses[props.provider] + '"></i>' +
        '</a>' +
        '</li>';
    }
  };
  $.fn.share.settings = {};
})(jQuery, window);
//]]>
</script>

Son olarak eğer kodlar da çalışmama gibi bir durum ile karşı karşıya kalırsanız şayet şablon editör sayfanızda bulunan </body> kodunun üzerine gelecek şekilde aşağıda ki kodları ekleyebilirsiniz.

<script type='text/javascript'>$(function() {
$('#share-bar').share();
});</script>

Bütün işlemler bu kadar herkese kolay gelsin.

BP

Blogger için Duyarlı Yüzen Sosyal Paylaşım Widget Eklentisi

Yorum Gönder

Blogger Yazısı İçinde Tablo Ekleme

Blogger'da Widget/Eklentileri Sayfalarda Gösterip Gizleme Eklentisi

Fineshop Design