Senin, 24 November 2014

Cara Menambahkan Kotak Author di Bawah Postingan


iDtutorMe.com - Cara Menambahkan Kotak author di bawah posting sangatlah mudah.Anda tinggal copas Code Script dari mas gusti dan langsung bawa ke TKP.Tujuannya apa sih ? Kalau memang sobat bertanya begitu, ya jelas agar pengunjung tau identitas pengembang atau penulis blog yang merek kunjungi.

Dengan begitu, sobat akan lebih dikenal oleh pengunjung dan mas gusti sendiri juga sudah memasangnya.Untuk lebih jelas,silahkan lihat Author Box di bawah postingan berikut ini :



Keren,bukan? meskipun desainnya simple,tapi ini lebih dari cukup kalau kita hitung untuk memperkenalkan diri saja.Baik langsung saja kita ubek Cara Membuat Kotak Author/Penulis di bawah postingan blog berikut ini.

1. Loggin ke blogger.com

2. Klik menu Template.



3. Pilih opsi Edit HTML > Centang kolom Expand Template widget.

4. Cari kode ]]></b:skin> pada template sobat.

5.  Pastekan kode berikut tepat diatas kode tadi.

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
border:1px solid #ccc;
box-shadow: 0pt 3px 3px -1px rgba(0, 0, 0, 0.1);
border-radius:4px;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}


6. Kemudian cari lagi kode <div class='post-footer-line post-footer-line-1'> untuk memasang widget tersebut di bawah posting.

7. Jika sudah ketemu,pastekan kode berikut tepat di bawah kode tadi.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='URL Foto Sobat' width='70'/><b>Tittle Box</b><br/>
Deskripsi Singkat tentang sobat<br/></p>
</div>
</b:if>
Keterangan :

  • Ganti kode yang berwarna merah dengan URL Foto Sobat.
  • Untuk kode yang berwarna Biru diganti dengan judul box.
  • Warna ungu bisa sobat ganti dengan Deskripsi yang mau ditampilkan.


8. Simpan Template (Save Template)


Sekian mengenai tutorial Cara Menambahkan kotak author di bawah postingan dan selamat mencoba.

Ditulis oleh: Gusti Putu -
Judul Review : Cara Menambahkan Kotak Author di Bawah Postingan
- See more at: http://idtutorme.blogspot.com/2012/10/cara-menambahkan-kotak-author-di-bawah.html#sthash.G87ZC3AM.dpuf

0 komentar: