Cara Membuat Kotak Author dibawah Postingan - Salah satu cara membuat blog anda agar terlihat lebih bagus, lebih komunikatif dengan pengunjung anda adalah dengan cara membuat kotak author dibawah postingan blog anda. Jadi pengunjung blog anda akan lebih mengenal anda sebagai author dan ini tentu akan memberikan kesan bahwa anda serius dalam mengelola blog.
Cara membuat kotak author dibawah postingan sangat bagus anda aplikasikan, karena anda bisa memasukkan kata-kata indah atau hanya sekedar sapaan anda untuk pengunjung anda. Alasan kotak ini keren adalah karena anda bisa menitipkan link author, link postingan anda, atau bahkan link tanggal postingan anda secara otomatis, anda tidak perlu memasukkannya dengan manual.
Jadi, bagaimana tampilan kotak author admin itu, mari kita lihat bentuknya, biar anda lebih tahu bagaimana bentuknya.
Bagaimana? anda tertarikkan untuk membuat kotak author dibawah postingan. Ayuk kita mulai :)
1. Log in ke blogger anda
2. Pilih Rancangan >> Edit HTML, centang Expand template widget
3. kemudian cari kode <div class='post-footer'>
Kalau kode ini ada dua, maka pilihlah yang pertama.
4. Copy script cara membuat kotak admin dibawah ini dan paste tepat di atas kode di atas (kode no. 3)
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Penulis : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Sebuah blog yang menyediakan berbagai macam informasi</h4>
<div class='kontainer'>
<img src='http://i41.tinypic.com/2nbugas.png'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini dipublish oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat bermanfaat dan menambah wawasan kita semua. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://mahasiswalugu.blogspot.com/2012/02/cara-membuat-kotak-admin-di-bawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
5. Kemudian anda cari lagi kode berikut
]]></b:skin>
6. Copy kode CSS dibawah ini dan paste tepat diatas kode kode No. 5
display:block;
width:auto;
background:#FFFFFF;
border:2px solid #F5FFFA;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#9ACD32;
border:none;
border-bottom:1px solid #D3D3D3;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FF100%0;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
7. Finally, Simpan template dan lihat hasilnya. Jika gagal anda dapat juga meletakkan kode CSS tadi tepat dibawah kode
<data:post.body/>.
Note: Url yang berwarna merah bisa anda ganti dengan alamat gambar lain sesuai dengan selera anda. Selamat menikmati icaraku. :)
Good Luck.
Update: Sekarang anda tidak perlu expand widget lagi, karena blogger telah mengupdate mesinnya, begitu anda masuk HTML, anda langsung bisa mencari kode yang anda inginkan.