Membuat Share Button Sosial Media Tanpa Javascript

Minggu, 02 Maret 2014

Membuat Share Button Sosial Media Tanpa Javascript - Hembs setelah lama saya tidak update karena kemaren sibuk buanget ( ada MID semester ) kali ini setelah semesteran dan liburan saya akan membagikan kepada sahabat blogger tentang bagaimana membuat tombol share buton sosial media yang keren tanpa javascript , karena kebanyakan tombol share menggunakan javascript al-hasil blog loadingnya menjadi agak lambat karena adanya javascript tadi :)

Berikut Cara Membuat Share Button Sosial Media Tanpa Javascript

1. Pertama sobat Simpan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

#share-button{overflow:hidden}
#share-button p{float:left;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}
#share-button a{float:left;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}
#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}

2 Langkah Kedua sobat Copy kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-button' style='margin-top:8px;'>
<p><span style='font-size:17px;font-weight: bold;'>Suka artikel ini? bagikan</span></p><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a></div>
</b:if>

3. Langkah yang terakhir simpan template dan lihat hasilnya

Demikian dari saya tutorial tentang Membuat Share Button Sosial Media Tanpa Javascript semoga cara tersebut bermanfaat bagi anda , bila ada kendala atau request sesuatu silahkan komentar dibawah :)