Tutorial#12:Bezakan kotak komen pembaca dengan author - Jiakreatifelt

Jul 3, 2012

Tutorial#12:Bezakan kotak komen pembaca dengan author

salam pagi selasa.Sedar tidak sedar sekarang ini kite sekarang berada di pertengahan bulan syaaban.Jadi tidak lama lagi kite akan menyambut bulan penuh keberkatan.iaitu RAMADHAN!( dah ganti pose kerr..?:])act,aku..tidak sabar menyambut ramadhan bersama suami tercinta malah inilah tahun pertama kami menyambut bulan ini bersama.InsyaAllah;]

tuto ini ditanya oleg DEQLA..terima kasih kerana sudi bertanya.Maksud beliau kotak komen pink and blue tu adalah seperti gambar dibawah( ayat mudah:bagaimana kite nak membezakan kotak komen pembaca dengan author)
ini lah yang dimaksudkan^^
Memandang kan aku memang sedang free ini ..aku buatkan khas untuk mu.(ceeewaaahhhh).marilah kite mulakan sesi pembelajaran :

pertama tama sekali..mulakan dengan BISMILAH..ok.dengan harapan ia menjadi la yerkk>-------<
untuk permulaan,aku nak ajar sikit macam mane nak cantikkan kotak komen anda...mari mari semua..

  •  CTRL F .Cari kod ini
]]></b:skin>
 atau 
 /* comment
  • Jika korang cari dengan menggunakan ]]></b:skin>.sila teruskan mengcopy..kod dibawah ini:
#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(URL IMAGE) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 1px solid #F5A9A9;
}
  • selepas copy..PASTEKAN ia sebelum ]]></b:skin>
  • manakala untuk yang cari menggunakan kod ini pula  /* comment..anda akan dapat kod seperti dibawahkan( lebih kurang lah ):
  • HIGHLIGHTKAN SEPERTI KOD DIATAS ITU DAN KORANG GANTIKAN IA DENGAN KOD DIBAWAH:
#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(URL IMAGE) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 1px solid #F5A9A9;
}
  URLgantikan lah dengan URL IMAGE pilihan masing-masing ini aku bagi background untuk korang:
http://2.bp.blogspot.com/-Jyz5jZEXLfU/T_JYDW1vxNI/AAAAAAAAEQw/WAvLmUcxVis/s1600/159.gif
http://1.bp.blogspot.com/-F5ylb3e0Il0/T_JYBjIbyAI/AAAAAAAAEQo/EJIsiGgeBuQ/s1600/1711646kjg4xr0vwh.gif
http://3.bp.blogspot.com/-9HSMI3PsAK4/T_FNYKQzy-I/AAAAAAAAEPk/Tp_SCwtynfs/s1600/95.gif


http://4.bp.blogspot.com/-w_l6hWjLFvE/T_FOCiue53I/AAAAAAAAEP0/M65bWy5SXTk/s1600/2802926vw2q4lqpvp.gif
  • Try preview dulu..jika tiada masalah boleh terus save.ooPPSS..belum habis lagi ini..
  • OK..dah selesai untuk tuto mencantikkan kotak komen.Sekarang ini aku nak menjawab soalan DEQLA pulak ( tutorial:bezakan kotak komen korang dengan pembaca).Mari kite teruskan sesi tuto ini. 
    • Jom ikuti cara mudah untuk melakukan tutorial ini. Sekiranya code yang aku suruh cari tak ada, kemungkinan besar template korang tidak sesuai.Sabar yekk..kempunan la korang ....
  • Cari kod ini: 
 <dd class='comment-body'>
  • namun sekiranya tidak jumpa..jangan kecewa..try pulak cari kod ini:
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
  • jika dah jumpa..TAHNIAH kepada diri sendiri.Copy kod dibawah ini dan PASTEKAN SEBELUM/DIATAS kod yang korang cari tadi :
<b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p><data:comment.body/></p> </dd> <b:else/>
  •  teruskan mencari: 
<dd class='comment-footer'>
atau
 <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd>
  •  Jika korang cari menggunakan kod ini <dd class='comment-footer'>. copy dan pastekan kod di bawah ini DIATAS kod <dd class='comment-footer'>
</b:if>
  •  kod anda akan jadi seperti ini:
  
  •  namun jika pencarian anda adalah kod ini  <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd>..SILA copy dan pastekan kod ini </b:if> di bawah code <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd>
  • Tutorial ini agak memenatkan sebab panjang sikit ..harap kalian bersabar yerk..CHAIYOKK!!!
  • Teruskan pencarian kod ini 
]]></b:skin>
 atau 
</style>
  •  copy pastekan kod dibawah ini DIATAS kod yang korang cari tadi:
.comment-body-author { background-image:url(URL BACKGROUND GAMBAR);background-position: top center; background-repeat: repeat; border: 1px solid #F455A5; padding: 5px; }
  •  namun jika anda ingin background yang simple,anda boleh tukarkan kod  background-image:url(URL BACKGROUND GAMBAR) dengan ini : background: #F455A5;
  • Preview, jika tiada sebarang error dan masalah. Boleh SAVE. Dan lihatlah hasilnya.
    Jika tidak jadi..mungkin ada salahnyer.TERUSKAN BERUSAHA dan BERSABAR YERK..jangan menangis
  • Jika anda berjaya melakukannya dengan tuto ini..sila2 kongsikan dengan aku yerkkk..^^
YA Allah..sampaikan kami ke bulan ramadhan ..Aminn:]

11 comments:

  1. terima kasih dear.. mmg panjang tuto ni..agk penat kan..tp kalo nk, mesti la 1000 daya.. nnti deqla cuba try test yer..hihi.. :)

    ReplyDelete
  2. ok deqla dah boleh buat..tgk la, cantik ke tak tu? hihi.. x ksh la janji dah dpt buat..thanks dear..owh yer, deqla amek background awk tau. :)

    ReplyDelete
  3. hehe..jia dah ganti pose lum??? heheh...

    ReplyDelete
  4. menarikla..nnt nk try..btw, sis..mcm mana nak buat ada icon kat setiap tajuk post kite dlm list entry sebelah kanan tu..yang kat sidebar akk tu..akk dpt tangkap x maksud sy?
    ^^

    ReplyDelete
  5. @Alynn Nyzaaowh..fham2..yg star tu ker..?nak tahu ker...?nnti akk buat tuto yer..^^

    ReplyDelete
  6. menjadi !tp.....kenapa sy punyer xda beza ?yg sy n komen org lain sama ..hehehehhe

    ReplyDelete
  7. @sHiMi sHinHae~mungkin awak lupe nk tukar bckdround kot...

    ReplyDelete
  8. @jia creatifelt background menjadi ..tp ,antara admin n org luar tu ,sama ..xda beza ..nape ea ?sy tertinggal arahan mana ?huuu

    ReplyDelete
  9. @sHiMi sHinHae~maybe arahan yg last tu awak tak copy paste kod.ce tgk..:]

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

@templatesyard