Tuesday, January 24, 2012

How To Add Simple Subscription Widget For Blogger


1. Login to your blogger dashboard--> layout- -> Edit HTML

2. Scroll down to where you see ]]></b:skin> tag

3. Copy below code and paste it just before the ]]></b:skin> tag.



#subscription {
list-style: none;
margin-top: 0px;
}
#subscription li {
padding: 5px 10px 5px 10px;
height: 60px;
}
#subscription li a {
color: #000;
}
#subscription li a:hover {
color: #DC002C;
}
#subscription li h4 {
margin: 0 0 0 45px;
font-size: 18px;
color: #000;
font-weight: bold;
border: none;
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}
#subscription li p {
margin: 0 0 0 45px;
font-size: 13px;
line-height: 1.4em;
color: #666;
}
#subscription li img {
float: left;
padding: 0px;
margin: 0px 10px 0px 0px;
}
#subscription li:hover {
background-color: #ff4444;
}



4. Now save your template.

5. Go to Layout-->Page Elements and click on "Add a gadget".Select "html/java script" and add the code given below and click save.



<div id="subscription">

<ul id='subscription'>

<li>


<a href="http://twitter.com/coolbthemes">

<img alt="Twitter" src="http://cdn5.iconfinder.com/data/icons/Social_store/64/twittershop.png"/></a>
<h4><a href="http://twitter.com/coolbthemes">Follow me</a></h4>
<p>You can follow my updates on Twitter</p>

</li>

<li>

<a href="http://feeds2.feedburner.com/coolbthemes">

<img alt="Feed" src="http://cdn5.iconfinder.com/data/icons/Social_store/64/rssshop.png"/></a>
<h4><a href="http://feeds2.feedburner.com/coolbthemes">Posts RSS</a></h4>

<p>Read my full posts on your favorite feed reader</p>
</li>
<li>

<a href="http://www.facebook.com/fbpages0001">
<img alt="Facebook" src="http://cdn5.iconfinder.com/data/icons/Social_store/64/FacebookShop.png"/></a>

<h4><a href="http://www.facebook.com/fbpages0001">Facebook</a></h4>

<p>Become a fan of Angry Birds on Facebook</p>
</li>

</ul>

</div>


6.Now drag your own place to gadget

0 comments: