Monday, 3 September 2012

Very nice Social subscription box for your blog

Hi friends if you want any social subscription box for your blogger blog this box is great for your blog.
Folllow simple and easy step to adding this special box in your blog ---->>>> * First go to your blogger Dashboard.
* Now click in design tab and EDIT HTML.

* Click in small box to expand your blogger Template.

* Now find this code
]]</b:skin> by CTRL+F key.
* Copy below code and paste before
]]</b:skin>
/* subscribe box widget */
.widget_bu_subscribe { background: #F6630E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWBAaNO6x0cmij1aq7Voh4jOxQr_ZLd3oMYaD3MHfDCH-PhDSk9hTuqlC4PGx2S4dimcK2a8Ro_r07pw8y0uACg3gVU-_iK_ePs5bl03nGIMlSac-GKxii5SdzHpBhEIMdok6CirX1GQ/s1600/bg_social.png) repeat-x  !important; border: 1px solid #F98913 !important; height: 125px; overflow: hidden; padding: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#sidebars .widget_bu_subscribe { border-left: 0 !important; border-right: 0 !important; height: auto !important; margin: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
.featured_subscribe { padding: 15px 10px; }
.featured_subscribe h3 { font-size: 1.8em; font-weight: 600; letter-spacing: -0.4px; text-shadow: #FCb96A 1px 1px 1px; }
#sidebars .featured_subscribe h3 { color: #111; margin: 0; padding: 0.6em 0 0 0 !important; }
.featured_subscribe h4 { color: #FFF; font-size: 0.85em; font-weight: normal; padding-top: 0.3em; text-shadow: #F6640E 1px 1px 1px; text-transform: uppercase; }
#sidebars .featured_subscribe h4 { padding: 0; }
ul.subscribe_icons{ font-size: 1.2em; list-style: none; margin-top: 1.5em; }
.subscribe_icons li { float: left; margin-right: 1.8em; margin-bottom:1.2em; text-align: left; width:75%;}
.subscribe_icons li a { color: #000; display: block; font-size: 1em; height: 32px; padding-left: 3.3em; }
.subscribe_icons li a:hover { color: #FFF; }
.subscribe_icons li a span { color: #FFF; display: block; line-height: 0.8em; }
.subscribe_icons .email { margin-right: 1em; }
.subscribe_icons .email a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPgWObCleZ94FYswO6PpHvT-znxHZSDDawUAJZi5eRkjA6MXHIehK00B3tTZGZQb_H9drFd1UrvANuW_sFcQcA_XGxXSnaCMa_Bq0bUxLzNhZOzdc4kEeIBuWgULBHf96Tv7HaRfeX4H4/s1600/icon_mail.png) left no-repeat;}
.subscribe_icons .twitter { margin-right: 0; }
.subscribe_icons .twitter a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggHG4VNbp7AmAlIZNWa1OSm0TD8doIjPogTCf89fmLYvxiRwfejJx6pOa95RWszEi-HXhy7AF2TniU06qppa0O9vMGrYoiLNykBMteKDUeNFYGB8ChqOeOLpj_7QSIUDbNhgejqgCqnaI/s1600/icon_twitter.png) left no-repeat; padding-left: 60px; }
.subscribe_icons .rss a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuLBnoyGFYHK_nMRJwgqFrmg79wGL1ZzJqhLMkGZHHBbCsrG5ddto6RrW95X3BUnJvIvD4fT7Ou_CRiPYkO92SQQkE513DyTLC25ynvU1tiXFOmJ8L1RQv5Xh5Z37EfQrn44lpfki4k4/s1600/icon_rss.png) left no-repeat; }
* Now click to save your Blogger Template.
* Again go to your blogger Dashboard and click in design tab.

* Now you are here--->>> Page Element.

* Click in Add Gadget which is in your blog sidebar.

* when open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.
<div class='widget widget_bu_subscribe' id='bu_subscribe_widget-3'>
<div class='featured_subscribe'>
<h3>Subscribe</h3>
<h4>Stay up to date with our content</h4>

<ul class='subscribe_icons'>
<li class='rss'>
<a href='YOUR FEEDBURNER URL HERE' title='Subscribe to the RSS Feed'>
RSS Feed
<span>Easy access</span>
</a>
</li>
<li class='email'>
<a href='YOUR FEEDBURNER EMAIL URL HERE' title='Subscribe to the RSS Feed via Email'>
Email Updates
<span>Sent to your inbox</span>
</a>
</li>
<li class='twitter'>
<a href='YOUR TWITTER URL HERE' title='Follow us on Twitter'>

Twitter
<span>Follow us</span>
</a>
</li>
</ul>
</div>
</div>
NOTE:- Replace Highlighted text in above code with your own ok.
* Now click to save your HTML/javascript and now you are done.

No comments: