Pasang Author Box Dengan Tombol Langganan dan Sosial Media

Pasang Author Box Dengan Tombol Langganan dan Sosial Media, Anaktimor17 Blog - Sobat sebelumnya saya sudah memposting cara membuat kotak admin di bawah posting.
Nah kali ini saya akan membagikan cara membuat author box di bawah posting + tombol langganan email dan sosial media. Untuk pemasangannya silahkan ikuti langkah"-nya dibawah ini:

Cara Pasang :

1. Anda copy kode css di bawah ini:

 .kompiauthorbox{background:#e1e1e1;position:relative;border:1px solid #bbb;height:165px;width:98%;transition:all .3s ease-in;margin-bottom:10px;padding:5px}
.kompiauthoravatar{background:#fff;border:1px
 solid 
#ccc9bd;float:left;height:110px;position:relative;border-radius:4px;box-shadow:0
 0 4px 0 #d9d9d9;width:110px;padding:2px;margin-left:3px}
.kompiauthoravatar img{height:110px;width:110px;border:0;border-radius:2px}
.kompiauthoravatar img:hover{transition:all .2s ease-in-out;opacity:.7}
.kompiauthorlabel{background:#b0130d;display:block;line-height:20px;height:20px;margin-left:-44px;position:absolute;bottom:-10px;left:50%;text-align:center;width:86px;border:1px solid #E02424;border-radius:3px}
.kompiauthorlabel:hover{background:#E02424;border:1px solid #b0130d;transition:all .2s ease-in-out}
.kompiauthorlabel a{font:bold 11px sans-serif;color:#fff}
.kompiauthorcontent{margin-left:125px}
.kompiauthorhead{background:#ccc;border-bottom:1px solid #bbb;margin-bottom:5px;position:relative;padding:5px}
.kompiauthorbox h3{font:12px Tahoma;font-weight:400;color:#302E29;line-height:1.8em;border:none;text-transform:uppercase;text-decoration:none;transition:all .2s ease-in-out;margin:0}
.kompiauthorbox p.bio{font:12px sans-serif;line-height:18px;text-align:justify;margin:0}
ul.kompisocial{list-style:none;overflow:hidden;margin:10px}
.kompisocial li{float:right;background:none!important;margin:0 7px;padding:0!important}
.kompisocial
 li 
a{display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkX-gghFkskv-j5iO9orYP52RtgiYGC4c7CqsPnIufvItVmARz7e5TFf2amxEJE_duXjxvVBsyyYUoDG-M7AtugHXmrUr3GErO76Ln2EbVQ4HPO8rUj3vZ5aeiMJ0bjfZN9EbiAxLxUOWZ/s320/social4.png)
 no-repeat transparent;text-indent:-99999em!important}
.kompisocial li a:hover{padding:0!important}
.kompisocial li.rssicon a{background-position:0 0}
.kompisocial li.twicon a{background-position:-37px 0}
.kompisocial li.fbicon a{background-position:-74px 0}
.kompisocial li.bicon a{background-position:-112px 0;}
.kompisocial li.rssicon a:hover{background-position:0 -37px}
.kompisocial li.twicon a:hover{background-position:-37px -37px}
.kompisocial li.fbicon a:hover{background-position:-74px -37px}
.kompisocial li.bicon a:hover{background-position:-112px -37px;}
.kompiemailform {float:left;margin-top:-40px;margin-left:125px;padding:0}
#botsub {width:180px} 

NB: Kode yg berwarna merah adalah kode yg dapat anda modifikasi sesuai tampilan blog Anda !!

2. Copy kode dibawah ini dana Anda taruh di bawah posting blog Anda.

 <div class='kompiauthorbox'>
<div class='kompiauthorhead'>
<h3>
Judul Artikel: <a expr:href='data:post.url' expr:title='data:blog.pageName'><data:blog.pageName/></a></h3>
</div>
<div class='kompiauthoravatar'>
<img alt='About Author' src='URL PHOTO ANDA' title='About Me'/>
<div class='kompiauthorlabel'><a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='author profile'><data:post.author/></a></div>
</div>
<div class='kompiauthorcontent'>
<p class='bio'>
  Saya hanya blogger biasa yang senang belajar dan berbagi pengetahuan dan pengalaman dengan yang lain. Semoga yang saya sharing di sini bisa bermanfaat.Temukan saya <a class='g-profile' href='https://plus.google.com/112136672487238015009' rel='publisher' target='_blank' title='Markus Kono on Google+'>Markus Kono on Google+</a>.Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan update artikel dari Anaktimor17 Blog.</p>
<ul class='kompisocial'>
<li class='rssicon'>
<a href='http://anaktimor-17.blogspot.com/feeds/posts/default' target='_blank' title='Rss'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/markuskono' target='_blank' title='Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/nilulat' target='_blank' title='Facebook'>FaceBook</a>
</li><li class='bicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=622076559416675966' target='_blank' title='Follow This Blog'>Follow This Blog</a>
</li>
</ul></div>
<div class='kompiemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Anaktimor-17Blog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Anaktimor-17Blog'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small></form>
</div>
</div> 

3. Save template Anda !! Selamat mencoba dan Happy Blogging !!

sumber