Social Icon for Bloggers

Asalamalekum,

Hope you guys are very well..

Today, I will be blogging apart from SharePoint Topic and to add Social Icon widgets to your blogs.

This is how its gonna look like

SOCIAL ICONS WHICH YOU CAN DISPLAY ON YOUR BLOGS

 

Just go to your blog account under Layout --> Add Gadget --> Select HTML/JavaScript
and add the below code

<style>
#sidebar-subscribe-box{width:270px;border:0px solid #aaa;border-radius:0px;padding:0px 0}
 .sidebar-subscribe-box-wrapper{repeat scroll 0 0 #f7f7f7;color:#ffff;font-size:14px;line-height:20px;padding:1px 5px 5px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:5px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:5px 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/AVvXsEiRWXFO1K8jEFWeEjnSvYWf2K_BMrPSffWJ2hQ94IBegJldIYQfL0aoHqwfzQmXzwrPzmrDnauzvUiRaHo_oYxRwPSh1uU6lgwJQiFnxJ6Ci3Ayx_3mrL3Wmc0Zx-JNaddbhsuPNsJXTLo/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:50%}
 .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 class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/SabinaTechDiary"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgX2DruC8BXOFGo1U1fNFtXp_ZRm3mN0jsCagSz_AR2oIyPauCZ7OTrfsweuBl1uG0gbY36vzOTnOHOQMN0z_CeoO_suoMMP2CuZVmrxRhbd5Gkt27hi7AG2iOoqiijBIJHRmINCQ6CHcu/s1600/SabinaTechDiary-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/SabinaTechDiary"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiluZqb7r4OxBO-I115T6eD-wRM4J1PlXfeCIUshDBeJgTKTGf5GV3Wy2WZ7jR7cotURXd03iflWPLhC3-S3JlelKdD7LZb5yW4dMVsZ_vtP3WwTIq4qX76guI_XZaA65bsljXRd-7DWTtI/s1600/SabinaTechDiary-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/+sabinaAnsariLife/posts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6o5avXd9Wo0wIpuqe21jiOlKt5oZlNGzm0gDqrQMpf9yDISgHknZWtCtSzZ1sezMspehHseWSNQs2qZ_-y2174eh_jB7Fb3BdNa-nXgkZNDOQ8Q7DXChSLpcEmfItY15y-ei-VXevgJ9l/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcbFNZQDffeuP72lqgIXoyse5HZWL-A3yWVbXwWXgKzjlh4aG3B7gOUCuHdtBrqfxj2y8SJE1CJdZPnpb2vps9EQk6ubtNqR31fEcrNAP4P6Be-T5oq3_SV8qcB5yC5NKoLwdduBvTqda/s1600/Bloggertrix-Rss.png" /></a>
</div></div>

Thats it for this post..

Enjoy!!

Allahafiz..