ADD A COMPLETE EXPANDABLE SOCIAL NETWORK WIDGET FOR YOUR BLOG

Welcome Back Again TO khatriscreation And Today I Am Going To Share New Things In My Blog And That Is Blogger Widget.i Think You add Many Blogger Widget In Your Blog but this widget is fully optimized with the all Social Network like facebook, Twitter, LinkedIn, Google Plus, P interest,  Youtube, RSS and this widget has very awesome feature of expandable hover effect with colors according to social network's color.

 This widget is simply made by using the CSS and HTML and this widget is pure CSS with images of icons, if this widget is made by using the CSS so it's very perfect as working and no javascript so the speed of this widget of hovering is very smooth according to the browser's compatibility just be'coz every browser can support it's smoothness like in Internet Explorer, Safari, Firefox, Opera etc.The feelness of this widget is very smooth and shining and the widget's icon is in the HD and round able which gives a very unique feel to this widget in it's own.

 How to Add Expandable Social Network Widget

• Login to Blogger 
• Copy The Code Below 

<!-- www.khatriscreation.blogspot.com expandable social network widget start-->

<style>#WG-SWS {width: 260px;margin: 5px 20px;padding:5px;}#WG-SWS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#WG-SWS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqo-Umigg-EicLImknAnbMV2luztx8J74Q3GBi09IFN_4DElcyx1jUoCLrXI3s496HEWR4NyztFBFLKlQ_jZzS3my0KvLlf7o12ph-hN0YMSXVeimBu20GRD_Fw4xPg210nuj5G6xLEM/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#WG-SWS span:hover {visibility: hidden;}#WG-SWS span {display: block;top: 15px;position: absolute;left: 90px;}#WG-SWS .icon {color: #fafafa;overflow: hidden;}#WG-SWS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#WG-SWS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#WG-SWS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#WG-SWS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#WG-SWS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#WG-SWS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#WG-SWS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#WG-SWS li:hover .icon {width: 250px;}#WG-SWS li:hover .icon {background-color: #d91e76;}#WG-SWS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#WG-SWS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#WG-SWS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#WG-SWS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#WG-SWS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#WG-SWS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#WG-SWS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#WG-SWS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="WG-SWS"><li><a href="http://www.facebook.com/khatriscreation" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/khatriscreation" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/khatriscreation" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://www.pinterest.com/khatriscreation" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="http://in.linkedin.com/khatriscreation" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li><li><a href="http://www.youtube.com/user/khatriscreation" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/khatriscreation" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul></div><div style='clear: both;'></div>
<!--  www.khatriscreation.blogspot.com expandable social network widget End-->

• Change The Highlight blue Color With Your Username
• Paste in HTML/JavaScript Widget OR paste that code where you want to show it.

NOW,your work is done succesfully .............................

Happy Blogging!.......................................

www.khatriscreation.blogspot.com

• Tweet
• Share
• Share
• Share
• Share

About sudarshan khatri

Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.

Related Post