Membuat Author Box Dengan Tombol Langganan Dan Social Media

mencoba sharing cara membuat author box dengan tombol langganan dan social media juga permalink.

Seharian ini saya kutak-katik kode dan mengambil referensi dari beberapa blog untuk membuat sebuah widget author box agar penampilannya cukup pantas dipajang di blog heheheh... Jadi jika ada pertanyaan dari Anda yang belum terjawab seharian ini saya mohon maaf ya... Tapi enggak tahu juga ya apa pantas untuk orang lain? hehehe... Terserah Anda lah mau pakai atau tidaknya hehehehe....

Maklum selera orang pastinya berbeda-beda, jadi saya tidak memaksakan untuk mencoba menggunakan widget ini. Widget author box ini dilengkapi photo author, link author, tombol langganan, tombol social media sharing, dan permalink di atasnya. Dan untuk image social medianya sudah menggunakan css sprite jadi hanya terdapat satu gambar untuk membentuk 4 buah tombol social media sharing. Untuk DEMO-nya silahkan lihat pada bagian bawah postingan ini. Jika ada yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan 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/AVvXsEi7rM7IEYnUbbfihRy2LPojV-otR_adOb1VAhEtbyjV3Hm2ARPtCpW0bNP86TG_kGQigkobZ29Bk6rrNY-VNxdFarL_h7k10mGTcl_CvQffyjcpPeWim2vrwIy0XxYYIgfg393v5dT3wO5r/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.

2. Silahkan copy kode pemanggilnya (kode HTML) di bawah ini dan simpan di daerah footer postingan, bisa disimpan di atas atau di bawah tombol sharing social media.

<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 Kompi Ajaib.</p>
<ul class='kompisocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/winkom' target='_blank' title='Rss'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/suakcot' target='_blank' title='Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/winkom' target='_blank' title='Facebook'>FaceBook</a>
</li><li class='bicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=nomor id blogger' 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=winkom&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='winkom'/>
<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. Selesai, tinggal save template Anda.

Saya kira sudah cukup penjelasannya untuk membuat author box dengan tombol langganan dan social media juga permalink ini. Selamat berkreasi...

referensi:

1. http://www.lost-sector.net/

2. http://www.makingdifferent.com/