Membuat Author Box (Kotak Author) di Bawah Postingan Blog

Posted by Muhammad Fiqih on 3

Kang Fiqih | Assalamu'alaikum wr.wb., Author Box. Disunggung mengenai Author Box, apakah ada yang sudah mengenal widget ini? Kalau belum please comment..he.. Author Box  menurut bahasa terbagi menjadi dua kata yakni Author yang artinya Penulis, jadi disini maksudnya adalah admin sebuah blog yang mempunyai peranan penuh terhadap blog tersebut dan yang kedua adalah Box yang artinya kotak. Jadi Author Box dapat didefinisikan sebagai kotak yang didalamnya terdapat seorang penulis beserta deskripsi penulis(biasanya).

Di dalam Author Box ini juga terdapat permalink, permalink adalah sebuah link yang nantinya merujuk ke suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Hal ini bertujuan supaya pengguna atau pembaca blog mengetahui permalink dari postingan yang sedang dibacanya. 

Dan di dalam permalink ini sudah ada script atau kode html yang berisi permalink dari artikel yang sedang dibacanya. Biasanya para blogger selalu menambahkan permalink ini di bawah postingan blog mereka,

Nah, sekarang mungpung saya memiliki waktu yang luang untuk ngeblog, saya ingin memberikan sedikit ilmunya kepada Anda semua mengenai bagaimana caranya Membuat Author Box (Kotak Author) di Bawah Postingan Blog. Seperti biasa pasti selalu ada kode/script di dalamnya, langsung saja :

1. Login ke Akun Blog Anda.

2. Klik Template -->Edit HTML.

3. Carilah kode ]]></b:skin> dengan menggunakan Ctrl+F.

4. Setelah kode tersebut ditemukan, maka letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
color:#aaa;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{background:#000000;width:80px;height:85px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

keterangan :

• kode yang berwarna biru adalah lebar dari permalink.
• kode yang berwarna merah adalah tinggi dari permalink. 

5. Selanjutnya cari kode <data:post.body/>.

6.  Jika Anda menggunakan auto readmore pada blog maka kemungkinan kode di langkah no. 5 ada dua, letakkan saja kode di bawah ini di bawah kode <data:post.body/> yang KEDUA.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b>  ,Be The Best</h4>
<div class='kontainer'>
<img alt='Muhammad Fiqih' src='http://lh3.googleusercontent.com/-0o3cJfWH_lo/AAAAAAAAAAI/AAAAAAAAAEs/uUfYHAZhj9k/s512-c/photo.jpg'/>
Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://kangfiqih.blogspot.com/' target='_blank'>:: Pasang Widget Ini ::</a></span></p><div style='clear:both;'/></div></div>
</b:if>

keterangan : 

• kode yang berwarna merah adalah url gambar yang akan Anda pasang.
• kode yang berwarna hijau bisa Anda ganti dengan kata-kata yang Anda inginkan.

Selamat beraktivitas dan sampai jumpa ...