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 için Sosyal Paylaşım Düğmeleri Eklentisi

Blogger Translate (Çeviri) Düğme Eklentisi

Blogger Yazısı İçinde Tablo Ekleme

Blogger'da BüyükHarf ve Küçük Harf Değişikliği Nasıl Yapılır?

Fineshop Design