Home / Blog / Cara Membuat Kotak Pesan Admin / Author Box

Cara Membuat Kotak Pesan Admin / Author Box

Posted by Naufal Ammar Rabu, 27 Maret 2013 0 komentar

http://1.bp.blogspot.com/-C3rEgAqjdF0/T2jBRWrlMbI/AAAAAAAAB4c/oX3LT6IxOKE/s1600/wordpress-author-box.jpg

Author box atau Kotak Pesan Admin biasanya digunakan sebagai tanda pengenal seorang penulis dari sebuah blog, atau berupa penyampaikan pesan singkat dari penulis. Kotak pesan tersebut terdapat gambar dari penulis blog serta ucapan terima kasih kepada penunjung yang telah berkunjung dan membaca artikel pada blog. Kotak admin pada dasarnya ditempatkan dibawah posting blog dan umumnya judul posting yang dibaca. Saya akan memberikan langkah untuk membuat author box pada blog anda.

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Expand Template Widget anda
4. Paste kode dibawah ini diatas kode ]]></b:skin>

.admin-tulisan{

display:block;

width:auto;

background:#F5F5F5;

border:1px solid #C0C0C0;

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:#C0C0C0;

border:none;

border-bottom:1px solid #C0C0C0;

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:#FEEA83;}

.admin-tulisan img{

width:70px;

height:70px;

margin:0 10px 0 0;

float:left;

border:0px solid #E6E6FA;

padding:2px;

background:#E6E6FA

box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;

}

5. Paste kode dibawah ini diatas kode <div class='post-footer'>

<b:if cond='data:blog.pageType == "item"'>

<div class='admin-tulisan'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Blog Trik dan Tips</h4>

<div class='kontainer'>

<img height='80' src='http://1.bp.blogspot.com/-Vhz0UpxY3w0/T2cCx3-UKCI/AAAAAAAABxU/6UMbVlexRPo/s220/Picture%2B004.jpg' width='75'/>

Anda sedang membaca sebuah artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>,, Semoga artikel tersebut bermanfaat untuk anda .... <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://blogtrikdantips.blogspot.com' target='_blank'>:: Thank you for visiting ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

Keterangan: kode merah adalah url gambar

6. Simpan template anda lalu lihat hasilnya

Kini anda akan memiliki Author Box yang keren. Selanjutnya anda tinggal mengedit kode diatas agar pesan author box sesuai dengan kebutuhan anda. Oke selamat mencobanya!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Membuat Kotak Pesan Admin / Author Box
Ditulis oleh Naufal Ammar
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://nsfreehack.blogspot.com/2013/03/cara-membuat-kotak-pesan-admin-author.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

WARNING !

Komentar Anda Tidak Boleh Mengandung Unsur :

1. Penghinaan Atau Pelecehan Pada Blog Ini.
2. Spaming ( Komentar SPAM )
3. Link Aktif,dsb

Mohon Maaf Jika Anda Melanggar Peraturan Maka Komentar Anda Tidak Akan Ditamplikan