A.Softs Inc

<h2 style="background-color: #f9f9f9; color: #333333; line-height: 1.3em; margin: 0px 0px 5px; padding: 0px; text-align: center;">
<span style="font-family: Trebuchet MS, sans-serif; font-size: x-large;">Clean Social Subscribe Widget for Blogger</span></h2>

<div>
<span style="font-family: Trebuchet MS, sans-serif; font-size: x-large;"><br /></span></div>
<div>
<div class="separator" style="background-color: #f9f9f9; clear: both; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPE5mEQA6PJK8VWVkvNKnu_kr1t9tjDGb0AGK7u7wV5OWiAenEgz91RdjPlIN-7CsTeWZwqjZniyO7yVvx7Ik_RDARZncqpKzBG4h_Pjv26jc1wvABkLD4Xb-RLIiU59HwSEsqi1H_pzS/s1600/Social+Subscribe+Blogger.png" imageanchor="1" style="-webkit-transition: color 0.15s linear; clear: left; color: navy; float: left; margin: 0px 1em 1em 0px; padding: 0px; text-decoration: inherit; transition: color 0.15s linear;"><img alt="Social-Subscriber" border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPE5mEQA6PJK8VWVkvNKnu_kr1t9tjDGb0AGK7u7wV5OWiAenEgz91RdjPlIN-7CsTeWZwqjZniyO7yVvx7Ik_RDARZncqpKzBG4h_Pjv26jc1wvABkLD4Xb-RLIiU59HwSEsqi1H_pzS/s1600/Social+Subscribe+Blogger.png" style="border: none; margin: 0px 14px 0px 0px; padding: 0px; position: relative;" title="Social-Subscriber" width="320" /></a></div>
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">Hello Readers, I am again back after a long break. This time I present you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Facebook, Twitter and Feedburner integration.</span><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">This widget has been optimized for blogs with smaller width too and looks perfect on all blogs. The widget uses Jquery, CSS and HTML for its working.</span><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">You can see the live demo of this widget below itself. Make sure to check the like button if it works and give us some likes for our Facebook Page.</span></div>
<div>
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"><br /></span></div>
<div>
<br />
<section class="newsletter" style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px; margin: 20px 0px; text-align: center;"><h2 style="color: #3b434d; font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.25; margin: 1em auto; padding: 0px; width: 394.546875px;">
Tired of checking for new posts ?</h2>
<div id="form-newsletter" style="margin: 0px auto; max-width: 900px; min-width: 500px; padding: 0px; width: 546.296875px;">
<div class="social facebook" style="background: none 0px 0px repeat scroll rgb(54, 97, 160); float: left; margin: 0px; padding: 109.25px 0px 0px; position: relative; width: 109.25px;">
<a href="https://www.facebook.com/AllBloggerTricks" style="-webkit-transition: color 0.15s linear; color: navy; display: block; left: 32.765625px; margin: 0px; padding: 0px; position: absolute; text-decoration: inherit; top: 157.9375px; transition: color 0.15s linear; width: 43.6875px;" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFIhMl2id5XvQTrYCXEtLKjus_ARQu3fddXAqk7Ii0oOHZPnQb1VCP5yFM9rW2GQsGPCjKYB4NMwB8zUvRESukb0guhH0M_AEMdXTDLx4GwNAFRpZX8Lhx0MivYkWF3TWj9sa3xVJFQ_LK/s1600/nl-facebook@2x.png" style="-webkit-transition: transform 0.3s ease-out 0s; border: none; margin: 0px 14px 0px 0px; max-width: 100%; padding: 0px; position: relative; transition: transform 0.3s ease-out 0s; width: 43.6875px;" /></a><iframe allowtransparency="true" class="social-box fb-like fb_iframe_widget" fb-iframe-plugin-query="app_id=205525802926703&container_width=90&href=http%3A%2F%2Fwww.allbloggertricks.com%2F2014%2F05%2Fclean-social-subscribe-widget-blogger.html&locale=en_US&sdk=joey" fb-xfbml-state="rendered" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAllBloggerTricks&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US" style="border-style: none; border-width: initial; bottom: 20px; display: block; height: 21px; left: 54.625px; margin: 0px 0px 0px -45px; overflow: hidden; padding: 0px; position: absolute; right: 16px; top: 10px; width: 90px; z-index: 1;"></iframe></div>
<div class="social twitter" style="background: none 0px 0px repeat scroll rgb(0, 172, 237); float: left; margin: 0px; padding: 109.25px 0px 0px; position: relative; width: 109.25px;">
<a href="https://twitter.com/AllBloggerTrick" style="-webkit-transition: color 0.15s linear; color: navy; display: block; left: 32.765625px; margin: 0px; padding: 0px; position: absolute; text-decoration: inherit; top: 157.9375px; transition: color 0.15s linear; width: 43.6875px;" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2g2WsbxRzH1q31DOW5pEUXItD2HVixw6p3ooml87-yD-Lb6jCimvtuv9galn1zRSJV8IlU7FBTc29eW0OEz-EswJd0lfpZQCYF2QLeD7arRM5izsucpbhNMt0zfnE1AX0zIRHIwoXKNw/s1600/nl-twitter@2x.png" style="-webkit-transition: transform 0.3s ease-out 0s; border: none; margin: 0px 14px 0px 0px; max-width: 100%; padding: 0px; position: relative; transition: transform 0.3s ease-out 0s; width: 43.6875px;" /></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=AllBloggerTrick&show_count=false&show_screen_name=false&size=m" style="bottom: 20px; display: block; height: 20px; left: 54.625px; margin: 0px 0px 0px -30px; padding: 0px; position: absolute; right: 5px; top: 10px; width: 60px; z-index: 1;" title="Twitter Follow Button"></iframe></div>
<div class="newsletter-form" style="background: none 0px 0px repeat scroll rgb(30, 41, 59); float: left; margin: 0px; padding: 109.25px 0px 0px; position: relative; width: 327.765625px;">
<fieldset style="border: none; height: 38px; left: 32.765625px; margin: 0px; padding: 0px; position: absolute; top: 78.96875px; width: 262.203125px;">
<h2 style="color: white; font-family: 'Open Sans', sans-serif; font-size: 13.675px; font-weight: 300; line-height: 1.25; margin: 0px 0px 1.5625em; padding: 0px; width: 262.203125px;">
Get all posts directly in your mail.</h2>
<div class="fields" style="margin: 0px; padding: 0px; position: relative;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" style="margin: 0px; max-width: 100%; padding: 0px;" target="popupwindow">
<input class="email" id="email" name="email" style="-webkit-box-shadow: rgb(221, 221, 221) 0px 1px 1px inset, rgb(255, 255, 255) 0px 1px 0px; border-radius: 10px 0px 0px 10px; border-style: initial; border-width: 0px; box-shadow: rgb(221, 221, 221) 0px 1px 1px inset, rgb(255, 255, 255) 0px 1px 0px; left: 0px; outline: none 0px; padding: 10.5px; position: absolute; width: 220.25px;" type="text" value="Enter Your Email here.." /><input class="subscribe" name="commit" style="-webkit-transition: all 0.6s ease; background: none 0px 0px repeat scroll rgb(240, 85, 59); border-radius: 0px 10px 10px 0px; border: medium none; color: white; cursor: pointer; font-weight: 700; padding: 10px; position: absolute; right: 0px; transition: all 0.6s ease; width: auto;" type="submit" value="Subscribe" /></form>
</div>
</fieldset>
</div>
</div>
</section><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">Once you have seen the demo, to add this widget in your blogger blog you need to follow these simple steps -</span><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<h4 style="background-color: #f9f9f9; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;">
Adding the code</h4>
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">First and foremost you need to add the code. First go to Blog Title → Template → Edit HTML. Press Ctrl. + F and search for </span><b style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"><data:post.body/></b><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"> code in your template and paste the below given code just below </span><b style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"><data:post.body/></b><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">. </span><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: red; font-family: lora; font-size: 16px; line-height: 24px; margin: 0px; padding: 0px;"><b>NOTE</b></span><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"> : There maybe more than one (usually 2-4) </span><b style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;"><data:post.body/> </b><span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">so make sure that you have selected the right one. If the widget does not appear try changing the location of code.</span><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<blockquote class="tr_bq" style="background-color: #f9f9f9; background-image: url(http://files.allbloggertricks.com/images/blockquote.png); background-position: 0px 0px; background-repeat: repeat-y; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-radius: 6px; border-style: solid; border-width: 1px; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 16px; line-height: 18px; margin: 0px 20px; max-height: 350px; overflow: auto; padding: 10px 20px 10px 45px;">
<section class="newsletter"><br />
<h2><br />
Tired of checking for new posts ?<br />
</h2><br />
<div id="form-newsletter"><br />
<div class="social facebook"><br />
<a href="https://www.facebook.com/<span style="color: #0b5394; margin: 0px; padding: 0px;"><b>TrixsMaxter</b></span>" target="_blank"><br />
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFIhMl2id5XvQTrYCXEtLKjus_ARQu3fddXAqk7Ii0oOHZPnQb1VCP5yFM9rW2GQsGPCjKYB4NMwB8zUvRESukb0guhH0M_AEMdXTDLx4GwNAFRpZX8Lhx0MivYkWF3TWj9sa3xVJFQ_LK/s1600/nl-facebook@2x.png" /><br />
    </a><br />
    <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%2F<span style="color: #0b5394; margin: 0px; padding: 0px;"><b>TrixsMaxter</b></span>&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;"><br />
    </iframe><br />
  </div><br />
