Hello sahabat blogger, Kali ini saya mau menulis sesuatu tentang mengenai "Cara Pasang icon "Like this" Facebook di Blog Kamu". Kalau kamu maniak FB (facebook) pastinya sudah tidak asing lagi dengan yang namanya icon "" ini, Jika selama ini kita hanya melihat ataupun memanfaatkannya di Jejaring sosial tersebut saja kali ini kita akan menerapkannya pada Blog kita.



Sebagai bahan artikel, contoh kamu bisa lihat di atas Blog ini, daripada kelamaan kita langsung mulai saja tutorialnya...



Copy kode dibawah ini :

1. Jika pada format penempatannya kita pilih dibawah judul postingan, maka langkah pertama yang harus kamu lakukan adalah:


2. yang pertama kamu login dulu ke akun blog kamu kemudian pilih Rancangan klik menu Edit HTML , kemudian beri tanda ceklist pada kolom "expand widget template".


3. Cari kode dibawah ini bila kamu pusing untuk mencarinya coba kamu tekan CTRL + F :



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

4. Setiap template tidaklah sama, namun kamu tinggal menyesuaikan dengan kode dari template kamu.


5. Selanjutnya pastekan kode diatas yang sudah kamu copy tadi tepat dibawah kode yang diatas,

<div style="background:#fff; float: left; margin: 5px 0px 5px 10px; padding:5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:570px; height:25px;'/>

</b:if></div><br/>

<div class='clear'/>

maka hasilnya akan seperti ini :

<div class='post-header-line-1'/>
<div style="background:#fff; float: left; margin: 5px 0px 5px 10px; padding:5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:570px; height:25px;'/>
</b:if></div><br/>
<div class='clear'/>


Kode yang berwarna merah dan Kuning kamu bisa rubah sesuai keinginan kamu

Selanjutnya tinggal disimpan..

• Penempatan dibawah artikel

1. Jika pada format penempatannya kita pilih dibawah artikel postingan, maka langkah pertama yang harus kamu lakukan adalah:


2. Kamu tinggal Cari kode dibawah ini:



<p><data:post.body/></p>

3. Jika pada template kamu menggunakan "Readmore " , cari kode diatas yang keduanya dan letakkan tepat dibawahnya.


4. Selanjutnya pastekan kode diatas yang sudah kamu copy tadi (baca kode.1) tepat dibawah kode diatas, maka hasilnya akan seperti ini :



<p><data:post.body/></p>
<div style="background:#fff; float: left; margin: 5px 0px 5px 10px; padding:5px;"><b:if cond='data:blog.pageType != &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:570px; height:25px;'/>
</b:if></div><br/>
<div class='clear'/>

5. Selanjutnya tinggal disimpan..

nb: Pada kode dibawah ini menjelaskan beberapa format tambahan untuk tampilan dari icon tersebut, kamu bisa merubahnya sesuai dengan keinginan kamu.

<div style="background:#fff; float: left; margin: 5px 0px 5px 10px; padding:5px;">

pada kode :

width:570px; = Lebar dari kolomnya, kamu bisa sesuaikan dengan selera kamu.

height:25px; = tinggi dari kolomnya, bisa juga kamu ubah sesuai dengan selera kamu.

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------