Sebenarnya saya sudah pernah memposting cara membuat author box dengan permalink, mampu Anda baca DI SINI. Nah sekarang saya akan mencoba sharing cara membuat author box dengan tombol langganan dan social media juga permalink.
Seharian ini saya kutak-katik instruksi dan mengambil rujukan dari beberapa blog untuk membuat sebuah widget author box semoga penampilannya cukup pantas dipajang di blog heheheh... Kaprikornus bila 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 bab bawah postingan ini. Jika ada yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
1. Silahkan copy instruksi 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/AVvXsEjy8V_kYB98dsdIjlph7T2_nAE9JzjgymPNdPynJKFKGdfT0GbR9Dx2XSYXuXmpU2h0zEHQo-v9E0TDAJOKsBrNKjwq0nEwqIenAluTzPLQgI1V__SFXqx6kL2aaz0Ygkr9dWPHl0TroxmW/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 instruksi yang berwarna merah, itu instruksi yang mampu Anda modifikasi semoga sesuai dengan tampilan blog Anda.
2. Silahkan copy instruksi pemanggilnya (kode HTML) di bawah ini dan simpan di kawasan footer postingan, mampu 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 berguru dan membuatkan pengetahuan dan pengalaman dengan yang lain. Semoga yang saya sharing di sini mampu bermanfaat. Silahkan masukan email Anda pada kotak di bawah ini untuk menerima update artikel dari Kompi Ajaib.</p>
<ul class='kompisocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/KompiAjaib' target='_blank' title='Rss'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/kompiajaib' target='_blank' title='Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title='Facebook'>FaceBook</a>
</li><li class='bicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2583045784323695327' 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('http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='KompiAjaib'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email....";}' onfocus='if (this.value == "Enter your email....") {this.value = "";}' 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 instruksi yang berwarna biru yakni 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 instruksi 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...
Sumber referensi:
1. http://www.lost-sector.net/
2. http://www.makingdifferent.com/
Komentar
Posting Komentar