Follow Buttons + schwebende Social Media Buttons

Heey ihr Lieben!
Jemand hat gefragt, wo oder wie man die Follow Buttons, die bei uns an der Seite sind her bekommt bzw. macht.
Leider kann ich euch nicht sagen, wie man die macht, aber ich kann euch sagen wo ihr kostenlos solche Buttons herbekommt.

1. Geht auf diese Seite http://www.iconfinder.com/search/?q=follow+button, dort sucht ihr euch Buttons nach eurer Wahl aus.

2. Speichert sie in einem Ordner von eurem Computer.

3. Um schwebende Social Media Buttons hinzubekommen müsst ihr die Bilder z.B. hier bei  http://tinypic.com/ hochladen.

4. Jetzt geht es ans coden. Ghet aufs Dashboard/Layout/Gadget hinzufügen/ HTML/Java Script.

5. Diesen Code müsst ihr nun in die leeren Zeilen einfügen.

<style>
#floatbubble {position:fixed; left: 10px; bottom: 30px; width:40px; z-index:999;}
#floatbubble a {display:block; width:40px; height:40px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}

#facebook a:link {background-image:url(LINK ZUM BILD); }
#px a:link {background-image:url(LINK ZUM BILD); }
#flickr a:link {background-image:url(LINK ZUM BILD); }
#da a:link {background-image:url(LINK ZUM BILD); }
#vimeo a:link {background-image:url(LINK ZUM BILD); }
#formspring a:link {background-image:url(LINK ZUM BILD); }
#rss a:link {background-image:url(LINK ZUM BILD); }
</style>

<div id='floatbubble'>
<div id='facebook'><a href="LINK" target="_blank"></a></div>
<div id='px'><a href="LINK" target="_blank"></a></div>
<div id='flickr'><a href="LINK" target="_blank"></a></div>
<div id='da'><a href="LINK" target="_blank"></a></div>
<div id='vimeo'><a href="LINK" target="_blank"></a></div>
<div id='formspring'><a href="LINK" target="_blank"></a></div>
<div id='rss'><a href="LINK" target="_blank"></a></div>
</div>

Rot markierte Zeilen löscht ihr und stellt dort den letzten Link also ich glaube der heißt Layout Link ein von deinem Button den du bei tinypic hochgeladen hast.

Blau markierte Zeilen gibst du den Link zu deinem Social Media Button ein.

Rot markierte Zeilen bestimmt die Breite der Buttons.

Ich werde gleich noch ein Tutorial schreiben, wie ihr Google Friend Connect und BlogConnect verlinkt.

Eure Lena.

Abgerundete Bilder

Heey ihr Lieben.

Ich möchte euch heute zeigen, wie ihr anstatt langweilige eckige Bilder, abgerundete Ecken an euren Bildern hinbekommt. So soll es dann aussehen:

1. Ihr geht in euren HTML Bereich unter Dashboard/Vorlage/HTML bearbeiten.
2. Ihr sucht nach img, oder a img  { oder img in Kombination mit post. je nach Vorlage anders. 

3. Nun fügt ihr unter img zwischen den beiden geschwungenen Klammern diesen Code ein:

-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;

Dann sollte das so ausschauen!

4. Speichern und fertig!

Liebe Grüße! Lena. 

Variante 2 - Weiße Musikleiste

Ich habe eine bessere Alternative zur ersten weißen Musikleiste (klick) gefunden.
Sie funktioniert wieder mit dem guten alten Youtube und macht wirklich wenig Arbeit.

Schritt 1:
Ihr sucht euch euer gewünschtes Lied in Youtube.
Aus der Adressleiste kopiert ihr euch nun den jeweiligen Teil der Url eures Liedes den ich fett markiert habe.

http://www.youtube.com/watch?v=v-i8okC0-GE

Schritt 2:
In den Html-Teil eures Postes kopiert ihr folgenden Code

<embed src="http://www.youtube.com/v/XXXXXX?version=2&amp;hl?&amp;fs=1&amp;&amp;loop=1&amp;color1=0xffffff&amp;color2=0xffffff?rel=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="25"></embed>

An die Stelle der X'e setzt ihr nun den vorher kopierten Teil der Url.
Wer möchte kann dann noch Länge und Breite der Leiste anpassen.

Edit: in diesem Post erscheint die Leiste einfach nicht. Fragt mich nicht wieso, es ist mir unerklärlich
auf meinem Blog könnt ihr sie aber im aktuellen Post anschauen.

Sidebar fixieren

Hey ihr Lieben.

Ich möchte euch heute erklären, wie ihr eure Sidebar fixieren könnt.
Zuerst solltet ihr wissen, dass für dieses Tutorial eure Sidebar nicht überfüllt sein sollte. Maximal ein Bild und vier Seiten-Buttons (CA.!)

1. Schritt: Vorlage/Design -> Anpassen -> Layout 

2. Schritt: Bei Body-Layout dürft ihr nur diese Sidebars auswählen rechts, links oder rechts und links. Die Sidebar darf sich auch nicht im Verlauf spalten. (Zur Auswahl stehen 2. in der 1. Reihe & 1. und 2. in der 2. Reihe)

3. Schritt: Ihr geht zurück auf Vorlage/Design -> HTML bearbeiten

4. Schritt: Nun sucht ihr mit Strg + F den Begriff ]]></b:skin>

