Css Sprite İle Sosyal Ağ Butonları Yapalım

Css sprite blogunuzda hem profesyonel görünümler kullanmanızı sağlar hemde tüm resimlerinizi bir araya toplayarak blog açılış hızınızı olumlu yönde etkiler. Son google güncellemelerinde sayfa hızına verilen önem son derece artmışken bu yöntemi kullanmak bloguza artı puan kazandıracaktır.
Bende kendi blogumun sağ tarafında bu yöntemi kullanarak bir sosyal ağ alanı oluşturdum. Resmi bu linke tıklayarak inceleyebilirsiniz.

Bu yazıda anlatacağım menü içerisinde Feedburner, Facebook, Google+, Twitter, Youtube ve Linkedin butonları yer alıyor. En sık kullanılan sosyal platformlar seçilmiş.

Menüyü canlı olarak görmek isterseniz:



Eklentiyi blogunuza kurmak için Kumanda Paneli ➜ Blogunuz ➜ Şablon ➜ Html'yi Düzenle yolunu izleyin

Hmtl'yi Düzenle kısmından Ctrl+F komutu ile aşağıdaki kodu bulun

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları yapıştırın

.sosyalmenu {
 }
.sosyalmenu a{
    background-image     : url(http://1.bp.blogspot.com/-Jx253mpITbY/T5u14T16d6I/AAAAAAAADsI/IX50RQLoqTk/s1600/sosyalmenu.png);
    background-color      : transparent;
    background-repeat    : no-repeat;
    height                        : 48px;
    width                        : 48px;
    float                          : left;
    display                      : block;
    margin                       : 0 5px 0 0;
 }

 #feedburner_png {
    background-position  : 0px -48px;
 }

 #feedburner_png:hover {
    background-position  : 0px 0px;
 }

 #googleplus_png {
    background-position  : -240px -48px;
 }

 #googleplus_png:hover {
    background-position  : -240px 0px;
 }

 #facebook_png {
    background-position  : -48px -48px;
 }

 #facebook_png:hover {
    background-position  : -48px 0px;
 }

 #twitter_png {
    background-position  : -144px -48px;
 }

 #twitter_png:hover {
    background-position  : -144px 0px;
 }

 #youtube_png {
    background-position  : -96px -48px;
 }

 #youtube_png:hover {
    background-position  : -96px 0px;
 }

 #linkedin_png {
    background-position  : -192px -48px;
 }

 #linkedin_png:hover {
    background-position  : -192px 0px;
 }

Şablonu kaydet deyin ve devam edin.

Kumanda Paneli ➜ Blogunuz ➜ Yerleşim ➜ Gadget Ekle ➜ HTML/JavaScript içerik kısmına aşağıdaki kodları ekleyin.

<div class='sosyalmenu'>
<a id='feedburner_png' href='FEEDBURNER URL' target='_blank' title='Suscribirse'></a>

<a id='googleplus_png' href='GOOGLE+ URL' target='_blank' title='Google+'></a>

<a id='facebook_png' href='FACEBOOK URL' target='_blank' title='Facebook'></a>

<a id='twitter_png' href='TWITTER URL' target='_blank' title=Twitter'></a>

<a id='youtube_png' href='YOUTUBE URL' target='_blank' title='Youtube'></a>

<a id='linkedin_png' href='LINKEDIN URL' target='_blank' title='Linkedin></a>
</div>

FEEDBURNER URL, FACEBOOK URL gibi kısımlara kendi sosyal ağ linkinizi eklemeyi unutmayın.

İyi bloglamalar...