CSS-Menü erstellen für Soziale Netzwerke

Heute zeige ich euch wie man bei Blogger ein Css-Menü erstellt ich hoffe es gefällt euch.

Css Sprite sieht nicht nur professionell aus es dient auch dazu das sich die Bilder und unser Blog sich viel schneller laden.

Im Menü erhalten sind die Buttons von populären Sozialen Netzwerken wie Feedburner, Facebook, Google+, Twitter, Youtube und Linkedin.


So würde euer Menü dann aussehen wenn es fertig ist:



Nun zur Installation:
Dashboard ➜ Vorlage ➜ HTML bearbeiten ➜ Fortfahren ➜ Widget-Vorlagen komplett anzeigen (Haken setzen)

findet den code:
]]></b:skin>

und fügt diesen code direkt über den b:skin code:
.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;
}

Vorlage Speichern und Weiter

Dashboard ➜ Layout ➜ Gadget hinzufügen ➜ HTML/JavaScript und fügt den unten angegebenen code ein
(vergisst nicht eure URL's einzutragen)
<div class='sosyalmenu'>
<a id='feedburner_png' href='FEEDBURNER URL' target='_blank' title='Abonnieren'></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>

Quelle: http://www.hitadam.com/2012/04/css-sprite-iletisim-menusu-yapimi.html