Home / Blogger Widgets / 5 Free Animated Social Media Icons | Blogger Widget

5 Free Animated Social Media Icons | Blogger Widget

free social media icons for blogger

5 Free Animated Social Media Icons | Blogger Widget

The most effective ways to connect your readers is through social networking internet sites. But you’ve to make sure that your readers can comply with your social profiles easily. If you aren’t doing so, you are missing some social followers and also some readers. When a visitor comes to your website for the first time, He / She doesn’t have any idea about your website but He / She may like your website posts. For this, you cannot expect him / her to subscribe to your email list. All you can expect to connect with public sites. Cause it requires only one click to follow, for instance, or subscribe you. However, social sites also help you in order to connect with your regular readers and provide them regular updates within your website. BlogSpot has some awesome widgets to display your social media buttons on your website. Displaying these buttons will encourage your reader that you should follow you on different social networking sites.

flying social media icons

1. Flying Social Media Icons

<div><a href="https://twitter.com/pro_blogger_24" title="Follow us on Twitter" class="social-link social-twitter"></a><div>
<div><a href="https://www.facebook.com/problogger24" title="Like us on Facebook" class="social-link social-facebook"></a></div>
<div><a href="http://feeds.feedburner.com/problogger24" title="Subscribe to our RSS Feeds" class="social-link social-rss"></a></div></div></div>
<style type="text/css">
/*Animated Social Media Icons by www.problogger24.com*/
.entry-social {
  height: 40px;
  padding-top:10px;
  padding-bottom:10px;
}
.entry-social > div {
  float: left;
  margin-right: 20px;
}
.entry-social .fb-like span{
    vertical-align: top !important;
      padding-top: 2px;
}
.fb-like span iframe{
    max-width: none;
}
.sidebar-social > div > div {
    width:50%;
    float:left;
}
.sidebar-social > div > div:nth-child(odd) {
    width:60%
}
.sidebar-social > div > div:nth-child(even) {
    width: 40%;
}
.sidebar-social > div > div > a > img {
    float: left;
}
.sidebar-social > div > div > div {
    float:left;
    margin-top:10px;
    margin-left:12px
}
.sidebar-social p {
    clear: both;
    margin: 0;
    padding: 10px 0 0;
}
.social-link {
     display:block;
    height: 50px;
    width: 50px;
    float: left;
    -webkit-animation: social .6s steps(12,end) infinite;
    animation: social .6s steps(12,end) infinite;
    /*-webkit-animation-play-state: paused;
    animation-play-state: paused;*/
}
.social-twitter {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80JhIaqs33DKuZ4K-Px7eLwtGcvu4adab5N5tTe22-EJEOdgMU8J2UYCSl0RVeBHDg_gOlCZcOBQKkfWTZwQpaHRYlTzmspE3ELXTX7wNA5syrbYj2e25euJOTBJTr0VttTUqH8KZVTs/s1600/twitter-sprite.png)
}
.social-rss {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVHVvysVlFA9V7kVON8sk2q5fUtZQPPHDHX4mWCKCn8Wq8wIsbwddU9mfE885hf992q_pZRngs8g6MYz3ziMmEpqImvP45FkNz87roB1-PzHu_dil0Kg3PjvetJuwR00342tV6T9uer0/s1600/rss-sprite.png);
      -webkit-animation: social-rss .6s steps(9,end) infinite;
    animation: social-rss .6s steps(9,end) infinite;
      /*-webkit-animation-play-state: paused;
    animation-play-state: paused;*/
}
.social-facebook {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkB_T7b7BVoAFlJgSZmuVzbzeKkjorOaJPDutJ_JTHOeFrMKM2s7E9bNAXpUziyR05SaiVMUSYtdx36KHwnV5DWQ2E8sipAqidzgGU1tNuuklY1z8cQCr8Wb1vZW3D0gzgNXTwmDCUFc/s1600/facebook-sprite.png);
}
@keyframes social {
    from { background-position: 0 0; }
    to { background-position: -600px 0; }
}
@-webkit-keyframes social {
    from { social-position: 0 0; }
    to { background-position: -600px 0; }
}
@keyframes social-rss {
    from { background-position: 0 0; }
    to { background-position: -450px 0; }
}
@-webkit-keyframes social-rss {
    from { social-position: 0 0; }
    to { background-position: -450px 0; }
}
</style>

