Hello Friends we're previously share a amazing trick or widgets that Dynamic Headline Sticky Bars for Blogger But today I am going to share an amazing social subscription widget for your blogger blog. This widget is very useful for new blogger to increase their social traffic, because it with 3 social networking sites the first is most popular Facebook this widget contain Facebook Like Button with display how many people like your page. The second site is Twitter this widget contain twitter follow button which help you to make more followers for your website or blog. The last is Feedburner which help your blog visitor to notify your updates or posts from their inbox.
If your social traffic is very low don't get enough Likes and Followers then all what you need to do add this widget in your blogger blog and surely you will get what you want very soon . This widget also work on other Platform blogs like Wordpress and etc. I tried this widget in our blog, it increase only one day get 13 Facebook like and 10 Twitter followers. It is highly attractive and more elegant, it also make your blog a professional like websites.
This widget has been optimized specially for blogs with medium width too and looks great on all blogger blogs. This widget uses on CSS, HTML and Jquery for its working.
You can see the live demo of this widget below. Make sure to check the like button if it works and give us like for our Page.
Check Live DEMO:-
If your social traffic is very low don't get enough Likes and Followers then all what you need to do add this widget in your blogger blog and surely you will get what you want very soon . This widget also work on other Platform blogs like Wordpress and etc. I tried this widget in our blog, it increase only one day get 13 Facebook like and 10 Twitter followers. It is highly attractive and more elegant, it also make your blog a professional like websites.
This widget has been optimized specially for blogs with medium width too and looks great on all blogger blogs. This widget uses on CSS, HTML and Jquery for its working.
You can see the live demo of this widget below. Make sure to check the like button if it works and give us like for our Page.
Check Live DEMO:-
Tired of checking for new posts ?
If you like this widget after seen the its DEMO follow below steps to add this widget in your blogger blog.
How to add Amazing Social Subscription Widget in Blogger blog?
Tutorial for add this widget in Sidebar :-
- Go To Blogger>>Layout>>Add Gadget
- Choose HTML/JavaScript Gadget
- Paste the following below code in widget
<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/Nextbloggertricks" target="_blank"> <img src="https://lh4.googleusercontent.com/-txgWtOWeODA/U58JyOMk2NI/AAAAAAAAALM/NQCAPgIpFyo/h120/NBT%2BFB.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%2FNextbloggertricks&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/Nextbloggertricks" target="_blank"> <img src="https://lh3.googleusercontent.com/-KOerjACB5to/U58LilllwiI/AAAAAAAAALo/ANmSLX4Rz3k/h120/NBT%2BTweet.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=Nextbloggertricks&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> Get all posts directly in your mail. </h2> <div class="fields"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=nextbloggertricks" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=nextbloggertricks', '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 ID.." /> <input name="uri" type="hidden" value="Nextbloggertricks" /> <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 #00A CED} .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 #3b0a60;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 #3661a0;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 #00aced;} </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>
Customization:-
- Replace Nextbloggertricks with your Facebook Page Username
- Replace Nextbloggertricks with your Twitter Page Username
- Replace nextbloggertricks with your Feedburner User ID
- Click on Save Button
- Congratulations! you're successfully add this widget in your sidebar
OR
Add this widget in Below Post Title:-
- Go to Blogger>>Template>>Edit HTML
- Find this below code
<data:post.body/>Note: There may be more than one (usually 3-4) <data:post.body/> make sure you have selected right one.
- After finding the proper code
- Paste the below given code just below <data:post.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/Nextbloggertricks" target="_blank"> <img src="https://lh4.googleusercontent.com/-txgWtOWeODA/U58JyOMk2NI/AAAAAAAAALM/NQCAPgIpFyo/h120/NBT%2BFB.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%2FNextbloggertricks&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/Nextbloggertricks" target="_blank"> <img src="https://lh3.googleusercontent.com/-KOerjACB5to/U58LilllwiI/AAAAAAAAALo/ANmSLX4Rz3k/h120/NBT%2BTweet.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=Nextbloggertricks&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> Get all posts directly in your mail. </h2> <div class="fields"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=nextbloggertricks" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=nextbloggertricks', '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 ID.." /> <input name="uri" type="hidden" value="Nextbloggertricks" /> <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 #00A CED} .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 #3b0a60;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 #3661a0;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 #00aced;} </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>
Customization:-
- Replace Nextbloggertricks with your Facebook Page Username
- Replace Nextbloggertricks with your Twitter Page Username
- Replace nextbloggertricks with your Feedburner User ID
- Click on Save Button
- Congratulations! you're successfully add this widget in your below post titles.
Final Words
I hope you can add this widget in your blogger blog properly if not? your're getting error during this process please leave a comment for his solution and don't forget to like our Facebook page.
Happy Blogging!
No Comment
Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.