Author Box Cantik dan Multi Fungsi

Kemarin saya sudah menjelaskan bagaimana cara memasang author box multi fungsi. Kali saya akan memposting kembali cara memasang author box cantik dan multi fungsi. Pada dasarnya, widget ini mempunyai kesamaan cara kerja, namun tampilan dan kemudahan fasilitas pada author box ini yang membuat widget tersebut mempunyai daya tarik tersendiri. Author box ini di lengkapi dengan permalink, tombol koneksi sosial media, dan fasilitas email subscribe. Posisi gambar diletakkan disebalah kanan dan dilengkapi dengan efek gerak ketika kursor mengenai gambar (tilt). Selain itu widget permalink yang ditambahkan merupakan widget otomatis, sehingga anda tidak perlu lagi melakukan perubahan pada widget tersebut. Silahkan lihat demonya pada akhir posting ini. Baiklah, sekarang mari kita bahas cara pasang widget author box cantik dan multi fungsi untuk blogspot. Ikuti langkah berikut.
Log in ke blogger
Klik Template
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<style>
.blogonolauthor_info{float:left; width:auto; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:#eee; color:#000}
.blogonolauthor_info:hover{background:#eee; border:1px solid #ccc; -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)}
.blogonolauthor_info h3{color:#000; margin-bottom:10px}
.blogonolauthor_info h3:hover{border:1px solid #EEE; -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)}
.blogonolauthor_photo{float:right; margin:0 0 0 10px}
.blogonolauthor_photo img{border:1px solid #666; -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}
.blogonolauthor_photo img:hover{background:#FFF; border:1px solid #EEE; -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)}
ul.blogonolsocial{list-style:none; margin:10px; overflow:hidden}
.blogonolsocial li{float:right; background:none !important; padding:0 !important; margin:0 8px}
.blogonolsocial li a{display:block; width:40px; height:40px; background:url("http://2.bp.blogspot.com/-IMM_B7aaLQA/T7ObAft4GbI/AAAAAAAADN0/mT6xK72Xe9I/s1600/social.png") no-repeat transparent; text-indent:-99999em !important}
.blogonolsocial li a:hover{padding:0 !important}
.blogonolsocial li.rssicon a{background-position:0 0}
.blogonolsocial li.twicon a{background-position:-50px 0}
.blogonolsocial li.fbicon a{background-position:-100px 0}
.blogonolsocial li.gicon a{background-position:-150px 0}
.blogonolsocial li.rssicon a:hover{background-position:0 -50px}
.blogonolsocial li.twicon a:hover{background-position:-50px -50px}
.blogonolsocial li.fbicon a:hover{background-position:-100px -50px}
.blogonolsocial li.gicon a:hover{background-position:-150px -50px}
.blogonollinediv{margin-top:25px; height:0px; clear:both; display:block; border-top:1px solid #fefefe; border-bottom:1px solid #CCC}
.blogonolemailbutton{background:#f7f8f9; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1)); background:-webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:-moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:-o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0 ); border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:6px 12px; margin:0; -webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); -moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); color:#888; text-shadow:0 1px 0 #fff; line-height:1.2; cursor:pointer; font-size:13px}
.blogonolemailbutton:hover{background:#f1f1f1; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1)); background:-webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:-moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:-o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0 ); text-decoration:none !important}
.blogonolemail{clear:both; width:250px; margin:10px 0; float:left}
.blogonolemailform{position:relative; width:250px; margin:0 auto}
.blogonolemailinput{width:200px; height:18px; margin:0 auto; padding:8px 40px 8px 10px; border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-family:georgia; font-style:italic; -webkit-box-shadow:1px 1px 2px #dfdfdf; -moz-box-shadow:1px 1px 2px #dfdfdf; box-shadow:1px 1px 2px #dfdfdf; font-size:14px; color:#666}
.blogonolemailbutton{-webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomright:4px; border-top-right-radius:4px; border-bottom-right-radius:4px; -webkit-border-top-left-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-topleft:0px; -moz-border-radius-bottomleft:0px; border-top-left-radius:0px; border-bottom-left-radius:0px; padding:9px; position:absolute; right:-2px; top:0; display:block; line-height:16px}
.blogonolemailbutton{padding:8px !important}
.blogonolemailform, .blogonolemailinput{width:98% !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:auto}
</style>

Selanjutnya masukkan kode berikut di bawah kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-1'/>

<b:if cond='data:blog.pageType == "item"'>
<div class='blogonolauthor_info'>
<div class='blogonolauthor_photo'>
<img alt='author' height='150' src='ALAMAT FOTO ANDA' width='150'/>
</div>
<h2>About <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h2>
<p><a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> TULISKAN SECARA SINGKAT MENGENAI ANDA ATAU BLOG ANDA. </p>
<h2>Lisensi Artikel</h2>
<p>Artikel <a expr:href='data:post.url'><data:post.title/></a> diposting oleh <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a> pada <data:post.dateHeader/>. Anda boleh menyebarluaskan atau mengcopy paste <strong><data:blog.pageName/></strong> pada blog anda, namun jangan lupa untuk meletakkan link <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a> sebagai sumbernya. Tinggalkan kritik dan saran melalui kotak komentar untuk pembelajaran dan perkembangan <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> ke depannya. Terima kasih atas kunjungan anda. "keep spirits and do the best"</p>
<div class='blogonollinediv'/>
<div class='blogonolemail'>
<small style='text-align:center;'>Get Free <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> Updates to your Inbox!</small>
<form action='http://feedburner.google.com/fb/a/mailverify' class='blogonolemailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME_FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='USERNAME_FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='blogonolemailinput' 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 class='blogonolemailbutton' title='' type='submit' value='SignUp'/>
</form>
</div>
<ul class='blogonolsocial'>
<li class='rssicon'>
<a href='http://feeds.feedburner.com/USERNAME' target='_blank'>Rss</a>
</li><li class='twicon'>
<a href='http://twitter.com/USERNAME' target='_blank'>Twitter</a>
</li><li class='fbicon'>
<a href='http://facebook.com/USERNAME' target='_blank'>FaceBook</a>
</li><li class='gicon'>
<a href='https://plus.google.com/ID_GOOGLE PLUS' rel='me' target='_blank'>Google +</a>
</li>
</ul>
</div>
</b:if>

Silahkan edit sesuai petunjuk pada tulisan cetak tebal dan berwarna merah, kuning, dan biru. Selanjutnya klik Simpan Template dan lihat hasilnya. Demikian tutorial pasang author box cantik dan multi fungsi untuk blogspot. Semoga bermanfaat bagi semua. Amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"

Author Box Cantik dan Multi Fungsi

BLOGONOL TUTORIAL

Author Box Cantik dan Multi Fungsi

Unknown 8 Comments

About the Author