Cool CSS3 Social Icon
Yo friends.I haven`t posted anything for so many days because my exams are on.So make you happy i am with a new widget.It is a CSS program that is why it will not make your site heavier to load.It gives you vector icons which can be further edited just like letters using the same CSS.
Adding the Widget
You can add this widget by pasting the below code in the desired
location or if you want to show these icons after the post then go to
Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.
NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.
NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.
<div class="social social_intro">
<span class="title-ico">
Follow Us On :
</span>
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-rss"></i></a>
<a href="#"><i class="fa-pinterest"></i></a>
<a href="#"><i class="fa-github"></i></a>
<a href="#"><i class="fa-cloud"></i></a>
</div>
<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://files.allbloggertricks.com/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
.social a {color: #fff !important;}
</style>
<span class="title-ico">
Follow Us On :
</span>
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-rss"></i></a>
<a href="#"><i class="fa-pinterest"></i></a>
<a href="#"><i class="fa-github"></i></a>
<a href="#"><i class="fa-cloud"></i></a>
</div>
<link href="http://theme20.com/demo/valeo/styles/icons.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="http://files.allbloggertricks.com/abt-icons.css" media="all" rel="stylesheet" type="text/css"></link>
<style>
.social a {color: #fff !important;}
</style>
Customization
Replace # with your profile link.Secondly you can add, remove or edit
the <a.... </a> as per your wish. To change or add new icon you
may add a new <a..</a> or edit the existing one. You just have
to remember to change the class name i.e. from fa-cloud to
fa-instagram, fa-stackexchange, fa-skype, fa-dribble or anything as per
your wish. Most of the major icons have been covered in the above given
code.
Last Words
Thats it. Save the template and you
are finished. Now you can see awesome icons on your blog and with a
greater possibility of editing them as per your need.
