Blog ini ditubuhkan oleh seorang remaja yang ingin mencari identiti zaman keremajaannya.Pelbagai info menarik yang anda boleh cari di dalam blog ini..

Monday, August 8, 2011

Tutorial Untuk Blog - Letak Facebook Comment Box Dalam Blog

Assalamualaikum dan salam sejahtera semua..

Rasanya dah lama aku tak buat sebarang tips dan tutorial dekat blog aku ni kan..Patutlah ramai blogger PM aku tanya pasal perkara ini..Bukan aku tak nak buat,tapi biarlah orang bagi tahu aku dulu dia nak [ Tips ] atau [ Tutorial ] macam mana,barulah aku akan buat..Ini semua sebab banyak lagi kan blog yang ada tutorial dan tips-tips yang menarik di luar sana..

Apa itu " Facebook Comment Box dalam blog " ? Mungkin ada yang tak tahu atau masih tak paham lagi..So,aku dah sediakan screen shot daripada blog aku ni..

 Yang ni untuk Comment Box Blogger

Yang ni untuk Comment Box Facebook

Ok..Untuk tutorial dia :

1. Pergi ke bahagian design => Edit HTML => Tick Expend widget templates => Download full templates (sebagai langkah keselamatan).

2.  Cari (Ctrl+F) code <div class='comments' id='comments'> , kemudian paste kan code dibawah ni selepas code <div class='comments' id='comments'> tadi.

<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='2' width='400'/>
  </b:if>
 </div>
<div class='comments comments-page' id='blogger-comments-page'>

3. Kemudian pastekan code dibawah ini sebelum </head> (tukar YOUR FB ID HERE  ke ID korang tersendiri, )

Tak tahu apa itu FB ID ? tengok gambar di bawah ini...


    <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 HERE' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(".comments-tab").addClass("inactive-select-tab");
      $(selectTab).removeClass("inactive-select-tab");
      $(".comments-page").hide();
      $(selectTab + "-page").show();
    }
    </script>


4. Kemudian cari perkataan "  /* Comment " dan letakkan code dibawah.

.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;}


Penting : susah untuk mencari coding ini.. /* Comment tapi korang boleh cuba cari " *comment " dulu..sebab code ini berdekatan..:)

5 . Jangan SAVE dulu...Pastikan anda PREVIEW dulu ye..:)




korang nak rm200 dengan cara paling mudah ? just bagi gambar dan korang mungkin dapat bawa balik
rm200 + hadiah sponsor + hadiah misteri + barangan..

saya juga mengharap jasa baik sesiapa yang ingin sponsor agar contest ini akan bertambah menarik dan meriah..pihak sponsor juga akan mendapat beberapa kelebihan...

berminat ?? klik sini




..Senarai Sponsor..

1 ) Blogshop AnisUmbrella - Necklace
2 ) Blogshop Shawl Najihah - Pashmina
3 ) Admin Dunia Lelaki Maskulin - Ruang Pengiklanan x 3 bulan
4 ) Admin Diary Amni - RM50 cash ( Hadiah Utama )



Comments
16 Comments

16 comments:

Firdaus Life said...

dah buat.. thanx

Prince said...

@Freaky

sama2...:)..jngn lupe share ye..

Unknown said...

tak jumpe /* Comment =(

Prince said...

@bumbleB

tak buat pun xpela..tu setting untuk customize je...:)

apdm said...

salam

erkkkk..yang ni dah buat...tp nak mintak tolong ajar yang ni boleh x? huhu

bila networkedblogku tidak berfungsi..


sebab dah banyak kali saya buat, tp still tidak menjadi...selalu ckp feed url salah..huhu


terima kasih

si para para said...

makin canggih blog skarang ni kan..

Unknown said...

code d step 4 tu nak letak bawah /* Comment ke atau atas ?

PCL said...

salam, thanks bro..dah pasangkannya di blog saya...follow anda.

LIP_ISIUKM said...

bro, kalu nak buang terus komen blogspot tu camne?

Zul fattah said...

bro..x boleh r.. tak jadi..apa yg prob.. eh?
id blog aku macam ni bro..
boleh ke?
http://www.facebook.com/zul.f.saleh

Unknown said...

ok menjadi..:)
klau tak boleh cari coding *comment tu..
boleh guna yg ni je..
#comments .comment-author {

untuk id yg bukan nombor boleh guna nama yg dijadikn sebagai id tu..^_^

Amalina lee said...

#comments .comment-author { xde jugek lah huuuhu

Huahaha said...

Yehh. Terima Kasih bro. menjadi gak ahkirnye. hehe

Maira Quee said...

nak tanye nape jd mcm laen??
tapi jadi la..cmne nk jdkan mcm prince punye komen..tolong respon ye..ce tngok blog maira jd cmne..

Wawan Faiz said...

yessss!!! At last aku dapat gak customize benda alah ni.. jadi masalah sbb aku cari *commnent xjumpa2..

betul kata 'Panggil Aku Han', boleh guna #comments .comment-author { ... korang find jer #comments .comment-author { then korang copy step terakhir tu, korang pastekan sebelum #comments .comment-author { .. selamat mencuba.. btw, thank..

this my blog : www.wawanfaiz.com

Farhanhanif91 said...

mcm mana nk buat tab tu jd mendatar? aku punya jadi atas bawah pulak...bole tlg tak?

lg 1 mcm mana nk hide salah satu jenis komen tu? samada nak hide yg fb atau blogger punya comment...aku buat dua2 keluar je..bila klik baru hide salah satu...

harap paham dgn prtanyaan ni...=)

 
Copyright (c) 2011 Dunia Seorang Remaja. Design by Mas Ahmad Safwan

Official Blog and Facebook.