Iklan

Cara Membuat Tombol Share Sosial Media Tanpa Javascript (Fast Loading)

Cara Membuat Tombol Share (Bagikan) ke Sosial Media (Facebook, Twitter, Google Plus) Tanpa Javascript, hanya kode CSS & HTML, sehingga Fast Loading, ringan, tidak memberatkan loading blog. Selain itu, social share buttom ini juga valid HTML5.

Kode-kode berikut inilah yang dipasang di blog ini.

CARA PASANG
1. Template > Edit HTML
2. Copas kode berikut ini di atas  kode ]]></b:skin> 


#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)}

3. Copas kode berikut ini di bawah kode <data:post.body/> yang ketiga atau yang terakhir:

<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;'>Share This Post</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>

4. Save!

Kini Tombol Share Sosial Media Tanpa Javascript (Fast Loading) sudah muncul di bawah posting blog Anda!

Previous
« Prev Post
Oldest

1 komentar:

Mantep mas , saya coba langsung jadi..

No SPAM, Please...!