We all need social like buttons on our blog, don’t we? We need social like buttons on our blogs so our readers can always reach us and get more social with us. We also need these social buttons so our readers can like and always get exclusive updates from us.
Must Read: 3 Killer Ways On How To Drive Quality Traffic To A New Blog
Last week – I was playing around doing my weekend blog digest and I saw a customized social like button on a friend’s blog. The social button looks so funny, simple but yet attractive. I just can’t ignore such sets of buttons so I collected the codes from him and added it to one of my blogs :). It is one week plus now since I’ve added it to my blog and I am still using it. Do you know why I haven’t removed it? Because it is converting beautifully – even better then my previous social like button on that blog. Would you like to see how it looks? Here it is 🙂
It looks funny right? If you put a mouse on the button, it will spine 360 degree like the one on this blog.
A Stylish Like Buttons with Simple Spine Effect For Your Blog
I just feel like some few people might like this so why not give it out, right? Don’t worry guys, because I will be showing you how to implement it on both blogger and WordPress blogs.
Must Read: How To Disable Or Enable The Google Plus Auto Share On Blogger Blog
Let’s start with how to implement it on WordPress blog, shall we?
For WordPress Users:
Warning: Before playing with any codes, please make sure you always keep a backup so in case you make a mistake, you can always revert.
Go to your admin section >>> Click Appearance >>> Click Editor…
In your CSS code area, Add the below code
[php]<!–
.folding {
list-style-type: none;
margin: 0;
padding: 0;
}
.csstransforms3d .folding {
perspective: 700px;
}
.folding li {
height: 50px;
color: #fff;
padding-left: 30px;
border-left: 30px solid rgba(0,0,0,.1);
}
.csstransforms3d .folding li {
transition: ease .15s all;
}
.csstransforms3d .folding li:nth-child(even) {
margin-top: -1px;
transform-origin: 50% 100%;
transform: rotateX(10deg);
}
.csstransforms3d .folding li:nth-child(odd) {
transform-origin: 50% 0%;
transform: rotateX(-10deg);
}
.folding .fb {
background-color: #3959a6;
}
.folding .tw {
background-color: #2fc6ff;
}
.folding .gp {
background-color:#d84d30;
}
.folding .rss {
background-color: #ff7e09;
}
.rss-link {
color: #fff;
font: .9em Arial, Helvetica;
}
.folding .content {
position: relative;
overflow: hidden;
display: block;
height: 20px;
padding: 15px 0;
}
.csstransforms3d .folded li:nth-child(even) {
margin-top: -75px;
transform: rotateX(75deg);
background-image: linear-gradient(rgba(255,255,255,0) 50%,
rgba(255,255,255,.5));
}
.csstransforms3d .folded li:nth-child(odd) {
transform: rotateX(-75deg);
}
.csstransforms3d .folded .content {
display: none;
}
/* Folding list heading */
.connect {
padding: 12px 0 12px 30px;
margin: 0 0 1px 0;
color: #fff;
border-left: 30px solid rgba(0,0,0,.2);
cursor: pointer;
font: bold .9em ‘Lucida sans unicode’,Arial, Helvetica;
background-color: #555;
}
.csstransforms3d .connect {
background-image: url(data:image/png;base64[shortened]);
background-repeat: no-repeat;
background-position: -24px center;
}
–>[/php]
Now Save your work and go to your widget area…
Are you there now? If yes now drag the “Text” widget and place where you want the buttons to show… Copy the below code to the text widget…
[php] <style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style>
<center> <h2>Connect with Onenaija</h2>
<ul>
<li class="fb">
<div class="content">
<a rel="nofollow" title="Like Our Facebook Page" href="http://YOUR-FACEBOOK-PAGE-HERE" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-8kR6-YXcxnY/Uj-WfOLbqDI/AAAAAAAADW4/–hjjDa2DDA/s1600/FACEBOOK-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<a href=""></a>
</div>
</li>
<li class="tw">
<div class="content">
<a rel="nofollow" title="Follow Our Updates On Twitter" href="http://YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-Hb_788IoA0A/Uj-WgFPL8_I/AAAAAAAADXA/X6il1DrJ4Dw/s1600/TWITTER-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<a href=""></a>
</div>
</li>
<li class="gp">
<div class="content">
<a title="Follow Us On Google+" rel="nofollow" href="https://YOUR-GOOGLE+-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-gSSRMOdqkzs/Uj-WiWyneoI/AAAAAAAADXI/iYhWhdeA0SA/s1600/GOOGLE-PLUS-48×48.png"/></a>
<a href=""></a>
</div>
</li>
<li class="rss">
<div class="content">
<a title="Grab Our Rss Feed" href="http://YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-AGZAj5bUmSo/Uj-WjnLzm5I/AAAAAAAADXQ/18d9PjlbTpw/s1600/RSS-48×48.png" style="margin-right:1px;" alt="Icon"/></a> </div>
</li>
</ul></div></center>[/php]
You done that? Now you have completed the whole process, now go to your blog and see what you have done 🙂
For none Techie
You can’t perform the above steps or the steps are just too difficult? Then copy the below codes in the “for blogger blog” section and paste in the “Text” widget and you’re done without touching your CSS :).
Must Read: Running A Slow Blog? Try This 5 Simple Steps To Speed That Slow Blog
For Blogger Blog
Go to your blogger blog dashboard and simply click “Layout” >>> Click “Add a Gadget” >>> Select “HTML/JavaScript” and add the below codes…
[php] <style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">
<style type="text/css">
<!–
.folding {
list-style-type: none;
margin: 0;
padding: 0;
}
.csstransforms3d .folding {
perspective: 700px;
}
.folding li {
height: 50px;
color: #fff;
padding-left: 30px;
border-left: 30px solid rgba(0,0,0,.1);
}
.csstransforms3d .folding li {
transition: ease .15s all;
}
.csstransforms3d .folding li:nth-child(even) {
margin-top: -1px;
transform-origin: 50% 100%;
transform: rotateX(10deg);
}
.csstransforms3d .folding li:nth-child(odd) {
transform-origin: 50% 0%;
transform: rotateX(-10deg);
}
.folding .fb {
background-color: #3959a6;
}
.folding .tw {
background-color: #2fc6ff;
}
.folding .gp {
background-color:#d84d30;
}
.folding .rss {
background-color: #ff7e09;
}
.rss-link {
color: #fff;
font: .9em Arial, Helvetica;
}
.folding .content {
position: relative;
overflow: hidden;
display: block;
height: 20px;
padding: 15px 0;
}
.csstransforms3d .folded li:nth-child(even) {
margin-top: -75px;
transform: rotateX(75deg);
background-image: linear-gradient(rgba(255,255,255,0) 50%,
rgba(255,255,255,.5));
}
.csstransforms3d .folded li:nth-child(odd) {
transform: rotateX(-75deg);
}
.csstransforms3d .folded .content {
display: none;
}
/* Folding list heading */
.connect {
padding: 12px 0 12px 30px;
margin: 0 0 1px 0;
color: #fff;
border-left: 30px solid rgba(0,0,0,.2);
cursor: pointer;
font: bold .9em ‘Lucida sans unicode’,Arial, Helvetica;
background-color: #555;
}
.csstransforms3d .connect {
background-image: url(data:image/png;base64[shortened]);
background-repeat: no-repeat;
background-position: -24px center;
}
–>
</style>
<h2>Connect with Onenaija</h2>
<ul>
<li class="fb">
<div class="content">
<a rel="nofollow" title="Like Our Facebook Page" href="http://YOUR-FACEBOOK-PAGE-HERE" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-8kR6-YXcxnY/Uj-WfOLbqDI/AAAAAAAADW4/–hjjDa2DDA/s1600/FACEBOOK-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<a href=""></a>
</div>
</li>
<li class="tw">
<div class="content">
<a rel="nofollow" title="Follow Our Updates On Twitter" href="http://YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-Hb_788IoA0A/Uj-WgFPL8_I/AAAAAAAADXA/X6il1DrJ4Dw/s1600/TWITTER-48×48.png" style="margin-right:1px;" alt="Icon"/></a>
<a href=""></a>
</div>
</li>
<li class="gp">
<div class="content">
<a title="Follow Us On Google+" rel="nofollow" href="https://YOUR-GOOGLE+-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-gSSRMOdqkzs/Uj-WiWyneoI/AAAAAAAADXI/iYhWhdeA0SA/s1600/GOOGLE-PLUS-48×48.png"/></a>
<a href=""></a>
</div>
</li>
<li class="rss">
<div class="content">
<a title="Grab Our Rss Feed" href="http://YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-AGZAj5bUmSo/Uj-WjnLzm5I/AAAAAAAADXQ/18d9PjlbTpw/s1600/RSS-48×48.png" style="margin-right:1px;" alt="Icon"/></a> </div>
</li>
</ul></div></center> [/php]
Click the save button and you are done. Go check out your blog and see how it goes :). Looks funky right?
Note: Make sure you replace YOUR-TWITTER-URL-HERE, YOUR-FACEBOOK-URL-HERE, YOUR-GOOGLE+-URL-HERE, YOUR-FEED-URL-HERE, with your original social pages and you will be done.
Over To You
Do you have a social like button on your blog? Is it a custom made or you’re using plugin for it? Please use the comment form to give your reply.
Must Read: Top 50 Active Blogs With Commentluv Enabled
Do you have questions, comments or thoughts you’d love to share with us? Then do use the comment form below. Remember that your comments, questions and thoughts are highly welcome and much appreciated :).
Be Social
If this post is not what you’re looking for, I am sure it will be for your friends – so do click the like button, share us and recommend us to friends to show them you care :). Do not forget to subscribe to our feed for your latest updates on the go…
Hi Babanature,
Looks nice 🙂
Yes, I’ve seen them spin here on the right side long back, as I think you had it on this blog earlier too. They look effective indeed. I haven’t really got the buttons as I have my FB and G+ widgets there instead, while the theme I use has the fixed buttons on the top right corner already. But I might just get hold of one of such kind of buttons pretty soon, so I’m bookmarking this page and storing up this information. 🙂
Thanks for sharing. Have a nice week ahead 🙂
BTW – CommentLuv not working presently 🙂
Hello Harleena,
Your social icons do look awesome and in a strategic place as well :). This widget is a bit different from the one here at my blog. I might even change my social icon because it kind of feeling old 🙂
Ahhh… i just updated my commentluv so forgot to clear my cache, sorry for that. It is working now and thanks for the heads up my friend 🙂
Nice widget bro. I will obviously give it a try as they are appearing charming.
Most welcome Adeel, Glad you liked it 🙂
Nice social sharing icon indeed. thank God it is a css3 designed icon. i prefer this kind rather than using plugin and other heavy sharing code with heavy javascript which in turn increase our blog loading time.
Hello Collizo,
Yes this code is indeed light and have no harm on a blog resources. It is indeed useful for blog and can as well increase blog conversion as well.
Thanks for stopping by and dropping your comment, do have a blessed week ahead 🙂
This looks fantastic, you make things look easy. If I ever wanted to apply such, I would definitely come for a resource with your search bar.
I have included a search bar now on my blog, 😀 . . I was tired of replying mails..
Have a great day friend 🙂
Lol Nosa, Do not worry because it is good to use a search bar on your blog especially the Google search bar ;). Do have a great week ahead
Sorry, I was playing with it for a while 😉 Trying to move two of them at the same time (without moving the mouse much) 😛
It looks cool though 😀 Different?
I was planning to do something different with the social buttons, perhaps I could do this? (I was thinking of creating my own social buttons/images, I think there are a few plugins that allow us to substitute our own images for social profile buttons).
Anyways, thanks for the tutorial, Babanature 🙂
No problem, You can indeed change the icons to what ever you like and you can also change the style to suit your need :).
Most Welcome Jeevan :). do have yourself a blessing week
Hi Babanature,
Glad you like the look and I’ve seen them on a few blogs. I’m weird and we’ve all already figured that out about me but I just like the plain simple look. I’m not into all the 3D, sitting sideways or fancy icons. Maybe they do convert better but I guess I’ll never know. lol…
That’s awesome of you to provide the code to your readers on the different platforms. That might freak some people out but if they only realized just how easy that is.
Okay, mine are custom made and I did them myself. Nothing fancy but over the years I have learned basic HTML coding so you know me… I much prefer coding then a plugin so that’s how I did mine too.
Great share here and I’m sure you’re going to have plenty people grabbing that code now! 😉
~Adrienne
Hello Adrienne,
A hand made code is much better then plugin because of the resources plugins consumes. Your social share looks simple and as well catchy as well :).
I just hope they like this social icon because i made it as lite as possible.
Thanks for stopping by and dropping your lovely comment, do have yourself a good week 🙂
Hi Babanature,
I really love your code, you actually made it look so simple, funny me I’m no fan of too attractive buttons like the one you ‘ve just shared with us.
But I have a lot of clients that do like them, I will refer back to this page when next the need arises.
Thanks for sharing, wishing you many a great strength for more tips
Hello Obasi,
There is no lovable social button then the simple ones. the social buttons i shared today are simple, lite, and doesn’t eat up any of your blog resource… I prefer this to any plugin 🙂
Thanks for the comment and do hope you’re having a great week!
Hi Babanature,
For some reason, I don’t see the 3D effect! I’m sure it will be interesting to see. I love trying out such things. I will try it out and see how it turns out.
Thanks for sharing!
Hello Ade,
I only added the image in the post. I have the icons on my other blog and not this one :). Try it out and i am sure that you’re going to love it…
Thanks for stopping by and dropping your comment. Have a nice week ahead 🙂
Hi Baba !
These social media icons look very beautiful . Its purely based on CSS and small sized images , hence it will never take much time for this stylish 3D social icons to get completely loaded . Thanks for sharing the this code with us .
-Pramod
You’re definitely right Pramod,
The code does not use up resource and its very lite as well.
Thanks for your comment and do have a great week ahead 🙂
Hello Babanature,
Thanks for sharing this. I know it might sound a bit strange but I just can’t use this because… I don’t have side bars on my blog. 🙁 It’s part of my unique design anyway 😀
Keep the good work up!
Hello Ugee,
There is nothing in life that is strange :). Wow!!! you don’t have a side bar on your blog? That’s strange indeed :). how do you show ads for your readers? where did you place your subscription form?
Thanks for the comment anyways, do have a nice week ahead 🙂
I place my ads at the top (Adsense Leader board) Then subscription form below posts. Don’t mind me, I’m just trying to be unique. 🙂
If it convert beautifully, then keep it up. but if it don’t, then you’ll consider changing.
Thanks for the reply and do have a bright week 🙂
Ahhh, another code …. something hard for me my friend. Honestly I’d prefer simple method than code things. I am going to save this link for my recommendation though. It’s good source for technical matters in blogging.
Thanks my friend
Hello Okto,
I know coding will be hard for some people, so i did a version for the non techie kinds. But the icons do look good 🙂
Thanks for the comment buddy, do have a nice week ahead 🙂
wow this is amazing & easy to use ! The best & important thing is there is coding which is really useful & anyone can use these 3D stylish icons.
Thanks for that Disha,
Glad you find the post simple to implement. Do have a faithful week ahead 🙂
This looks quite stylish and worth sharing. I will have to try it out and see how much it converts.
Yeah Nwosu, it will definitely do wonders :). Thanks for the comment and hope you have a brave week ahead…
Hello Baba,
When it comes such things such as coding, my heart always misses a beat. As much as I want this on my blog, I’m not going to try it! hahaha!
Hey Emmanuel,
I laid down to ways on how to do this, the techie way and the none techie way. you can try out the none techie way.
Anyways thanks for the comment and do have a nice week ahead 🙂
Hi babanature,
I love the way you make things easy, step by step guide and how the codes appear. I the 3d icons, applying it on my blogger blog right now. Tnx for sharing
Most welcome Olili,
Do have a blessed weekend start over there 🙂
Hello Babanature,
This social icon looks really elegant and amazing. I thinking to use this effect on my blog too.
Thanks for sharing,
Thanks Kuldeep,
Glad you find it interesting enough to comment. Do have a wonderful weekend 🙂