Kotak Penulis Atas Kotak Komen

Beberapa hari lalu, penulis ditanya tentang kotak penulis yang penulis paparkan di bahagian atas kotak komen di blog ini. Tahun sudah, penulis ada menerbitkan topik kotak pesanan admin atas kotak komen. Justeru, pos ini juga masih berkisar tentang intipati yang sama tetapi caranya sedikit berbeza. Seperkara lagi, kotak penulis ini lebih kemas dan menarik.


1. Login ke Blogspot.

2. Pilih Layout - Edit HTML (Tanda kotak Expand Widget).

3. Download Full Template sebelum mengedit blog.

4. Cari ]]></b:skin> dan tampal kod ini di atasnya.


/************************************************
* 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;}

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

<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://abu-farhan.co.cc/counter/counter.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/eriyza' target='_blank' title='Langgan Artikel via RSS Feed'>RSS Feed</a></li>
Tambah sebagai rakan di <a href='http://facebook.com/eriyza' target='_'>Facebook</a> dan <a href='http://twitter.com/eriyza' target='_'>Twitter</a>
</ul>
</div>
</div>
</b:if><br/>

5. Buka Dashboard di tab baru.



6. Klik kanan pada gambar, pilih copy image location dan tampal (paste) di bahagian gambar profil yang berwarna oren.

7. Klik kanan pada View Profile, pilih copy link location dan tampal (paste) di bahagian link profil yang berwarna biru. Ada dua tempat yang perlu anda tampal.

8. Tukarkan semua url yang berwarna ungu dengan url anda sendiri.

9. Save template.

Fahamkan tutorial ini betul² sebelum anda mula mengedit blog anda. Selamat mencuba. Semoga berhasil.

Ketika topik ini penulis pelajari, penulis tidak menyimpan blog sumbernya. Penulis akan meletakkan kreditnya kemudian sekiranya blog tersebut penulis jumpai semula.