11.6.13

How to add social subscription widget in blogspot blog

For add social subscription widget to your blog just follow those step...

*. Login in to your Blogger account.
*. Now navigate to the Layout sectionfrom your dashboard.
*. Click to add a HTML/JavaScript gadget where you want this widget to appear.
*. Copy and paste the following code into it.
<style type="text/css">
#UT-ssw-wrap
{
height:250px;
width:250px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-zruZPxmZnBIUqGiRK6Z-r1SfTVP_sfULKMkcvbR13hAos_OxAK6Zy6FzxoFdAq9ciX24vBLwsFIrTCpavBhF_ZeF6x8rDcsyGX5i0i9rCbbsZqZwccMYb2xr9lTLGTrunN4AtYXA5mKd/s1600/background.png)
repeat;
color:#009;
font-family:Georgia,"Times New Roman",Times, serif;
padding:3px;
border:1px solid#dcdcdc;
box-shadow: 1px 1px 2px#000;
}

#UT-ssw-icons-wrap
{
text-align:center;
height:50px;
padding:5px 0px;
}

.UT-ssw-icons
{
height:40px;
width:40px;
float:left;
margin-left:15px;
margin-bottom:10px;
}

.UT-ssw-icons:hover
{
opacity:.7;
filter:alpha(opacity=70);
height:40px;
width:40px;
cursor:pointer;
}

.UT-ssw-lbl
{
color:#0F4794;
font-weight:bold;
text-align:center;
padding:2px 0px 10px 0px;
}

.UT-email-field
{
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikKEsnxSVf1Kozrq3h7WQnVBW8moTo2kt1yF5YRYAF0zdPatsjbUlqu9sAmrkacm6rfYVY5UupThZxCFmv-nM21d87mqNKt9BzTHDM6G5Fr6s3fhHgxnM0s9IUhvUP7FpLpZoHY8Kz043L/s1600/icons.png)
no-repeat 0 -27px;
border:1px solid#dcdcdc;
border-radius:4px;
color:#444;
margin:0 0 15px;
padding:10px 40px;
width: 166px;
}

#UT-ssw-submit
{
height:30px;
width:100px;;
background:#0F4794;
color:#FFF;
font-weight:bold;
text-align:center;
margin-left: 70px;
border-radius: 10px;
}
</style>
<div id="UT-ssw-wrap">
<div class="UT-ssw-lbl">Subscribe to Us!!</div>
<div id="UT-ssw-icons-wrap">
<a href="https://www.facebook.com/ studytune " rel="nofollow"
title="Like us">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dONImCyqYER0EyhmD4B4UUK8DDiFyxhJ69lqyJkB39DYJjZ5dd0r3HIli7JYz93Lc1cDToRI33O-YkC98q0JFA3pMXQsiNHe4RX-UhN6jkK2oMaZNzL67aWGwWX3aGSbJmqaICJYjF9R/s1600/Facebook.png"
class="UT-ssw-icons" alt="FB"/>
</a>
<a href="https://www.twitter.com/ studytune " rel="nofollow"
title="Follow Us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitTgX70Q4-lbK0rJQbaR1TwdA7H90SyE7GuwJ717l2-ACILbMPFZ8_Y9QyrPBOQ-f27tg8-CADEGqn_eMwhwf-y6jC-H9QBMfaye44qjRZNwvIm-07dL23mMsWMLPLMdVr39pw4sPkWlKD/s1600/Twitter.png"
class="UT-ssw-icons" alt="TW" />
</a>
<a href="https://plus.google.com/u/0/ studytune "
rel="nofollow" title="Follow us">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOQTEv_BumyxT0XeGOD0almWomKMgtchLWOzctOAsVmR2NkaDsQd8V-TLhVTyM29xrP-2Z6AGARhajfQZv4KZYtt24bCzCf9LftMgoj-X93Vk7nfEvz7bHhEpXpkAWaa0qFy9FH2uZUYw/s1600/Google+.png"
class="UT-ssw-icons" alt="G+"/>
</a>
<a href="http://feeds.feedburner.com/ studytune ">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6d69xZUHFTO33XPOirLglESMBCqEBzmQzbFNZZQLWSysxkMMHOpdRpU7LTtGb4zRgitGOuXOP40GNWECurKpz2jmNDxR_c4QcoItdO54hj5D0q1nU30bC-wgECvRWEU1pogX7XTxHLftG/s1600/RSS.png"
class="UT-ssw-icons" alt="RSS"/>
</a>
</div>
<div class="UT-ssw-lbl">Get ProTutorialsdirectly<br /> in to your
Inbox</div>
<formaction="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
studytune ', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="UT-email-field" name="email"
autocomplete="off" placeholder="Enter your email address"/><br />
<input type="hidden" value=" studytune " name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" id="UT-ssw-submit"/>
</form>
</div>
*. Now before saving,we need to change the social networks and
feedburner usernames.
*. Replace my usernames (studytune) highlighted inred color with yours.
*. After you have changed the usernames, click on save.
*. Now Click the View Blog button at the top and see this widgetin action.
You have added a social subscription widget in your blogger blog. You
may also customize the look and feel of this widget. The CSS style
rules are givenwith the code aboveenclosed in the <style></style> tag.
But if you don't have proper knowledge of HTML/CSS then I strongly
recommend you to stick with the same code and do not try to modify it.

No comments:

Post a Comment