Friday, December 18, 2015

Cara Memasang Tombol Share Keren Di Bawah Artikel Blog

Salam sejahtera sobat laresawoo. Hampir semua blogger ingin tampilan blognya menarik untuk menarik pengunjung agar betah berlama-lama disitu. Mulai dari mengganti template, mengganti warna, memberi efek salju, memberi efek musik, merubah tampilan tombol share dibawah artikel dan lain sebagainya. Jika kita bertindak sebagai pengguna bukan pembuat, maka bisa dipastikan apa yang kita tambahkan pada template blog tersebut tidak selalu pas. Dalam artian pas dari segi posisi maupun tampilan, kita perlu melakukan eksperimen-eksperimen agar apa yang kita tambah atau rubah pada template tersebut bisa cocok dan pas dengan harapan. Untuk memperindah blog, kali ini saya ambil contoh membuat tombol share di bawah postingan yang berbeda dari tombol share bawaan dari template yang kita gunakan.

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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + 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
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.
Previous Post
Next Post

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