Stylish Social Subscription Widget For Blogger ~ The Next Generation Blog

Facebook Twitter RSS Google

Home » blogger_tricks » Stylish Social Subscription Widget For Blogger

Stylish Social Subscription Widget For Blogger

Stylish Social Subscription Widget For Blogger

Hi friends, its always a good idea to use social subscription and sharing widgets in your blog. It helps the visitors to share your contents in social media and subscribe for your latest blog posts. So, I am going to provide you the code for Social Subscription Widget for blogger blogs. Follow the steps below:
> Login to your blogger account.
> Now go to Layout > Add A Gadget.
> Add an HTML/JAVASCRIPT widget.
> Now, copy the following code and paste in the html widget box.

<style>
.Subscribe-thenextgeneration h6{
background:URL(http://4.bp.blogspot.com/-koRv-wLVoJ4/UDReC1-KqnI/AAAAAAAAAxc/q3-D0_cGK6o/s1600/Subscribe+More+Blog+Tools.png) no-repeat;height:50px;
margin:0px 0 0px 0;
padding:0px 20px 0px 0px;
font-size:0px;
font-family:Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
text-shadow:0 1px 0 #fff;
}
ul.social {
list-style: none;
margin: 10px;
overflow: hidden;
}
.social li {
float: left;
background: none !important;
padding: 0 !important;
margin: 0 4px;
}
.social li a {
display: block;
width: 50px;
height: 40px;
background: url("http://4.bp.blogspot.com/-gANW8x7jzug/UGnr7YEermI/AAAAAAAABDY/pN1opxmSfwY/s1600/Subscribe+More+Blog+Tools+Social+Icons.png") no-repeat transparent;
text-indent: -99999em !important;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
}
.social li a:hover {
padding: 0 !important;
}
.social li.rssicon a {
background-position: 0 0;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a {
background-position: -50px 0;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a {
background-position: -100px 0;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a {
background-position: -150px 0;
border-right: 1px solid #e6e6e6;
}
.social li.yticon a {
background-position: -200px 0;
}
.social li.rssicon a:hover {
background-position: 0 -50px;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a:hover {
background-position: -50px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a:hover {
background-position: -100px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a:hover {
background-position: -150px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.yticon a:hover {
background-position: -200px -50px;
}
.Subscribe-thenextgeneration{
width: 300px;
float: left;
}
.Subscribe-thenextgeneration .count{
color:#F17C18;
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;
}
.Subscribe-thenextgeneration .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;
}
.Subscribe-thenextgeneration .subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}
.Subscribe-thenextgeneration .emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 15px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}
.Subscribe-thenextgeneration .emailsub .emailicon{
background: url(http://1.bp.blogspot.com/-bv4Z3wxrQtc/UDReA7sQF8I/AAAAAAAAAxQ/CCeIAalllEc/s1600/Subscribe+More+Blog+Tools+Email.png) no-repeat 0 2px;
float: left;
padding: 0px 15px 10px 40px;
margin: 0 0 0 5px;
width: 300px; line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #111;
}
.emailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.email{
clear:both;
width:100%;
margin:10px 0;
}
.emailform{
position:relative;
width:300px;
margin:0 auto;
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.emailbutton{
padding:8px !important;
}
.emailform, .emailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>
<div class="Subscribe-thenextgeneration">
<h6 class='title'>Subscribe Now!</h6>
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/blogspot/MnjAz"><img src="http://feeds.feedburner.com/~fc/blogspot/MnjAz? bg=F2F2F2&fg=666&anim=1"/></a>
</span> Get My Updates Daily </div>
<div class="subicons">
<ul class="social">
<li class="fbicon">
<a href="http://facebook.com/TheNextGenerationRocks" title="Like Our Facebook Page" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="twicon">
<a href="http://twitter.com/ashutoshhacker" title="Follow Me In Twitter" rel="nofollow" target="_blank">Twitter</a></li>
<li class="gicon">
<a href='https://plus.google.com/115317300215648934446' rel='author' title='Join Me In Google Plus' target="_blank">Google+</a></li>
<li class="yticon">
<a href="http://www.youtube.com/user/Ashutoshkushwaha1" title='Join My YouTube Channel' rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</div>
<div class="emailsub">
<div class="emailicon">
<p style=" width:240px;
color:#111;
font-size: 13px;
font-weight: normal;
font-family: Helvetica, Arial;
padding:0;
margin:0;
">Receive Our Updates In Your Inbox By Submitting Your Email ID Below.</p>
</div>
<div class="email">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MnjAz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="blogspot/MnjAz" name="uri" />
<input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div></div>

> Now, click SAVE and then click SAVE ARRANGEMENT.
> Open your blog and you will see the widget working.

CLICK HERE TO SEE DEMONote:
1) You need to change (<a href="http://feeds.feedburner.com/blogspot/MnjAz"><img src="http://feeds.feedburner.com/~fc/blogspot/MnjAz? bg=F2F2F2&fg=666&anim=1" /></a>) in order to view your Feed Count. Just make sure your FeedCount is activated. If it is not yet activated, just follow the steps below on how to activate:

On your My Feeds page, click your feed, then click the Publicize tab.
If FeedCount isn't already active, apply your desired color/animation settings and click Activate.
Copy the URL that's in the src attribute of the <img> tag in the HTML code you're given to use to display FeedCount. It will start with http://feeds.feedburner.com/~fc/…

2) http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MnjAz – You should replace this with your feedburner email subscription link. To get this, log in to feedburner, click on your feed. Then go to Publicize > Email Subscription. Activate and get the email subscription link under Subscription Link Code.
3) blogspot/MnjAz – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is blogspot/MnjAz as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MnjAz
4) http://feeds.feedburner.com/blogspot/MnjAz – Replace this with your feedburner link.
5) http://twitter.com/ashutoshhacker – Replace with your twitter profile link.
6) http://www.facebook.com/thenextgenerationrocks – Your facebook page or profile link here.
7) https://plus.google.com/115317300215648934446/ – Replace with your Google+ profile link.
8) http://www.youtube.com/user/Ashutoshkushwaha1 – Replace with your YouTube account link.
Keep visiting for more tips and tricks.

0 comments:

Post a Comment