Blogger için Sosyal Takip Butonları 1

S.A

Bu aralar blog modifiyesi konusunda bir hayli kafa yormaya başladım. Son bir haftadır en büyük yardımcım google aracılığıyla bir çok buton buldum. Sonra farkettim ki önemli olan butonun görselliğinden ziyade blogumuza uyumu ve yavaşlatmaması daha önemli.

Diğer bir konuda karşımıza çıkan her kodu bloğumuza eklemeden görebilmek. Hem kolaylık hemde daha da hızlanmanızı sağlıyor. Bu nedenle bulduğum bir kod önizleme aracını bloğuma entegre ettim. Neyse lafı fazla uzatmadan ilk butondan bahsedeyim.

Blogumda kullandığıma benziyor, sade ama ben çok beğendim.  Herşeyden önce bloğunuzun html kodlarıyla oynamanıza gerek yok. Bu nedenle eklemesi ve kaldırması çok kolay. Üstelik basitliği sayesinde blogumuzun açılma hızını yavaşlatmıyor. 

Hemen anlatıma geçeyim;

Blogumuzun yönetim paneline giriyoruz. Sırasıyla Yerleşim > Gadget Ekle > HTML/Javascript e geliyoruz ve şu kodları yapıştırıyoruz.

<style>ul.social {  list-style: none;  margin: 10px;  overflow: hidden;}.social li {  float: left;  background: none !important;  padding: 0 !important;  margin: 0 8px;}.social li a {  display: block;  width: 50px;  height: 40px;  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha5myLSKSDEKwVCZp4E_9Y2G5jv_m-6XKO_DNjRD7gUd9lDcpdjDBHHcfan1k6vNZIR-L6VHDDZnDAb4YXK4SwFdSs8r2fkSDFvjj4ioOKQOjKsbztOrkdBuFmRa5q75uEYMBkWo4phfo/s1600/social.png") no-repeat transparent;  text-indent: -99999em !important;-webkit-transition: ease-in 0.15s all;  -moz-transition: ease-in 0.15s all;  -o-transition: ease-in 0.15s all;  -ms-transition: ease-in 0.15s all;  transition: ease-in 0.15s all;}.social li a:hover {  padding: 0 !important;}.social li.rssicon a {  background-position: 0 0;border-right: 1px solid #e6e6e6;}.social li.twicon a {  background-position: -50px 0;border-right: 1px solid #e6e6e6;}.social li.fbicon a {  background-position: -100px 0;border-right: 1px solid #e6e6e6;}.social li.gicon a {  background-position: -150px 0;}.social li.rssicon a:hover {  background-position: 0 -50px;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover {  background-position: -50px -50px;border-right: 1px solid #e6e6e6;}.social li.fbicon a:hover {  background-position: -100px -50px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover {  background-position: -150px -50px;}
</style>
<div class="subicons"><ul class="social">
<li class="fbicon"><a href="http://facebook.com/Shed510" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="twicon"><a href="http://twitter.com/Shed510" rel="nofollow" target="_blank">Twitter</a></li>
<li class="gicon"><a href="https://plus.google.com/Shed510" rel="nofollow" target="_blank">Google +</a></li>
<li class="rssicon"><a href="http://feeds.feedburner.com/Shed510" rel="nofollow" target="_blank">Rss</a></li></ul>
</div>

Kodlarda sadece renkli olarak Shed510 yazan bölümleri kendi adreslerinizle değiştirmeniz yeterli. Önizleme yapmak için kodları Buraya yapıştırarak deneyebilirsiniz.

Soru yada sorunlarınız için yorum yazabilirsiniz. Yardımcı olmaya çalışırım...

Selametle...