Membuat Author Box Dengan Tombol Langganan Dan Social Media

Sebenarnya saya sudah pernah memposting cara menciptakan author box dengan permalink, sanggup Anda baca DI SINI. Nah kini saya akan mencoba sharing cara menciptakan author box dengan tombol langganan dan social media juga permalink.

Seharian ini saya kutak-katik isyarat dan mengambil acuan dari beberapa blog untuk menciptakan sebuah widget author box biar penampilannya cukup pantas dipajang di blog heheheh... Kaprikornus jikalau 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 memakai 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 memakai 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 isyarat 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/AVvXsEi6VBiTRX6B9BCXCEWAjy9wG2vx2988HCdadobVHjNaVhqenwZNUmGC-H3yP1Nse33i5yb9VilqKyz1f4kin5YLF3xf00ntGLMh6451DXyTNW-uVOFb81u5wlM7NkqGAbu6tIR-R3-sFLM7/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 isyarat yang berwarna merah, itu isyarat yang sanggup Anda modifikasi biar sesuai dengan tampilan blog Anda.

2. Silahkan copy isyarat pemanggilnya (kode HTML) di bawah ini dan simpan di kawasan footer postingan, sanggup 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 bahagia mencar ilmu dan membuatkan pengetahuan dan pengalaman dengan yang lain. Semoga yang saya sharing di sini sanggup bermanfaat. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapat 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &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 isyarat yang berwarna biru ialah 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 isyarat 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 menciptakan 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/

Sumber https://www.kompiajaib.com/

Share this post