How To Add Mini Flip Social Icons To Blogger
Add Mini Flip Social Icons To Blogger
Mini Flip Social Icons looks great, and if any of your visitor likes them. He/She will surely hover the mouse on it and as he/she will hover the mouse on these icons, These icons will change to their original color very neatly and beautifully.
Click on the Live Preview button to see the live demo of Mini Flip Social Icons.
How To Add these in Blogger?
Step 1: Go to Blogger, and log in to your account.
Step 2: Go to your blog's Dashboard.
Step 3: Click on the Layout Tab at the left side.
Step 4: Click on Add a Gadget, and choose HTML/Javascript.
Step 5: Leave the title area blank, and Paste the following code in Content Area.
The Code:
<ul class="socialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.socialwidget {float:right;}
ul.socialwidget li {float:left;list-style: none outside none;border:none;}
ul.socialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyoe0u0NJDIj_yx918hFLDdvWJyjq8RyuxPQXQwSj4IXR_K7URJStBhcdixrgisCFNW1Yz1caI18Bq5ubTqiNrcZd0VSSy5LSiOb38FCpTEgs-tK0vxNkpU73XbEk8OQEzDlxlZIpHDuD/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.socialwidget li a, .ie8 ul.socialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyoe0u0NJDIj_yx918hFLDdvWJyjq8RyuxPQXQwSj4IXR_K7URJStBhcdixrgisCFNW1Yz1caI18Bq5ubTqiNrcZd0VSSy5LSiOb38FCpTEgs-tK0vxNkpU73XbEk8OQEzDlxlZIpHDuD/s1600/spice-social-gadget-sprite.png' )}
ul.socialwidget li.facebook a{ background-position:0 0}
ul.socialwidget li.flickr a{ background-position:-32px 0}
ul.socialwidget li.dribbble a{ background-position:-64px 0}
ul.socialwidget li.googleplus a{ background-position:-96px 0}
ul.socialwidget li.linkedin a{ background-position:-128px 0}
ul.socialwidget li.pinterest a{ background-position:-160px 0}
ul.socialwidget li.rss a{ background-position:-192px 0}
ul.socialwidget li.skype a{ background-position:-224px 0}
ul.socialwidget li.twitter a{ background-position:-256px 0}
ul.socialwidget li.vimeo a{ background-position:-288px 0}
ul.socialwidget li.youtube a{ background-position:-320px 0}
ul.socialwidget li.facebook a:hover, #sidebar ul.socialwidget li.facebook a:hover{ background-position:0 -32px}
ul.socialwidget li.flickr a:hover, #sidebar ul.socialwidget li.flickr a:hover{ background-position:-32px -32px}
ul.socialwidget li.dribbble a:hover, #sidebar ul.socialwidget li.dribbble a:hover{ background-position:-64px -32px}
ul.socialwidget li.googleplus a:hover, #sidebar ul.socialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.socialwidget li.linkedin a:hover, #sidebar ul.socialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.socialwidget li.pinterest a:hover, #sidebar ul.socialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.socialwidget li.rss a:hover, #sidebar ul.socialwidget li.rss a:hover{ background-position:-192px -32px}
ul.socialwidget li.skype a:hover, #sidebar ul.socialwidget li.skype a:hover{ background-position:-224px -32px}
ul.socialwidget li.twitter a:hover, #sidebar ul.socialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.socialwidget li.vimeo a:hover, #sidebar ul.socialwidget li.vimeo a:hover{ background-position:-288px -32px}
ul.socialwidget li.youtube a:hover, #sidebar ul.socialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>
Step 6: Change the links which are highlighted with red color in the code with your social profile links.
Step 7: Click on Save and you're done.
Enjoy your new Mini Flip Social Icons.
0 comments: