Formulir Kontak

Nama

Email *

Pesan *

Cara Membuat Author Box Di Blog

Aizzan Blog -- Cara membuat author box di bawah postingan blog sangatlah mudah dan tentunya sangat berguna untuk pemilik blog yang ingin mempercantik, pada kesempatan kali ini saya akan membahas tentang tutorial author box. Banyak sekali macam, bentuk dan tampilan yang sudah menyebar luas di kalangan blogger tentang author box, dengan begitu sudah terlihat bahwa author box sangat berguna bagi pemilik blog itu sendiri. Di bawah ini adalah screenshot dari author box yang sudah saya coba di blog.

Aizzan Blog:  Cara Membuat Author Box Di Blog
Aizzan Blog:  Cara Membuat Author Box Di Blog
Kelebihan dari author box ini adalah terdapat text area di bawahnya yang berisikan kode link dari artikel yang sedang di baca oleh pengguna, langsung saja untuk tutorialnya bisa langsung mengikuti tahap - tahap di bawah ini.

1. Login ke akun blogger sobat
2. Masuk ke "Template"
3. Backup data template dulu sebelum lanjut ke "Edit HTML"
4. Masuk ke "Edit HTML"
5. Cari kode ]]></b:skin>, lebih cepat tekan Ctrl+F (F3)
6. Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>
      .author-box {

background: #F7F7F7;

margin: 20px 0 40px 0;

padding: 10px;

border: 1px solid #E6E6E6;

overflow: auto;

}

.author-box p {

margin: 0;

padding: 0;

}

.author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

border: 1px solid #E6E6E6;

}
7. Kemudian cari kode <data:post.body/>, lebih cepat tekan Ctrl+F (F3)
8. Masukkan kode di bawah ini tepat di bawah kode <data:post.body/>
    <!-- Author Box by www.afanieshare.blogspot.com --> 

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

<div class='author-box'>

<p><img alt='Aizzan AFanie' class='avatar avatar-70 photo' height='90' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c57.57.714.714/s160x160/970411_10200635831036486_1340914070_n.jpg' width='90'/><b>Ditulis Oleh : <a href='https://plus.google.com/110515590190805743840' target='_blank'>Aizzan AFanie</a></b>

</p><p>

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. Oleh Admin, Sobat diperbolehkan mengcopy paste / menyebar-luaskan artikel ini, namun anda harus meletakkan <blink><strong>link dibawah ini</strong></blink> sebagai sumbernya, dan baca peraturan <a href='http://afanieshare.blogspot.com/2013/08/disclaimer.html' title='Disclaimer AFanie Share Blog'><strong>Disclaimer</strong></a> sebelum copy-paste.

<textarea cols='65' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea> </p>

</div>

</b:if>

<!-- Akhir Author Box by www.afanieshare.blogspot.com -->
Keterangan :
  • Ganti url pada kode "class=avatar" ganti dengan url avatar sobat
  • Angka 110515590190805743840 ganti dengan google plus milik sobat
  • Sobat bisa sesuaikan kata - kata yang ada di author box
9. Kemudian simpan dan lihat hasilnya

Semoga artikel di atas dapat bermanfaat dan berguna buat sobat, jika ada kendala, kritik maupun saran silahkan kirim melalui kolom komentar di bawah atau juga bisa melalui form Contact Me yang sudah saya sediakan.
Previous
Next Post »
0 Komentar