Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting

Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini:

Di sini Saya telah menerapkan beberapa kode perwakilan yang umum terdapat di dalam sebuah widget posting seperti kode perwakilan judul, perwakilan link judul, perwakilan tanggal terbit dan nama penulis, sehingga kamu tidak perlu lagi menuliskan nama dan URL secara manual, karena kode-kode tersebut nantinya akan menyesuaikan diri berdasarkan data-data yang telah tersimpan menurut jenisnya. Yang perlu kamu lakukan hanya mengganti gambar dan ulasannya saja.

Pertama-tama, masuklah ke halaman editor HTML templatemu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

Temukan kode ini:

<div class='post-footer'>

TIP: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian.

Salin kode ini, kemudian letakkan tepat di atas kode tadi:

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='admin-tulisan'>
          <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Sumpiuh, Banyumas</h4>
          <div class='kontainer'>
               <img src='http://1.bp.blogspot.com/_yGa4b5VGx6w/Skrkk_0ByLI/AAAAAAAAAC8/gJy0GYR_M08/S220/toilet.jpeg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. <data:post.author/> adalah seorang penulis mahadahsyat yang masih suka pipis di celana dan maunya nenen sama mama. Suka minta jajan yang aneh-aneh dan suka kentut di depan mikrofon.
               <div style='clear:both;'/>
          </div>
     </div>
</b:if>
<!-- Akhir Kotak Admin -->

Sekarang gulung formulirnya ke atas, dan segera temukan kode ]]></b:skin> atau </style>. Letakkan kode ini tepat di atasnya:

.admin-tulisan {
  display:block;
  width:98%;
  background:#CFE2E0;
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:30px auto 10px auto;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#8A9C04;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px 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:1px solid #954B02;
  padding:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan URL foto profilmu. Untuk mendapatkan URL foto profil caranya mudah. Cukup klik kanan pada foto profil di dasbormu, kemudian pilih copy image location:

mengambil URL foto profil

Untuk selebihnya Saya yakin kamu bisa menyesuaikannya sendiri.
Klik Simpan Template.