Recently, we shared a guest post on writing a quality post by +Abdul Samad and we also shared a tutorial on increasing the blog speed . So, after a long time working on the template, i decided to share a widget with you guys . This is a social profiles widget . This widget is very small and it will look perfect in your blog . This widget is coded with pure CSS and HTML . It will not slow down your webpage . This widget also has a hover effect. This copyright of this widget solely belongs to me . So,you can share this widget on your blog but you should provide proper attribution to my blog ! This widget has option to list your Facebook Page, Twitter Profile and your Google Plus profile . This widget can really increase your fan base on social sites as it is very small and attractive, grabbing the attention of your visitors . You will understand more about this widget after seeing the live demo of this on our demo blog !
Live Demo - Top Right Of Webpage
STEPS
1 . Go To Blogger - Template - Edit HTML
2 . Search For <body>
3 . Just After it paste the whole code given below
4 . Now , Its time to do the necessary changes
4 . Now , Its time to do the necessary changes
5 . Change The links highlighted in yellow with your social profile links
6 . All Done ! Now Save Your Widget And Hooray ! You have success at last !
Source Code
<style>
.top-social-block li a {
list-style: none;
display: block;
width: 28px;
height: 28px;
line-height:0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvaMQJz0f1_pMM1BrBUx4FM7kkRx-5VVc06LMtuY8Ix_V2ZRY_Mdr7sGPi4s6N07xnZODSEl3nC5Y4nAhb1_wsZPPHqtUqcJfBkGrORNBf3VCE8dCuUTME5QZ6f5fuOw0tCs76V6rw00/s576/social-icons.png) 0 -64px no-repeat;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-transition: all 0.2s linear;
}
.top-social-block ul { margin:0 15px 0 0;list-style: none; }
.top-social-block ul li { padding:0; float:right; border-left: 1px solid #E3E4E4;list-style: none; }
.top-social-block li a.twitter-top { background-position: -56px -64px }
.top-social-block li a.twitter-top:hover { background-position: -56px -92px }
.top-social-block li a.rss-top { background-position: -112px -64px }
.top-social-block li a.rss-top:hover { background-position: -112px -92px }
.top-social-block li a.facebook-top { background-position: -196px -64px }
.top-social-block li a.facebook-top:hover { background-position: -196px -92px }
</style>
<div class='top-social-block'>
<ul>
<li><a class='rss-top' href='http://bloggrkid.in/feeds/posts/default/'></li>
<li><a class='facebook-top' href='http://www.facebook.com/envyblogging'></li>
<li><a class='twitter-top' href='http://www.twitter.com/envyblogging'></li>
</ul>
</div>
Final Words
I have nothing to say other than to thank you readers for reading my blog . This widget is really an awesome one if you use it at the top of the webpage.Moreover , it can increase your fans on social networks !
This widget is just awesome !
ReplyDeleteI'm going to add this in my blog right away !
Thanks For The Appreciation
DeleteKeep Visiting
Nice One , Rizwan !
ReplyDeleteI really love your widgets !
Best of Luck !
Thanks , Anshid For Your Valuable comment !
DeleteA wonderful widget from a wonderful blogger !
ReplyDeleteCould you please tell us from where you studied CSS
Eager to know your reply !
First Of All , Thanks For The Appreciation
DeleteI studied CSS from W3 Schools
And Many other Websites !
Nice widget bro, i would love to try it out thanks for sharing this awesome widget
ReplyDeleteIt would be great if you add it in your blog !
DeleteThanks For your kind words
Kep Visiting
Nice simple Short and sweet widget. I cant have any more words to describe.
ReplyDeleteRegard's
http://www.skillblogger.com
Thanks Deep
DeleteFor Finally Approving my Ability
Keep Visiting
great widget, hover effects always looks good to everyone.
ReplyDeleteThank You, gaurav For Appreciating My Widget
DeleteKeep Visiting