5. Schritt:Ihr fügt den Code zwei Zeilen über ]]></b:skin> der Code kommt auf eure ausgewählte Sidebar an.

Linke Sidebar:
#sidebar-left-1{position:fixed;}

Rechte Sidebar: 
#sidebar-right-1{position:fixed;}

Rechte & Linke Sidebar:
#sidebar-right-1{position:fixed;}
#sidebar-left-1{position:fixed;}

Fertig!

Liebe Grüße und bis bald! Lena. 

Kontaktformular einbinden

Heey Ihr.

Ich wollte euch heute zeigen, wie ihr ein Kontakt formular wie z.B. hier auf eine Seite einbinden könnt.

Zunächst geht ihr auf diese Seite:

 http://www.foxyform.de/

1. Einstellungen: Bei Einstellungen würde ich zunächst diese Kästchen ankreuzen: E-Mail, Betreff, Webseite.
2. Profi-Einstellungen: Dort fönnt ihr die Hintergrundfarbe und alles andere einstellen. Ihr klickt einfach auf Farbtabelle und dann kopiert ihr auf der erscheinenden Seite den Farbcode, den ihr als Hintergrundfarbe oder als Schriftfarbe eingestellt haben wollt.
3. Zieladresse: Deine Email Adresse.
4. Nun gehst du auf Formular erstellen.
5. Jetzt kopierst du den Html Code.
6. Nun geh auf Blogge rund auf die Seite auf der du das Formular haben möchtest.
7. So. Nun müsste links oben irgendwo Verfassen und HTML stehen. Du gehst auf HTML.
8. Am Ende dieses WirrWarrs machst du einmal Enter (große Taste, leere Zeile) und kopierst hier den Text rein. 
9. Jetzt auf Aktualisieren/Veröffentlichen und fertig bist du.

Ich hoffe dieses Tutorial hat euch geholfen.

Welche Tutorials möchtest ihr noch von uns sehen?

Bis bald! Lena. 

Variante 1 - Weiße Musikleiste einbinden

Viele Blogger haben einen weißen Hintergrund. Die graue Youtube-Leiste passt da einfach nicht in das Gesamtbild und Abspielen lassen sich die Lieder da auch nicht mehr.
Für all diejenigen, die untenstehende Leiste in ihrem Blog haben wollen, folgt jetzt eine kleine Anleitung.







1. Ihr geht auf diese Seite: http://mp3skull.com/
Oben in der Leiste gebt ihr euer gewünschtes Lied ein.
(Viel Auswahl ist leider nicht. Hab mich schon geärgert, dass es die Hälfte meiner Lieblingsbands dort nicht gibt)
Nach dem Klick auf "Search" erscheint eine Liste mit eurem Lied, oder ähnlichen Liedern.
Indem ihr auf Play klickt, könnt ihr herausfinden, ob es der richtige Song ist.
Ja? dann....

2. klickt ihr auf "Embed".
In dem kleinen Feld, dass sich dahinter öffnet, befindet sich euer HTML-Code zu dem Lied. (Small und Big hat was mit der Größe eurer Leiste zu tun.)
Den Code kopiert ihr und fügt ihn im HTML-Teil eures Postes ein.
Sobald er eingefügt ist, könnt ihr noch bei width(Länge) und height(Höhe) die Werte verändern,damit die Leiste so aussieht, wie ihr wollt.
Wenn ihr in den normalen Textteil wechselt, könnt ihr auch noch den Liednamen und die Internetadresse rauslöschen. Dem Code passiert dabei nichts.
Dass ihr die Leiste erstmal nicht seht, ist im übrigen normal. Sobald ihr aber auf Vorschau klickt, erscheint sie.

