
Sebenarnya fungsi dari tombol share ini sama saja dengan tombol share bawaan template itu sendiri, tapi kembali pada selera kita. Kalau menurut saya pribadi sih tombol share bawaan blogspot kurang begitu besar jadi sekilas tidak terlihat kalau pembaca fokus dengan artikel yang kita tulis. Untuk membuat tombol share yang berbeda ini sebenarnya banyak sekali caranya, namun kadang-kadang tidak pas dengan lebar template kita. Untuk kali ini saya mencoba memberikan salah satu cara membuat dan memasang tombol share yang ada di bawah artikel dan menurut saya sangat sederhana dan mudah.
Tutorial Memasang Tombol Share Di Bawah Postingan Blog
1. Login ke akun blog anda
2. Pilih bagian Template kemudian klik pada Edit HTML
3. Lalu cari kode <data:post.body/>
4. Jika sudah ketemu dan kode tersebut ada banyak, cari kode yang nomer 2 atau nomer 3 lalu Copy dan Paste kode script di bawah ini tepat DI BAWAH kode <data:post.body/> tersebut
<div class='widgetshare'>
Share :
<a class='fcbok'
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twitt'
expr:href='"http://twittter.com/share?url=" +
data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='gplus'
expr:href='"https://plus.google.com/share?url=" +
data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin'
expr:href='"http://www.linkedin.com/cws/share?url=" +
data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno'
expr:href='"http://technorati.com/faves?sub=addfavbtn&add="
+ data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg'
expr:href='"http://digg.com/submit?url=" + data:post.url'
rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a
href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"'
rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div>
|
5. Kemudian cari kode </b:skin> dan Copy Paste kode script di bawah ini tepat DI ATAS kode </b:skin> tersebut
.widgetshare {font:bold 12px/20px Tahoma !important;
background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff
!important; margin-top: 10px;}
.widgetshare a{font:bold 12px/20px Tahoma !important;
text-decoration: none !important; padding: 5px 4px; color: #fff !important;
border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0 5px #FFFFFF;
border: 1px solid #e9fbe9; cursor:pointer; }
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }
|
6. Simpan template anda dan coba dilihat pada artikel apakah sudah muncul apa belum.
Jika tombol share anda yang baru sudah muncul, jangan lupa untuk melihat bagian beranda. Karena kadang-kadang tombol share tersebut ikutan muncul diberanda. Untuk mengantisipasi hal tersebut silahkan baca tautan artikel di bawah ini
Jika tombol share anda yang baru sudah muncul, jangan lupa untuk melihat bagian beranda. Karena kadang-kadang tombol share tersebut ikutan muncul diberanda. Untuk mengantisipasi hal tersebut silahkan baca tautan artikel di bawah ini
Semoga dengan digantinya model tombol share ini, artikel-artikel anda menjadi lebih sering di bagikan ke berbagai macam media sosial. Sampai disini dulu corat-coret yang bisa saya tulis, sampai jumpa pada artikel menarik selanjutnya. Salam.
0 komentar:
- Pengunjung yang hebat pasti meninggalkan komentar
- Komentar IKLAN / LINK AKTIV tidak akan di Publish
- Komentar mengandung unsur SARA tidak akan di Publish
- Komentarlah dengan bijak sesuai topik artikel
- Komentar anda menjadi undangan bagi saya