Cara membuat Author Box - Salah satu manfaat dari Author box adalah penulis dapat menambahkan informasi tentang dirinya dan informasi kontak, beserta fotonya serta pesan singkat kepada pembaca agar lebih mudah mengetahui siapa penulis artikel yang sedang di baca. Pada umumnya author box ditempatkan dibawah postingan yang dibaca.
Berikut langkah-langkah dalam membuat author box di bawah postingan khusus untuk blog yang menggunakan platform blogspot :
2. Masuk ke Rancangan >> pilih Edit HTML
3. Kemudian beri tanda centang pada Expand Template Widget
4. Cari kode ]]></b:skin> dan sisipkan kode berikut ini diatasnya :
.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. Kemudian cari kode ini <div class='post-footer'> dan paste kode berikut ini di bawahnya :
<!-- Kotak Admin -->
<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='Masukkan url gambar Anda di sini' 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>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
NB : Ganti tulisan yang berwarna biru dengan url gambar Anda.
6. Simpan template.
6. Simpan template.
0 komentar:
Posting Komentar