Cara Membuat Kotak Author Box diBawah Postingan

Rabu, 24 Februari 2016

Ingin blog agan terlihat menarik dan ada kotak author box nya ? Pasti ingin sekali. Ketika seseorang ingin ada author box nya sering gunta ganti template yang lebih menarik dan langsung ada author box nya atau langsung bawaan tempalte nya itu sendiri. Tapi disisi lain kita sudah srek suka sama template yang sudah kita pakai dan tidak mau menggantinya lagi. 

Nah dalam postingan ini saya akan memberikan informasi cara membuat kotak author box dibawah postingan yang bisa agan pelajari. Sebeleum melanjutkan, tahu kan author box itu apa ? Author Box adalah Kotak Penulis. Artinya kotak yang berisi tulisan-tulisan dari penulis blog itu sendiri. Seperti gambar dibawah ini :

 Nah itulah Author Box punya saya gan, ingin seperti itu. Ok ikuti langkah-langkahnya. Berikut adalah caranya :

• Temukan Code : <data:post.body/> di HTML blog agan. Cari code <data:post.body/> bagian yang baris kedua. Supaya lebih cepat CTRL + F saja ketikan code nya.
• Kalau sudah ditemukan, copy dan paste kan code script di bawah ini di bawah code <data:post.body/> di blog agan.

Keterangan  : Yang saya merahi itu untuk foto, silahkan diganti dengan foto agan yang sudah di upload baik dari facebook, photobucket, dan yang lainnya, ambil link fotonya. Dan kata-katanya juga silahkan agan ganti dengan mencirikan pribadi agan.

<!-- 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: Pandeglang, Banten</h4>
    <div class='kontainer'>
      <img src='http://i1067.photobucket.com/albums/u426/emulyadi/DSC_2813_zpsny2pee2r.jpg'/>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 kelahiran Pandeglang Banten ini selalu memberikan inspirasi dan motivasi terhadap dunia blogger. Saat ini sedang menjalani kuliah di Mathla'ul Anwar University daerah Pandeglang, Indonesia.
      <div style='clear:both;'/>
    </div>
  </div>
</b:if>
<!-- Akhir Kotak Admin -->

• Selanjutnya, kalau sudah di paste kan, cari lagi kode yang kedua cari code </style> kalau tidak ada cari code yang ini ]]></b:skin>
• Kalau sudah ditemukan, copy dan paste kan lagi code script di bawah ini di atas code </style> atau ]]></b:skin>

.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/normal Arial,Sans-Serif;
  color:#222;
}

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

.admin-tulisan h4 {
  background:#D2691E;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  font:bold 11px/normal 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;
}

• Sudah di paste kan, lalu save. Dan lihat hasilnya.
• Sudah selesai

Itulah cara membuat kotak author box / penulis di bawah postingan yang cukup simple. Semoga informasinya bermanfaat untuk semuanya terutama yang ingin membuat author box yang tanpa harus mengganti template lagi.

Tweet

Tag : Tutorial