Header

Cara Membuat Author Box Dibawah Postingan Blogger

Posted by : Admin On 29 December 2012 21 comments

Mungkin loe sering liat blog dari Blogger yang ada profil author dibawah postinganya ya gak gan? Pengen blog loe ada kotak profil author di bawah postingannya. Kalau di Wordpress loe tinggal pake plugin gampang gak perlu repot tapi di Blogger harus edit template gan. Tapi tenang di postingan kali ini gw bakal share cara buatnya gan silahkan disimak.


Sebelum kita mulai gw mau jelasin sedikit kegunaan kotak tersebut gan. Yang petama tentu buat ngasi tau ke pengunjung blog siapa penulis dari postingan tersebut, terus buat blog yang punya lebih dari satu penulis ini berguna banget, karena profil authornya bakal beda-beda di setiap postingan gan tergantung siapa penulisnya. Yang terakhir tentu foto si penulis bakal ada di setiap postingan yang dia buat.

Info : Inget selalu backup atau download template blog loe sebelum ngedit HTML buat menghindari hal-hal yang tidak di inginkan gan.

Cek ini gan >>> Edit Template Blogger Versi Baru


Cara Membuat Kotak Profil Author Dibawah Postingan Blogger



  • Pertama masuk ke Blogger lalu dari dashborad blog loe pilih Template terus Edit HTML. Lalu teken Ctrl + F gan dan cari kode ]]></b:skin> terus copy kode di bawah ini dan pastein di atasnya gan. 


  • Kalo udah di pastein kode CSS tadi kilik Save template gan. Lanjut ke langkah selanjutnya loe pasang kode di bawah ini di saat buat postingan tapi di mode HTML gan. Pasteinya di bawah dari akhir postingan loe.


  • Sekarang tinggal di loe edit aja nama author sama deskripsi author dan ganti url foto authornya kalo udah beres tinggal di Publish gan postinganya, lalu coba buka blog loe dan cari postinganya pasti kotak authornya udah nongol gan.

  • Cara diatas buat nambahin kotak authornya secara manual gan. Kalo loe mau cara yang otomatis, jadi pas buat postingan gak perlu nambahin kode lagi udah langsung kotak profil authornya bakal muncul sendiri caranya gini gan :
  • Dari dashboard blog loe pilih lagi Template terus Edit HTML dan centang Expand Widget Template. Lalu teken Ctrl + F dan cari kode <data:post.body/> yang di bawahnya ada kode seperti ini <div class='post-footer-line post-footer-line-1'> gan. Terus copy kode dibawah ini dan pastein di antara kedua kode tadi.



  • Abis dipastein edit aja nama, deskripsi sama url foto authornya gan, lalu Preview dulu kalo gak ada masalah klik Save template gan. Beres sekarang tiap loe buat postingan kotak profil authornya bakal muncul di bawah postingan loe secara otomatis gan.

Sekarang gw kasi tau cara ngeditnya gan. Buat edit border kotaknya loe tinggal ganti kode warna sama ukuran di kode CSS yang ini .SC-jr-about , kalo mau ganti border kotak foto profil authornya caranya sama tapi di kode yang ini gan .SC-jr img . Selanjutnya buat warna background tinggal ganti aja kode warna backgroundnya di kode .SC-jr-about gan. Buat cari kode warna klik disini.


Sekian dulu tips dari gw gan semoga bermanfaat buat kalian. Kalo ada masalah sama cara buat kotak profil authornya silahkan kontak gw gan. Jangan lupa berkomentar gan.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

21 comments:

  1. Komennya Berhasil Gan.... :a

    Bukan Khayalan Semata = http://www.andaikata.com/
    Otomotif dan modifikasi = http://oto.andaikata.com/
    Serba-serbi Teknologi = http;//tech.andaikata.com/
    Cari sesuatu? Visit = http://cari.andaikata.com/

    :o

    ReplyDelete
    Replies
    1. Banyak banget loe ninggalin link gan. :r

      Delete
  2. KereN BROW
    TAnks Info Nya...
    http://coretansibudie.blogspot.com
    Follow bac ea,..

    ReplyDelete
  3. nice post...sukron gan ini sangat bermanfaat buat ane. :g :g

    http://elrizki25.blogspot.com

    ReplyDelete
    Replies
    1. @defantri, Muhamad, & najwa : thanks agan2 semua,. :m

      Delete
  4. thanks ya buat tips'a ...

    ditunggu kunjugannya di hamidah-21.blogspot.com

    ReplyDelete
  5. thanks ya buat tips'a

    ditunggu kunjugannya di hamidah-21.blogspot.com

    ReplyDelete
  6. informasi yang sangat bermanfaat buat para blogger semua

    ReplyDelete
  7. keren gan
    thanks ya
    www.donesiarony.blogspot.com

    ReplyDelete
  8. gan makasih manfaaat banget nih, mampir ya???
    wanda-awang.blogspot.com

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya