18 March 2011

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:

request-penulis_blog

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 :

info-penulis_blog

Silahkan Edit sendiri Tulisan yang berwarna biru

7 comments:

  1. thanks y gan ats balasan requestnya.. saya coba dulu y...

    ReplyDelete
  2. Mas rey saya minta bantuanya hehehehee.. :D

    saya sudah mencoba seperti cara yang anda tulis tapi ada kendala yaitu untuk "Artikel ini ditulis oleh :" dan "Diterbitkan pada hari :" masih belum bisa tampil di halaman single page saya? mohon bantuanya..

    ReplyDelete
  3. @Harapan Putra Blogspot, kalau "Artikel ini ditulis oleh :" tidak tampil karena anda salah memasukkan LINK PROFILE ANDA. coba anda masuk ke profile lalu copy linknya (contoh link profile : http://www.blogger.com/profile/09423836460737125795). Sedangkan untuk "Diterbitkan pada hari :" coba anda masuk di page element pada pengaturan posting ada pilihan time stamp diklik kotak kecilnya, mudah-mudahan berhasil.

    ReplyDelete
  4. Mas rey, terimakasih ya.. widget informasi blog-nya sudah berhasil saya pasang di blog saya...

    ReplyDelete
  5. @Harapan Putra Blogspot, sama-sama sudah sewajarnya kita saling berbagi

    ReplyDelete
  6. hari n tanggal kok gak keluar sam???

    ReplyDelete

Note: Only a member of this blog may post a comment.