Dec 23, 2010

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.

11 Comment

Whitey Mommy Fri Dec 24, 12:49:00 AM

hehehe terima kasih akk... :) untuk tutorial ni... memang commey...

Nur SyafiQaH ZulkiflY Tue Dec 28, 10:32:00 PM

salam ukhwah, akak ni pengguna mozilla ea? kalau google chrome, takde COPY IMAGE LOCATION dan COPY LINK LOCATION.. Boleh bantu? Terima Kasih

Eriyza Wed Dec 29, 10:20:00 AM

@Whitey Mommy
Kasih diterima. :)

Eriyza Wed Dec 29, 10:35:00 AM

@Nur SyafiQaH ZulkiflY
Tuk google chrome, camni caranya :-

link profile => klik kanan > copy link address

gambar profil => klik kanan > copy image url

Liyana Rahman Mon Jan 03, 06:56:00 PM

kak. tak kuar la pic nye. bape eh?

Eriyza Mon Jan 03, 11:39:00 PM

@Liyana Rahman
Dah letak kodnya di tempat yg betul?? Cuba semak semula.

Pink Diva Thu Feb 24, 02:58:00 PM
This comment has been removed by the author.
Mr.PinGu Thu Apr 21, 04:26:00 PM

hye salam ukhwah

Eriyza Mon Apr 25, 11:14:00 AM

@Mr.PinGu
Salam ukhwah kembali. :)

sueLeira Sat Jun 23, 02:43:00 AM

thanks sis,,jdi :)

Eriyza Sat Jun 23, 11:11:00 PM

@sueLeira:
Sesama. :)

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.