Memasang Widget Informasi Penulis Blog

Sebetulnya Widget Informasi Penulis Blog ini sudah banyak diposting oleh blog-blog yang menyajikan tutorial blogger. Asal anda rajin berselancar di internet dan selalu mengikuti perkembangan blog-blog yang senior, maka Widget Informasi Penulis Blog pun akan dengan mudah kita dapatkan.

Namun demikian tidak ada salahnya saya postingkan Widget Informasi Penulis Blog ini selain sebagai jawaban dari teman blogger yang request cara bikin Widget Informasi Penulis Blog sekaligus sebagai koleksi pribadi.

Request dari sobat Fikri ini saya abadikan dalam gambar berikut ini:

Nah untuk cara membuatnya :

1. Masuk (Login) Blogger
2. download full template
3. Klik Expand Widget Templates
4. Cari kode ]]></b:skin>
5. Letakkan kode berikut, di atas kode  ]]></b:skin>
   

   /* Informasi Penulis*/
   #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:80px;}
   #authorinfo .informasi a {text-decoration:none !important;}
   #authorinfo img {float:left;margin: 2px 8px 2px 2px;padding:0;width:72px;height:72px;border:2px solid #999;}
   #authorinfo .informasi ul, #authorinfo .informasi ul li {margin:0;padding:0;list-style-type:none;}

6. Kemudian cari kode <div class='post-footer-line post-footer-line-3'>
7. masukkan kode berikut di bawah kode <div class='post-footer-line post-footer-line-3'>
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='authorinfo'>
   <div class='informasi'>
   <a href='LINK PROFILE ANDA'><img src='LINK GAMBAR PROFILE ANDA'/></a>
   <ul>
   <li>Artikel ini ditulis oleh <a href='LINK PROFILE ANDA' target='_blank'><b:if cond='data:top.showAuthor'><data:post.author/></b:if></a></li>
   <li>Diterbitkan pada hari : <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 <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if> kali meninggalkan komentar</li>
   <li>Ayo Berlangganan artikel blog <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='LINK FEED RSS ANDA' target='_blank' title='Berlangganan Artikel via RSS Feed'>RSS Feed</a> atau <a href='LINK FEED EMAIL ANDA' target='_blank' title='Berlangganan Artikel via Email'>Email</a></li>
   </ul>
   </div>
   </div>
   </b:if>

8. Simpan dan lihat hasilnya

Jika berhasil maka hasilnya seperti gambar di bawah ini :

Silahkan Edit sendiri Tulisan yang berwarna biru