Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

Tutorial : Kotak Maklumat Penulis

Sebenarnya dah lama nak buat tutorial ini... Ini lah tutorial yang saya pernah cakap pemiliknya mengajar saya melalui chatting di Facebook... Saya ni terkadang ada masa nak buat tutorial... kekadang tak de masa... kalau saya rasa nak taip tutorial, maka saya akan taip... kalau ada sesiapa yang request saya mohon maaf... memang tak sempat nak tunaikan...

Tujuan utama saya buat tutorial ni... saya nak simpan dan sematkan dalam blog saya ni... dan sekaligus untuk share dengan anda... kalau ada yang copy dari blog saya tu jangan lupa ya... put kredit...:p hehehe

hehehe kalau nak lagi cepat... rajin2 google tutorial... kat situ lagi cepat informasi anda akan dapat...:)

Kotak maklumat yang saya maksudkan
Ok...sambung dengan tutorial... jika ada sesiapa yang berminat boleh la follow step di bawah ya... follow betul2 untuk mendapat hasil yang terbaik...

1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi sekurang-kurangnya template anda dah ada backup... ]

2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]

3. Copy dan paste code dibawah, diatas atau sebelum code ]]></b:skin.

/************************************************
* Author Information *
************************************************/
#authorinfo{
margin:0 0 5px;
padding: 4px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;
width:auto;text-shadow:0 1px 0 #FFFFFF;
}
#authorinfo .informasi {
line-height: 16px;margin:0;
padding:2px;
height:120px;
}
#authorinfo .informasi a {
text-decoration:none !important;
}
#authorinfo img {
float:left;
margin: 2px 8px 2px 2px;
padding:0;
width:110px;
height:110px;
border:2px solid #999;
}
#authorinfo .informasi ul, #authorinfo .informasi ul li {
margin:0;
padding:0;
list-style-type:none;
}

** Bahagian ini anda perlu olah mengikut kreativiti sendiri ya... dari segi warna dan bentuk serta segala2nya... kreatif sikit ya...:) kalau tak nak ubah pun.. guna kod diatas ni pun dan cantik dah...:)

4. Seterusnya cari pula kod  <div class='post-footer-line post-footer-line-3'> dan tampal kod ini dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='authorinfo'>
<div class='informasi'>
<a href='[link profil]'><img src='[gambar profil]'/></a>
<ul>
<li>Artikel ini ditulis oleh <a href='[link profil]' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
<li>Diterbitkan pada : <b:if cond='data:top.showTimestamp'><b:if cond='data:post.url'><a expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></b:if></b:if></li>
<li>Dalam kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></li>
<li>Telah dibaca sebanyak <a expr:href='data:blog.homepageUrl'><script src='http://illusionss.110mb.com/mc/view.php' type='text/javascript'/></a> kali, <a href='#comment-form'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a> komen</li>
<li>Langgan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='http://feeds.feedburner.com/WhiteyMommy' target='_blank' title='Langgan Artikel via RSS Feed'>RSS Feed</a></li>
Tambah sebagai rakan di <a href='http://facebook.com/SitiNorKhaironisha' target='_'>Facebook</a> dan <a href='http://twitter.com/WhiteyMommy' target='_'>Twitter</a>
</ul>
</div>
</div>
</b:if><br/>

* Bahagian [link profil], anda perlu masukkan link tentang maklumat diri anda@biodata anda
**  Bahagian [gambar profil], anda perlu masukkan link gambar anda yang anda ingin kelihatan pada kotak itu...
***  Bahagian yang saya highlightkan dengan warna BIRU. anda boleh olah mengikut ayat yang anda suka.
****Akhir sekali bahagian yang saya highligtkan dengan warna KUNING, anda perlu masukkan link anda sendiri...

5. Anda Boleh save [pastikan anda save dahulu kalau preview tak kan nampak sebab kotak ini hanya akan boleh lihat apabila apabila entry dibuka] dan tengok hasilnya... Selamat Mencuba.

Kredit Kepada: Eriyza Qistina

16 Comment (s):

  1. tengkiu coz share tutor nih. akan try buat..huhu tengkiu again yer...

    ReplyDelete
  2. kak sha, yana buat but then x kuar apa2 pun.. =(

    ReplyDelete
  3. @liyanaziz
    yana... copy paste betul2... hm... then save bru boleh nampak... kalau preview tak nampak...

    ReplyDelete
  4. I Did this many times..but it still not working..

    its not for me agaknya..

    btw..thanx for sharing..

    ReplyDelete
  5. da carik footer.xde pn dlm templates sy :( tapi nak buat jugak !

    ReplyDelete
  6. salam sha..akk dah buat jadi tapi ganbar tak keluar lah...saiz dan format apa yer gambar yang boleh di letakkan disitu ?

    ReplyDelete
  7. @Puanbee
    apa2 format pun boleh...cuba pakai gambar lain...tapi saiz 110X110... hm... nak kecikkan lagi gambar...ubah je kat bahagian ni...

    ReplyDelete
  8. mommy...x faham la yg link profil tu..

    ReplyDelete
  9. whitey mommy, pasal link tu, link apa yg nak kena ambil? tak faham2. link profile blogspot ker?

    ReplyDelete
  10. @Iszuan
    profile blogspot pun boleh...ataupun kalau wat biodata kat entry...atau pages...boleh je trus pakai link tu...:)

    ReplyDelete
  11. div class='post-footer-line post-footer-line-3'> mummy, yang ni tak jumpe pun :(

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. huhu..dah buat tp xdpt..dah copy paste betul3..tp x juga..huhuh

    ReplyDelete
  14. Alhamdulillah, dah buat dan menjadi. Cuma apa code untuk kecilkan kotak maklumat penulis tu ya? Btw, terima kasih kerana berkongsi ilmu :)

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™