Cara Membuat Author Box Dibawah Posting 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.