Hasil dari Author Box yang akan kita pasang pada blog dapat sobat bloger lihat di bagian bawah blog ChekMad.
Tanpa Basa basi dengan segelas kopi mari kita mulai membuat Author Box yang di maksud.
- Seperti Biasa Login ke Blogger dan pilih Blog yang ingin anda pasangin widget ini.
- Klik Template » Edit HTML
- Kemudian Carilah kode ]]></b:skin> atau </style>
- Letakan kode di bawah ini sebelum kode tersebut diatas
/*Author Box ChekMad*/
.boxauthor{position:relative;border:1px solid #000;background:#DFE6EF;margin:25px 0 15px;padding:10px}
.boxtitle h3{color:#000;font:bold 14px Electrolize;background:#900 ;width:103.3%;display:block;position:relative;border:1px solid #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:#900 ;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}
Kemudian, carilah kode <data:post.body/> dan Pasang Kode di bawah ini : (Kode di bawah ini berguna untuk memanggil CSS yang kita buat di atas tadi, kecuali kode Widget share nya tidak ikut, karena chekmad anggap sobat sudah memasang Kode widget share di artikel sebelumnya)
<div class='boxauthor'>
<div class='boxauthor_photo'>
<img alt='ChekMad' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9M-ruhqMXl69Na1hIQRJ69llHEf3oy3tAUfItnypPNtAuk0Kees-2qXbQKU6f2tbheslcF32-9nX-CWQRZVR80xDSAmr2t1tUIh-U8gBjgYYJZTsjujAa402HP-_DznzkpdRx_x_KIk/s1600/Chek+FB+Profil.png' title='ChekMad Bloger Cepot'/>
</div>
<div class='boxtitle'>
<h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Chekmad'><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/118420113726094753852?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/Chek404' rel='me' target='_blank' title='Facebook'>Facebook</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.
</div>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
<div class='boxltsme'>
</div>
</div>
</div>
Nah, Selesai Silahkan di Simpan
Catatan :
Ganti kode : <img alt='ChekMad' src='http://3.bp.blogspot.com/-NCFXF ... dst dengan gambar sobat
Ganti yang di beri warna merah dengan ID sobat
