Dikey Kayan Sosyal Paylaşım Butonları

Dikey Kayan Sosyal Paylaşım Butonları - Blogunuzda paylaştığınız içerikleri sosyal ağlarda paylaşmak bu kadar kolay olmamıştı. Paylaşmış olduğunuz içeriklerin yanında sabit kalan ve dikey olarak kayan sosyal paylaşım ağ sayaçları şimdi blogunuz için burada.

1- Blogger hesabınıza giriş yaparak hangi bloga eklemek istiyorsanız o blogun kumanda paneline gidiyorsunuz. Tema > HTML'i Düzenle diyoruz ve aşağıdaki CSS kodunu CTRL+F yardımı ile </head> kodunu buluyoruz ve aşağıdaki CSS kodlarını </head> kodunun hemen üst kısmına ekliyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.don-share{width:50px;padding:10px 10px 5px;margin:0 0 0 -91px!important;background:#fff;border:1px solid #ddd;border-right:0;border-radius:4px 0 0 4px;position:fixed!important;z-index:99999;bottom:30%;float:left;display:inline-block!important}
.don-btn,.don-bubble-hover a .don-count,.don-share .don-btn-ico [class*=' don-ico-'],.don-share .don-btn-ico [class^=don-ico-]{width:50px!important}
.don-share .don-share-total:after{position:absolute;top:40px!important;bottom:0!important;left:0;width:50px!important;height:2px;background:#ccc;content:"";margin-left:0!important}
.don-share .don-share-total{line-height:18px;margin-right:0!important;position:relative!important;padding:0 0 15px!important}
.don-share [class*=' don-share-'],.don-share [class^=don-share-]{margin:0 0 6px!important}
.don-share .don-share-expand:before,.don-share.don-active .don-share-expand:before{line-height:20px!important}
.don-share .don-share-total .don-count:after {content: "PAYLAŞ"!important;}
/*]]>*/
</style>
</b:if>

2- Aşağıdaki CSS kodunu CSS kodlarınızın yada stil dosyalarınızın içine ekliyorsunuz. En pratik yöntem CTRL+F yardımı ile ]]></b:skin> kodunu bulun ve CSS kodlarını ]]></b:skin> kodunun hemen üst kısmına ekleyin.

@media screen and (max-width:800px){
.don-share{width:auto;margin:15px -10px 15px 0!important;padding:0;background:0 0;border:none;border-radius:0;position:relative!important;bottom:0;float:none;display:block!important}
.don-share [class*=' don-share-'],.don-share [class^=don-share-]{margin:0 10px 10px 0!important}
.don-share .don-share-total:after{position:absolute;top:0!important;bottom:0!important;left:50px;width:1px!important;height:100%;background:#ccc;content:"";margin-left:15px!important}
.don-share .don-share-total{line-height:18px;margin-right:30px!important;position:relative!important;padding:0!important}
.don-btn,.don-bubble-hover a .don-count,.don-share .don-btn-ico [class*=' don-ico-'],.don-share .don-btn-ico [class^=don-ico-]{width:45px!important}
}

3- Şimdi butonları yerine ekleyelim öncelikle CTRL+F yardımı ile </article> kodunu bulun ve aşağıda belirtmiş olduğumuz renkli kısıma bir alt kısımda bulunan Dikey Kayan Sosyal Paylaşım Butonları HTML kodunu ekleyin.

<b:includable id='post' var='post'>
<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.............
.............
.............
DİKEY KAYAN SOSYAL PAYLAŞIM BUTONLARI HTML AŞAĞIDAKİ KODU BURAYA EKLEYİN
</article>
</b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="don-share" data-style="icons" data-limit="5">
  <div class="don-share-total"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-google"></div>
  <div class="don-share-linkedin"></div>
  <div class="don-share-pinterest"></div>
  <div class="don-share-tumblr"></div>
  <div class="don-share-stumbleupon"></div>
  <div class="don-share-reddit"></div>
  <div class="don-share-buffer"></div>
  <div class="don-share-pocket"></div>
</div>
</b:if>

4- Eğer blogunuzun kodlamasında </article> kodunu bulunmuyorsanız post-footer-line-1 kodunu bulun veya yukarıdaki mavi renk ile belirtilen alanı bulun ve üstte bulunan HTML kodu ekleyin.

5- Son olarak butonlarımızın hareketini sağlayacak olan aşağıdaki kodu CTRL+F yardımı ile </body> kodunu bulun ve hemen üst kısmına ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/Bloggeritunes/bloggereklentileri/67aa8449/share-donreach.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Örnek Sayfa

Blogunuzu kaydet diyorsunuz. Sonuç olarak başarılı bir şekilde Dikey Kayan Sosyal Paylaşım Butonları blogunaza eklemiş oldunuz. Ziyaretçileriniz içeriklerinizi okurken yada takip ederken hemen yanında bulunan sosyal paylaşım butonları ile içeriklerinizi daha fazla paylaşmaya devam edeceklerdir. İyi günlerde kullanın.