By social icon a visitor can learn about update from your blog with social site and this is a nice way to incress returining visitor to your blog. A visitor can easily attract with a attractfull social icon. for this factor I creat my first social icon. It is easy to edit and place to your blog.
You can edit it as your wish. Now learn how to add this free new social icon gadget by Zaied Sifat to your Blog.
Step 1 : Go to your Blogger Dashboard.
Step 2 : Click On Template from the sidebar
Step 3 : Click on Edit HTML
Step 4 : Find below code in your template
]]></b:skin>
Step 5 : Now copy below code
body{
background : #ccc;
}
h2{
font-family: cursive;
font-weight: 100;
font-size: 40px;
text-align: center;
padding: 20px;
margin: 0;
color: #888;
}
#social-wrapper{
background : #000;
height : 400px;
width : 50%;
margin : auto;
}
#social-wrapper a{
float : left;
text-align : center;
color : #FFF;
font-size : 45px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
height : 50%;
}
#social-wrapper i{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#social-wrapper a:hover{
background : #888;
}
#social-wrapper .fb{
background : #3b5998;
}
#social-wrapper .tw{
background : #4099FF;
}
#social-wrapper .yt{
background : #e52d27;
}
#social-wrapper .gp{
background : #D34836;
}
#social-wrapper .fb{
width : 75%;
}
#social-wrapper .gp{
width : 25%;
}
#social-wrapper .tw , #social-wrapper .yt{
width : 50%;
}
.cnir{
position : fixed;
right : 10px;
bottom : 5px;
color : #888;
text-decoration : none;
}
/* Media Queries */
@media screen and (max-width: 1000px){
#social-wrapper .fb{
width : 100%;
}
#social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp{
width : 33.3333333333%;
}
}
@media screen and (max-width: 650px){
#social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{
width : 50%;
}
}
@media screen and (max-width: 300px){
#social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{
width : 100%;
height : 25%;
}
}
Step 6 : Paste all the code before ]]></b:skin>
Step 7 : Save the template and go to Layout
Step 8 : Then Add a Gadget and pest there below HTML code
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<h2>Join With US</h2>
<div id="social-wrapper">
<a class="fb" href="https://www.facebook.com/adroiten" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="gp" href="https://plus.google.com/114168150426643595196?prsrc=5" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a class="yt" href="https://www.youtube.com/channel/UCN6negLTmvy4CcZiupyH3uQ" target="_blank">
<i class="fa fa-youtube"></i>
</a>
<a class="tw" href="https://twitter.com/atadroiten" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<a class="cnir" href="http://fb.me/iamsifat1" target="_blank"> Created by Zaied Sifat</a>
Step 9 : Edit Red links as yours.
Step 10 : Save and watch the new widget
Final word : Don't remove the footer credit I had work for a long time to create this social Icon for blogspot. Like or suscribe us to get future post to your Inbox.