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.
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 !!!!
Jika sobat ingin memasang widget share seperti gambar di atas bisa ikuti langkah langkah di bawah ini:
- Login ke akun blogger sobat masing-masing.
- Pergi ke halaman edit template >> klik edit HTML >> Checklist Expand Template Widget
- Cari kode <data:post:body/>
- Copy paste kode dibawah ini tepat di bawah kode yang sudah sobat temukan
<b:if cond='data:blog.pageType == "item"'>
<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='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twshare' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='plshare' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='rdshare' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Reddit</a>
<a class='dgshare' expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Digg</a>
<a class='stshare' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Stumbleupon</a>
<a class='tcshare' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Technorati</a>
<a class='mlshare' expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Mail</a>
</div>
</div>
</b:if>
Copy
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 !!!!
0 Komentar untuk "Membuat Widget Share Tanpa Javascript"