Blue Square Social Icons Widget For Blogger Blog

After "Social Media (contact with us) widget" today I'm going to share how to add blue square social icons buttons in your Blogger or WordPress blogs. This is another simple and attractive widget for all of Blogs Daddy readers. With few clicks you can add it to your blog simply. I have used CSS and HTML for this. Before adding this widget you can see live demo below:

Blue Square Social Icons Widget To Blogger

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In New Window, Select HTML/Javascript .
3. Copy The Code Given Below and Paste It Inside The Box.
4. Save The Gadget and Its Done

Blue Square Social Icons Widget To WordPress

1. Go to Dashboard > Appearance > Widgets > Available Widgets
2. Drag Text Widget Into a Sidebar.
3. Paste In The Code.
4. Save Widget & Its Done

Code For Blue Square Social Icons Widget

<style>

/* Social Icons 

----------------------------------------------- */

a.social-icons {

 margin-right: 5px; /*Adjust This Value As Needed*/

height:45px;

width:45px;

}

a.social-icons:hover {

 opacity: .7;

 filter:alpha(opacity=70); /* For IE8 and earlier */

}   height:45px;

width:45px;

</style>

<a class="social-icons" href="https://www.facebook.com/BlogsDaddy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qN4Ezd9RT1LwNdmKExBmwvwT_Ord8JpV0dD_vjNHoPwBwZp5QCSmMF97PvqspOBaGa_lFB3T6t_J67wdoZ_AIEyd99vIx8LwGVj_3buPL1sZrGiLm5tVINDiz7vQXX7gMOeiXBCfWsxV/s1600/BlogsDaddy-facebook.png" /></a>

<a class="social-icons" href="https://twitter.com/BlogsDaddy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBIFbgr6ezWCV5s39kcykrTaWBTrsxl9AKLtKh7RL3Gxwbi3VswlN2dA46HO7rdokp52chJVhvkwvmi7WZ9zjduvOS_3fTRbHbpUy3B6kABRKiZ6uwCCw7hmc9hf8yAbMJT7go945L9_q/s1600/BlogsDaddy-twitter.png" /></a>

<a class="social-icons" href="https://plus.google.com/u/0/117100549673033253859"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSWQFRRodencgbQh0D7K-C2BcjjgyL5XT0R9vri9Xt3Gfhn1CyEkZ2xv7PCaD1NZaXfzealC5rVLlt2Nx7SFwr95PrYniBCAiwgy6zaLiRxVEtpAnyrhccYHqApJPotorHvwdhrcTd2mRo/s1600/BlogsDaddy-Googleplus.png" /></a>

<a class="social-icons" href="http://www.feedburner.com/BlogsDaddy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW20x-n7uHfD9EEXit7r7sIP3OBOUIvOobLYmL7oADwJIiyYtgj5kCRtG4GY22sB2ycz4lpHGvTsdl-8SXAbqWrCQiDZ_sQ7T_MMMr22MSYBUJTKONEXjabYroYYNuXNC61pZlLijmfigW/s1600/BlogsDaddy-Rss.png" /></a>

<a class="social-icons" href="http://pinterest.com/gaganmasoun"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaC8vcLUX3zLVQOmvloi9DmIQmH12F6oolmXboV4IQZBnQ2eTD_mPwgz9V6Oi3EAdBLdTl8A_kL7oLCNVP5lyWdqFGXQO2hTN5oxnu7rXhYZPQlTxeSOip3x2M8pL8ANSSoMNQEV9lC4DF/s1600/BlogsDaddy-pinterest.png" /></a>

Make Changes

The social and feed links are highlighted in red color, you need to change these to your own. For any kind of help use comment box below. Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddy. You can also follow him on Google+.