How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

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 Facebook+.

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

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

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

Hostgator

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

4 Comments

Add a Comment

Your email address will not be published. Required fields are marked *