Yana Kayan Sosyal Ağ Butonları

Hareketli-sosyal-medya-eklentisi
Sosyal ağ butonları

Blogger için sosyal ağlar eklentisi, Yana kayan sosyal ağ butonları, Hareketli sosyal ağlar kodu
  Blogger altyapısına uygun ve kullanışlı bir kod paylaşmak istiyorum. Sosyal ağlar blog yazarları olarak bizlerin geniş kitleler edindiği mecralardır. Bu nedenle blog sayfamızın belli başlı yerlerinde bu tür kodlar eklemek çok avantajlıdır. Hem yazıların paylaşımı için hem de yeni takipçiler kazanmak için sosyal medya hesaplarından faydalanırız. Vereceğim bu kod ile yana kayan buton şeklinde şık bir sosyal ağ eklentisine sahip olacaksınız. Bu eklenti sadece facebook, twitter ve google + hesapları için geçerli. En çok kullanılan ve herkesin takip ettiği bu ağlarda daha fazla takipçi kazanmanız dileğimle teknik detaylara geçeyim.

  Sosyal ağ butonları eklentisi için yapmanız gereken tek şey "Gadget Ekle" bölümünden HTML/Javascript bölümüne aşağıdaki kodu ekleyerek kendinize göre düzenlemenizdir. Kodu kopyalamak için kod alanına tek tıklamanız yeterli.
Örnek Görüntü

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style>
<ul id="buttonbg"> <li ><a href="Facebook Adresiniz" class="icon fb">Facebook Takip Et >>></a><span>Facebook Takip Et</span></li> <li ><a href="Twitter Adresiniz" class="icon twit" >Twitter Takip Et >>></a><span>Twitter Takip Et</span></li> <li ><a href="Google+ Adresiniz" class="icon google" >Google+ Takip Et >>></a><span>Google+ Takip Et</span></li></ul>

  Düzenlemeniz gereken yerler şöyle; kırmızı ile renklendirdiğim yerlere sosyal ağ linkinizi yazacaksınız. Kalın ve siyah ile yazılan yerlere isterseniz başka bir yönlendirme yazabilirsiniz.
Ayrıca Sosyal medya nasıl kullanılmalıdır? , Takipçi sayılı sosyal medya kodu  yazılarımı okumanızı tavsiye ederim.
Google +
    Blog Yorumları
    Facebook Yorumları

2 yorum:

  1. Hiç sevmiyorum böyle teknik işleri ama blog yazıyorsanız öğrenmeniz gerekiyor.Teşekkürler :)

    YanıtlaSil
    Yanıtlar
    1. Blog yazmaya başladığında kodlar ile tanışıyorsun hemen..Bu tür eklentiler daha kolay oluyor en azından..

      Sil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösteriniz.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat ediniz.
3) Kullandığınız üslubun sizi yansıttığını unutmayınız.