Tutorial Membuat Tombol Share Facebook pada Blog

Diposting oleh Indra Wirawan on 9.13.2012


Get free daily email updates!

Follow us!

Tombol share to facebook
Tutorial Blog-Dinamika dalam dunia blogger sungguh sangat cepat perkembangannya. Banyak widget-widget terbaru yang lahir untuk melengkapi, atau pun mempercantik tampilan blog Anda. Ini adalah perkembangan ke arah yang positif jika saya, kita dan Anda semua dapat memaksimalkan keuntungannya secara optimal.

Tutorial blog yang ingin sebenarnya saya share kepada Anda semua kali ini adalah widget atau tombol share ke beberapa social media seperti Facebook.com, twitter.com, Google+, dan masih banyak lagi yang tidak sempat saya sebut satu per satu.

Tombol share ke facebook, atau social media lainnya dapat Anda letakkan di blog Anda supaya segmentasi pembaca blog Anda semakin luas. Widget-widget seperti ini akan sangat berguna buat Anda, dengan kehadiran widget atau tombol share ke beberapa social media ini juga merupakan ciri dari beberapa ciri dari Template SEO Friendly yang pernah saya utarakan pada postingan saya yang sebelumnya membahas tentang Template SEO Friendly. Nah, bagi yang belum baca langsung saja kunjungi postingan blog saya yang berjudul "Mengenal Template SEO Friendly".

Tombol share ke facebook, tombol share ke twitter, dll ini menurut saya semoga akan berguna bagi Anda yang menggunakan template blog standar kemudian juga ingin menambahkan tombol share seperti ini. Template standar yang disediakan oleh blogger.com sebenarnya sudah ada, cuman biasanya kurang diminati karena tampilannya sederhana dan kurang menonjol.
Tutorial pembuatan tombol share ini sebenarnya adalah hal yang mudah Anda lakukan, kalau mau ke situs resminya, langsung saja Anda menuju 2 situs berikut untuk mendapatkan widget share sosial media ini.

Tapi, tenang saja. Di sini juga akan memberikan tutorial atau langkah-langkah yang dapat Anda tempuh untuk menambahkan tombol share ini, karena jika Anda berkunjung ke kedua situs penyedia widget di atas biasanya prosesnya agak lebih rumit sedikit. Nah, makanya saya postingkan artikel ini dengan harapan dapat memudahkan Anda. Berikut adalah langkah-langkah atau tutorial yang Anda lakukan untuk memberikan tombol share pada blog Anda  (Catatan: widget share to social media yang saya berikan berasal dari situs Addthis yang saya modifikasi buat Anda):
1. Seperti biasa, pastikan Anda sudah log in di account blogger.com Anda.
2. Setelah itu, Anda ke bagian Template (Catatan : sebelum meng-klik Edit HTML, Anda dapat melakukan tindakan antisipasi dan hati-hati dengan mengcadangkan dulu Template Blog Anda yang ingin dimodifikasi)
3. Klik Edit HTML
4. Kemudian klik Lanjutkan, jangan lupa centang Expand Template Widget
5. Setelah itu tekan pada keyboard Ctrl + F, untuk mencari kode HTML yang ingin Anda edit nantinya.
6. Cari kode berikut :

<div class='post-header-line-1'>

Catatan : terkadang kode di atas terdapat lebih dari satu, pilih yang pertama.

7. Kemudian, setelah menemukan kode HTML di atas, kemudian tambahkan kode berikut tepat setelah kode di atas :

<span class='post-author vcard'><div style='float:right;'><!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=xa-5045c074352fdb1e"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-5045c074352fdb1e"></script><!-- AddThis Button END --></div></span></span><br/></div>
Catatan :
Kode HTML yang saya tandai warna merah, artinya Anda dapat mengubahnya sesuai kebutuhan Anda. Right : untuk kanan, left : untuk kiri, dan seterusnya.
Kode HTML yang saya tandai warna biru, artinya peletakkannya tidak mutlak harus di situ. Biasanya, banyak terjadi kesalahan atau hasil edit-anya error. Makanya, yang bermasalah sebenarnya adalah kode HTML yang saya telah tandai warna biru. Coba, pandai-pandailah mainkan kode itu. Tapi, kalau sudah tahu caranya mengedit, ya syukurlah....

7. Sebelum Anda mengeksekusi untuk menyimpannya, baiknya Anda klik tombol  Pratinjau dulu untuk memastikan bahwa Anda melakukan Tutorial ini dengan benar. Ok.
8. Setelah benar-benar sesuai, silahkan klik Simpan, untuk eksekusi terakhir.

Nah, gampangkan cara menambahkan tombol share social media : Facebook.com, twitter.com, Google+, dll ke dalam blog Anda.


Berikut adalah tutorial blog, yang dapat Anda baca juga atau aplikasikan dalam blog Anda sebagai tambahan pengetahuan buat Anda :
1. Tutorial Membuat Text Area
2. Tutorial Membuat Translate Tool Bergambar
3. Tutorial Membuat Spoiler pada Blog
Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.
Nah, jika Anda mengambil tulisan ini. Mohon selalu cantumkan link HTML-nya. Boleh diambil, tapi jangan di copast 100 %.

Posted by : Mahir Blogger

Artikel Tutorial Membuat Tombol Share Facebook pada Blog diposting oleh Mahir Blogger pada 9.13.2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar. Jika diperlukan, Artikel ini bisa disebarluaskan melalui blog Anda, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih.
Comments
12 Comments
Widget Comment FB-Blog
pengobatan tradisional mengatakan... Reply Comment

artikel yang sangat bagus sob, ...

Indra Wirawan mengatakan... Reply Comment

thanks...

Acink bahtyar mengatakan... Reply Comment

mantab sobbb...

Indra Wirawan mengatakan... Reply Comment

@Acink bahtyar, okey. Makasih

mantau mengatakan... Reply Comment

sip mas bro, saya coba ya, terimakasih sudah berbagi, salam kenal :D

Indra Wirawan mengatakan... Reply Comment

@Mantau, salam kenal juga

Song Video mengatakan... Reply Comment

sip boss

Indra Wirawan mengatakan... Reply Comment

@Song Video: ok

fitria tri admaja mengatakan... Reply Comment

mas mau tanya niih , ini ada masalah penempatan kode nya , ak edit hapus kode yg bertanda biru tetep aj gk bisa mohon pencerahan nya

taryana mengatakan... Reply Comment

bguss gannt tolong ntar share nya ma gambarnya

Viko Crenze mengatakan... Reply Comment

nice posting om

Neunano mengatakan... Reply Comment

maksih mas bro tutorial nya

Posting Komentar

Terimah kasih atas Kunjungan Anda di Mahir Blogger. Silahkan Anda berkomentar, bertanya, memberikan saran, tanggapan, testimoni, atau bisa saja sekedar blogwalking. Silahkan pilih, Anda mau berkomentar dengan menggunakan Account Google, Live Journal, Wordpress, Type Pad, AIM, Open Id, Name/Url Anda bahkan bagi pengguna Anonim. Mohon berkomentar yang baik-baik, demi kemajuan blog ini. Komentar atau tanggpan yang terlambat saya respon mohon dimaafkan karena kekurangan waktu saya untuk selalu on line, banyak juga pekerjaan di dunia off line. Hehehe...

Related Posts Plugin for WordPress, Blogger...