How to add a Social Links with CSS style to your blogger


 Social Links is a sidebar widget that displays icon links to your profile pages on other social networking sites.



"Attention! before you edit your HTML code, please download your template previously"

Copy and paste the following code after Top Menu Html :

<div id='socialLinks'>

<a href='#'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3INjBmosK0Q1QZ2GX_zXppZ9qcZXA-SlT8Co3SnNfRTlIZ_xWrw5FBpVriEx6guPQD_z7Kn_9k3pfPj332XJk8bxKLwFpQS7rKPIenyebZskXzau087WDMxzLt2Oz-tu0_7MX-Bxsk4/s1600/ico_twitter.png'/></a>
<a href='#' target='_blank' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOCAvxcFTFjLlS7XYJkyIoGLmo2OPrHxDF6B9W1M3NcXRmbU9AngSFpMd4W5RrD-ovbxqHFejIiqAZPX-qmkCa78iU4LK-6fAx9Xm7xnSwsisV0y3fkt0aeTd6CfC8JTZhAsgZ_s8PsmI/s1600/ico_facebook.png'/></a>


</div>


Explanation : # = Replace with your Twitter link
                    Red Text = Replace with your Own Twitter Background 
          # = Replace with your Facebook link 
                    Blue Text = Replace with your Own Facebook Background 

Css Style : Copy and paste the following code after <head>

#socialLinks {
position:absolute;
right:10px;
bottom:10px;
}

#socialLinks a {
display:block;
float:left;
padding-right:10px;
border:none;
}

#socialLinks a img {
border:none;
}

#site5top {
position:absolute;
top:9px;
right:0;
}

To see the results of the html code above Click here
 
By : Levan Design 

1 Comment:

Elizabeth J. Neal said...
February 8, 2014 at 2:12 PM

Social Links is a sidebar widget that displays icon links to your profile pages on other social networking sites. how to delete Facebook profile