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 .

Untuk Cara Membuat Author Box Super Keren ini silahkan ikuti tutorialnya secara lengkap seperti contoh di bawah ini :

1. 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/AVvXsEhYxH49V1ftwDtqU3wXMFAA5UHKQdO44xP-Htcxycl_MZxmaRNQwKzrTMLKpnwROGUcEBG1N7w_f2AwZmrP99d_YKKzVvOZbvkb68p0tgXOQu2-VUmtWJynwkwjSW0vcuRvwIwc11lhqZg/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;
}

2. 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>&#10173;</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)

Judul Artikel :Cara Membuat Author Box Super Keren

Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara Membuat Author Box Super Keren Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih