2 Cara Membuat Widget Subscribe Box di Bawah Postingan

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.
Tutorial Blogger

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/>.

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).

2 Cara Membuat Widget Subscribe Box di Bawah Postingan
<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&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;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&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=Paja_Tapuih&amp;show_count=false&amp;show_screen_name=false&amp;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)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </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&apos;http://feedburner.google.com/fb/a/mailverify?uri=Pajatapuih&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='email' id='email' name='email' onblur='ifundefinedthis.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='ifundefinedthis.value==this.defaultValue)this.value=&apos;&apos;;' 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:&quot; &quot;;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 = $(&quot;.newsletter #form-newsletter&quot;).width() * 0.025; // 10% of container width
    $(&quot;.newsletter .newsletter-form fieldset h2&quot;).css(&#39;font-size&#39;, abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>
2 Cara Membuat Widget Subscribe Box di Bawah Postingan
<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 == &quot;item&quot;'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=pajatapuih&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' 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

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: 2 Cara Membuat Widget Subscribe Box di Bawah Postingan
2 Cara Membuat Widget Subscribe Box di Bawah Postingan
https://1.bp.blogspot.com/-g7SFRae-iwE/WkplUfEOc1I/AAAAAAAANgw/3NNS1tUSOmY9FxL-_dkKCQVZ-4N0Pql_gCLcBGAs/s1600/Tutorial-Blog.png
https://1.bp.blogspot.com/-g7SFRae-iwE/WkplUfEOc1I/AAAAAAAANgw/3NNS1tUSOmY9FxL-_dkKCQVZ-4N0Pql_gCLcBGAs/s72-c/Tutorial-Blog.png
Mas Da Bang
https://blog.itapuih.com/2016/11/2-cara-membuat-widget-subscribe-box-di.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2016/11/2-cara-membuat-widget-subscribe-box-di.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy