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

Weiterlesen

Gadget hinzufügen auf Blogger

Blogger ist ein starkes Sytstem wo Sie ihre Posts veröffentlichen und Kommentare erhalten können. Im ersten moment wo Sie den Blog erstellt haben kann es echt lose und einfach aussehen.

Genau da kommen die Gadgets ihnen zuhilfe.
Wenn Sie ein neuer Blogger nutzer sind kann es ihnen schwerfallen die unterschiede zwischen den Gadgets zu entscheiden.

Bei Blogger gibt es zwei Varianten wie Sie Gadgets hinzufügen können.

• 1.Variante

Vom Blogger Dashboard aus>>>Design>>>Seitenelemente gelangen Sie in die Einrichtung der Gadgets

Wenn Sie auf Gadget hinzufügen klicken können Sie hilfreiche Gadgets ohne probleme hinzufügen.

Nachher können Sie mit dem Drag&Drop System die jeweiligen Gadgets dahin ziehen wo Sie es möchten, und können es barbeiten indem Sie die "Bearbeiten" (unten rechts) klicken.

• 2.Variante

Um Ihr Blog interresanter zu machen sind Sie nicht angewiesen was Blogger ihnen bietet an Gadgets.
Wenn Sie irgendwelche apps im Internet finden was Blogger ünterstützt können Sie diese auch verwenden.

Meistens steht bei solchen apps ein hinzufügen als "Widget" Button, wenn Sie die Anweisungen folgen ist es im Handumdrehen erledigt.
Aber manchmal ist dieses Button nicht immer da, dann müssen Sie es selber hinzufügen.

Hinzufügen von HTML /Javascript auf Blogger.
Sie müssen den Code des apps kopieren den Sie hinzufügen möchten, dann wie folgt:
Design>>>Seitenelemente>>>Gadget hinzufügen klicken

Es öffnet sich ein popup Fenster auf “HTML/JavaScript” klicken dann den code des apps einfügen und Speichern.

Weiterlesen