Hi friends if you want any social subscription box for your blogger blog this box is great for your blog.
* 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>
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; }
* 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.
* Now click to save your HTML/javascript and now you are done.
No comments:
Post a Comment