Membuat Widget Share Tanpa Javascript

Share :

Tweet

Selamat malam sobat, Malam ini saya akan share tentang Membuat Widget Share Tanpa Javascript, langsung saja kita menuju ke topik utama.

Widget share adalah salah satu widget terpenting yang harus ada di setiap blog, karena dengan ini para pengunjung yang merasa artikel kita bermanfaat akan langsung di share misalnya ke facebook, twitter, google plus, dan masih banyak yang lainnya.  tetkadang widget search disertai dengan kode javascript yang otomatis akan menambah beban blog kita. Widget ini Pure CSS maksudnya tidak menggunakan gambar dan juga javascript. Berikut ini adalah contoh penggunaan Widget Share Tanpa Javascript.

Jika sobat ingin memasang widget share seperti gambar di atas bisa ikuti langkah langkah di bawah ini:

1. Login ke akun blogger sobat masing-masing.
2. Pergi ke halaman edit template >> klik edit HTML >> Checklist Expand Template Widget
3. Cari kode <data:post:body/>
4. Copy paste kode dibawah ini tepat di bawah kode yang sudah sobat temukan


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='background:#f9f9f9;border-top:3px solid #bbb;border-bottom:1px solid #bbb;width:100%;height:24px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>

<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#666'>

<strong>Share this article</strong> :

</div>

<style>

.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px;}

.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.rdshare {color: #000 !important; background: #cee3f8; text-decoration: none !important; border: 1px solid #bacde0; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.stshare {color: #fff !important; background: #ea4a24; text-decoration: none !important; border: 1px solid #c43e1e; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.mlshare {color: #fff !important; background: #b8b3ab; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px;}

.sharecon {background: #f9f9f9; padding: 5px; height: 20px; border: 1px solid #BBB;}
</style>
<div style=' float: right;'><a class='fbshare' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twshare' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='plshare' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='rdshare' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Reddit</a>
<a class='dgshare' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Digg</a>
<a class='stshare' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Stumbleupon</a>
<a class='tcshare' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Technorati</a>
<a class='mlshare' expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Mail</a>

</div>

</div>

</b:if>


5. Yang terakhir klik Simpan Template

Mungkin itu saja yang bisa saya sampaikan di dalam post yang berjudul Membuat Widget Share Tanpa Javascript, jika ada yang ingin ditanyakan bisa lewat komentar. Salam Blogger !!!!

Tag : Blogging