Menambahkan Informasi Penulis/Author pada Artikel

Informasi penulis/author sangat bermanfaat bagi para pengunjung blog kita, karena mereka dengan mudah dapat mengenali siapa penulis artikel pada blog tersebut. Walaupun bagi sebagian blogger hal ini tidaklah penting tetapi tidak ada salahnya kita menambahkan gadget info penulis ini sebagai bentuk keseriusan kita dalam mengelola blog tersebut. Mungkin jika mewakili kata-kata maka gadget informasi penulis/author ini berbicara "Hai dunia! Inilah blog saya, aku buat, aku tulis, aku pelihara, silahkan baca, silahkan ambil tapi ingat aturan mainnya karena blog juga karya cipta".

Demo Informasi Penulis/AuthorKlik disini untuk melihat demo Informasi Penulis/Author pada Artikel

Integrasi Gadget Informasi Penulis/Author pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:

?

1 2 3 4 5 6 7 8 9

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

Langkah 6
Cari kode dibawah ini:

<data:post.body/>

Langkah 7
Masukan (copy paste) kode (X)HTML dibawah ini diatas kode (jika info ingin diatas artikel) pada langkah 6:

<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 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 <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> meninggalkan komentar</li>
<li>Berlangganan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> via <a href='[link feed rss]' target='_blank' title='Berlangganan Artikel via RSS Feed'>RSS Feed</a> atau <a href='[link feed email]' target='_blank' title='Berlangganan Artikel via Email'>Email</a></li>
</ul>
</div>
</div>
</b:if>

Langkah 8
Ubah link (baca keterangan) dan simpan template kemudian preview blog anda...

Keterangan :
1). Ubahlah link [link profil] sesuai dengan link profil anda (temukan pada bagian dashboard)
2). Ubahlah link [gambar profil] sesuai dengan link gambar profile anda (temukan pada halaman profil)
3). Ubahlah link [link feed rss] sesuai dengan link Feed RSS anda
4). Ubahlah link [link feed email] sesuai dengan link Feed Email anda
5). Jika ingin menempatkan Gadget Informasi Penulis/Author pada bagian akhir artikel:
A. (Menggantikan langkah 6) cari kode dibawah ini:

<div class='post-footer-line post-footer-line-3'>
<!-- Disini kode gadget informasi penulis/author -->
</div>

B. Masukan (copy paste) kode (pada langkah 7) diantara kode pada langkah A
6) Terima kasih kepada Abu Farhan untuk script counter jumlah pembaca
Selamat mencoba dan semoga berhasil. Happy Blogging :)