Kenapa saya bilang memperkenalkan diri kepada pengunjung sangatlah penting? karena selain kita dapat mempererat hubungan silaturahim dengan para pengunjung, kita juga membuka peluang yang lebih besar untuk mendatangkan rezeki, pasalnya, dengan kita memperkenalkan diri dengan para pengunjung, itu artinya semakin banyak pula orang yang mengenal kita di dunia maya, dan akhirnya akan memudahkan para pengiklan atau donatur yang mungkin mereka memang sedang mencari situs dengan kriteria seperti blog kita.
Author Box atau yang sering kita sebut dengan profil box adalah widget yang menampilkan biografi atau profil dari pemilik blog, jadi nantinya di dalam suatu kotak akan ditampilkan biografi atau perkenalan singkat yang berisikan informasi mengenai si pemilik blog, dan juga tak lupa dilengkapi dengan foto profilnya. Nah, pada widget ini anda tidak akan menapatkan satu fungsi saja (memperkenalkan diri dengan biografi), namun widget ini juga sudah dilengkapi dengan beberapa fitur tambahan, seperti widget email subscription atau berlangganan via e-mail, dan juga widget social media, yang meliputi: feedburner, twitter, google+, dan facebook tentunya.
Membuat Author Box dengan Email Subscription dan Social Media
1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML.
4. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatasnya.
/* Kode css Author Box Start */ .tuliskanauthorbox{background:#e1e1e1;position:relative;border:1px solid #bbb;height:130px;width:98%;transition:all .3s ease-in;margin-bottom:5px;margin-top:5px;padding:5px}
.tuliskanauthoravatar{background:#fff;border:1px solid #ccc9bd;float:right;height:110px;position:relative;border-radius:4px;box-shadow:0 0 4px 0 #000;width:110px;padding:2px;margin-left:10px;margin-right:10px}
.tuliskanauthoravatar img{height:110px;width:110px;border:0;border-radius:2px;-webkit-transition:-webkit-transform .15s linear;
-moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;transition:transform .15s linear;
-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
box-shadow:0 3px 6px rgba(0,0,0,.25);
padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);
-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);
-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;}
.tuliskanauthoravatar img:hover{-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
box-shadow:0px 0px 10px rgba(0, 0, 0, .3);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);}
.tuliskanauthorcontent{margin-right:30px}
.tuliskanauthorbox 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}
.tuliskanauthorbox p.bio{font:12px sans-serif;line-height:18px;text-align:justify;margin:0}
ul.tuliskansocial{list-style:none;overflow:hidden;margin:10px}
.tuliskansocial li{float:right;background:none!important;margin:0 7px;padding:0!important}
.tuliskansocial li a{display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYWBmUaS25tI4QNNTDHGCPy-PqF8RYySTPbA-Rry0jum9LD8e4TAhpcE_Lmm3kBpF5KYHLvNzxW_x74JS2x4NmeX281m4TQgrGoqNdZ7ZYtH_HvjTaEKhmEw35CSIgzWa3Zs171lWymDIy/s320/social4.png) no-repeat transparent;text-indent:-99999em!important}
.tuliskansocial li a:hover{padding:0!important}
.tuliskansocial li.twicon a{background-position:-37px 0}
.tuliskansocial li.fbicon a{background-position:-74px 0}
.tuliskansocial li.twicon a:hover{background-position:-37px -37px}
.tuliskansocial li.fbicon a:hover{background-position:-74px -37px}
.tuliskanemailform {float:left;margin-top:-40px;margin-left:5px;padding:0}
#botsub {width:180px}
/* Kode css Author Box End */
5. Masih di Edit HTML, cari kode <data:post.body/>, lalu letakkan kode berikut ini tepat dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div class='tuliskanauthorbox'>
<div class='tuliskanauthoravatar'>
<img alt='About Author' src='https://si0.twimg.com/profile_images/3584877750/7bd01ef69da56b1abccdee844a6288e0.jpeg' title='Me'/>
</div>
<div class='tuliskanauthorcontent'>
<p class='bio'>
Perkenalkan saya Muhammad Farhan, seorang pelajar yang mempunyai hobi blogging, karir saya nge-blog dimulai pada tahun 2011, tepatnya pada saat saya sedang mencari apa hobi yang akan saya jalankan di dunia online. Dibawah ini adalah kotak berlangganan email.</p>
<ul class='tuliskansocial'>
<li class='twicon'>
<a href='http://twitter.com/tuliskancom' target='_blank' title='Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/tuliskancom' target='_blank' title='Facebook'>FaceBook</a>
</li>
</ul></div>
<div class='tuliskanemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tuliskancom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='tuliskancom'/>
<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>
</b:if>
Keterangan:
- Ganti tulisan yang berwarna merah dengan Biografi singkat anda
- Ganti kode yang berwarna biru tua dengan ID Feedburner blog anda
- Ganti kode yang berwarna biru muda dengan Username Twitter anda
- Ganti kode yang berwarna hijau dengan ID / Nama Fan Page Facebook anda
- Ganti kode yang berwarna ungu dengan URL gambar foto profil anda
6. Klik "Save/Simpan" Template, dan selesai.
Demikian informasi terbaru tentang Membuat Author Box dengan Email Subscription dan Social Media, simak juga artikel menarik lainya seputar tutorial dan tips trik blog tentang Cara Membuat Widget Social Media Warna Warni di Blog, semoga bermanfaat, dan selamat mencoba.
Special Thanks To : Kompi Ajaib
EmoticonEmoticon