<div class="social twitter"><br />
<a href="https://twitter.com/<span style="color: #0b5394; margin: 0px; padding: 0px;"><b>TrixsMaxter</b></span>" target="_blank"><br />
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2g2WsbxRzH1q31DOW5pEUXItD2HVixw6p3ooml87-yD-Lb6jCimvtuv9galn1zRSJV8IlU7FBTc29eW0OEz-EswJd0lfpZQCYF2QLeD7arRM5izsucpbhNMt0zfnE1AX0zIRHIwoXKNw/s1600/nl-twitter@2x.png" /><br />
    </a><br />
    <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=<span style="color: #0b5394; margin: 0px; padding: 0px;"><b>TrixsMaxter</b></span>&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button"><br />
    </iframe><br />
    <script><br />
      !function(d,s,id){<br />
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;<br />
        if(!d.getElementById(id)){<br />
          js=d.createElement(s);<br />
          js.id=id;<br />
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);<br />
    </script><br />
  </div><br />
<div class="newsletter-form"><br />
<fieldset><br />
<h2><br />
       Get all posts directly in your mail.<br />
      </h2><br />
<div class="fields"><br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: #0b5394; margin: 0px; padding: 0px;"><b>TrixsMaxter</b></span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><br />
<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.." /><br />
          <input name="uri" type="hidden" value="<b><span style="color: #0b5394; margin: 0px; padding: 0px;">TrixsMaxter</span></b>" /><br />
          <input name="loc" type="hidden" value="en_US" /><br />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" /><br />
        </form><br />
</div><br />
</fieldset><br />
</div><br />
</div><br />
</section><br />
<style><br />
.newsletter{text-align:center;margin:20px 0;}<br />
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}<br />
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}<br />
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}<br />
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}<br />
.newsletter:after{clear:both}<br />
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}<br />
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}<br />
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}<br />
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}<br />
.newsletter .social a:hover img{transform:scale(1.1)}<br />
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}<br />
.newsletter .social .social-box.fb-like{margin-left:-45px}<br />
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}<br />
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}<br />
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}<br />
.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;}<br />
.newsletter .newsletter-form fieldset .fields{position:relative}<br />
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}<br />
.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;}<br />
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}<br />
</style><br />
<script type="text/JavaScript"><br />
fontsize = function () {<br />
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width<br />
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);<br />
};<br />
$(window).resize(fontsize);<br />
$(document).ready(fontsize);<br />
</script></blockquote>
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<h4 style="background-color: #f9f9f9; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;">
Editing the Code</h4>
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">After adding the above given code, you need to make some necessary changes for changing the user IDs. In the above code I have made 6 words in bold and blue, you need to change them as required.</span><br />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to Save your Template.</span><br />
<br style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;" />
<span style="background-color: #f9f9f9; color: #3e3e3e; font-family: lora; font-size: 16px; line-height: 24px;">Thats it, the clean social subscribe widget on your blogger blog is live and ready to attract your users. Cheers!</span></div>

</div>
</article>

Clean Social Subscribe Widget for Blogger

AyanKhan 0 Blogger Tricks, Blogging 13:47:00

Clean Social Subscribe Widget for Blogger Hello Readers, I am again back after a long break. This time I present you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Fa… Read more »

A.Softs Inc

Clean Social Subscribe Widget for Blogger

Popular Posts

Labels

Blog Archive