Membuat Author Box Penulis Dengan Tombol Langganan Dan Social Media Ala T11U

Siang bro..!!

Kali ini saya akan mencoba sharing cara membuat Author Box Penulis Dengan Tombol Langganan Dan Social Media Ala T11U, hee..he. Ini terletak di bawah artikel blog ini. Semoga dapat membuat refrensi yang bagus buat teman-teman blogger. Langsung saja cara pembuatannya :

• Jangan lupa download terlebih dahulu templete blog anda agar tidak menyesal apabila ada kesalahan.
• Cari kode ]]></b:skin> dan letakkan kode berikut dibawahnya :

.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/AVvXsEizj0dO-Ej-mCumXk-jywPM8qDVc2ny_4i2O0qSbw7Qt0BhnGEXWcaqH1j4iDw5Kp0Qq4dUtq3gfYKCX0rGADxZiEjWQT4oriMOnPylLlx7fsgf3zrmqec86bXmlmg2RcaMPWnr9ZIBgpbs/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}

• Perhatikan untuk kode yang berwarna merah, itu kode yang bisa Anda modifikasi agar sesuai dengan tampilan blog Anda.
• Terus ente cari nih kode "<data:post.body/>" yang "KEDUA"  kemudian copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/> yang "KEDUA" tersebut.

 <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 DI SINI' 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. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan update artikel dari T11U.</p>
<ul class='kompisocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/T11U' target='_blank' title='Rss'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/T11U' target='_blank' title='Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/T11U/395526477133955' target='_blank' title='Facebook'>FaceBook</a>
</li><li class='bicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=9192150412426901945' 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=T11U&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='T11U'/>
<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>

•  Simpan templete ente, selesai.

Selamat mencoba, salam blogger.

Thnks Bro...