Cara Membuat Author Box dibawah Postingan - Author box atau kotak penulis merupakan suatu pesan yang disampaikan author atau penulis blogg kepada pembaca blog, entar apa pesan yang akan disampaikan tergantung kita sendiri sebagai pemilik blog tersebut. Dengan menggunakan Author Boxseperti ini biasanya foto Google+ kita bisa tampil di hasil pencarian google. Author box dibawah postingan ini sudah ada fitur share artikel yang akan mempermudah pembaca blog membagikan artikel Anda ke berbagai social media sperti Facebook, Twitter, Google+ dan Lintasme.
Cara membuat author box dibawah postingan blog seperti ini memang cukup mudah Anda hanya perlu memasang kode CSS dan juga HTML setelah itu mengganti beberapa kode yang diperlukan lalu selesai. Author Box ini juga sudah valid html5 jadi Anda tidak usah takut kalau blog Anda tidak akan valid html5 dengan kode ini. Langsung saja bagi Anda yang ingin memasang author box dibawah postingan blog silahkan baca tutorialnya dibawah ini :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode dibawah ini, lalu Paste diatas kode ]]></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}6. Copy kode dibawah ini, lalu Paste dibawah kode <data:post.body/>
<div class='boxauthor'>
<div class='boxauthor_photo'>
<img alt='Rahmat Agung' src='https://lh6.googleusercontent.com/-5KuwPTR39qI/AAAAAAAAAAI/AAAAAAAAA3k/jdTIAylw8IA/photo.jpg' title='Rahmat Agung'/>
</div>
<div class='boxtitle'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Rahmat Agung'><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 tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/100368921380415097230?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/Mr.Shicidaime' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/RahmatAgung0' 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>Catatan :
- Ganti kode Rahmat Agung dengan Nama Anda.
- Ganti kode Mr.Shicidaime dan RahmatAgung0 dengan ID Anda (Facebook, Google, dan Twitter).
- Untuk mengganti warna kotak penulis atau author box silahkan pilih warnanya disini Kode Warna.
- #eee adalah warna dasar (background).
Sekian artikel mengenai Cara Membuat Author Box dibawah Postingan. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
di
05.53
test
BalasHapus