Blogger: Css Sprite İle Sosyal Menü 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.

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:

Dilerseniz kuruluma geçeyim;

[Yeni Panelde]

• Kumanda Paneli ➜ Blogunuz ➜ Şablon ➜ Html'yi Düzenle (Devam et) ➜ Widget Şablonlarını genişlet yolunu izleyin

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

]]>

Yukarıdaki kodu bulduktan sonra hemen üzerine aşağıdaki kodları yerleştirin.

.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ı kendinize göre düzenleyerek ekleyin.