CSS Chronicl Social Media Σύνδεσμοι Widget
Ακολουθήστε τα βήματα για να το βάλετε στο blog σας η στο site σας περιέχει μονο CSS για καλύτερο φόρτισμα και για να μην το βαραίνετε από διαφορα Widget την φόρτιση στο site σας η blog!
Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε.
<!--CSS Chronicl Social Media Links Widget By FoulsCode.blogspot.gr-->
<style>
.MBT-chronicl-social-media {
width: 300px;
margin: -10px;
}
.MBT-chronicl-social-media ul {
margin: 0;
padding: 0;
}
.MBT-chronicl-social-media ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.MBT-chronicl-social-media ul li a {
color: #fff;
display:block;
}
.MBT-chronicl-social-media ul li a:hover {
color: #c9c9c9;
background-color: #333;
}
.MBT-chronicl-social-media ul li .rss {
background: url("http://2.bp.blogspot.com/-yxWXONkykmc/UITZX4HzxkI/AAAAAAAAARg/9nD-9ff2H68/s1600/MBT+RSS.png") no-repeat scroll 10px center #F87E12;
background-size: 20px;
padding: 17.5px 45px;
}
.MBT-chronicl-social-media ul li .twitter {
background: url("http://1.bp.blogspot.com/-N-F1Buzev3w/UITZYRN-9fI/AAAAAAAAARo/t0GsQR0-63s/s1600/MBT+Twitter.png") no-repeat scroll 10px center #4CACEE;
background-size: 20px;
padding: 17.5px 45px;
}
.MBT-chronicl-social-media ul li .facebook {
background: url("http://3.bp.blogspot.com/-zLytQTiClw4/UITZW0S9CVI/AAAAAAAAARQ/3eMt1OdDAgY/s1600/MBT+Facebook.png") no-repeat scroll 10px center #3B5998;
background-size: 20px;
padding: 17.5px 45px;
}
.MBT-chronicl-social-media ul li .google {
background: url("http://4.bp.blogspot.com/-MBEwQkiJEYo/UITZZ89Lu6I/AAAAAAAAAR4/FJKA-WsnVl4/s1600/MBT+google.png") no-repeat scroll 10px center #D44937;
background-size: 20px;
padding: 17.5px 45px;
}
.MBT-chronicl-social-media ul li .linkedin {
background: url("http://2.bp.blogspot.com/-QRehRZpEd3I/UITZXRLYOxI/AAAAAAAAARY/DYW1laQAHKE/s1600/MBT+LinkedIn.png") no-repeat scroll 10px center #3692C3;
background-size: 20px;
padding: 17.5px 45px;
}
.MBT-chronicl-social-media ul li .youtube {
background: url("http://3.bp.blogspot.com/-z8_5vGvuOV4/UITZY8cFkaI/AAAAAAAAARw/nr-nwkKBD0w/s1600/MBT+Youtube.png") no-repeat scroll 10px center #C6312B;
background-size: 20px;
padding: 17.5px 45px;
}
</style>
<div class="MBT-chronicl-social-media">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/FoulsCode">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/FoulsCode">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/pages/Fouls-Code/548164921863886">Find me on Facebook</a></li>
<li><a rel="author" class="google" href="https://plus.google.com/102217163031929520745">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/FoulsCode">Watch me on YouTube</a></li>
</ul></div>
<!--CSS Chronicl Social Media Links Widget By FoulsCode.blogspot.gr-->
DEMO
Αντικαταστήστε το 300px να αλλάξετε το πλάτος αυτού του widget.
Αντικαταστήστε τη διεύθυνση URL με τη δική σαε διεύθυνση URL.
Σχόλια