Judul : Cara Membuat Author Box Super Keren
link : Cara Membuat Author Box Super Keren
Cara Membuat Author Box Super Keren
B
eberapa waktu lalu ada seorang pengunjung blog ini sempat menanyakan Cara membuat Author Box yang saya gunakan (Imron fhatoni) .Sebelum tutorial ini saya buat saya akan menjelaskan sedikit tentang fungsi dari Author Box itu sendiri .Author Box biasanya berisi himbouan atau keterangan penulis tentang isi postingan yang terkait dan yang paling penting Author Box juga bisa berfungsi sebagai Permalink,Untuk melihat Contoh Demonya silakan lihat Author Box yang ada di blog ini (dibagian bawah akhir postingan),atau lihat screenshot gambar nya di bawah ini .
- Silahkan cari Kode ]]></b:skin> paste kode di bawah ini dan letakkan tepat di atasnya berikut kode nya
.atas {
width: auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDIXC0_WQpCJxQ0FqVr6fip5ygMhzSnThsBIJBsDkU4ygaLI-4tpTv_MT3hhU7VhkpjaSJ9VV60nraQHkCf2rWVoqVBR7PRB-TmKQ3y1QJjZ3lxK3qs8Z9MyNOww6c3k-hXQmVfRYTv0/s1600/frame_shadow+copy.png) no-repeat bottom center;
border: 0 solid #000;
display: block;
font-family: julee;
color: #000;
height: 150px;
margin: -5px 0 10px;
}
.atas .kontainer {
padding: 10px;
}
.atas h4 {
background: #febf80;
border: 0;
border-bottom: 1px solid #fff;
color: #809ffe;
font-family: julee;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
margin-top: 20px;
display: block;
padding: 5px 10px;
}
.atas h4 a {
color: #000;
}
.atas img {
background: 0!important;
width: 35px;
height: 35px;
border: 1px solid #000;
float: left;
margin: 3px 5px 0 0;
padding: 0;
} - Selanjutnya Cari kode <data:post.body/> lalu letakkan kode di bawah ini tepat di bawah kode <data:post.body/> berikut kodenya
<div class='atas'>
<h4>Author : <b><data:post.author/></b><b>➽</b><b><data:blog.title/></b></h4>
<div class='kontainer'>
<img alt='masmahfid' src='http://karinafoto-project.googlecode.com/files/profil%20kecil.png'/>
Terima Kasih sobat sudah membaca artikel tentang <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>.yang kami publikasikan pada <data:post.dateHeader/> Silahkan tinggalkan jejak pada form Komentar untuk mempermudah <b><data:post.author/></b> berkunjung kembali ke blog sobat.(Wassalam)
</div>
</div> Silahkan ganti text yang berwarna merah dengan foto profil sobat ,dan juga edit bagian Css jika sobat ingin menganti warna background atau warna font sesuaikan dengan warna thema template sobat,mungkin kode yang saya tunjukkan di atas berbeda dengan yang ada pada template sobat maka dari itu jika ada kesulitan silahkan bertanya langsung di form komentar (Wassalam)
Demikianlah Artikel Cara Membuat Author Box Super Keren
Sekian Cara Membuat Author Box Super Keren, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.