sliding social media icons

2. Sliding Social Media Icons

<style>
#socialmenu_btrix {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#socialmenu_btrix li {
  display:inline;
  list-style-type:none;
  }
#socialmenu_btrix li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#socialmenu_btrix li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#socialmenu_btrix li a span {
  display:none;
  }
#socialmenu_btrix li a:hover {
  background:transparent;
  }
#socialmenu_btrix li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
}
#socialmenu_btrix .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1em;
border:0;
}
</style>
<ul id="socialmenu_btrix">
<li>
<a href="https://www.facebook.com/problogger24"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVlwAC3_fXbD_BdcahunTxNnvz5FRM4X3lWcJwC8YsL6Dj18PFwq7dbqziVOrOIRBt4EAfFWGUBJzjxsZu0qONHJZenwKyAmFxDUS8ovHCYJ9wU2hGLoW2aKSh8O4mvFi5jyAbGm9wnQ/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Like us on Facebook
</span>
</a>
</li>
<li>
<a href="https://plus.google.com/+problogger24"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWX8B0txZqCpKaFPhrjte9WTBfDh7L1yw6Bq7_b5CdWB_cXL3AWGYxLziX4Eg-rCs520OSEeq_vsL4tQiqyi0CsOvkHIGpopLNZqdK6bVM1TTeM0ukz1r1K5uBVB_LNFbvlOiEElDuGU/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" />
<span>
<br />
<b class="h2">Google+</b><br />
Circle us on Google+
</span>
</a>
</li>
<li>
<a href="http://feeds.feedburner.com/problogger24"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_T4lQZVHm2sRBkZp8gEdNHpX2-ojvHFeorD09DbMOvWfq1Oz3aaF1q454D4pTnvbBwCv05J3cfO8MdS6nsaXdZION3I5wBXdvcqo-DX1_wIFixB5QVwCzfhWJisFE533WaZJUAvuFHnk/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" />
<span><br />
<b class="h2">Rss Feed</b><br />
Subscribe to RSS feeds
</span>
</a>
</li>
<li>
<a href="https://twitter.com/pro_blogger_24"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHmt9qGWPjph8JLAY0wiVQ22Mshn94sA8VVLHMw_sjY3GHtn0YDFhCBPgoYqx9LECBGIhquLdW0mufAxwCimwSIe7GGkDEu1LzUwzHtG7d5IL58RmbiRYFZO68bMxNJK2j3YzmdbZ3I0E/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" />
<span><br />
<b class="h2">Twitter</b><br />
Follow us on Twitter
</span>
</a>
</li>
</ul>

attractive social media icons

3. Attractive Social Media Icons

