SOCIAL HOVER EXPANDING WIDGET FOR BLOGGER

Many bloggers use Google blogger platform as it is free. Some of them use on sub domain of blogspot.com and some of the blogger use on custom domain. There are some limited features of BlogSpot as compared to other self-hosted blogs such as WordPress, Joomla, etc. To make your blog more beautiful and attractive, I always try to bring latest blogger tutorials for you here at Elkees Media and today I have come again with a new blogger trick by which you can easily add social media hover expanding widget in blogger blogs.

Also see: Add Star Ratings to Your Blogger Blog Posts

This social hover widget has a lovely design and awesome look. It is just a combination of CSS and HTML coding. It will not effect your blog page loading time. This hover social widget includes Facebook, Twitter, Google+, YouTube, LinkedIn,  Pinterest and RSS subscription link. You do not need to edit your blogger theme template, just add this hover widget into your blog.

Social Hover Expanding Widget For Blogger

1. Log in to Blogger => Go to Layout => Click on Add a Gadget => HTML/JavaScript.

2. Now simply copy-paste below social hover widget code in HTML/JavaSript widget.

<!– Code provided to you by http://www.techdomz.blogspot.com –>
<style>
#ElkeesMedia {width: 260px;margin: 5px 20px;padding:5px;}#ElkeesMedia li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#ElkeesMedia .icon {background: #D91E76 url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbyDvMM-o5RMPP6D5ovmgnAEjVPwvl9vWEpFDuc4HKXw1HIUGHC-7Te8auGfUncZMwSy1ZuaxB92z1CCBX2J4FDN5RSrNu33y89aTfOYZank4GIgryRmZPuqEyXR_gvqAhHdw6rk0BHk4/s1600/ElkeesMedia.png’) 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;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;}#ElkeesMedia span:hover {visibility: hidden;}#ElkeesMedia span {display: block;top: 15px;position: absolute;left: 90px;}#ElkeesMedia .icon {color: #fafafa;overflow: hidden;}#ElkeesMedia .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#ElkeesMedia .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#ElkeesMedia .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#ElkeesMedia .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#ElkeesMedia .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#ElkeesMedia .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#ElkeesMedia .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#ElkeesMedia li:hover .icon {width: 250px;}#ElkeesMedia li:hover .icon {background-color: #d91e76;}#ElkeesMedia li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#ElkeesMedia li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#ElkeesMedia li:hover .google {background-color: #A70000;background-position: 0 -94px;}#ElkeesMedia li:hover .pint {background-color: #C00;background-position: 0 -142px;}#ElkeesMedia li:hover .linked {background-color: #005772;background-position: 0 -190px;}#ElkeesMedia li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#ElkeesMedia li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#ElkeesMedia .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<ul id=”ElkeesMedia”>
<!– RSS Start –>
<li><a target=”_blank” href=”#” class=”icon rss”>Subscribe via RSS</a><span>Subscribe via RSS</span></li>
<!– RSS End –>
<!– Google+ Start –>
<li><a target=”_blank” href=”#” class=”icon google”>Follow us on Google+</a><span>Follow us on Google+</span></li>
<!– Google+ End –>
<!– Facebook Start –>
<li><a target=”_blank” href=”#“>Like us on Facebook</a><span>Like us on Facebook</span> </li>
<!– Facebook End –>
<!– Twitter Start –>
<li><a target=”_blank” href=”#“>Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
<!– Twitter End –>
<!– YouTube Start –>
<li><a target=”_blank” href=”#“>Follow us on YouTube</a><span>Follow us on YouTube</span> </li>
<!– YouTube End –>
<!– Pinterest Start –>
<li><a target=”_blank” href=”#“>Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
<!– Pinterest End –>
<!– LinkedIn Start –>
<li><a target=”_blank” href=”#” class=”icon linked”>Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
<!– LinkedIn End –>
</ul>
<!– Code provided to you by http://www.techdomz.blogspot.in –>

3. Replace the social URLs with your links highlighted in blue color.

4. Just Save the widget and visit your blog to see the lovely widget.

Note: Change the social networking # or Links with your own.

I hope you will like this social networking widget. Please do not forget to share your comments below.