Add Stylish Subscriber Widget in Blogger Blog

Click Below Ad for Leaning Blogging Tricks.

Next Blogger Tricks

Hello Friends today I am going to share this stylish All in one subscriber widget for your blogger blog.this widget are stylish and awesome and clean design .You can add some others Subscriber Widget like Mashable Social Subscription Widget for Blogger and some like this Add All in one Social Subscription Widget in Blogger and many more.But today you're add this simple but cool and clean subscribe widget its contain some other social networking widgets Given list below:-

• RSS Feed Widget
• Google+ Widget
• Facebook Widget
• Twitter Widget
• Facebook Like Button
• Twitter Follower Button
• Feed Burner Email Subscription

This widget are so many blogger are using this widget and this their blog are look like professional's websites.

Also Read:-FIFA Mag Blogger Template Download

How It Work?

This widget are working on CSS3 and JavaScript You know about what JavaScript and What is CSS3 so i no need to understand this platforms. Once you have seen this widget screenshots then add this widget in your blogger blog from this tutorials.

How To Add Stylish Subscriber Widget in Blogger Blog:-

• Go TO Blogger Dashboard>>Layout>>Add gadget
• Select HTML/JavaScript Gadget
• Paste below given code in this Gadget

<div class="widget-content">
<style>
    .BlueKut_Bar{width: 300px; float: left;}
.BlueKut_Bar .count{color:#0F83A0; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}


    .BlueKut_Bar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}
    .BlueKut_Bar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
    .BlueKut_Bar .subicons a{text-decoration: none; color:#333333;}
    .BlueKut_Bar .subicons a:hover{text-decoration: underline; color:#333333;}
    .BlueKut_Bar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZv_8A90e0MbyW6ah74KEHAup7n7JdumZBASo9T50B0dXVOBtudbHIRn1CXGcEtGx7icExVDTk67OTdzJk7-0ICUKzW3V7eDQeBXa6Jhbr9rpqAUzcC-ZO5zSUBpTmxmDLCOJ9OiNnOik/s1600/social_icons.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .BlueKut_Bar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZv_8A90e0MbyW6ah74KEHAup7n7JdumZBASo9T50B0dXVOBtudbHIRn1CXGcEtGx7icExVDTk67OTdzJk7-0ICUKzW3V7eDQeBXa6Jhbr9rpqAUzcC-ZO5zSUBpTmxmDLCOJ9OiNnOik/s1600/social_icons.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
    .BlueKut_Bar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZv_8A90e0MbyW6ah74KEHAup7n7JdumZBASo9T50B0dXVOBtudbHIRn1CXGcEtGx7icExVDTk67OTdzJk7-0ICUKzW3V7eDQeBXa6Jhbr9rpqAUzcC-ZO5zSUBpTmxmDLCOJ9OiNnOik/s1600/social_icons.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
    .BlueKut_Bar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZv_8A90e0MbyW6ah74KEHAup7n7JdumZBASo9T50B0dXVOBtudbHIRn1CXGcEtGx7icExVDTk67OTdzJk7-0ICUKzW3V7eDQeBXa6Jhbr9rpqAUzcC-ZO5zSUBpTmxmDLCOJ9OiNnOik/s1600/social_icons.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
    .BlueKut_Bar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 10px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
    .BlueKut_Bar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR51hjplavnqs-_OXJf-OOV5xVWpS8ogT7PrS3t_xAdeeI2bdXEyYLrJAVmWLjPwSRBzxCaXtPc6-CU3UYHzZIXOmbL9bWQaXZl4Yteu4ZQPaUTgaaRtxb5dNyXClnAS1h7xvQ3Y9GH2Q/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
    .BlueKut_Bar .emailsub .emailupdatesform{margin: 10px 0 5px 5px; width: 300px; float: left;}
    .BlueKut_Bar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 205px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    .BlueKut_Bar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}


    </style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSeynK17f92mP1_VpJJ0bOyKk_VNuZdUYtQkKk2RzDzEAo9Q_jbEtx0Uk_3vOq-hKtQccoAzTPL15w10w0XY_HsQrp94qQ8xpTRki24Xid0KHUcb5MQA3HjX1DlVOPOWzNw9kOFSpbHhs/s1600/SUBSCRIBE+ME.png" alt="Pulpit rock" width="300" height="55">
    <!--[if IE 9]>
    <style>
    .BlueKut_Bar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
   .BlueKut_Bar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
    </style>
    <![endif]-->
    <div class="BlueKut_Bar"><div class="count"><span class="bigcount">
<div class="subicons">
<div class="rssicon">&nbsp;<a rel="nofollow" href="http://softwayrko.blogspot.com/feeds/posts/default" target="_blank">  RSS</a></div>
<div class="googleicon">&nbsp;<a href="https://plus.google.com/114472434994930846607?hl=en" rel="author" target="_blank"> G+</a></div>
<div class="fbicon"> &nbsp;<a href="https://www.facebook.com/softwayrko" target="_blank" rel="nofollow">FB</a></div>
<div class="twittericon">&nbsp;<a href="http://twitter.com/softwayrko" target="_blank" rel="nofollow">Twitter</a></div></div>
<br style="clear:both;">
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/softwayrko&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;height=62" style="border: none; height: 62px; overflow: hidden; width: 292px;">
</iframe></div>
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1401325387.html#_=1401979285676&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=SoftwayRKO&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 232px; height: 20px;"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

    <div class="emailsub">
    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 12px; font-weight: normal; font-family:  Arial;  padding:0; margin:0;">Receive Latest tricks in your Inbox &nbsp; by submitting your Email ID below.</p></div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"><input value="softwayrko" name="uri" type="hidden"><input value="Submit" class="joinemailupdates" type="submit"></form></div></div></div>
<div class="clear"></div>
</div>

Customization:-

• Replace  http://softwayrko.blogspot.com with your blog URL
• Replace  https://plus.google.com/114472434994930846607 with Google+ ID
• Replace  https://www.facebook.com/softwayrko with your Facebook Page URL
• Replace  http://twitter.com/softwayrko with your Twitter Page URL
• Replace  https://www.facebook.com/softwayrko with your Facebook Page URL
• Replace  SoftwayRKO with your Twitter Username
• Replace  http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM with your Feed Burner Email Subsription URL
• Replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM with your Feed Burner Email Subsription URL

• Click On Save Button
• Finish Enjoy!

Last Words

I Hope you're add this amazing social subscription widget in your blogger blog if not? you're face some problem or getting error during this process so please comment. And don't forget to like our Page.

Happy Blogging!