SEO Ciyus Blog

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. 

.SC-jr img { margin:0; border:#BBBBBB solid 1px; } .SC-jr-about { font-size:12px; margin:0 auto; padding:10px; width:auto; background:#fff;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:inset #222 0 2px 8px;-moz-box-shadow:inset #222 0 2px 7px;width:auto;text-shadow:1px 0 0 #fff;margin:0 0 5px;padding:10px; border:#BBBBBB solid 1px; min-height:130px; } .SC-jr { padding-top:10px; margin:0; font-size:12px; float:left; width:17%; text-align:center; border-right:#BBBBBB solid 1px; } .SC-jr-text { float:right; width: 80%; padding:5px; text-align:left; font:12px arial,sans-serif; text-align:justify; margin:0; padding:0; }

• 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.

<!-- /Membuat Kotak Profil Author Di Bawah Postingan Blogger by: http://seociyus.blogspot.com/ --> <div class='SC-jr-about'> <div class='SC-jr'> <img height='80' src='URL FOTO AUTHOR' width='80'/> <span style='font-family: Arial,Helvetica,sans-serif;'><b>NAMA AUTHOR</b> (Author) </span></div> <div class='SC-jr-text'> <span style='font-size: large;'><b><span style='font-family: Arial,Helvetica,sans-serif;'>TENTANG AUTHOR: </span></b></span><br/><br />DESKRIPSI AUTHOR DISINI</p> </div> </div>

• 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.

<!-- /Membuat Kotak Profil Author Di Bawah Postingan Blogger by: http://seociyus.blogspot.com/ --> <b:if cond='data:blog.pageType == "item"'> <div class='SC-jr-about'> <div class='SC-jr'> <img height='80' src='URL FOTO AUTHOR' width='80'/> <span style='font-family: Arial,Helvetica,sans-serif;'><b>NAMA AUTHOR</b> (Author) </span></div> <div class='SC-jr-text'> <span style='font-size: large;'><b><span style='font-family: Arial,Helvetica,sans-serif;'>TENTANG AUTHOR: </span></b></span><br/><br />DESKRIPSI AUTHOR DISINI</p> </div> </div> </b:if>

• 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.

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

» Postingan Terkait Gan :