Color Your Social Subscription Widget Blue

Here’s another subscription widget that you would definitely like. By using CSS and HTML, it’s a lot easier for you to incorporate this RSS feed subscription box with social icons on your site. Follow these simple steps:

• Login to Blogger > Blogger Dashboard

• Select Layout

• Add Gadget > HTML/Javascript

• Paste this code below:

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3VmbKkGWsHu7bg4MeyxtLp5Ybrq3lrjlXBArMn1x9n8SUZkJ-AG2bvefr46d8v7Ir1QTuripY3iRIO2r9A_4MgyXnGlEc6y6SZTHEUmhTK5d5gMwW5u8wxdEf90CpPbEvf8D_L6EYTqI/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}

.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}

.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_2JNdPVaBh0pT6PullUMXr-YXRWeriKirpqaFetQuk02LRmsB22IvEuQtohKJZib0wMCa68RCPtnKkpkxUzg0bFvZaJHE5NFWRIN3XibpnEy6hS98lcgpTxVLKRNFL6rylM0MN8XhvgA/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}

.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

a.social-icons{margin-right: 5px;height:45px;width:45px;}

a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}

</style>

<div id="sidebar-subscribe-box">

<div>

<br/>

<a href="https://facebook.com/sobuzzzzz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGl4qL2CSus94yEn3XHZDCBbQiVC2qjOOa4cCBv88wqwtHZT6tcZE1xyePByd8-XDvaBhyphenhyphenI9opcrHMUElf2O6GsJhmh3weM8jykadzMVdlJTQ854VJdeB7KW1gOla7AA-sgGE0XeekGUBI/s1600/Bloggertrix-facebook.png" /></a>

<a href="https://twitter.com/sohanurbd"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZM44X9RT2BIB5kE1BIwBwUyhxqtqPbPJah4K8g8j4YWihzfBL8BBrGxPU1UMsOzYDMFq9N2jTBDvtPb9A2hfrV1xFG1_hmZ-341Oia06PyPPEVNpCBMD6xVgfTmROYdZmNbU6N9nEsL8R/s1600/bloggertrix-twitter.png" /></a>

<a href="https://plus.google.com/106843602867085867346"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPJZad7XAXVIM09CnoFkSLn0eR8fEZlOvwu5hF-jHWKnOJ5TXdrebLNOJNOjbSbRg5GbdcgJAAssK5MjTYa_vXC_TQNlI3KhjOYK6_i2pV9P1xja_vO2F7biRArc_O1MCBwQspdNNteBB/s1600/Bloggertrix-Googleplus.png" /></a>

<a href="http://www.feeds.feedburner.com/sbz14"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcevA7VeoWwxEhgt6A8JVViP3NRHEJRYjrppRjdru6bQNWh3-Nb2quVyoujuVUzi7XI_Ro_1TtyLOIhIo-ZMwJc2Elhh2YM4HCi81eN7_L2PBDs-5vVc_abEwvj0Wi1ymFZwYOcoCeR99y/s1600/Bloggertrix-Rss.png" /></a>

<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>

<div><form action="http://feedburner.google.com/fb/a/mailverify?uri=sbz14" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />

<input name="loc" type="hidden" value="en_US" /><input name="email" autocomplete="off" placeholder="Enter your email address here"/>

<input title="" type="submit" value="Subscribe Now !" /></form>

</div></div></div>

Note: For Facebook username, Twitter username, Google+, Feedburner username, Feedburner ID, replace the provided sample name highlighted in red with your own.

• Always backup your template first before editing.

• Save.

Simple isn’t it? Hope you like this featured tutorial.