Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Author Box Dibawah Posting Blog

widget Author Box Blogger Membuat Author Box Dibawah Posting Blog – selama berselancar didalam internet mungkin anda pernah mengunjungi suatu blog dan terdapat kotak dibawah posting blog yang berisi tentang informasi atau biodata penulis atau bisa juga tentang peringatan kecil mengenai artikel yang di publikasikan, kotak itulah yang biasa disebut-sebut author box. Bahwa biasanya pada author box juga disisipi sejumlah link yang berkaitan dengan artikel posting blog dengan menaruh judul posting yang sudah tersetting secara otomatis agar setiap author box tersebut muncul di setiap akhir posting blog bisa memunculkan judul posting yang tidak lain hal tersebut biasa disebut sebagai permalink. Selain yang sudah saya terangkan di atas, pada author box agar lebih lengkap bisa juga kita custom agar disitu sekalian terdapat form email subscriber dan tombol social share. Untuk membuat author box muncul di setiap posting blog juga penerapannya tidak sulit, hanya dengan sedikit menambahkan kode yang terdapat dibawah kedalam edit HTML template blog maka author box sudah terpasang. Untuk langkah-langkah penerapannya, berikut tutorial cara Membuat Author Box Dibawah Posting Blog.

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 == &quot;item&quot;'>
<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'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=masandes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 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>
Keterangan:
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.

Berlangganan artikel via email

39 Response to "Membuat Author Box Dibawah Posting Blog"

avatar
Anonymous

tutorial disini selalu mangtab. ^_^

Balas

wah 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

Balas

Weis lama tak jumpa .. maknyus nih author boxnya mas ..kreeeeeeennnn

Balas

ooow,,,jadi nambah ilmu,,,
namanya author box ya,,,,
g bsa otak atik mas, , g ada pc

Balas

keren sekali ini author boxnya.. inin sekali untk memasangnya? salam kenal saja gant dari blogger baru

Balas
avatar
Anonymous

Salam Mas Andes..Daftar Hadir di Postingan Terbaru yang pasti
Bermanfaat untuk pelengkap SEO sebuah Blog,. idzin simak
dan idzin download Mas..terima kasih atas Artikel nya salam sejahtera.

Balas

makasih mas atas tutorialnya, sangat mambantu :)

Balas
avatar
Anonymous

Waduh Repot banget,. Mas ngukur ukuran Author Box buat template saya.
Kalau 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....

Balas

met pagi....kembali hadir dngn kondisi sehat wal afiyat.

ini ada versi baru ya kotak adminnya

Balas

hehehe puyeng yah kang.. mudah kok buat ngubah lebarnya, ubah saja pada bagian yang cetak tebal:

.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;
}

Balas

author box ku sepertinya harus diupdate lagi dech :-)

Balas

mangtabbbb pokonnya,,,,,
Gimana kabarnya mas, maaf baru bisa nonghol lagi

Balas
avatar
Anonymous

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.

Balas
avatar
Anonymous

keren nih widgetnya,, mungkin nanti saya coba

Balas

Kayaknya bagus ya kalau disetiap akhir postingan disisipi kotak penulis. Selain bisa mempercantik performa blog, juga bisa digunakan untuk mejeng. Hehehehe :)

Izin save tutorialnya. Kapan-kapan mau praktek biar blog saya terlihat lebih keren seperti blog ini :D

Balas

Lagi awal ngeblog sy udah pernah pasang widget author ini mas..

Cuman yang ini udah di modif jd versi terbaru ya mas..
Keren deh :)

Balas

Kemana aja mas Alex..baru nongol lagi nih :)

Balas

emangnya motor di modif wkwkwkwk

Balas
avatar
Anonymous

Makasih sharenya Mas Andes, aku lg nyari sepah yg masih manis nih....

Balas
avatar
Anonymous

author box slain menunjukkan identitas kita dan blog kita,apa lagi bang??
maaf kalau nanya hehehe



komen back yeee

Balas
avatar
Anonymous

Akhirnya usaha saya gak sia-sia Mas Andes..
Author 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

Balas

Terimakasih atas sharingnya.

Balas
avatar
Anonymous

kayaknya kalau dipasang di belog saya .. jadi mantab deh belognya

Balas

jadi berat gk gan loading nya??

Balas

tak gendong kemana-mana mas budi :)

Balas

aku sudah punya author box cuma nggak secantik ini sepertinya mesti diganti punya saya

Balas

Asem...nih mas virlyz :)

Balas

Haha...enak sampe ketiduran dong..yg di gendong mas

Balas
avatar
Anonymous

keren ada permalinknyaa

Balas
avatar
Anonymous

mantab juga ya CSS nya

Balas

Mantap tutorialnya mas,,,


Dsini sdah banyak sukses turorialnya,,,

Balas

Ijin bukmak dulu mas...pingin cobain pake kotak author.
Thanks sebelumnya

Balas

aduh kok gak bisa ya...mohon penyegarannya

Balas

tidak bisanya bagaimana..

Balas
avatar
Anonymous

bagus kayaknya kl dipasang di blogku, tapi gmn saya dapatkan ID evolutionsfacebook dan googleplusnya...? mohon pencerahan...!

Balas

Terima Kasih Mas sangat membantu :D
Kunbal : http://p4ndoo.blogspot.com

Balas

Mas, klo sudah nyetel robot text. apa mestidiedit juga meta tag nya?

Balas

wah ternyata bikin pusing juga masangnya,,,,tanks

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Author Box Dibawah Posting Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode