Cara membuat Author Box Di Bawah Postingan Blog

Hari ini aku ingin membagikan widget yang menurutku sangat cocok sekali buat kamu. Sebuah kotak yang berisi tentang biografi kamu yang berada di bawah setiap postingan kamu (Author Box). Kamu bisa saja memberikan customization pada author box yang akan aku bagikan.

Untuk menambahkan Author Box, kamu harus melakukan edit HTML pada template blog kamu. Nah, untuk itu aku sarankan agar kamu membuat cadangan template kamu yang kamu gunakan sebelum melakukan edit HTML pada template kamu.

---

Cara Untuk Menambahkan Author Box

---

1. Login ke Blogger
2. Pergi ke Dashboard > Template > Edit HTML
3. Backup dulu template kamu

Kemudian Temukan script seperti di bawah ini :

]]></b:skin>

4. Setelah ketemu, paste kode dibawah ini sebelum ]]></b:skin>

/* ABT-Author Box */ .author-box { background: #fff; margin: 10px 0 40px 0; padding: 10px; border: 1px solid #E6E6E6; overflow: auto; -moz-box-shadow: 0 0 5px 5px #888; -webkit-box-shadow: 0 0 5px 5px#888; box-shadow: 0 0 5px 5px #888; } .author-box p { margin: 0; padding: 0; } .author-box img { background: #FFFFFF; float: left; margin: 0 10px 0 0; padding: 2px; border: 1px solid #E6E6E6; }

5. Setelah selesai kamu cari kode dibawah ini
<data:post.body/>
6. Paste javascript di bawah ini (letakkan dibawahnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p style='display:none;'>

Author Box by <a href='http://www.cofeemix.com'>Bacaan Blogger Sukses</a></p>

<div class='author-box'>

<p>

<img alt='' class='avatar avatar-70 photo' height='70' src='https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-snc7/376737_481793638505259_304145662_n.jpg' width='70'/><b>Tentang Penulis</b><br/>

<div style='text-align: justify; font-family: verdana; color: #000;'>

Aku<b> Bayu Prasetyo</b> Dari Surabaya Indonesia pemilik blog<a href='http://www.cofeemix.com'>Bacaan Blogger Sukses</a>.Aku adalah seorang pengelana di dunia maya, Bisa membantumu dalam urusan blogging dan mencari uang secara online...&#39;<br/>

</div>

</p>

</div>

</b:if> 

7. Ganti yang berwarna merah dengan URL foto kamu
8. Save Template

---

Nah, sekarang kamu bisa melihat hasil dari edit kamu. Bagaimana Sobat, tidak sulit kan? Kalau kamu merasa kesulitan, silahkan tinggalkan komentar.

Share This:

Post Tags:

postingan

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/

• Social Links:

• Rss
• Facebook
• Twitter
• Google+
• Linkedin
• Youtube