<style>
.btrix_widget{
margin-bottom:20px;
overflow:hidden;
clear: both;
border: 1px solid black;
width: 300px;
}
.btrix_widget li{
line-height:15px;
float:left;
width:75px;
height:87px;
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
list-style:none;
}
.btrix_widget li a{display:block;text-align:center;}
.btrix_widget li a strong{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxuLwUGaJD55hSoz21A6THwQvPYZJR5t0Aqua0Wze3XddzHEZA-U5wfuChwEKzpkTn5tVc1dmOkCFWoXUdh0OYTnQ9PBvbG5lQ6m2v5cgKAJCrOVyAi4041k9nDpM7AdAZ2fMpn7J2Kn_K/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s;  -moz-transition: opacity ease-in-out 0.4s;  -o-transition: opacity ease-in-out 0.4s;  transition: opacity ease-in-out 0.4s;}
.btrix_widget li a:hover strong{opacity:1;}
.btrix_widget li:hover a{text-decoration: none;}
.btrix_widget li.rss-subscribers a strong{ background-position:center -1084px ;}
.btrix_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}
.btrix_widget li.rss-subscribers span{display:block;font-size:21px;}
.btrix_widget li.facebook-fans a strong { background-position:center -1192px ;}
.btrix_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}
.btrix_widget li.twitter-followers a strong{ background-position:center -868px;}
.btrix_widget li.twitter-followers a:hover strong{ background-position:center -922px;}
.btrix_widget li.youtube-subs a strong{ background-position:center -976px;}
.btrix_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}
.btrix_widget li span{display:block;font-size:21px;}
.btrix_widget li a small{color:#777;}
</style>
<br />
<div class="widget btrix_widget">
<ul style="margin-left: -40px;">
<center><h1>Connect with Us</h1></center>
<li class="rss-subscribers">
<a href="http://feeds.feedburner.com/problogger24">
<strong></strong>
<span>548</span>
<small>RSS Feed</small>
</a>
</li>
<li class="twitter-followers">
<a href="https://twitter.com/pro_blogger_24">
<strong></strong>
<span>5,245</span>
<small>Followers</small>
</a>
</li>
<li class="facebook-fans">
<a href="https://www.facebook.com/problogger24">
<strong></strong>
<span>2,298</span>
<small>Fans</small>
</a>
</li>
<li class="youtube-subs">
<a href="https://www.youtube.com/c/problogger24">
<strong></strong>
<span>1,202</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>

spinning hover effect social media icons

4. Spinning Hover Effect Social Media Icons

<style>p#socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By www.problogger24.com */
</style>
<center><p id="socialicons">
<a href="https://www.facebook.com/problogger24">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Kv01VOUzI-ZmSdVjpZYIe0qGXCM0IUToeSn68dKLXWt5AQ7zE5eVosKB-WzHgWsSsrdxTN-I-WGszvEYVj2zmGfHJI1laOEBGGvILe7MYKgSdVsA-skzU_2QFPhMB9NmOgUqCr4MfFR8/s1600/facebook.png" /></a>
<a href="https://twitter.com/pro_blogger_24">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EdPUhEPiA_xq_8rV950Yvui0yH0mmKa9X-n8ciF5-RxSkGcDaNc6aiD6l1Fp9LiAy0iTTtxMsnQfOLyPIcn9nUfTIBtcClx5mObel7b6-48AEg9Uw67tlrMbId0ODY6TcinYinvxyHez/s1600/twitter.png" /></a>
<a href="https://plus.google.com/+problogger24">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8SK-1OgvPiNkLoK-yA7feZY4zW94QmQEcdPamrkztdYCvN2ylY7Yst-ehY73utozpttAITJXnkDoCpbrECVlwsaCAESQ0MhzZ6LH8BpqyyNyh99vDLC8kuRWI1GIT_nkRHtZ7Ff6dd3W/s1600/googleplus.png" /></a>
<a href="http://feeds.feedburner.com/problogger24">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxdOZsrfInSVZCe7gAZfXtRBHkeksUmrK3JWVFvS_Ed3zKm0X3qX6xvf2POSrqSExqU3mLRBI16sIKscaBqlqwpeYYGdzqON-zx1ucI_U42deQxMIbYhJ58xD1vSWfMBR-GJ9b-pLn8e3/s1600/rss.png" /></a>
<a href="https://www.youtube.com/c/problogger24">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5uKAIU241divit2NRz_FHHM5sCnTAQ6kQE7tLN09hHUkpb-ae21Sd_TenRBEpT6CXROtdDQ_pcHsxrA1YqnJL1EYzENAet6y2d5xbulvD0E_UpzAgaeuRz7OdW3Om89wa7SdEL1gQspY/s1600/youtube.png" /></a>
</p></center>

shutter up hover effect social media icons

5. Shutter Up Hover Effect Social Media Icons

<style>.avdhootwindow {margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.avdhootwindow ul li{list-style:none;border-bottom:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.avdhootwindow li a {margin:5px 5px 0px 5px;padding:0px 0px 0px 0px;width:60px;height:60px;float:left;text-indent:-99999px;background: #191919;border:solid 1px #222121;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}.avdhootwindow li a.facebook {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPc0wVlggQvhDK9jvnvT55sOw4BM8uIfkzWHCGdr4vX5nAWtoNuGbtHq8qiuvPQ9NVlUhHBu8ra80cw2MzBlBvjovD0P6TE-NidaG3FYK6o9QjhtYWPKJmlx1WuwMzKHhRI0vsbbwKiuUw/s320/BS+facebook.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.facebook:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPc0wVlggQvhDK9jvnvT55sOw4BM8uIfkzWHCGdr4vX5nAWtoNuGbtHq8qiuvPQ9NVlUhHBu8ra80cw2MzBlBvjovD0P6TE-NidaG3FYK6o9QjhtYWPKJmlx1WuwMzKHhRI0vsbbwKiuUw/s320/BS+facebook.png) no-repeat -0px -0px;}.avdhootwindow li a.twitter {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXL7Ir0nfHiEg4L2RHbyYGVaIi54_rk0N8YgXpSzV9rq3eGjCXUk_iyO1QfIbe_G_d6Jy4980hkGweuDfCnYa4ni3KVwe2qbJiHSvE_b-CRE9QI2ceY4F1jE3wp7Bspc68O4q4B32Oc7nD/s320/BS+twitter.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.twitter:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXL7Ir0nfHiEg4L2RHbyYGVaIi54_rk0N8YgXpSzV9rq3eGjCXUk_iyO1QfIbe_G_d6Jy4980hkGweuDfCnYa4ni3KVwe2qbJiHSvE_b-CRE9QI2ceY4F1jE3wp7Bspc68O4q4B32Oc7nD/s320/BS+twitter.png) no-repeat -0px -0px;}.avdhootwindow li a.google-p {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdBWrsUgLKJml-sjvbD5PG4oRPmHMrqPdEAVoZ0AHgmKQIt0r0R1rCa_9Zss9sYbYm4noYZfgb7jo30f2IaB_ik63hDqB7V6TZP9RQCnkOICRpGZkIIZFxLzKYkfs1tvcCNKr5JduKwgZ6/s320/BS+google.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.google-p:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdBWrsUgLKJml-sjvbD5PG4oRPmHMrqPdEAVoZ0AHgmKQIt0r0R1rCa_9Zss9sYbYm4noYZfgb7jo30f2IaB_ik63hDqB7V6TZP9RQCnkOICRpGZkIIZFxLzKYkfs1tvcCNKr5JduKwgZ6/s320/BS+google.png) no-repeat -0px -0px;}.avdhootwindow li a.rss {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKsH4glQCmeYJxdghv-bGijVnPfyZGyqV_0lCHmSrYabPmt_Vj2VXJk3ZH6d95l4gNL7ogEn0WNsUhWJtX43_xJEV-iNju-NcW9PNS8uKhwgV9KgR-yrdth7znnHKJCHLxENALHx9WUfTe/s320/BS+RSS+Feed.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.rss:hover {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKsH4glQCmeYJxdghv-bGijVnPfyZGyqV_0lCHmSrYabPmt_Vj2VXJk3ZH6d95l4gNL7ogEn0WNsUhWJtX43_xJEV-iNju-NcW9PNS8uKhwgV9KgR-yrdth7znnHKJCHLxENALHx9WUfTe/s320/BS+RSS+Feed.png) no-repeat -0px -0px;}
</style>
<div class='avdhootwindow'><ul><li><a class='facebook' href='https://www.facebook.com/problogger24' target='_blank'>Facebook</a></li><li><a class='twitter' href='https://twitter.com/pro_blogger_24' target='_blank'>Twitter</a></li><li><a class='google-p' href='https://plus.google.com/+problogger24' target='_blank'>Google Plus</a></li><li><a class='rss' href='http://feeds.feedburner.com/problogger24' target='_blank'>Rss</a></li></ul></div>

You have to change the counters manually, just change blue color address according to profile.
  • Replace "https://www.facebook.com/problogger24" your Facebook username
  • Replace "https://twitter.com/pro_blogger_24" with your Twitter Username
  • Replace "https://plus.google.com/+problogger24" with your Google plus ID
  • Replace "http://feeds.feedburner.com/problogger24" with your Feedburner ID
  • Replace "https://www.youtube.com/c/problogger24" with your Youtube Username

How to add a Blogger Widget

  1.  Log in to your Blogger Account and Go to your "Blogger Dashboard"
  2.  Go to your "Layout" tab. You will see the complete Layout of your Blogger Template.
  3.  Click on "Add a Gadget" then under Basics tab select "HTML/JavaScript" Widget.
  4.  Now past the animated social media code from the "HTML/JavaScript" in Content area and add a Title which you want you can leave title field blank now press save button.
Any type of information or help please Contact us.
5 Free Animated Social Media Icons | Blogger Widget 5 Free Animated Social Media Icons | Blogger Widget Reviewed by Unknown on 7/15/2015 Rating: 5

No comments:

Subscribe to: Post Comments (Atom)