Blog Mobil Uyumlu Sosyal Paylaşım Butonları

6/05/2016
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;

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:#666!important;background:#f7f7f7;border:1px solid #ddd;box-shadow:0 1px 0 rgba(0,0,0,.09);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:#444;background:#fafafa;border:1px solid #888}
.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 #ddd;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.165);box-shadow:0 6px 12px rgba(0,0,0,.165)}
.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:#e8545e!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="Google+  ile paylaş">\
    <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="Facebook  ile paylaş">\
    <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="Twitter  ile paylaş">\
    <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="Digg  ile paylaş">Digg</a></li> \
    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Linkedin  ile paylaş">Linkedin</a></li> \
    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Stumbleupon ile paylaş">Stumbleupon</a></li> \
    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Delicious ile paylaş">Delicious</a></li> \
    <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Tumblr ile paylaş">Tumblr</a></li> \
    <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="BufferApp ile paylaş">BufferApp</a></li> \
    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Pocket ile paylaş">Pocket</a></li> \
    <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Evernote ile paylaş">Evernote</a></li> \
    <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Reddit ile paylaş">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">Whatsapp ile paylaş :</span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Whatsapp ile paylaş">\
Paylaş</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.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="http://yourjavascript.com/0015517398/whatsapp-button.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'>Paylaş:</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;'/> <!-- blogger eklentileri -->
</div>
Burada olduğu gibi ekleyin.
...........
...........
<data:post.body/>
<div style='clear: both;'/> <!-- blogger eklentileri -->
</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 class='sharetitle'>Paylaş:</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 src='https://googledrive.com/host/0B2RaeOjprqzBcFV1V0dzRTJGUGc' tipi='text/javascript'></script>
</b:if>
Şablonu kaydedin ve blogunuzu kontrol edin.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok