Saturday, December 3, 2011

Tutorial 127 : Background Berbeza antara Admin dan Pembaca.

Assalamualaikum.

Di pagi yang syahdu ibarat musim sejuk di bumi Bangi ini nak tulis tutorial yang simple lagi menarik untuk dipelajari oleh anda semua. Kali ini nak ajar untuk bezakan background komen antara penulis blog/admin dengan komen pembaca. Dengan cara ini memudahkan korang membalas komen dan memudahkan reader korang melihat komen korang. Tak la juling biji mata nak cari komen pembaca dan komen korang. Contohnya seperti gambar di bawah :

Cuba perhatikan, komen aku background berbeza dengan komen pembaca.
Sangat sistematik kan?

Jom ikuti cara mudah untuk melakukan tutorial ini. Sekiranya code yang aku suruh cari tak ada, kemungkinan besar template korang tidak sesuai. Harap maklum.

BAHAGIAN 1 ( setting )

1. Sign in Blogspot > Design > Edit Html > Tick Expand Widget Templates

2. Cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
kalau tak jumpa code di atas, cari yang ini pula :

<dd class='comment-body'>
3. Copy code di bawah dan paste di atas code 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/>
4. Cari lagi code di bawah,  Ctrl F sahaja


<dd class='comment-footer'>

5. Dah jumpa? Copy di bawah, dan paste di atas code yang korang cari tadi ( nombor 4 )

</b:if>

6. Kalau korang tak jumpa code <dd class='comment-footer'> korang cari code ini pula :


<span class='deleted-comment'><data:comment.body/></span> <b:else/> <p> <data:comment.body/> </p> </b:if> </dd>



7. Dan paste code </b:if> di bawah code tadi.( nombor 6 )



Rehat kejap. Penat ye cari code. Agak panjang sikit tutorial ini. Baca elok-elok ye.





BAHAGIAN 2 ( meletakkan fungsi background )

1. Selepas korang membuat tutorial bahagian 1, korang kena buat bahagian 2 untuk meletakkan fungsi background tersebut. Ikuti langkah-langkah seterusnya.

2. Cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!

]]></b:skin>

kalau tak jumpa code tersebut, cari code ini pula :

</style>

3. Pilih sama ada korang nak letakkan warna atau background di dalam kotak komen. Pilih satu sahaja.


4. Copy code fungsi warna atau fungsi background dan paste di atas code yang korang cari di langkah Nombor 2 tadi.


Untuk Meletakkan Fungsi Warna Sahaja :

.comment-body-author {
background: #F455A5;
background-repeat: repeat;
border: 1px solid #F455A5;
padding: 5px;
}

Untuk Meletakkan Fungsi Background Sahaja :

.comment-body-author {
background-image:url(URL BACKGROUND GAMBAR);background-position: top center;
background-repeat: repeat;
border: 1px solid #F455A5;
padding: 5px;
}

4. Apa yang korang perlu ubahsuai?


#F455A5 - untuk warna background korang. 
#F455A5 - untuk warna border korang
URL BACKGROUND GAMBAR - tukar kepada URL gambar korang

1px - ketebalan border korang ( lagi banyak bilangan lagi tebal ) 
solid - jenis border korang boleh tukar kepada dashed, dotted
Nak ambil code warna boleh ke SINI

5. Preview, jika tiada sebarang error dan masalah. Boleh SAVE. Dan lihatlah hasilnya.

Buatlah dengan tekun ye. Tak jadi jangan nagess.

23 comments:

  1. kak farah...ce tgk iza punye blog...kat bahagian komen tuh kan,die jadi transparent..kak farah ada tuto die tak cme nak bagi die cantum ngn post entri macam kak farah nye kotak komen nih??

    plizzz...tlg iza... :(

    http://chomeieyza.blogspot.com

    ReplyDelete
  2. @♥Cik ieyza Nano♥

    dia jadi macam tu sebab xletak border dlm outer wraper

    ReplyDelete
  3. @♥Cik Nurfarah♥

    dah buat dah kak farah..tapi tak jadi pon...mlm tadi puas cube try wat..tapi tak bole..yang untuk body kat entri nih iza ikot tuto kak farah...tlg iza...cmne ye??

    ReplyDelete
  4. @♥Cik Nurfarah♥

    adeii..macam mane nak cari kod tuh ye...kak farah leh tlg aja?? umm....

    ReplyDelete
  5. @♥Cik ieyza Nano♥

    Nanti kalau ada ms lapang akak buat tutorial. Nak p makan ni. Lapar hahaha

    ReplyDelete
  6. @♥Cik Nurfarah♥

    hihii..oke kak farah..iza folow blog akak slalu.. :)
    jgn lupe ye wat tuto..mgharap sgt2...time kasih kak farah...cantik blog akak.. ^.^

    ReplyDelete
  7. akak, saya buat sume arahan ikut turutan ...tpi dye hnya naik line kcil kat c0mment syer....n tulisan saya jdi kecik..knape yer.. ??

    ReplyDelete
  8. klaw nak cari background yang bnyak2 kat mner ?

    ReplyDelete
  9. Assalamualaikum ...
    Snak minta tolong ...knapa sy buat tuto comment box slalu x jadi ehhh?sy dah ikut semua arahan ...
    waaaa ... sedey nyaaa ... bleh tolong x ?

    ReplyDelete
  10. terima kasih dengan tutorial yang diberikan..

    ReplyDelete
  11. akak, knp bile org nak komen blog saye die keluar preview..dah la preview die keluar sekerat je..
    tlg plzzzzz..<3

    ReplyDelete
  12. akak, knp kalo org nak komen blog saye die keluar preview..dahla la preview tu sekerat je..
    tlg plzzzzz.. <3

    ReplyDelete
  13. akak, mcm mana nak buat post comment kat dlm window lain mcm akak buat nie??plzzzz..jwb <3

    ReplyDelete
  14. saya dh buat & jadi tapi mcm mane nak kasi kotak die sama panjang dengan yang original?kotak komen pembaca yg original.komen dr penulis pendek sikit.boleh tolong?

    ReplyDelete
  15. knp, templatenya blng enggak ada masalah, tp wkt pratinjau, enggak jadi?

    ReplyDelete
  16. Maaf akak.Sorry ganggu.NAk tanya skit bleh?Mcm mna akk buat note ngan cartoon kat bawah blog akk?Untuk bgi akk lbih faham,yg ucapan terima kasih kerana melawat blog Cik Nurfarah SIla datang lagi...Akk bleh buat tutorial untuk demand saya tdi?Harap permintaan sya segera dipertimbangkan...Sya jnji sya akn byar credit untuk akk.Please...

    ReplyDelete
  17. Okay menjadi pun! Terima kasih tau ajar ni Kak Farah :)

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.