Yana Kayan Sosyal Ağ Butonları
 |
| 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_m1hbOptHlr_GHbapCAGuwo9T-M4ZRcxfDYHar5-dDs9tP07ARCFKN2ClelOj0CHGZUwgZi2l-pjNQP6kLoDg3fPxRuyTPv-F4Lmbd_LCJzZEqL5YDyWo-9lTiHF2KWvcLuPKW75C0w/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.
