Add Mouse Hover Social Media Widget In Blogger

Social Media widgets are the best widgets for every blogger, because this widget are enabled everyone to share your blog content very easily. Today social widgets are very important for all new bloggers. At this time it is seen that the social widget has contributed a lot to increase the ranks of the blog. If you are a new blogger and you want to increase your blog traffic, Then you will need to add these types of widgets on your blog. Today I am going to share with you a new mouse hover social widget for your blog. This widget is really cool because it comes with mouse hover effects. Add this widget in your blog, and build your blog like a pro.

How To Add Hover Social Widget In Blogger?

Go to your blogger dashboard - Visit
And then go to the "template" section after that click on the "Edit html" button.
Now find the below code by pressing "Ctrl + F" key together from your keyboard.

]]></b:skin>

After that, copy the below Css code and paste it just before ]]></b:skin>

ul.cbttopshare { float: right; margin: -4px 0; } ul.cbttopshare li {float:left;list-style: none outside none;border:none;} ul.cbttopshare li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDiBaHdjaRRi1FKEqAVN0LN_NamwZqLTlDNGgJNKWleaYOsj0mY1TIXbTyIJ55znvLCsZsL1ntvpHcRq5QHQa-R6OYGRPx5rlTIMP-AMW9HLz9c4tTahAynziU_M2ExXpdx9FVSNOsh2U/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.cbttopshare li a, .ie8 ul.cbttopshare li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDiBaHdjaRRi1FKEqAVN0LN_NamwZqLTlDNGgJNKWleaYOsj0mY1TIXbTyIJ55znvLCsZsL1ntvpHcRq5QHQa-R6OYGRPx5rlTIMP-AMW9HLz9c4tTahAynziU_M2ExXpdx9FVSNOsh2U/s1600/spice-social-gadget-sprite.png)} ul.cbttopshare li.facebook a{ background-position:0 0} ul.cbttopshare li.flickr a{ background-position:-32px 0} ul.cbttopshare li.dribbble a{ background-position:-64px 0} ul.cbttopshare li.googleplus a{ background-position:-96px 0} ul.cbttopshare li.linkedin a{ background-position:-128px 0} ul.cbttopshare li.pinterest a{ background-position:-160px 0} ul.cbttopshare li.rss a{ background-position:-192px 0} ul.cbttopshare li.skype a{ background-position:-224px 0} ul.cbttopshare li.twitter a{ background-position:-256px 0} ul.cbttopshare li.vimeo a{ background-position:-288px 0} ul.cbttopshare li.youtube a{ background-position:-320px 0} ul.cbttopshare li.facebook a:hover, #sidebar ul.cbttopshare li.facebook a:hover{ background-position:0 -32px} ul.cbttopshare li.flickr a:hover, #sidebar ul.cbttopshare li.flickr a:hover{ background-position:-32px -32px} ul.cbttopshare li.dribbble a:hover, #sidebar ul.cbttopshare li.dribbble a:hover{ background-position:-64px -32px} ul.cbttopshare li.googleplus a:hover, #sidebar ul.cbttopshare li.googleplus a:hover{ background-position:-96px -32px} ul.cbttopshare li.linkedin a:hover, #sidebar ul.cbttopshare li.linkedin a:hover{ background-position:-128px -32px} ul.cbttopshare li.pinterest a:hover, #sidebar ul.cbttopshare li.pinterest a:hover{ background-position:-160px -32px} ul.cbttopshare li.rss a:hover, #sidebar ul.cbttopshare li.rss a:hover{ background-position:-192px -32px} ul.cbttopshare li.skype a:hover, #sidebar ul.cbttopshare li.skype a:hover{ background-position:-224px -32px} ul.cbttopshare li.twitter a:hover, #sidebar ul.cbttopshare li.twitter a:hover{ background-position:-256px -32px} ul.cbttopshare li.vimeo a:hover, #sidebar ul.cbttopshare li.vimeo a:hover{ background-position:-288px -32px} ul.cbttopshare li.youtube a:hover, #sidebar ul.cbttopshare li.youtube a:hover{ background-position:-320px -32px} blockquote { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FBFBFB; border-color: #DDDDDD #DDDDDD -moz-use-text-color; border-image: none; border-style: solid; border-width: 1px 1px 2px; padding: 5px; clear: both; }

Save your template by clicking on the orange save template button.
Now go to your blogger layout.
And then select any add a widget option where you want to show this widget.
Select html/java script from popup windows and paste the below code in html box.

<!--Social Icons Started --> <ul class='cbttopshare'> <li class='facebook'> <a href='http://www.facebook.com/' rel='nofollow' target='_blank' title='facebook'> </a></li> <li class='googleplus'> <a href='https://plus.google.com/' rel='nofollow' target='_blank' title='googleplus'> </a></li> <li class='pinterest'> <a href='http://pinterest.com/' rel='nofollow' target='_blank' title='pinterest'> </a></li> <li class='twitter'> <a href='http://twitter.com/' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rss'> <a href='http://feedburner.com/' rel='nofollow' target='_blank' title='rss'> </a></li> <li class='skype'> <a href='http://www.skype.com/' rel='nofollow' target='_blank' title='Skype'> </a></li> <li class='vimeo'> <a href='http://www.vimeo.com/' rel='nofollow' target='_blank' title='vimeo'> </a></li> <li class='flickr'> <a href='http://www.flickr.com/' rel='nofollow' target='_blank' title='flickr'> </a></li> <li class='linkedin'> <a href='http://www.linkedin.com/' rel='nofollow' target='_blank' title='linkedin'> </a></li> <li class='youtube'> <a href='http://www.youtube.com/' rel='nofollow' target='_blank' title='youtube'> </a></li> </ul> <!--Social Icons End-->

Again click on the orange save button.

See the Pen vOzvYr by Prince (@Askwithloud) on CodePen.

That's it ! I hope you like this widget ! Stay tuned for more cool blogger widgets ! Thanks for reading@ Prince.

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES