Cara membuat form berlangganan artikel dibawah postingan plus sosial media

Bosan dengan tampilan widget berlangganan kamu yang kurang keren wajar saja sebab jika tidak anda tidak mungkin datang kesini untuk mencari cara merubabh form berlangganan jadi kelihatan lebih keren , benar demikian bukan? nah kali ini saya mau berbagi cara membuat form berlangganan dibawah postingan dengan tambahan sosial mediaWidget ini sangat bagus dan juga disarankan untuk kelengkapan seo seperti target langganan visitor dengan begitu mutu sebuah blog lebih maksimal karena visitor tetap stabil . saran saya setiap kali membuat artikel sebaiknya dibuat se informatif mungkin supaya kita bisa menarik selera pengunjung agar kiranya menjadi scuscriber kita.Baik lansung saja bagaimana cara membuatnya.

membuat form berlangganan artikel dan widget sosial media dibawah postingan


login ke blogger

  1. klik template dan edit html
  2. kopi kode dibawah dan tempatkan diatas <data:posts:body/>
<section class="newsletter"> <h2> Tired of checking for new posts ? </h2> <div id="form-newsletter"> <div class="social facebook"> <a href="https://www.facebook.com/xxxxx" 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%2FAllxxxxxx&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/xxxxx" 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=xxxxxxx&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> Get all posts directly in your mail. </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=xxxxx', '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="Enter Your Email here.." /> <input name="uri" type="hidden" value="xxxxxx" /> <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 = $(".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>


Ubah ( xxxxx ) dengan data kamu Dan hasilnya
nanti  kurang lebih hasilnya akan seperti ini
Cara membuat form berlangganan artikel dibawah postingan plus sosial media
Sekarang lanjut ke cara mengedit template blogger biar jadi responsive
Atau mungkin anda mau membaca ini juga Cara mengubah judul blog jadi judul postingan secara otomatis

Artikel Terkait

Silahkan berkomentar sesuai dengan isi yang dikandung dari artikel ini . untuk menyisipkan link aktif atau backlink bisa menghubugi saya via form contact diatas .
EmoticonEmoticon