The widget has an awesome blue colored header, new attractive subscribe box and consists of all popular social networking sites such as Facebook/like buttons, Twitter/follow button and Google+/follow button. This widget surely grabs your website reader's attention and hence you can increase your website social network followers. So what are you waiting for? Let's check out how add a new social subscription widget to Blogger.
How to add a brand new social subscription to Blogger?
First, go to Blogger.com >> Select your site >> Template >> Click on Edit HTML. Now search for ]]></b:skin> tag (using ctrl+f) and just above it paste following CSS code..mfollowh
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJB9hA1SvxfkGlhdn6ENi_O4qdVbbbaD14EXliAPoxujYXjZLpWT8PvsMaxM9bS8ChZHfujMEMZyqWAwiiaCr-Z2Yc1iiTmFvUuxqt1k8dHwmg4Xtcm5agRdoOMIGkToUQizbh37zRCws/s1600/FollowHeader+copy.png');
width:300px;
height:33px;
background-repeat: no-repeat;
}
.mframe01 {
background-color: #fff;
width: 298px;
height: 70px;
background-repeat: no-repeat;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.mframe04 {
background-color: #fff;
width: 298px;
height: 70px;
margin-top: -6px;
background-repeat: no-repeat;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.mframe07 {
background-color: #fff;
background-repeat: no-repeat;
margin-top: -19px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
width: 298px;
border-bottom: 1px solid #ddd;
}
.mframe45 {border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
width: 298px;
}
#subbox {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHY9Ui-6iadAv8TOAxw3ABCGUezHVUMmDqNdwWPy4MjIKLqsklETgqOdDM9hYf2vkvOzQPp2cfHtyuHQRroFk67NDg5v3ajWsPX3wBf1jfmtkawGBGjDoIxEoG91pRr1k8pppemkdZZhHn/s1600/MFrame.png');
border: 1px solid #d2d2d2;
padding: 5px 30px 5px 10px;
width: 400px;
color: #838383;
font-style: italic;
height: 28px;
font-family: 'Lora', Arial, Helvetica, Verdana;
outline: none;
width: 140px;
margin: 0 5px 0 0;
}
#subbutton {
background-color: #005c91;
border: 3px solid #005c91;
cursor: pointer;
color: white;
width: 90px;
height: 38px;
margin: 0px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin-right: 4px;
float: right;
transition: all 0.3s ease-out;
}
#subbutton:hover {
background-color: #292929;
border: 3px solid #292929;
}
After adding CSS code click on Save Template and once again Go to Blogger >> Select your site >> Layout >> Add a Gadget >> HTML/JavaScript. Now paste following HTML code in it.
<div class="mfollowh"></div>
<div class="mframe01">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/Bloggerwidget?ref=sb" target="_blank" title="Subscribe via RSS"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/RSS.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td><td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/intent/user?screen_name=Bloggwidget&ref=sb" target="_blank" title="Follow on Twitter"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/Twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td><td style="padding-top: 12px" width="60x">
<a href="http://www.linkedin.com/company/Bloggerwidget?ref=sb" target="_blank" title="Follow on LinkedIn"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/Linkedin.png" alt="LinkedIn" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td><td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/Bloggerwidget?ref=sb" target="_blank" title="Follow on Pinterest"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/Pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td><td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/Bloggerwidget?ref=sb" target="_blank" title="Subscribe on YouTube"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/YouTube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td></tr></tbody></table>
</div>
<div align="center" class="mframe45">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBloggerwidget&width=300&height=185&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:185px;" allowtransparency="true"></iframe>
<div align="left" class="mframe04">
<div style="padding:18px 0 5px 10px;">
<a href="https://twitter.com/Bloggerwidget" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @Gameryards</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class="mframe05">
<g:plus href="http://plus.google.com/110774830949115484638" width="298" height="131" theme="light"/></g:plus>
</div></div>
<div class="mframe07">
<div style="padding:18px 0 13px 10px;">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Bloggeriwidget', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subbox" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" onfocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="Bloggerwidget" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbutton" type="submit" value="Subscribe!" />
</form></div></div>
Customization
- Bloggerwidget- replace with your Feedburner profile ID.
- Bloggerwidget-replace with your Twiiter profile ID.
- Bloggerwidget-replace with your linkedin profile ID.
- Bloggerwidget-replace with your pinterest profile ID.
- Bloggerwidget-replace with your youtube profile ID.
- Bloggerwidget-replace with your Facebook profile ID.
Posts
