1. Login akun blogger.
2. Kemudian klik Template dan pilih Edit HTML.
3. Copy kode berikut ini lalu paste tepat diatas kode ]]></b:skin>
.evolutions-boxauthor{ position: relative; margin: 15px auto; width:505px; padding:10px 10px 5px 10px; border:2px solid #52e052; background:#e9fbe9; color:#000; } .titlebox h3{ padding: 10px 0px 10px 25px; color:#000; font:bold 14px Georgia; background: #52e052; margin:0px 0px 0px -22px; width:524px; } .titlebox h3 a {color:#000;} .titlebox h3:before { content: ' '; position: absolute; top: 47px; left: -12px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .titlebox h3:after { content: ' '; position: absolute; top: 47px; right: -12px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .boxcontent { font:12px Trebuchet MS; text-align:justify; color:#000; float: left; margin: -95px 160px 5px 0; display: block; } .boxcontent a { color: #000; text-decoration: none; } .boxauthor_photo{ float:right; margin:-22px 0 0 10px; padding:30px 5px 5px 5px; background: #52e052; } .boxauthor_photo:before { content: ' '; position: absolute; top: -12px; right: 144px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo:after { content: ' '; position: absolute; top: -12px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 0; border-color: transparent transparent #52A435 transparent; } .boxauthor_photo img{ width:120px; height:120px; border:2px solid #000; } .linediv{ height:0px; clear:both; display:block; border-top:1px solid #00ff00; border-bottom:1px solid #52e052; } .email-button{ background:#52e052; border:1px solid #52e055; margin:0; color:#000; cursor:pointer; font: bold 13px Tahoma; padding:6px 10px; position:absolute; right:-20px; top:0; display:block; } .email-button:hover{ background:#00ff00; text-decoration:none !important; } .wrap-email{ clear:both; width:230px; margin:5px 0 0 0; float:left; } .email-form{ position:relative; margin:0 auto; width:98% !important; box-sizing:border-box; height:auto; } .email-input{ width:150px; height:15px; margin:0 auto; padding:8px 10px; border:1px solid #52e052; font:14px georgia; font-style:italic; color:#666; } .evolutions-social{ overflow: hidden; float: right; } .evolutions-social a{ display: block; color: #FFFFFF !important; font: bold 13px Tahoma; text-decoration: none; transition: border-radius 0.50s; border-radius: 10px 0px; } .evolutions-social a:hover{ border-radius: 0px; } .evolutions-social div{ float: left; margin: 5px 5px 0 0; width: 70px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionsgoogleplus a{ padding: 7px 0px; text-align: center; background: #D54135; } .evolutions-social .evolutionsgoogleplus a:hover{ background: #52e052; } .evolutions-social .evolutionsrss a{ padding: 7px 0px; text-align: center; background: #fb8938; } .evolutions-social .evolutionsrss a:hover{ background: #52e052; }4. Selanjutnya copy lagi kode berikut ini lalu paste tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>Keterangan:
<div class='evolutions-boxauthor'>
<div class='boxauthor_photo'>
<img alt='mas andes' src='http://lh3.googleusercontent.com/-DHMRnvuMJfo/AAAAAAAAAAI/AAAAAAAAAAA/6f7Kf2lfwCE/s96-c/photo.jpg'/>
</div>
<div class='titlebox'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div>
<div class='boxcontent'>
Setelah anda membaca artikel berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b> jika ingin menyalin (copy-paste) artikel ini, sertakan <b><i>link dibawah ini sebagai sumbernya :</i></b>
<textarea cols='42' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
</div>
<div class='linediv'></div>
<div class='wrap-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='email-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='masandes'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-input' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='email-button' title='' type='submit' value='Submit'/>
</form>
</div>
<div class='evolutions-social'>
<div class='evolutionsfacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Join on Facebook'>Facebook</a>
</div>
<div class='evolutionsgoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Join on Google+'>Google+</a>
</div>
<div class='evolutionsrss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Join on RSS'>RSS</a>
</div>
</div></br>
<span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-author-box-dibawah-posting-blog.html' target='_blank'>[ Get This Widget ]</a></span>
<div style='clear:both;'></div>
</div>
</b:if>
Ganti teks warna biru dengan URL foto anda.
Ganti teks warna merah dengan ID feedburner anda.
Ganti teks warna hijau dengan ID masing-masing.
5. Langkah terakhir klik Simpan Template.
Lebar maupun warna dari widget author box ini saya sesuaikan dengan warna template blog ini, jadi apabila lebar maupun warna yang kurang sesuai silahkan bisa anda sesuaikan sendiri.
39 Response to "Membuat Author Box Dibawah Posting Blog"
tutorial disini selalu mangtab. ^_^
Balaswah kok pas banget ya mas, pas saya cari yang beginian pas smpeyan posting...background ndak pakai http request, tp pakai background color, lebih simple dan keren
BalasWeis lama tak jumpa .. maknyus nih author boxnya mas ..kreeeeeeennnn
Balasooow,,,jadi nambah ilmu,,,
Balasnamanya author box ya,,,,
g bsa otak atik mas, , g ada pc
keren sekali ini author boxnya.. inin sekali untk memasangnya? salam kenal saja gant dari blogger baru
BalasSalam Mas Andes..Daftar Hadir di Postingan Terbaru yang pasti
BalasBermanfaat untuk pelengkap SEO sebuah Blog,. idzin simak
dan idzin download Mas..terima kasih atas Artikel nya salam sejahtera.
makasih mas atas tutorialnya, sangat mambantu :)
BalasWaduh Repot banget,. Mas ngukur ukuran Author Box buat template saya.
BalasKalau ukuran lebar sama warna mah,. mudah di edit. tapi untuk ukuran yang
Lainya seperti pading, border, relative,margin dan ngepasin nya benar2 rumit
sampe muter2 gk pas2 Mas..ada solusi gak Mas buat pas tampil di blog saya
Aduhh sampe mumet nikh semalaman....
met pagi....kembali hadir dngn kondisi sehat wal afiyat.
Balasini ada versi baru ya kotak adminnya
hehehe puyeng yah kang.. mudah kok buat ngubah lebarnya, ubah saja pada bagian yang cetak tebal:
Balas.evolutions-boxauthor{
position: relative;
margin: 15px auto;
width:505px;
padding:10px 10px 5px 10px;
border:2px solid #52e052;
background:#e9fbe9;
color:#000;
}
.titlebox h3{
padding: 10px 0px 10px 25px;
color:#000;
font:bold 14px Georgia;
background: #52e052;
margin:0px 0px 0px -22px;
width:524px;
}
intinya jika width:505px; mau di tambah 10px maka pada width:524px; juga di tambah 10px. begitu juga apabila lebarnya mau di kurangi, angka yang mau dikurangi/ditambah harus sama. contoh hasilnya akan seperti ini jika lebarnya akan di tambah 10px:
.evolutions-boxauthor{
position: relative;
margin: 15px auto;
width:515px;
padding:10px 10px 5px 10px;
border:2px solid #52e052;
background:#e9fbe9;
color:#000;
}
.titlebox h3{
padding: 10px 0px 10px 25px;
color:#000;
font:bold 14px Georgia;
background: #52e052;
margin:0px 0px 0px -22px;
width:534px;
}
author box ku sepertinya harus diupdate lagi dech :-)
Balasmangtabbbb pokonnya,,,,,
BalasGimana kabarnya mas, maaf baru bisa nonghol lagi
Wah jawaban yang Bijak dan sangat benar-benar membantu Mas Andes,, Idzin lagi saya mau mencoba lagi setelah semalaman saya coba artikel Mas ini belum berhasil dan sekarang semoga dengan, keterangan dari Mas Andes, Admin di artikel ini. semoga berhasil.. idzin mencoba lagi terima kasih atas Bimbinganya yah Mas Andes.. salam sukses selalu buat Faceblog nya.
Balaskeren nih widgetnya,, mungkin nanti saya coba
Balascool froh..
BalasKayaknya bagus ya kalau disetiap akhir postingan disisipi kotak penulis. Selain bisa mempercantik performa blog, juga bisa digunakan untuk mejeng. Hehehehe :)
BalasIzin save tutorialnya. Kapan-kapan mau praktek biar blog saya terlihat lebih keren seperti blog ini :D
Lagi awal ngeblog sy udah pernah pasang widget author ini mas..
BalasCuman yang ini udah di modif jd versi terbaru ya mas..
Keren deh :)
Kemana aja mas Alex..baru nongol lagi nih :)
Balasemangnya motor di modif wkwkwkwk
BalasMakasih sharenya Mas Andes, aku lg nyari sepah yg masih manis nih....
Balasauthor box slain menunjukkan identitas kita dan blog kita,apa lagi bang??
Balasmaaf kalau nanya hehehe
komen back yeee
Akhirnya usaha saya gak sia-sia Mas Andes..
BalasAuthor Box Artikel Mas Andes ini sudah berhasil
Terpasang Pass di template saya berkat bimbingan
Mas Andes. terima kasih yah Mas, demikian laporanya
Dan akhirnya laporan selesai jika Mas Andes mau tinjau
Silahkan, barang kali masih ada yang salah di author box
Saya bisa buka di page ini :
http://karristaent.blogspot.com/2013/08/youtube-anak-emas-google.html
Terimakasih atas sharingnya.
Balaskayaknya kalau dipasang di belog saya .. jadi mantab deh belognya
Balasjadi berat gk gan loading nya??
Balastak gendong kemana-mana mas budi :)
Balasaku sudah punya author box cuma nggak secantik ini sepertinya mesti diganti punya saya
BalasAsem...nih mas virlyz :)
BalasHaha...enak sampe ketiduran dong..yg di gendong mas
Balaskeren ada permalinknyaa
Balasmantab juga ya CSS nya
BalasMantap tutorialnya mas,,,
BalasDsini sdah banyak sukses turorialnya,,,
Ijin bukmak dulu mas...pingin cobain pake kotak author.
BalasThanks sebelumnya
aduh kok gak bisa ya...mohon penyegarannya
Balastidak bisanya bagaimana..
Balasbagus kayaknya kl dipasang di blogku, tapi gmn saya dapatkan ID evolutionsfacebook dan googleplusnya...? mohon pencerahan...!
BalasTerima Kasih Mas sangat membantu :D
BalasKunbal : http://p4ndoo.blogspot.com
Mas, klo sudah nyetel robot text. apa mestidiedit juga meta tag nya?
Balaswah ternyata bikin pusing juga masangnya,,,,tanks
Balas