Pop Out Effect Retro Social Icons Widget For Blogger

By Santosh Shah
social widget with pop out effect retro design
Today I am going to share you a awesome social icons widget for your blogger blog. This widget helps to link your social profiles and increase your social activity. This widget is created with pure CSS with a retro design. You can add this widget to your blog sidebar. This widget include Rss Feed, Facebook, Twitter, LinkedIn, YouTube and Pinterest.

A bonus point is that you can add or remove social icons as your need in this widget easily. I will talk about this at the end of the post. So here is the widget.

Add Pop Out Effect Retro Social Widget To Blogger

  • Go to Blogger Dashboard > Layout > Choose Add a Gadget option.
  • Then select HTML/JavaScript and Paste the below code in it.
.spicy-popout{height:48px; width:48px; margin:8px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spicy-popout img{margin:8px; width:100%; box-shadow:0px 0px 3px 1px rgba(0,0,0,0.0); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spicy-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
<!--Rss Feed-->
<a class="spicy-popout" rel="nofollow" href="http://feeds.feedburner.com/SpicyTechTips" target="_blank"><img src="http://1.bp.blogspot.com/-TbOtImmnyLE/UdENYWzlgxI/AAAAAAAAF28/xSjHf76bCZA/s64/rss-feed-64px.png" /></a>
<a class="spicy-popout" rel="nofollow" href="http://www.facebook.com/spicytechtips" target="_blank"> <img src="http://3.bp.blogspot.com/-7-SBbSiT28M/UdENXgw-XSI/AAAAAAAAF2w/s-9SfXtJHtQ/s64/facebook-64px.png" /></a>
<a class="spicy-popout" rel="nofollow" href="http://twitter.com/shahsantosh" target="_blank"> <img src="http://4.bp.blogspot.com/-1INjvhcpOWc/UdENYhrS2xI/AAAAAAAAF3Q/zUQQ_kJSbYQ/s64/twitter-64px.png" /></a>
<a class="spicy-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://1.bp.blogspot.com/-crKLoJ9jcGY/UdENXpqEX2I/AAAAAAAAF2s/BkPq8OZDsCc/s64/linkedin-64px.png" /></a>
<a class="spicy-popout" rel="nofollow" href="http://www.youtube.com/user/ChannelGulmiResunga" target="_blank"><img src="http://4.bp.blogspot.com/-OUfF2eatkEQ/UdENY-FePQI/AAAAAAAAF3M/hO3W5NysmLc/s64/youtube-64px.png" /></a>
<a class="spicy-popout" rel="nofollow" href="PINTEREST-URL-HERE" target="_blank"><img src="http://3.bp.blogspot.com/-y0VCC_gzJOE/UdENXyu6URI/AAAAAAAAF3A/DPyJSrZ1NZ0/s64/pinterest-64px.png" /></a>

Customization :

  • Replace the Red highlighted URL with your Social Profile URL'S
  • Save the widget.

To Add or Remove Social Icons Of Your Choice

As i told above you can easily add or remove social icons of  your choice. To do this simple add (to add social icons) or remove (to remove social icons) the below code.
<!--Social Profile Name-->
<a class="spicy-popout" rel="nofollow" href="Social Profile URL" target="_blank"><img src="URL of Social Profile Image" /></a>

Download 30+ Retro Social Icons 

I am providing here to download 30+ retro social icons (similar to above design) with 3 different size, i.e 64px , 128 px & 256 px. This can be useful if you want to add a social icons of your choice.

If you want to share this widget on your blog then we humbly request you to link back to our blog or else a strict action will be taken.

4 comments to '' Pop Out Effect Retro Social Icons Widget For Blogger "

  1. thanks

  2. U.S. stocks pointed to a lower open as investors remained cautious
    ahead of U.S. consumer sentiment data, amid sustained uncertainty
    over the future of the Federal Reserve's stimulus program.
    equity tips

  3. Nice Article, Thanx for giving me a wonderful information!!!!!!!!!!
    Free Trial
    Stock Cash Tips

  4. Seriousaly I realy appreciate from your blog posting and design.I suggest to all, you should watch daily this blog. Thanks for share with us.
    free commodity tips