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

Cara Membuat Author Box Dibawah Posting Blogger

widget Author Box Blogger Cara Membuat Author Box Dibawah Posting Blogger – melanjutkan widget  author box yang sudah saya posting sebelumnya pada tutorial yang berjudul membuat permalink blogger maupun membuat author box dibawah posting blog, maka sekarang kembali melanjutkan tutorial tersebut namun tentu saja dengan versi yang berbeda. Untuk warna yang digunakan masih sama dengan tema-tema yang sebelumnya karena saya paling suka menggunakan dominan warna hijau. Cara penerapan maupun fiturnya juga masih sama seperti pada author box sebelumnya. Semua pasti sudah sangat paham dan lebih tahu benar fungsi dari widget author box, sedikit penjelasan tentang author box adalah selain untuk biodata dari penulis atau admin blog yang tidak lain merupakan untuk informasi detail author ke visitor dan bisa juga untuk menaruh permalink dll. Supaya lebih mudah untuk penerapannya, berikut tutorial Cara Membuat Author Box Dibawah Posting Blogger.

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-authorbox { position: relative; margin: 15px auto; padding: 10px 10px 5px 10px; width:500px; border: 2px solid #52e052; background: #e9fbe9; } .evolutions-avatar { background: #52e052; float: left; height: 128px; width: 128px; left: -22px; padding: 5px 5px 5px 25px; position: relative; } .evolutions-avatar img { height: 125px; width: 125px; border: 2px solid #000; } .evolutions-authorcontent { margin-left: 160px; } .evolutions-titlebox { background: #52e052; width:364px; left: -22px; margin-bottom: 5px; padding: 5px 0px 5px 20px; position: relative; } .evolutions-titlebox a{ color: #000;} .evolutions-titlebox :before { content: ' '; position: absolute; bottom: -118px; left: -160px; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: #55B05A transparent transparent transparent; } .evolutions-titlebox :after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent #55B05A; } .evolutions-authorbox h3 { font:bold 14px Verdana; color: #000; line-height: 20px; margin: 0; } .evolutions-info { font:12px Trebuchet MS; text-align:justify; color:#000; } .evolutions-info a { color: #000; text-decoration: none; } .evolutions-footerbox{ padding:10px 0 0 0; font:12px Trebuchet MS; } .evolutions-social{ overflow: hidden; } .evolutions-social a{ display: block; color: #FFFFFF !important; font-weight: 600; font-family: "Tahoma",Verdana,Arial; text-decoration: none; transition: border-radius 0.50s; } .evolutions-social a:hover{ border-radius: 10px 0px; } .evolutions-social div{ float: left; margin-right: 6px; width: 79px; } .evolutions-social .evolutionsfacebook a{ padding: 7px 0px; text-align: center; background: #3B5999; } .evolutions-social .evolutionsfacebook a:hover{ background: #52e052; } .evolutions-social .evolutionstwitter a{ padding: 7px 0px; text-align: center; background: #01BBF6; } .evolutions-social .evolutionstwitter 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-authorbox'>
<div class='evolutions-avatar'><img alt='Mas Andes' src='https://lh3.googleusercontent.com/-u54v71E4zDI/Uh-vH65CbtI/AAAAAAAAGDE/eobkgNcxt5o/s96-c/mas-andes.jpg'/>
</div>
<div class='evolutions-authorcontent'>
<div class='evolutions-titlebox'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></h3></div>
<div class='evolutions-info'>
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='39' 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='evolutions-footerbox'>
<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='evolutionstwitter'>
<a href='https://twitter.com/rizkyandes' target='_blank' title='Join on Twitter'>Twitter</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></br>
<span style='font:10px arial;float:right;padding-top:5px;'><a href='http://mas-andes.blogspot.com/2013/09/membuat-widget-author-box-blogger.html' target='_blank'>[ Get This Widget ]</a></span>
</div></div></div>
</div>
</b:if>
Keterangan:
Ganti teks warna biru dengan URL foto anda.
Ganti teks warna merah dengan ID masing-masing.

5. Langkah terakhir klik Simpan Template.

Yang perlu diperhatikan pada saat menerapkan adalah kode <data:post.body/> karena pada suatu template blog biasa terdapat 2 kode tersebut atau bisa juga lebih. Jika pada template blog yang saya gunakan pada point ke-4 diatas saya taruh kode tersebut tepat dibawah kode <data:post.body/> yang terakhir, silahkan bisa disesuaikan dengan template blog yang digunakan masing-masing. 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

57 Response to "Cara Membuat Author Box Dibawah Posting Blogger"

avatar
Anonymous

Salam Mas Andes.. DAFTAR HADIR No Waid
Di Artikel yang baru dan selalu membantu para
blogging, waduh baru selesai versi yang kemarin
Ini sudah ada lagi versi yang beda namun tidak
Kalah kerenya,.. memang Mas Andes ini fakar
Nya CSS ,. Saya solout deh sama Mas Andes ini

Tapi saya terinfirasi milih yang pertama saja yah
Mas Karena lebih fresh dengan template saya.
Terima kasih untuk semua ini Mas...

Balas
avatar
Anonymous

Wah udah ada postingan baru lagi, memang perlu juga nih mas dikasih nama Author dibawah post blog, biar jelas siapa yang ngepost, sukses selalu mas :)

