Hamzah Jamad

Blogger. Programmer. Technologist.

Ubahsuai ruang komen blogger

   Seperti biasa aku sebenarnya malas mau update nie, tapi oleh sebab banyak kawan-kawan aku yang tanya pasal benda nie, so aku akan wat entri pasal benda nih..
...err..Apa benda yang aku merapukan nie?.. emm.. tukar ruang komen blogger menjadi macam stail fb punya tuh..huhu

  First sekali,korang boleh jumpa berlambak laman web yang mengajarkan cara-cara bagaimana mau buat benda nih. Tapi
di sini aku bagi satu laman web yang bagus la, jadi xpayah korang penat mau cari lagi di google..
korang klik pic kat bawah nie ok?.. korang  baca detailnya bek-bek, kalau ada pa-pa xpaham, korang boleh tanya aku k?..


  Tapi, sekali dalam entri nie, aku sertakan sekali cara bagaimana mau ubahsuai kod komen stail fb yang korang dapat dari laman web tadi tuh..

  Kenapa mau ubah? mungkin sekali, latar belakang blog  korang gelap sangat, so, pa bila orang pos komen, komen tuh xnampak..jadi di sini kita akan ubahsuai, and letakkan latar belakang yang berbeza daripada blog korang tuh, agar lebih nampak lagi.... ataupun mungkin juga perkataan "comment" tuh xsesuai ngan diri korang and korang mahu try pic yg korang edit sendiri untuk gantikan 2k "comment" tuh..

 Ok kita tengok dulu kod asalnya k?.. n ak mau terangkan sket pasal kodnya nih...

nih kod asalnya dy k?

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>
<div>
<fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url'   expr:xid='data:post.id'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> 
<img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b>
</div>
</b:if>


ok, skang nih kita tengok guna gambarajah pulak, apa yang kod-kod tuh wakili..


..erm.. korang pandai-pandai la interpret r.. korang bandingkan gambar rajah bahagian kanan nih ngan kod yang ada kat atas tuh..aku memang sudah bahagikan awal-awal lagi ikut fungsinya tuh..

Secara ringkas, kod asal tuh xmempunyai sebarang background pun, transparent la kalau org sabah bilang..hehe.. jadi, masalah timbul apabila background yang korang guna tuh warna hitam, coz tulisan untuk komen yg telah di pos pun warna hitam..

Jadi untuk mengatasi masalah ini, kita akn letakkan latarbelakang di situ..
caranya?.. Korang tekan ctrl+f, n cari kod nih

<fb:comment

seblum kod kat atas ni, korang ada jumpa x kod macam bawah ni?

<div>

ok, kat situ, kita akan tambahkan satu kod untuk letakkan latar belakang n wat satu wat border luar..

style='
background-color: #C0C0C0;

border:
groove 5px #550000;'

so, dy akan jadi macam nih.. huhu

<div style='background-color: #C0C0C0;border: groove 5px #550000;'>
Erm secara keseluruhannya, dia jadi macam nih


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>
<div style='background-color: #C0C0C0;border: groove 5px #550000>
<fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'>
<img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b>
</div>
</b:if>


...erm.. ok la, cukup setakat nih la dulu, aku mau p men fesbuk pulak..huhu, t len kali, aku gtw pasal macam mana mau tukar "comment" yang ada kat situ ngan pic len pulak.. tuh pun kalau aku ada mood la..hehe.. salam..

sory k, klw xdapat paham-paham jugak, mungkin memag aku yang xpandai menerangkan nie..huhu.. mesti banyak beljar lagik nih.. tapi, korang boleh tanya aku kat fb ku k?.. salam