Check out the brand new and unique subscription widget to add it to your blogger blog. This widget is made up of CSS and looks pretty well to your blog sidebar. It includes RSS, Twitter, LinkedIn, Pinterest And YouTube Buttons at the top of widget and also Facebook like box, Direct subscribing to your feeds, Google+ followers widget and twitter follow button.This code is supported by all the modern browsers. This widget will defiantly catch your readers attention and helps you to increase your social followers of your blog. Before implementing the code you can checkout the demo of the widget in my test blog, After checking the demo if you like then follow the instructions below and get the widget easily.Steps For Implementing The Subscription Box In Your Blogger Blog
- Go To Blogger
- Choose Design HTML
- Click Edit HTML
- And Then Find ]]></b:skin> Using The "CTRL+F"
- Just Above ]]></b:skin> Tag Paste The Below Code And Save Your Template
.mfollowh
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjec2rkmCm3fpZ9ok2j4RWJZZMJLRZC0Yhg3uBjp9cxiKKMU15h017xKdRmzOpS8sOlMYALv6a5xeD2VMLz8QsSiY1lreIUMxWche7I5r-qFWpIDkMYg1h9JUVKjV7VBetFmTgDbNdAHHM/s1600/FollowHeader+copy.png');
width:300px;
height:33px;
background-repeat: no-repeat;
}
.mframe01
{
background-image:url('http://lh3.googleusercontent.com/-iiJOWIY_PHY/UQt7MiMlufI/AAAAAAAALTY/vCAO183aXL0/s300/MFrame01.png');
width:300px;
height:70px;
background-repeat: no-repeat;
}
.mframe03
{
margin-top: -6px;
}
.mframe04
{
background-image:url('http://lh3.googleusercontent.com/-iiJOWIY_PHY/UQt7MiMlufI/AAAAAAAALTY/vCAO183aXL0/s300/MFrame01.png');
width:300px;
height:70px;
margin-top:-6px;
background-repeat: no-repeat;
}
.mframe05
{
background-image:url('http://lh3.googleusercontent.com/-iiJOWIY_PHY/UQt7MiMlufI/AAAAAAAALTY/vCAO183aXL0/s300/MFrame01.png');
background-repeat: no-repeat;
}
#subbox {
background:url('http://lh3.googleusercontent.com/-iiJOWIY_PHY/UQt7MiMlufI/AAAAAAAALTY/vCAO183aXL0/s300/MFrame01.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;
}
.mframe07
{
background-image:url('http://lh3.googleusercontent.com/-iiJOWIY_PHY/UQt7MiMlufI/AAAAAAAALTY/vCAO183aXL0/s300/MFrame01.png');
background-repeat: no-repeat;
margin-top: -19px;
}
After Pasting and Saving the CSS Code in your template. Now paste the widget code in blogger.
- Go To Blogger
- Choose Layout
- Click Add Gadget And Choose HTML/JavaScript
- Paste The Below Code In The Space Provided.
<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/officialprblog?ref=officialprblog" target="_blank" title="Subscribe via RSS"><img src="http://lh6.googleusercontent.com/-Sw-8V3zSW7o/UFLQJaJmgpI/AAAAAAAAE-4/jTTGbWLnHck/s45/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=officialprblog&ref=officialprblog" target="_blank" title="Follow on Twitter"><img src="http://lh4.googleusercontent.com/-wuqxYnlaXrI/UFLQJ0lu9NI/AAAAAAAAE_E/bKjk02HBUp0/s45/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://in.linkedin.com/in/officialprblog?ref=officialprblog" target="_blank" title="Follow on LinkedIn"><img src="http://lh5.googleusercontent.com/-2mYowrjQqi4/UFLQJKWy5zI/AAAAAAAAE-w/uX3guynSs-M/s45/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/officialprblog?ref=officialprblog" target="_blank" title="Follow on Pinterest"><img src="http://lh3.googleusercontent.com/-e4ytO7UPjnU/UFLQJHWwFUI/AAAAAAAAE-0/g_Db9XW3KOI/s45/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/officialprblog?ref=officialprblog" target="_blank" title="Subscribe on YouTube"><img src="http://lh5.googleusercontent.com/-4w4ylQhA2fM/UFLQKChixGI/AAAAAAAAE_M/ZiUSPqwKDU0/s45/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="*mframe02">
<fb:like-box href="http://www.facebook.com/officialprblog" width="300" height="185" *style="padding-top:2px; padding-bottom:8px;" show_faces="true" border_color="#dcdcdc" stream="false" header="false" fb-xfbml-state="rendered" class="fb_iframe_widget"><span style="height: 185px; width: 300px;"><iframe id="f38cfbee68" name="fc28b09b" scrolling="no" style="border: none; overflow: hidden; height: 185px; width: 300px;" class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?api_key=171399682920450&locale=en_US&height=185&header=false&show_faces=true&stream=false&width=300&href=http%3A%2F%2Fwww.facebook.com%2Fofficialprblog&colorscheme=light&border_color=%23dcdcdc&show_border=true"></iframe></span></fb:like-box>
<div align="left" class="mframe04">
<div style="padding:18px 0 5px 10px;">
<a href="https://twitter.com/officialprblog" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @officialprblog</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/100909307322622789154" width="300" 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=officialprblog', '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="officialprblog" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbutton" type="submit" value="Subscribe!" />
</form></div></div>
Now Replace All The Bolded And Coloured Text To Your Social Profile URL
- http://feeds.feedburner.com/officialprblog
- http://twitter.com/intent/user?screen_name=officialprblog
- http://in.linkedin.com/in/officialprblog
- http://pinterest.com/officialprblog
- http://www.youtube.com/officialprblog
- http://www.facebook.com/officialprblog
- www.facebook.com%2Fofficialprblog
- https://twitter.com/officialprblog
- http://plus.google.com/100909307322622789154"
- http://feedburner.google.com/fb/a/mailverify?uri=officialprblog
- value="officialprblog
After Making All The Changes Click Save And Check Your Website.
No comments:
Post a Comment