Membuat Author Box di Dalam Artikel

// December 22nd, 2009 // Code, Technology

Ingin tau cara membuat author box (profile box) tentang penulis di setiap artikel? Author box ini sangat bermanfaat, terutama untuk blog yang memiliki penulis lebih dari 1 seperti blog ini. Jadi pengunjung bisa tahu, siapakah penulis artikelnya. Selain itu, author box ini juga berfungsi untuk mempercantik blog.

Contoh author box bisa dilihat dibawah, di akhir artikel sebelum komentar. Untuk membuatnya kita hanya perlu menambahkan beberapa kode di dalam file style.css dan single.php pada template yang digunakan (khusus untuk Wordpress, nama file bisa berbeda-beda tergantung template).

Buka file single.php. Cari baris :

<?php the_content(); ?>

Sisipkan kode berikut di baris sebelum atau sesudahnya, sesuai dengan selera :

<div id="authorbox">
    <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
    <div class="authortext">
       <h4>About <?php the_author_posts_link(); ?></h4>
       <p><?php the_author_description(); ?></p>
    </div>
</div>

Tambahkan kode berikut di dalam file style.css :

/*warna dan style kotak profil*/
#authorbox{
 background:#333333;
 border:1px solid #000000;
 /*width:480px;*/
 margin:0 auto;
 margin-bottom:10px;
 overflow:hidden;
}
/*warna dan style text judul*/
 #authorbox h4{
 font-size:16px;
 color:#ffffff;
 margin:0;
 padding:10px 10px 5px 10px;
 }
.authortext{
 padding-left:100px;
 color:#ffffff;
 }
/*gambar avatar*/
#authorbox img{
 margin:10px;
 padding:0;
 float:left;
 border: 3px solid #ffffff;
 }
 #authorbox p{
 color:#ffffff;
 margin:0;
 padding:0px 10px 10px 10px;
 }
/*warna dan style link*/
 #authorbox a{
 text-decoration:none;
 color:#d0e5f8;
 }
/*warna dan style text*/
#authorbox p{
 color:#ffffff;
 }

Untuk mengubah style dan warna box dan tulisan, silahkan utak-atik code di file style.css. Code diatas adalah kode yang aku gunakan di blog ini.

Selamat mencoba, semoga membantu…!!!


Related posts :

  1. Membuat Link Nofollow Blogroll Wordpress
  2. Posting Artikel Menggunakan Microsoft Office Word
  3. Mengatasi Halaman Blank Website/Blog
  4. Membuat Website – Desain dan Teknis
  5. Menambahkan Nofollow Pada Plugin Lifestream Wordpress

About Irawan

Irawan Surya Darma adalah pemuda asal Jogja yang sedang berusaha mencari sesuap nasi di ibukota yang notabene lebih kejam daripada ibu tiri. Lihat profil lengkapnya.

28 Responses to “Membuat Author Box di Dalam Artikel”

  1. cantigi says:
    December 22, 2009 at 10:34

    wadoowww.. ketemu coding lagi hehehee..
    selamat tahun baru, semoga sehat & sukses terus ya.. ^_^

    Reply
  2. fanz says:
    December 22, 2009 at 14:04

    nice info gan..
    sayangnya blog saya authornya cuma 1 :)

    Reply
  3. ninneta says:
    December 22, 2009 at 15:05

    hai hai… ada award buatmu di blog ku … ambil ya…http://moody-ninneta.blogspot.com/2009/12/movie-whore-avatar.html

    Reply
  4. attayaya says:
    December 22, 2009 at 16:04

    kereeeeeennn hasilnya ya

    Reply
  5. ILHAM says:
    December 22, 2009 at 21:00

    waah, kalau memperganteng blog bisa nggak maz ya?…..
    soalnya blog saya ini cowok bukan cewek….hehehehe….jadi nggak cocok kalau dibikin lebih cantik… hehehehehehehehe….
    oiya, manfaatnya dalam SEO ada nggak Maz?…

    Reply
    • Irawan says:
      December 22, 2009 at 21:26

      Wah aku ga doyan yang ganteng-ganteng…
      Wah aku ga ngerti soal SEO, tapi yang jelas isinya terserah mau dikasi apa, bisa diisi apa aja…

      Reply
  6. san says:
    December 22, 2009 at 22:28

    Permisi mau copy gan….
    thx…

    Reply
  7. ikan-laron-semut says:
    December 23, 2009 at 06:01

    keren.. author box nya..

    Reply
  8. achoey says:
    December 23, 2009 at 07:15

    wah, ilmu lagi nih
    makasih ya

    Reply
  9. Hari Mulya says:
    December 23, 2009 at 10:03

    sebenarnya plugin nya sudah ada kn? tapi ini bisa buat beLajar saya…

    Reply
  10. attayaya says:
    December 23, 2009 at 11:21

    selamat siang semuanyaaaaaaaaaaa
    laperrr jadinya

    Reply
  11. attayaya says:
    December 23, 2009 at 11:23

    selamat siang semuanyaaaaa
    ihhh komen tadi kemana ya???

    Reply
  12. heru says:
    December 23, 2009 at 14:08

    mantep mas :)

    Reply
  13. kyra.curapix says:
    December 24, 2009 at 01:01

    owh gitu toh,,baru tau aku

    Reply
  14. Cloud says:
    December 24, 2009 at 03:19

    wow wow wow… kereenn.. thanks tutorialnyya..

    Reply
  15. dzvx says:
    December 24, 2009 at 09:21

    hooo begitu tho, maklum saya ga bisa CSS *kabur*

    Reply
  16. attayaya says:
    December 24, 2009 at 10:17

    selamat pagi menjelang siang semuanyaaaaaaaaaaaa

    Reply
  17. cantigi says:
    December 24, 2009 at 10:18

    image header_nya keren, ada gary hehehee.. suka gw bro..

    Reply
  18. Irawan says:
    January 3, 2010 at 02:24

    Karena ganti template, demo authorbox nya sudah tidak berlaku, tetapi kode diatas tetap bisa dipakai dan warna bisa diganti sesuai dengan selera.

    Reply
  19. Septian @ Update Pagerank says:
    January 5, 2010 at 11:57

    Makasih banget nih Mas atas Hack nya…sudah dipasang di blog ku..kebetulan Blog ku juga Multi Author..

    Btw, lam kenal nih :D

    Reply

Leave a Reply