Bagi kebanyakan para blogger, pasti sudah sangat mengenal fitur satu ini yaitu FeedBurner. Dengan adanya FeedBurner, kita dapat memanfaatkan...
Bagi kebanyakan para blogger, pasti sudah sangat mengenal fitur satu ini yaitu FeedBurner. Dengan adanya FeedBurner, kita dapat memanfaatkannya sebagai media untuk mengsubscribe postingan kita. Apa itu subscribe? Widget subscribe atau berlangganan adalah widget update posting anda yang dikirim melalui email pengguna yang berlangganan ke blog anda, widget ini sangat berguna untuk memudahkan dalam update posting terbaru anda, dan ini berguna untuk menjaring pengunjung dengan mudah, jadi sangat dianjurkan sekali untuk memasang widget berlangganan ini, supaya pengunjung tidak ketinggalan update artikel terbaru di blog anda, dan tentu saja keuntungan untuk anda meningkatkan traffic blog, bagi anda yang ingin memasang widget berlangganan ini, anda bisa ikuti tutorialnya. Dibawah ini adalah dua contoh gambar untuk widget subscribe atau berlangganan yang akan kita buat. Silahkan simak tutorial 2 Cara Membuat Widget Subscribe Box di Bawah Postingan.
Cara Membuat Subscribe Box
Buka akun blogger anda.
Pilih menu template > Klik Edit HTML.
Pertama cari kode <data:post.body/>
Letakkan salah satu kode di bawah ini tepat di bawah kode <data:post.body/>.
Letakkan salah satu kode di bawah ini tepat di bawah kode <data:post.body/>.
Catatan : Biasanya ada beberapa kode <data:post.body/>, letakkan salah saatu kode di bawah ini (Terserah sobat suka tampilan yang mana) pada bagian yang tepat (Kalau saya meletakkannya pada kode yang ke tiga).
<section class='newsletter'>
<h2>
Terima Kasih Telah Berkunjung
</h2>
<div id='form-newsletter'>
<div class='social facebook'>
<a href='https://www.facebook.com/muhammadiqbalBlog' target='_blank'>
<img src='http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/s1600/nl-facebook@2x.png'/>
</a>
<iframe allowtransparency='true' class='social-box fb-like' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FmuhammadiqbalBlog&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US' style='border: none; height: 21px; overflow: hidden; width: 90px;'>
</iframe>
</div>
<div class='social twitter'>
<a href='https://twitter.com/Paja_Tapuih' target='_blank'>
<img src='http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/s1600/nl-twitter@2x.png'/>
</a>
<iframe allowtransparency='true' class='social-box twitter-follow-button twitter-follow-button' data-twttr-rendered='true' frameborder='0' id='twitter-widget-0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&id=twitter-widget-0&lang=en&screen_name=Paja_Tapuih&show_count=false&show_screen_name=false&size=m' style='height: 20px; width: 60px;' title='Twitter Follow Button'>
</iframe>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
<div class='newsletter-form'>
<fieldset>
<h2>
Dapatkan Artikel Terbaru.
</h2>
<div class='fields'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Pajatapuih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='email' id='email' name='email' onblur='ifundefinedthis.value=='')this.value=this.defaultValue;' onfocus='ifundefinedthis.value==this.defaultValue)this.value='';' type='text' value='Alamat Email disini...'/>
<input name='uri' type='hidden' value='Pajatapuih'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='subscribe' name='commit' type='submit' value='Subscribe'/>
</form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:" ";display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type='text/JavaScript'>
fontsize = function () {
var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
$(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>
<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#777777), to(#777777));;border:1px
solid #777777;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #777777, #777777)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:20px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#8B0000), to(#8B0000));background: -moz-linear-gradient(center top , #8B0000, #8B0000) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #000000, #000000) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #000000, #000000) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='mbt-sub-box'><h1>Subscribe Untuk Mendapatkan UPDATE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=pajatapuih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='pajatapuih'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
Catatan : Silahkan anda ganti tulisan yang ditandai warna merah dengan nama atau URL akun sobat. Semoga tutorial ini dapat membantu sobat.
COMMENTS