Comment ça marche: Css3 Brand New Social Subscription Widget For Blogger

Hello bloggers, are you bored with your old social subscription widget? Does anyone want an attractive social subscription widget ? Then today I'm here with a new social subscription widget for Blogger. Without social network sites and followers you can't grow up your website. Facebook, Twitter and Google + are the most famous social networking sites yet, in all
these social network sites you can make a page or a profile for your website. Suppose somebody landed on your website, he likes your content and decided to subscribe to your website. But without an attractive subscription gadget or a widget how can they subscribe to your website? How can you increase your website social network followers ? For that reason, we have been made a new attractive social subscription widget.

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/AVvXsEg_6FOBCtUuBQs3dsOIAqcmp2U0n-UbQ63vIK6o4djG0AUct5hU5z5qIxS8mbVaX5L_Cqzo46szGHl_cQVJSrfAluT5r6L1FksJqWobW8Jdf9hxbZU1pZz2zDRW-jiNO99oh2s56WEmztk/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/AVvXsEj0aQ93_Wkc7liMwiNZgPjI7cCrPyFQgyEpb4G7xXUOn8_5ZrnWzQgq4welhnELU3GBF8IlIc7SJDqMczJRoIAePL7I24tOK50vo-RsOGUFsYTl_nlPfT-ELKiMg7jQASaULF1LS8-L5qZP/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.

Comment ça marche

Css3 Brand New Social Subscription Widget For Blogger

How to add a brand new social subscription to Blogger?

Customization

Aucun commentaire:

Enregistrer un commentaire