Menu Close Menu

Artless Social Profile Widget For Blogger And WordPress

Artless_social_profile_widgetToday I'm gonna unleash you one of the best widgets I have ever made, one of the best subscription widget at my blog, I present you the Animated social Subscription Widget for Blogger. No matter about its name but it matters totally awesome when you will see it live. Without one of these your blog simply won’t shine on the right sidebar, and also these are the most attractive social network buttons and suits perfect on any light or dark color website or blogs. As you guys can see even I am using this widget on my blog because it is one my favorites. We also use a sprite instead of individual images.This makes the flip smooth and adds less load time to your blog. I have tutorials for adding them to your sidebar on both Wordpress and Blogger but you could add them to your blog footer or even in a menu.

 

Live Preview

 

How to add it to blogger

1. Go to Blogger Dashboard

2. Click The Drop Down For Your Blog > Choose Layout

3. Click Add A Gadget > Choose HTML/JavaScript 

4. Paste In The Code as shown in the video below :

 

 

<style>

.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}

.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}

.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.social-wrap li a.facebook1 {
background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -454px;
}

.social-wrap li a.pinit1 {
background:#cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -580px;
}

.social-wrap li a.linkdin1 {
background:#1698E3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -711px;
}


</style>

<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/mybloggerstricks' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/mybloggertriks' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/103598710564060829080' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/mybloggerstrick' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/mybloggertrickx' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/mybloggertricks' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>

Note:- Change the links in yellow with links to your social profiles.

 

Adding The Social Icons To Wordpress

In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste code in content area:

 

<style>

.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}

.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}

.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.social-wrap li a.facebook1 {
background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -454px;
}

.social-wrap li a.pinit1 {
background:#cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -580px;
}

.social-wrap li a.linkdin1 {
background:#1698E3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(http://2.bp.blogspot.com/-3Kl6YIoUZ5I/Unc-6CPuOvI/AAAAAAAAD4E/1NQL7KBkueI/s1600/social_sprites.png) no-repeat 0px -711px;
}


</style>

<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/mybloggerstricks' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/mybloggertriks' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/103598710564060829080' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/mybloggerstrick' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/mybloggertrickx' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/mybloggertricks' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>

Note:- Change the links in yellow with links to your social profiles.

And that's it, thanks for your comment Ger I hope you like the icons and use them on your blog. Drop your comments and questions below.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. This comment has been removed by a blog administrator.

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  4. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.