Ana Sayfa HTML Javascript Widget Blog Mobil Uyumlu Sosyal Paylaşım Butonları

Blog Mobil Uyumlu Sosyal Paylaşım Butonları

Arlina Design: Blog Mobil Uyumlu Sosyal Paylaşım Butonları 5.6.16
Unknown
Blog Mobil Uyumlu Sosyal Paylaşım Butonları

Yeni nesil blog temalarının mobil uyumlu olması ve buna bağlı olarak blogunuza eklemiş olduğunuz blogger eklentilerinin temanıza ve mobil uyumlu olması gerekmektedir. Blogunuzda kullanabileceğiniz blog mobil uyumlu sosyal paylaşım butonlarını eklemek için aşağıdaki adımları takip edin;

Sosyal Paylaşım Butonları Bloga Nasıl Eklenir?


1- Blogger hesabınızda oturum açarak blogunuzun kumandan panelinden Şablon > HTML'i Düzenle tıklayın ve CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.share,h2.sharetitle{display:block;float:left}
h2.sharetitle{font-size:18px;margin-top:15px!important;font-weight:500;line-height:1.4em}
.share,.sharethis{position:relative}
.sharethis{margin:10px 0 10px 20px;}
.sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{cursor:pointer;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-weight:300;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .4s ease-in-out}
.fbi,.goplus,.pplus,.tewe{font-size:18px!important;margin-top:1px;vertical-align:middle}
.sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#555;background:#fafafa;border:1px solid #999}
.sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
#share-menu{display:none}
.dropdown-menu{position:absolute;top:100%;right:5px;z-index:1000;max-width:100px;padding:5px 10px;margin:0!important;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#333!important;font-weight:300;display:block}
.dropdown-menu li a:hover{color:#e8554e!important}
.share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px}
.clear{clear:both}
</style>
</b:if>

2- Aşağıdaki HTML kodu bir altta bulunan örnek kodları blogunuzun Şablon HTML bölünde bulun ve örnek koda göre ekleyin.

<b:includable id='share-tool' var='post'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus goplus"></i> Google</a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbi"></i> Facebook</a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter tewe"></i> Twitter</a> \
    <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a href="javascript:pinIt();">Pinterest</a></li>\
    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Delicious">Delicious</a></li> \
    <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Share This On BufferApp">BufferApp</a></li> \
    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Reddit">Reddit</a></li> \
    </ul> \
</div>\
<div class="clear"></div></div> \
');
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
//]]>
</script>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="https://cdn.rawgit.com/jquerycods/javascript/a104cb1e/whatsapp.js";h.appendChild(s);}
//]]>
</script>
</b:if>
</b:includable>

Örnek kodlar;

<b:includable id='post' var='post'>
............
............
............
</b:includable>

Bu şekilde düzenlemelisiniz;

<b:includable id='post' var='post'>
............
............
............
</b:includable>
<b:includable id='share-tool' var='post'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus goplus"></i> Google</a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbi"></i> Facebook</a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter tewe"></i> Twitter</a> \
    <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a href="javascript:pinIt();">Pinterest</a></li>\
    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Delicious">Delicious</a></li> \
    <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Share This On BufferApp">BufferApp</a></li> \
    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Reddit">Reddit</a></li> \
    </ul> \
</div>\
<div class="clear"></div></div> \
');
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
//]]>
</script>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="https://cdn.rawgit.com/jquerycods/javascript/a104cb1e/whatsapp.js";h.appendChild(s);}
//]]>
</script>
</b:if>
</b:includable>

3- Sonra aşağıdaki kodu kopyalayıp.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='sharetitle'>Share this:</h2>
<div class='clear'/>
<b:include data='post' name='share-tool'/>
</b:if>

Aşağıdaki koda benzer kodu bulun.

...............
...............
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Burada olduğu gibi ekleyin.

...............
...............
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='sharetitle'>Share this:</h2>
<div class='clear'/>
<b:include data='post' name='share-tool'/>
</b:if>

4- Aşağıdaki javascript kodu </body> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
var boxArray2=["share-menu"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray2.length;r++){var o=document.getElementById(boxArray2[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}});
//]]>
</script>
</b:if>

Şablonu kaydedin ve blogunuzu kontrol edin.

Yorum Gönder