random
1

How To Add Social And Email Subscribe Widget In Blogger Blog

Social and Email Newsletter subscribe widget for blogger blog, which you can add in the footer of your blogger blog posts or in header area of your blogger blog posts..This widget consists of your Facebook, Twitter and Feed burner integration.Here is how!



How To Add Social And Email Subscribe Widget In Blogger Blog


Step No. 01:
First Off, Go To Blogger Dashboard.

Step No. 02:
How To Add Social And Email Subscribe Widget In Blogger Blog
How To Add Social And Email Subscribe Widget In Blogger Blog
Select "Template" From Blogger Dashboard.

Step No. 03:
Choose 'Edit HTML" Option.

Step No. 04:
You  Are Here,In Coding Area OF Your Blogger Blog Posts, So, Just Find That Piece Of Code. <data:post.body/>  .           
      <section class="newsletter">
      <h2>
      Get Newsletter
      </h2>
      <div id="form-newsletter">
      <div class="social facebook">
      <a href="https://www.facebook.com/ShoutedBlog" 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%2FShoutedBlog&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/Ghulam__Haider" 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=Ghulam__Haider&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=FeedBurner ID', '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="FeedBurner ID" />
                <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>             

Step No. 05:
After Finding that Piece Of Code, Just Copy the Below Code And Paste It To Below That Piece Of Code.  <data:post.body/> . 
How To Add Social And Email Subscribe Widget In Blogger Blog
How To Add Social And Email Subscribe Widget In Blogger Blog

Step No. 06:
You will See Lot Of  <data:post.body/> Here In Your Coding Area,But Your Destination Is 3rd One.

Step No. 07:
Now Save Your Template. See Your Blogger Blog Live.

That's It.

Don't Forget To Customize Your Code


Just Replace all The Blue Highlighted Color Text With Your Own Facebook fan Page,Twitter Handler And Your Own Google Feed Burner ID.

Shouted Blog's Gift...!
How To Find Your Google Feed Burner ID For Email Subscription For Your Blog

How To Add Social And Email Subscribe Widget In Blogger Blog Reviewed by Ghulam Haider on 21:53:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.