PHtmlDrive Okuyucularına Özel Sosyal Paylaşım Butonları Kutusu

Yazılarınızın sosyal ağlarda paylaşılmsı hem ziyaretçi sayınızın artması, hem de SEO açısından çok önemli. Bunun için blog yazılarınızın altına mutlaka sosyal paylaşım butonları eklemelisiniz.

Blogger’ın kendi paylaşım butonları olmasına rağmen efektifliği ve dikkat çekiciliği tartışılır. Sosyal paylaşım butonlarınız okuyucunun ilgisini ne kadar çok çekerse yazınızın paylaşılma ihtimali o kadar artar. Bu yüzden Blog Hocam okuyucularına özel sosyal paylaşım eklentisi kodladım. Eklentiye en popüler sosyal ağlar olan Facebook, Twitter, Google+, Pinterest ve LinkedIn butonlarını ekledim.



Bu sosyal paylaşım butonlarını blogunuza eklemenin 2 aşaması var. İlk olarak Şablon > HTML’yi düzenle yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardmıyla ]]></b:skin> kodunu bulun. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekleyin.
#bh-paylas { border:1px dotted #000; padding-left:65px; background: #ffc039; padding-top:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } ul.bh-sosyal { list-style:none; display:inline-block; margin:auto; } ul.bh-sosyal li { display:inline; float:left; background-repeat:no-repeat; margin:auto; } ul.bh-sosyal li a { display:block; width:50px; height:50px; padding-right:40px; position:relative; text-decoration:none; } ul.bh-sosyal li.bh-facebook { background-image:url(https://dl.dropboxusercontent.com/u/60346665/bh-sosyal/Facebook.png); } ul.bh-sosyal li.bh-twitter { background-image:url(https://dl.dropboxusercontent.com/u/60346665/bh-sosyal/Twitter2.png); } ul.bh-sosyal li.bh-googleplus { background-image:url(https://dl.dropboxusercontent.com/u/60346665/bh-sosyal/Google%2B.png); } ul.bh-sosyal li.bh-pinterest { background-image: url(https://dl.dropboxusercontent.com/u/60346665/bh-sosyal/Pinterest.png); } ul.bh-sosyal li.bh-linkedin { background-image:url(https://dl.dropboxusercontent.com/u/60346665/bh-sosyal/Linkedin.png); }

!!! Resimde gördüğünüz gibi sosyal paylaşım butonlarının olduğu kutunun arka plan rengi turuncu. Bu renk her blog tasarımına uyguhn olmayabilir. Eğer değiştiirmek isterseniz #ffc039  yerine başka bir renk kodu yazabilirsiniz.

İkinci aşama için yine Ctrl + F tuş kombinasyonuyla açılan arama kutusunu kullanarak <div class='post-footer'> kodunu bulun ve hemen üzerine aşağıdaki HTML kodlarını ekleyin.

<b:if cond='data:blog.pageType == "item"'> <div id='bh-paylas'> <ul class='bh-sosyal'> <li class='bh-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'/> </li> <li class='bh-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'/> </li> <li class='bh-googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'/> </li> <li class='bh-pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'/> </li> <li class='bh-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'/> </li> </ul> </div> </b:if>

!!! <div class='post-footer'> kodunu aradığınızda birden fazla sonuç çıkar ve sadece biri doğru koddur. Eğer HTML kodlarını ekledikten sonra sosyal paylaşım butonları gözükmüyorsa yanlış yere eklemişsiniz demektir. Diğer yeri deneyin.