Author box adalah widget notic atau catatan mengenai riwayat atau pesan dari penulis diblog dan menurut saya ini wajib ada pada blog milik anda sebagai pelengkap dan penambah unik blog anda, baru-baru ini saya sudah memasang author box ini dibawah posting milik saya, terlihat unik bukan.
untuk membuat author box ini kita harus melakukan pemasangan dan pengeditan pada template blog milik kita jadi saya sarankan sebelum nya untuk melakukan beckup pada template milik anda sebelum melakukan pemasangan author box ini untuk menghindari hal-hal diluar perkiraan seperti gagalnya pengeditan, untuk itu silahkan baca cara beckup template pada blog.
 |
| Cara membuat author box dibawah posting |
dengan menaambahkan author box pada blog kita ini bertujuan memberitahu penulis posting yang sedang dibaca oleh para pengunjung tersebut, memang tidak semua blogger memasang author box pada blog nya entah itu karena bawaan template nya yang tidak disertai author blog atau entah karena ketidak sukaan nya terhadap author box ini namun tidak sedikit juga blogger yang sudah memasang author box ini diblog nya.
bagi kawan-kawan yang belum tau apa itu author box dan bagaimana tampilan nya mungkin bisa dilihat dibawah posting ini, akan tampil keterangan mengenai saya atau lebih jelasnya seperti contoh pada gambar dibawah ini :
 |
| Cara membuat author box dibawah posting |
nah seperti itulah contoh author box yang akan kita buat dengan tutorial yang akan saya berikan dibawah ini :
Cara membuat author box dibawah posting
1. Login ke akun blogger milik kawan-kawan.
2. Langsung menuju Template => Edit HTML
3. Cari code ]]></b:skin> , setelah ketemu lalu letakan code dibawah ini tepat di atas code ]]></b:skin>
/*BOX AUTHOR*/
.boxauthor{position:relative;border:1px solid #000;background:#eee;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}
.boxtitle h3{color:#000;font:bold 14px Electrolize;background:#eee;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}
.boxtitle h3:before{content:'';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxtitle h3:after{content:'';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo{float:right;background:#eee;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}
.boxauthor_photo:before{content:'';position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo:after{content:'';position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}
.boxauthor_photo img{width:120px;height:120px;border:2px solid #444}
.boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}
.boxsocial{background:#eee;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}
.boxsocial :before{content:'';position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial :after{content:'';position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial div{float:left;margin-right:6px;width:88px}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
<data:post.body/> setelah ketemu letakan code dibawah ini tepat dibawah code tadi.<div class='boxauthor'>
<div class='boxauthor_photo'>
<img alt='Yuli Agustiani' src='https://lh5.googleusercontent.com/-2Xk7-5o8i74/AAAAAAAAAAI/AAAAAAAAAAA/pohVfM1BVsg/s128-c-k/photo.jpg' title='Yuli Agustiani'/>
</div>
<div class='boxtitle'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Yuli Agustiani'><data:post.author/></a></h3></div>
<div class='boxcontent'>
Terimakasih, telah membaca artikel mengenai <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>. Semoga artikel ini bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/+YuliAgustina-info?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/poskast' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/poskast' rel='me' target='_blank' title='Twitter'>Twitter</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.
</div>
<div class='boxsocial'>
<div class='boxsocialtitle'>
Share Artikel
</div>
<div class='boxfb'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
</div>
</div> dan silahkan lihat hasilnya jika kawan-kawan mengikuti langkah-langkah yang telah saya berikan diatas dengan benar maka hasilnya akan sempurna jika terdapat error atau gagal silahkan coba ulangi dan ikuti langkah-langkah yang telah saya berikan diatas tadi dengan benar dan semoga berhasil.
sekian posting kali ini mengenai cara membuat author box dibawah posting semoga posting kali ini bermanfaat dan mendambah wawasan anda, terimakasih.
0 comments:
Post a Comment