Download Now Download Themes Gratis WordPress Responsive!

Tutorial Script Membuat Author box di WordPress

Sering kita mengunjungi website dan melihat website-website itu dibawah artikelnya ada kolom penulis dan beberapa kalimat tentang info biografi dari penulis artikel tersebut, dalam bahasa kerenya author box, di blog saya ini juga terlihat kan dibawah artikel ini ada kotak penulis beserta fotonya. terus bagaimana cara membuat Author box seperti gambar dibawah ini pada wordpress?

tutorial membuat author box di wordpress script php
Di beberapa template wordpress banyak yang sudah mendukung atau sudah diberi fasilitas author box, tapi disebagian template wordpress juga masih banyak yang belum ada, mungkin ada yang sudah terlanjur suka pada template tertentu untuk wordpress kesayanganya dan gak mau ganti template lagi tapi ingin ada author box nya jangan kawatir, karena disini akan dijelaskan bagaimana membuat author box sekaligus diberikan script CSS nya agar tampilan author box terlihat lebih baik.

langkah-langkah membuat author box pada wordpress yaitu copy kan script dibawah ini untuk dipasang di file single.php template anda, diatas tag script comment.

<!-- Script Author Box -->
<div class="postauthor-container">
	<h4><?php _e('About The Author', 'twentyfourteen'); ?></h4>
		<div class="postauthor">
		<span class="photo"><?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' );  } ?></span>
		<h5><?php the_author_meta( 'nickname' ); ?></h5>
		<p><?php the_author_meta('description') ?></p>
		</div>
</div>
<!-- Akhir Script Author Box -->

*Terlihat script diatas ada nama template twentyfourteen karena saya mencoba script ini di template twentyfourteen, jika di template ini saya meletakkanya di file content.php, karena di twentyfourteen banyak sekali jenis konten, maksudnya ada konten image, konten video, jadi jika ingin muncul di konten image ya kopi script diatas di content-image.php tepat diatas script.

<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>

Untuk mempercantik tampilan agar author box nanti terlihat menarik dan tidak morat marit maka jangan lupa copy kan juga script css dibawah ini di style.css template anda.

/*---------------------
      CSS Author
-----------------------*/
.postauthor-container {
    clear: both;
    float: left;
    margin-top: 20px;
    width: 94.8%;
    margin-left:20px;
}
.postauthor p {
    padding-top: 0px;
    font-size: 14px;
    margin-bottom: 0;
}
.postauthor {
    min-height: 125px;
    float: left;
    clear: both;
    padding: 15px 2.4% 0 2.4%;
    background: #EEEEEE;
    border: 1px solid #E1E1E1;
    width: 94.8%;
}
.postauthor h4 {
    font-weight: bold;
    font-size: 18px;
}
.postauthor h5 {
    display: inline-block;
    text-transform: capitalize;
    font-size: 14px;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}
.postauthor img {
    float: left;
    margin: 5px 20px 15px 0;
}

Jika semua langkah-langkah diatas sudah anda praktekan maka hasilnya nanti akan seperti di blog saya ini tepat dibawah artikel yang sedang anda baca ini. sekian dan selamat mencoba.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • thx info nya . sudah sy pasang permanen

  • coba aja cari plugin author box gan, cobain satu-satu. barangkali ada yang bisa beda-beda tampilan.

  • di biographical info, di menu users-> edit user agan

Must Read...!
Theme WordPress Cubby Responsive Free

Cubby adalah template wordpress gratis di desain untuk bisnis kecil, template ini responsif sehingga bekerja...

Trik CSS Merubah desain Scrollbar Webkit Browser

Di antara kalian yang sering browsing dan mengunjungi website-website seperti TheNextWeb pasti akan melihat...

Close