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