Pengunjung Blog Anda pun menjadi mudah untuk berlangganan Feed Blog Anda karena cukup satu kali klik saja untuk mulai berlangganan. Simpel dan praktis kan?. Untuk contoh bagaimana hasil dari pemasangan widget ini, Anda dapat melihatnya pada bagian kanan bawah pada Blog ini. Satu lagi, jangan dilihat saja, tapi masukkan juga Email Anda dan klik berlangganan(Sekalian uji coba dan promosi, hehehe).
Sama halnya dengan Widget yang berbasis pada Jquery Plugin, Anda harus memasang kode Jquery Plugin pada template Anda terlebih dahulu.
Berikut cara pemasangan widget Follow Pop Out Ala Wordpress di Blogger :
1. Masuk ke akun Blogger Anda.
2. Pilih bagian Tata Letak
<style type="text/css">
/*<![CDATA[*/
#idepljrfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.idepljrfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.idepljrfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0TWTSvDxkFzyWO2-Rvgv65mwfNQkN3yZjMe46mOLgE3Xroc3q5qZCE8UUHSuqgWyO_mttB8DunCOESUF1No8yUmyBC2oyJ7ROLhFora34lgsgkIpTgryotEVv3dcZAWCD6qDF8YuonzN/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.idepljrfollowButton:hover,.followActive {color: #fff !important;}
.idepljrfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.idepljrfollowForm {padding: 15px;}
.idepljrfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.idepljrfollowForm p {margin: 0 0 10px;}
.idepljrfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.idepljrfollowForm form {text-align: center;}
.idepljrfollowForm .emailInput:focus {color: #000;border-color: #000;}
.idepljrfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.idepljrFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.idepljrFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.idepljrFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(idepljr){idepljr(document).ready(function(){idepljr.extend(idepljr.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=idepljr("#idepljrfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);idepljr(".idepljrfollowButton").click(function(e){if(followBox.hasClass("followOpened")){idepljr(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{idepljr(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="idepljrfollowSubscribe" style="display:none;">Catatan :
<div class="idepljrfollowForm">
<a class="idepljrfollowButton" href="#" title="Follow"><span>ikuti</span></a>
<h3>Follow "NAMA BLOG ANDA"</h3>
<p>Dapatkan setiap Artikel Baru Melalui Email</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=idepelajar', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Masukkan Email Anda . . ."/>
<input type="hidden" value="idepelajar" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Berlangganan" class="emailSubmit"/>
</form>
<p class="idepljrFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>
1. ganti kata yang tercetak BIRU dengan ID FEED Blog Anda.
5. Lanjutkan Pada langkah ini, jika sebelumnya, Anda belum pernah memasang Jquery Plugin.
Klik Template > Edit HTML > Lanjutkan > Copy kemudian Paste Kode dibawah ini tepat dibawah kode ]]></b:skin> :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
6. Save/Simpan dan lihat hasilnya.
Meskipun widget diatas terlihat banyak, tapi pada kenyataannya, widget ini sama sekali tidak terasa berat ketika Blog di Load. Semoga Artikel mengenai widget follow pop out ala wordpress pada blogger ini dapat bermanfaat, dan bila ada yang kurang jelas, jangan sungkan sungkan untuk meninggalkan komentar.
Salam Blogger Indonesia!
Widget Follow Pop Out Ala Wordpress pada Blogger
Ditulis Oleh:
Doedja
Rating: Terima kasih telah membaca! Bila Anda ingin copy paste artikel ini, silakan izin terlebih dahulu pada penulis, serta jangan lupa untuk menyertakan link sumbernya. Blogger Indonesia punya etika kan? Salam Blogger Indonesia!.
Ditulis Oleh:
Doedja
Rating: Terima kasih telah membaca! Bila Anda ingin copy paste artikel ini, silakan izin terlebih dahulu pada penulis, serta jangan lupa untuk menyertakan link sumbernya. Blogger Indonesia punya etika kan? Salam Blogger Indonesia!.
Tidak ada komentar:
Tinggalkan komentar Anda