Footer sablonuna ekleyin:
CSS dosyasina eklenecek kodlar:
Kod:
<div id="social">
<ul>
<li><a class="social_icon facebook" href="http://facebook.com" title="Facebook" target="_blank"></a></li>
<li><a class="social_icon twitter" href="https://twittercom" title="Twitter" target="_blank"></a></li>
<li><a class="social_icon youtube" href="http://www.youtube.com" title="Youtube" target="_blank"></a></li>
<li><a class="social_icon googleplus" href="https://plus.google.com" title="Google+" target="_blank"></a></li>
<li><a class="social_icon rss" href="rss.php" title="RSS" target="_blank"></a></li>
</ul>
</div></div>CSS dosyasina eklenecek kodlar:
Kod:
#social {
float: right; margin-top: 5px;
}
#social ul, #sosyal li {
float: left; list-style: none; margin: 0; padding: 0;
}
#social a {
display: block; padding-right: 15px; line-height: 36px; color: #444;
}
#social .social_icon {
background: url(http://s14.directupload.net/images/140304/mne7u7qa.png) no-repeat; height: 36px; width: 36px; padding: 0;
}
#social .facebook {
background-position: 0 0;
}
#social .twitter {
background-position: 0 -78px;
}
#social .googleplus {
background-position: 0 -156px;
}
#social .youtube {
background-position: 0 -390px;
}
#social .rss {
background-position: 0 -468px;
}
#social .facebook:hover {
background-position: 0 -39px;
}
#social .twitter:hover {
background-position: 0 -117px;
}
#social .googleplus:hover {
background-position: 0 -195px;
}
#social .youtube:hover {
background-position: 0 -429px;
}
#social .rss:hover {
background-position: 0 -507px;
}
