Tutorial : Memasang butang sosial media

Assalamualaikum dan salam 1Dunia, entri ini ditulis oleh penulis jemputan Eizil tuan punya blog Eizil.com semuga perkongsian ini akan menambah lagi ILMU Blogging kita untuk go next level dalam dunia blog. Eizil adalah Blogger hebat yang mencipta Plugin Waktu Solat dan Plugin Retweeter Count. Ini adalah penulisan kedua beliau di blog Denaihati selepas entri “Pengurusan laman blog“. Jom kita baca entri terbaru yang menarik ini :

Kali ini akan berkongsi cara-cara untuk memasang butang sosial media di platform WordPress dan juga platform Blogger. Terlebih dahulu kita akan mempelajari platform Blogger. Buka panel blogger and, klik pada butang setting, pilih template (rujuk gambarajah di bawah).

Kemudian klik pada butang Edit HTML

Anda akan melihat paparan bertanya sama ada anda betul-betul ingin meneruskan ataupun tidak, klik pada proceed.

Kemudian anda akan melihat paparan yang mengandungi kod HTML anda, sila jangan panik jika ini adalah pertama kali melakukan benda ini. Sila buat carian untuk kod berikut.

]]>< /b:skin>

Kemudian tambah kod berikut (kod ini adalah berdasarkan kod sosial media yang dikongsi daripada amanz.my) sebelum kod yang dinyatakan diatas.

#amanz-socialize{float:left; padding-bottom:10px; width:100%}
#g-plusone,
.fb-like,
.tw-tweet{margin:0; padding:10px 1% 9px 1%; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px}
.fb-like{background:#ECEEF5; border:1px solid #9DACCE; float:left; width:48%}
.tw-tweet{background:#E8F3F9; border:1px solid #A4CCE5; width:23%; float:left; margin-left:1%}
#g-plusone{ background:#F9F9F9;  border:1px solid #CCC;  float:left;  width:20%;  margin-left:1%}

Seterusnya klik pada expand widget (rujuk gambarajah di bawah).

Kemudian menggunakan fungsi carian di browser, sila cari kod berikut.

<data:post .body/>

Kemudian tambah kod di bawah selepas kod yang ditunjukkan di atas.

<div id=’amanz-socialize’><div class=’fb-like’><div id=’fb-root’/><script src=’http://connect.facebook.net/en_US/all.js#appId=237900069576725&amp;xfbml=1′/>
<fb:like action=’like’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’ width=’50%’/></div><div id=’g-plusone’><script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’/><g:plusone size=’medium’/></div><div class=’tw-tweet’><a class=’twitter-share-button’ data-count=’horizontal’ data-via=” expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ expr:href=’data:post.url’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/></div></div>

Kemudian anda boleh tekan save template (rujuk gambar di bawah)

Butang sosial media anda telah siap dipasang, jika anda ingin melihat contoh bagaimana butang ini terpapar, boleh rujuk pautan berikut Contoh Butang

Kepada pengguna WordPress, banyak plugin yang menyediakan kemudahan butang sosial ini, namun jika anda ingin menggunakan butang yang sama seperti tutorial ini, anda boleh muat turun plugin Amanz Socialize di pautan berikut » Amanz Socialize Plugin

Selamat mencuba.

---

  1. Butang ini tak boleh terlewat karena rugi kalau tak ada tombol share
    Entri terbaru munir ardi – Selamat Tahun Baru Google Doodle Hari iniMy Profile

  2. Dengan memasang butang sosial media akan bisa membantu dalam meningkatkan tarffik blog kita
    Entri terbaru Blog Keperawatan – Diet Penderita Diabetes MelitusMy Profile

  3. Butang sosial media ini memang penting untuk di pasang di blog kita
    Entri terbaru Blog Keperawatan – Tips Kehamilan SehatMy Profile

  4. Tutorialnya sangat mudah dimengerti
    nice share :)
    Entri terbaru Ramzi – Cara Mengedit / Merubah Struktur Tag Heading Agar SEO FriendlyMy Profile

  5. Aku sendiri pernah share tutorial ini tapi belum pernha pula mencobanya di blog aku, payah juga ni :(
    Entri terbaru Ramzi – Cara Membuat / Memasang Menu Navigasi Breadcrumbs Terindex GoogleMy Profile

  6. nice!!! jumpa jugak tutorial ni
    Entri terbaru ottel – Kempen Save Maryam Untuk Penduduk Islam IndonesiaMy Profile

  7. Coba dulu ya :)
    Entri terbaru Dapah blog – Puasa Detoks Ala Dr OzMy Profile

  8. Hehe..pondok kecil punya tweet tak best..kena tweet manual..macam yang wordpress free, automatik entri terbaru dipost, ia kan ditweet juga..hehe
    Entri terbaru Hafizul – Alhamdulillah – Syukur Ya AllahMy Profile

  9. Saya dah mencoba membuatnya sendiri….alhamdulillah berhasil
    Entri terbaru Dadan – Kegiatan Rehab Bangunan Waqaf Untuk TKA Al-MuhajirinMy Profile