Header zentrieren

Hey ihr Süßen,

da jemand gefragt hat wie man einen Header zentriert

dachte ich mir mach ich mal ein kleines Tutorial dazu...

Vielleicht interessiert es noch ein paar andere (:

Als erstes geht ihr zum Vorlagen Designer ( Vorlage > Anpassen )

Wenn ihr dort seit geht auf Erweitern und scrollt runter

bis zu CSS einfügen.

In das weiße Kästchen fügt ihr dann das hier ein:

                                                               #Header1_headerimg {
                                                                     margin: auto;
                                                                                   }

                                             Dann sollte es so aussehen :

Und schon müsste euer Header mittig sein.

Wenn es nicht gleich so ist versucht es nochmal da Blogger meistens spinnt

&& wenn es dann immer noch nicht passt versucht es hiermit:

#header-inner img {
margin: 0 auto;}

Ich hoffe konnte euch helfen ;*

Top Schreiber Gadget

Hey meine Süßen,

heute zeige ich euch wie ihr ein Top Schreiber

Gadget auf euren Blog bekommt.

dazu kopiert ihr alles was hier steht :

<div class='widget-content'> <!-- Top Commentators Cloud Start (c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the “Get this commentators widget” link at the bottom of the code.--> <div style="text-align:justify;line-height:1.2;"> <script type="text/javascript"> function cCloud(feed) { max = 0; min = 10000; //finding highest and lowest count for (i=0;i<feed.count;i++) { ccCount = feed.value.items[i].commentcount * 1; if (ccCount > max) { max = ccCount; } if (ccCount < min) { min = ccCount; } } ccCountD = ""; display = ""; for (j=0;j<feed.count;j++) { ccdiff = feed.value.items[j].commentcount - min; ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%"; ccUrl = "'" + feed.value.items[j].authorurl + "'"; ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count ccName = feed.value.items[j].title + ccCountD; ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name display = display + ccLName + " "; } document.write(display); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run? YourBlogUrl=http://vivalavidalebedasleben.blogspot.de/ &Exclusions=Anonymous,TinaLaVogue &ShowHowMany=15 &Order=alphabet &_callback=cCloud &_id=cfa196644e1d6159c9183548c4b5e2f5 &_render=json" type="text/javascript"></script> </div> <!-- Top Commentators Cloud End --></div>

&& kopieren.

Dann geht ihr auf Euren Blog, auf Layout,

dann neues Gadget hinzufügen,

scrollt runter bis HTML / Javascript

&& fügt es ein. Bevor ihr auf speichern

geht sucht ihr im dem Texte die Zeile 

YourBlogUrl=http://vivalavidalebedasleben.blogspot.de/

&& dann fügt ihr statt http://vivalavidalebedasleben.blogspot.de/

eure Blogurl ein && geht dann auf speichern

&& fertig ist das Top Schreiber Gadget.

Social Media Buttons

Hallo. 

Ich möchte euch heute zeigen, wie ihr Social Media Buttons wie auf meinem Blog beautycoral.blogspot.de hinbekommt.

1. Bloggerdashboard → Euer Blog → Layout → Gadget hinzufügen → HTML/Java Script 
2. Nun fügt ihr diesen Code ein.

 <a href="BLOG - LINK" ><img src="http://2.bp.blogspot.com/-obPvC7_ESdg/UIbmBS3NfZI/AAAAAAAAAz4/I1RC0uPwfYY/s1600/blogger.png" hight="30" /> </a>

<a href="FACEBOOK LINK" ><img src="http://3.bp.blogspot.com/-8UVpawKaXp0/UIbmDmeZDCI/AAAAAAAAA0A/vsWPVpO6ae4/s1600/facebook.png" hight= "30" /> </a>

<a href="TWITTER LINK" ><img src="http://4.bp.blogspot.com/-EzzNDz5yZ6k/UIbmExiEThI/AAAAAAAAA0I/84qwzPrXHgc/s1600/twitter-bird-light-bgs.png" hight="30" /> </a>

3. Der erste Absatz vom Code besteht für einen anderen Blog, wie z.B. einen Gemeinschaftsblog, wie ich ihn habe, wenn du das nicht willst löschtst du einfach diesen Absatz. Der zweite Absatz ist für Facebook und der dritte für Twitter. Dort wo ihr euren Link von eurem Social Network einfügen müsst habe ich rot markiert. Letztendlich sollte der Code aber in schwarz in eurem Gadget stehen. 

Eure Lena!