Pasang Author Box Dengan Tombol Langganan dan Sosial Media

Kode Iklan Di Sini
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(http://4.bp.blogspot.com/-KiI4jYMZRr0/UZ9cBDbJJEI/AAAAAAAAYp4/nEsq4M5HraQ/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> 

Untuk kode yang berwarna biru adalah url photo author, silahkan ganti dengan url photo Anda dengan ukuran photo 110px x 110px. Untuk yang berwarna merah silahkan ganti dengan kata-kata Anda sendiri. Dan untuk kode yang berwarna hijau silahkan sesuaikan dengan akun feedburner, twitter, url page facebook, dan ID blog Anda.

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

sumber

You Might Also Like:

Disqus Comments