Balas
avatar
Anonymous

Kapan-kapan ane coba mas,,,, keren nich ada tombol SB nya sekali...

Balas

author lagi nih mas ... memang penting keberadaannya biar org tau siapa kita hahaha

Balas
avatar
Anonymous

setuju, biar makin terkenal juga. ^_^

Balas

keren nih mas, tiap blog yang saya jumpai kebanyakan ada giniannya, termasuk blog saya yang bawaan template si pembuat

Balas
avatar
Anonymous

dengan bumbu atau inovasi yang sedikit berbeda memang sangat memoles tampilan, lanjutkan mas! :)

Balas

sangat bermanfaat mas, ijin praktek N salam kenal ja

Balas

Aku belum punya widget ini. lain waktu jika ingin memasangnya tinggal mampir kesini. terimakasih

Balas
avatar
Anonymous

Berarti seperti widget dibawah artikel ini ya mas authornya.

Balas

wah wah author box satunya belum selesai dipraktekkan sudah muncul tutorial yang satunya lagi...benar-benar luarbiasa :-)

Balas

sugeng dalu mas andes,,,mampir lagi dimari selagi online

Balas
avatar
Anonymous

wuih, keren banget widgetnya bang,,,,

Balas

iya kang terserah mau pilih yang mana.. asal jangan pilih istri orang aja :) hehehe

Balas

emang yang ngepost siapa mas :)

Balas

masih keren foto adminnya deh kayaknya :D

Balas

numpang komen ah biar tenar kayak penyanyi dangdut :)

Balas

boleh juga mas kalo bawaan template si pembuat, asal jangan bawa pembalut aja :)

Balas

iya mas ntar saya lanjutkan oles2 layar LCD-nya pake amplas :)

Balas

iya mas ntar surat ijinnya saya kasih ke bu guru :)

Balas

oke deh pak Bumi terimakasih kembali :)

Balas

seperti yang ada di gambar aja mas ah :)

Balas

kebetulan pngen share pak har jadinya saya posting aja :)

Balas

sugeng dalu mas virlyz kebetulan saya juga mampir lagi dimari :)

Balas

keren mana sama adminnya bang :D

Balas
avatar
Anonymous

yang ngepost yang diatas saya mas hehe...

Balas

kalau udah terkenal nanti pada minta tanda tangan malah repot tuh...

Balas

nah kalau itu bahaya mas hehe...

Balas

pasti kerenan yang komen donk mas hehe...

Balas

Kayaknya widget ini hampir sama dech dengan widget yang kemarin. Sama-sama tentang author box :D
Mudah-mudahan admin nya juga masih sama. Nggak ganti-ganti :D

Balas

hahahaha .. berharap beda y hihi

Balas

hahaha...emang saya cowok apaan pakai pembalut segala

Balas

praktek kerja lapangan, hehehe

Balas

kalau adminnya ganti bisa bingung entar hehe...

Balas

Nenek bilang..itu berbahaya... :)

Balas

Yang calon bos...yg di bawah :)

Balas

Tapi ndak perlu di stempel juga kan :)

Balas

Jgn pake amplas mas...cukup pake kemoceng aja..

Balas

Mas Agus ketawanya sambil merem...hehe
Piss loh mas

Balas

Mas Andes..emang suka yang di luar2 kok bang..hehe

Balas

Bukan kayaknya ding mbak Rin...tapi SEPERTINYA...hehe.. :)

Balas

Mav kan sy mas Andes..
Abjad di keyboard hp ku...pada prutul kabeh..
Jadi binggung mau komen apa nih....Hehe :)

Balas

Yang penting jangan sampai galau saja mas :D

Balas

Iya mas, seperti nya wes :D :P

Balas

Saya dulu pernah nyasar di blog ini dari Google waktu nyari "Cara Merapikan Kode Script dalam Postingan Blog". Eh ketemunya malah blog ini, judul Artikel nya yang saya baca waktu adalah "Cara Memasukkan Kode HTML dalam Postingan Blog". Wkwkwkwkwk :D

Balas

WS mau pasang tapi mau pakai fotonya mas andes ah :D

Balas
avatar
Anonymous

Si admin emang jago ya kalo CSS

Balas

kalau stempel biasanya di kelurahan mas hehe...

Balas

pake lap basah mas biar kinclong hehe...

Balas
avatar
Anonymous

this is good

Balas

kalo saya sudah pake di blogku, thanks buat postingnya :)

Balas

keren postingan'nya!!!

Balas
avatar
Anonymous

keren om

Balas

mantap mas bro,saya coba praktek dan pasang permalink blog ini dan hasilnya keren

Balas

makasih mas-andes. salam kenal terima kasih atas cara membuat author box nhya

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 "Cara Membuat Author Box Dibawah Posting Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode