Tutorial : Letak/Pasang facebook komen di blog

Assalammualaikum.... (jawab jangan tak jawab ! )


Hari ni, Che'q Uni nak kongsi cara-cara nak buat facebook komen dekat blog..  walaubagaimanapun,tutorial kali ini,hanya untuk TEMPLATE DESIGNER,buat template classic, saya rasa,,belum ada lagi kot?

Baik jangan cakap panjang sebab,bak kata orang tua-tua.. "banyak cakap,banyak bohong"

1. Dashboard --> Design --> Edit HTML ---> Tick Expand Widget Template
2.Dah tick expand widget template? oke,good... ! sekarang,awak dan awak kena tekan F3 dekat awak punya keyboard tu, dan cari kode bawah ni.

div class='comments' id='comments'>

 3. Dapat ?? kalau dah dapat, lojak lerr... hahaa... ok-ok.. BELUM HABISS !! hihii~ ada lagii nii.....
pastu,copy kode bawah ni ehh??

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'> 


#Warna kuning tu,boleh tukar-tukar ikut rasa hati korang lah,sebab tu size dia ^^


4.Pastekan di bawah kode yang korang cari tadi tu .
5.Seterusnya,tekan F3 lagi dekat keyboard korang tu then cari kode

<head>


6.Copy kode ni pula.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='YOUR FB ID' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comments-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script> 

7.Pastekan di bawah kode yang korang cari tu.
8.Tukar perkataan YOUR FB ID dengan nombor ID facebook korang eh ?

ID facebook tu,macamni... contoh ;

http://facebook.com/1234566789/


Kalau yang dah tukar dengan nama tu, err.. saya pun tak pastilah,, boleh dakk paste yang nama tu dekat tempat ID facebook tu.. cer try lah dulu :)
preview dulu.. if takda error, boleh save terus.

9.Belum habis lagii oo.. =,= .. ada lagii !!! one more step jer lagi..tak banyak.. pergi
Design-->template designer --> Advanced --> Add CSS

.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}

10. Pastekan kode di atas di dalam ruangan CSS tu... yang kaler fuchsia tu,boleh tukar ikut suka hati korang lah dengan warna yang korang nak.. ^^

11.Klik apply to blog  dan tengoklah hasilnya :)


Credit to : Lyssa Faizureen

1 comment:

Unknown said...

mantap gan artikelnya