Blogspot Ratgeber

Facebook Layer/Popup für deinen Blog

noreply@blogger.com (Anonymous) — Wed, 19 Mar 2014 06:25:00 +0000

Hier haben wir ein gutes Gadget, um Facebook-Likes für Ihren Blog oder Website zu erhöhen. Fügen Sie dieses Widget ihrem Blog hinzu und eine Facebook Like Box öffnet sich mit dem Lightbox-Effekt, jedes mal wenn ein Benutzer Ihre Seite besucht. Das Facebook-Widget erscheint auf Ihrer Seite etwa 20 Sekunden nach dem Laden der Seite (kann aber angepasst werden).

Widget hinzufügen

Fügen Sie den folgenden Code im Body Abschnitt Ihrer Vorlage (HTML bearbeiten) ein.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#MorganAndMen {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku3OjO636EiuAQ34sO6WsZhmGJJDCOlC0I1J7ojgnTFZOc4sWYsr2VQ6PHrBJq_G8pCHvMjeX6dkV6ddKXvnmgBjE-k7tDEWoDXJ5wRBZIpBqWbBe-BBj5soGDtK-VD2HBXGJw414P1RO/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='MorganAndMen'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<center>
<span id="linkit">Powered by <a href="http://www.blogratgeber.com.com">Blogratgeber</a> </span></center>
</div>
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#MorganAndMen {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku3OjO636EiuAQ34sO6WsZhmGJJDCOlC0I1J7ojgnTFZOc4sWYsr2VQ6PHrBJq_G8pCHvMjeX6dkV6ddKXvnmgBjE-k7tDEWoDXJ5wRBZIpBqWbBe-BBj5soGDtK-VD2HBXGJw414P1RO/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='MorganAndMen'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<center>
<span id="linkit">Powered by <a href="http://www.blogratgeber.com/">Blogratgeber</a></span></center>
</div>
</div>

Widget anpassen

Geben Sie Ihren Benutzernamen ein

Suchen Sie http://www.facebook.com/blogratgeber und ersetzen sie blogratgeber durch ihre Facebook-Seiten URL.

Ändern Sie den 20 Sekunden Countdown

Standardmäßig erscheint das Widget 20 Sekunden land nach dem die Seite vollständig geladen ist. Suchen sie im Code nach .delay(20000) und ändern Sie die Zahl 20000 zu einer ihrer Wahl.
1 Sekunde = 1000. 10 Sekunden = 10000. 60 Sekunden = 60000.

Popup bei jedem Laden der Seite

Standardmäßig zeigt sich das Widget nur beim ersten Mal an wenn der User Ihre Seite besucht und das auch nur alle 30 Tage, da Cookies verwendet werden. Wenn Sie wollen, das die Facebook-Box, jedes Mal angezeigt wird wenn die Seite geladen wird, dann entfernen Sie diese Codezeile:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Probleme mit dem Facebook-Widget?

Möglicherweise müssen Sie Ihre Cookies löschen um das Widget zu sehen. Oder schauen Sie sich den Abschnitt "Widget anpassen" an. Wenn Sie immer noch Probleme mit dem Popup-Widget haben, hinterlassen Sie bitte einen Kommentar unten oder schreiben Sie mir hier. Ich helfe ihnen gerne dabei das Popup richtig einzubinden.

Professionelles Logo Design für 10€

noreply@blogger.com (BloGuru) — Fri, 31 Jan 2014 18:49:00 +0000

Logo Design kaufen - Logoentwurf - Logoerstellung - Firmenlogo - Bloglogo erstellen lassen - Branding

Auf der Suche nach professionellen/modernen/günstigen/kreativen/web/einzigartigen & High Quality Logos? Dann sind Sie hier genau richtig!

Ich arbeite in einem multinationalen Unternehmen als Senior Grafik-Designer seit 8 Jahren. Nun biete ich meine Qualifikationen, neben beliebten Outsourcing-Seiten, auch den Blogratgeber.com-Lesern an.

Benötigte Informationen:
1) Logo/Business Name:
2) gewünschte Tagline/Slogan:
3) gewünschte Farbe(n):
4) gewünschte Logo Größe:
5) Themengebiet?:
6) Nur Text, Graphic oder beides?:
7) Geben Sie so viele Informationen zu Ihrem Unternehmen, Organisation, Verein, Homepage oder Projekt an wie Sie können. Wünsche und Besonderheiten, alte Banner/Logos oder eine Webseite können Sie auch angeben.

Für den Preis von 10€ (nur für kurze Zeit) gibt es das Logo in jpg und transparentem png-Format.
Nach Bezahlung schicken Sie mir bitte die benötigten Informationen zu.
Das Logo wird innerhalb von 5 Werktagen erstellt und ihnen zugeschickt.

Bedenkt das es Menschen gibt die sich professionelle Logos für viel Geld auf Seiten wie Logomarket.de leisten. Hier bekommt ihr euer einzigartiges Logo für den Obulus von 10€ in eurer gewünschten Pixelgröße, das Logo könnt ihr selbstverständlich beim Patentamt schützen lassen.

Solltest du interessiert sein dann melde dich Hier!
Bestehen Fragen, dann lass einen Kommentar da.
Dieses Angebot ist auf 2 Logos pro Tag limitiert.

Beispiele (meine Besten)

BlogSpot Pagerank Check Tool

noreply@blogger.com (Anonymous) — Fri, 31 Jan 2014 17:50:00 +0000

Hier kannst du deinen Pagerank ermitteln:

Auf dieser Seite kannst du den Google PageRank™ einer oder mehrerer Internetseiten gleichzeitig herausfinden. Dieser Wert liegt zwischen 1 und 10 und dient der Suchmaschine Google™ die Bedeutung von Webseiten zu bewerten. Dabei wird unter anderem berücksichtigt, wie oft eine Webseite auf anderen Seiten verlinkt ist, und was der PageRank dieser Seiten ist. Je häufiger also eine Website auf hochwertigen Seiten verlinkt ist, desto mehr steigt der PageRank, desto weiter oben in den Suchergebnissen steht diese Seite. Das Ergebnis der Analyse kannst du dir als E-Mail zusenden.

4 gute Widgets für ihren Blog

noreply@blogger.com (Anonymous) — Thu, 03 Jan 2013 10:02:00 +0000

Mit Widgets/Gadgets ist es möglich an einem Blog Anpassungen vorzunehmen und Ergänzungen hinzuzufügen, sie bieten also großartige Möglichkeiten, um Ihrem Blog mit etwas Nützlichem oder Spaß zu verbessern. Mit einigen Social-Media-Tools können sie Leser besser an sich binden oder ein paar Ihrer lieblings Flickr pics zur Schau stellen.

1. Skype Button - Damit erlauben sie ihren Besuchern Sie leicht per Skype Button zu kontaktieren. Dieser Button kann auch dazu genutzt werden um diesen, ihren aktuellen Status mitzuteilen und ob sie zur Zeit online sind. Der Skype Button lässt sich folglich auch ganz einfach per HTML-Code in ihrem Blog platzieren.

2. Hello Bar - Heben Sie einen bestimmten Artikel vor oder lassen Sie einen Willkommensgruß in ihrer Hello Bar direkt über ihrem Blog erscheinen. Damit können sie ihren Besuchern gleich auf das wesentliche ihres Blogs hinweisen und sie zu wichtigen Inhalten führen. Dieses Widget wird ganz oben auf Ihrer Webseite oder Blog angezeigt werden

3. Flickr Badge - Verleihen Sie Ihrem Blog Persönlichkeit, durch die Anzeige einiger Ihrer eigenen flickr Bilder mit diesem Flickr-Widget, der sich ganz einfach in ihren Blog integrieren lässt.

4. Meebo Bar - Begeistern Sie Ihre Besucher mit den Social-Media-Optionen von Meebo, welche am unteren Rand der Seite angezeigt werden.

Social Bookmark Gadget: Weihnachtsdekoration für Blogger

noreply@blogger.com (Anonymous) — Fri, 21 Dec 2012 12:44:00 +0000

Bereits in der Vergangenheit hatte ich ein ähnliches Gadget vorgestellt (Ein Herz für Blogger - Bookmark Gadget). Heute stelle ich euch nun rechtzeitig vor Weihnachten eine neue Version dieses Gadgets vor. Dieses Gadget ist als Weinachtsbaum-Kugel getarnt, welche links unten im Blog herumschwebt, sobald man mit der Maus darüber fährt spaltet sich die Kugel und die Social Bookmark Buttons werden sichtbar. Die Enthüllung sieht genial aus und der Slide-Effekt ist sehr cool. Zu finden sind nun Icons für Facebook, Twitter, Pinterest, LinkedIn, Stumble, E-Mail und hundert weitere.

Weihnachtsdekoration - Bookmark Gadget Tutorial

Denken Sie daran, immer ein Backup Ihres Designs zu machen bevor Sie Änderungen vornehmen.

1.Schritt
In Ihrem Blogger-Dashboard Klicken Sie auf Design > Html Bearbeiten

2.Schritt
Suchen und finden Sie den folgenden Code in Ihrem Blog-Html: (Klicken Sie auf Strg und F für die Suchleiste)

</head>

3.Schritt
Kopieren Sie den folgenden Code direkt vor /head.

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>
<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

4.Schritt
Suchen und finden Sie den folgenden Code in Ihrem Blog-Html: (Klicken Sie auf Strg und F für die Suchleiste)

</body>

5.Schritt
Kopieren Sie den folgenden Code direkt vor /body.

<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script>
</div><a href="http://www.blogspot-ratgeber.com/">Blogspot Ratgeber</a>

Jemanden bei Blogspot blockieren bzw. sperren

noreply@blogger.com (Anonymous) — Wed, 18 Jul 2012 04:17:00 +0000

Blogger und WordPress sind die beiden bekanntesten Blogging-Plattformen der Welt. Auch wenn sich die beiden Plattformen voneinander unterscheiden, ist der Hauptzweck der Selbe, so können alle Menschen der Welt mit funktionierendem Internetzugang die Inhalte der Blogs lesen und jeder Blogger freut sich über gute Besucherzahlen. Man sperrt nicht gerne einen User aus, doch es kommt auch öfter vor das man den ein oder anderen Leser hat welcher nur lästig für den Blog zu sein scheint oder sonst was, diese Nutzer gilt es dann zu blockieren. So haben wir uns einmal hingesetzt und sind nach mehreren Anfragen näher auf dieses Thema eingegangen. Für WordPress-Anwender findet man einige Plugins da draußen im großen Internet. Aber was sollen die Blogger Benutzer tun? Hier die Lösung.

Verbannen Sie jemanden aus ihrem Blog:

1. Gehen Sie auf die Website toolator.com
2. Registrieren Sie sich und geben alle geforderten Daten ein.
3. Eine Überprüfungs-Mail wird daraufhin an Ihre E-Mail-Adresse gesendet, bestätigen Sie ihre Anmeldung indem Sie den Link in der Mail anklicken.
4. Ein Passwort wird Ihnen nach der Überprüfung zugeschickt. Nun können Sie sich mit Ihrem Benutzernamen und Passwort in ihrem Toolator-Konto einloggen.
5. Navigieren Sie in der Option auf der linken Seite zu "Block an IP".

Geben Sie die vollständige und genaue IP-Adresse (101.22.105.88) des Benutzers ein den Sie blockieren möchten.
Geben Sie die URL ein auf welche der Benutzer umgeleiten werden soll.
Geben Sie den Grund für die blockierung ein, dieser wird der gesperrten Person angezeigt.

6. Nachdem Sie das Formular ausgefüllt haben, klicken Sie auf den "Block an IP" Button.
7. Nun klicken Sie auf "Website-Code" in der Navigation auf der linken Seite und daraufhin folgt ein Fenster mit so einem Code.

8. Kopieren Sie das Skript.
9. Gehen Sie ins Blogger-Dashboard -> Template -> HTML bearbeiten.
10. Suchen (Strg + F) sie nach dem Code </ head> und fügen Sie den kopierten Skript direkt darüber ein. Speichern Sie nun Ihre Vorlage und fertig.

Hinweis:
Ein kostenloses Konto ermöglicht es Ihnen nur 3 IP-Adressen zu sperren, mehr geht nur indem Sie ein Premium-Mitglied werden.

Hoffe dieses Tutorial hilft dir dabei die lästigen Besucher aus dem Blog fernzuhalten. Bitte teile deine Ansichten und Meinungen im Bezug auf dieses Thema in den Kommentaren unten mit.

Benutzerdefinierte Permalinks für Beiträge

noreply@blogger.com (Anonymous) — Mon, 09 Jul 2012 11:19:00 +0000

Ein Permanent Link ist die URL, welches ein bestimmter Blog-Eintrag erhält, dieser Link wird von Blogger automatisch erstellt und bisher hatte man als User keinen Zugriff darauf. Wenn man einen Post-Titel schrieb und den Artikel dann veröffentlichte wurde der Link dem Titel angeglichen. Der Titel "Ein Herz für Blogger - Bookmark Gadget" bekam so den Permalink http://www.blogger-experte.blogspot.com/2012/03/ein-herz-fur-blogger-bookmark-gadget.html. Bis heute erlaubte Blogger dem Benutzer nicht dies zu kontrollieren. Das hat sich nun geändert und Blogger können bald schon selber entscheiden wie der Permalink des neuen Beitrags aussehen soll.

Diese Funktion ist derzeit in der Blogger-Draft-Version verfügbar. Also wenn ihr es schon mal testen wollt einfach auf http://draft.blogger.com klicken und einen neuen Beitrag erstellen. In den Post-Einstellungen sehen Sie dann die Option "Permalink".

Wenn Sie "Automatische URL" (die Standardoption) wählen, dann wird Blogger den Post-Link auch automatisch generieren. Wenn Sie eine individuelle URL wollen, entscheiden Sie sich für die "Benutzerdefinierte URL"-Option. Hier kann man den Text eingeben der im Link angezeigt werden soll. Erlaubt ist das Alphabet, Zahlen, Bindestriche und Unterstriche.

Die Permalinks alter Posts können nicht verändert werden, aber Sie können diese neue Funktion auf Ihren neuen Beiträgen nach Lust und Laune einsetzen. Es scheint bisher keine Grenze für die Länge dieser URL zu geben.

30 kostenlose Favicon Tools & Editoren - Favicon erstellen, downloaden & einbinden - sowie HTML ready

noreply@blogger.com (Anonymous) — Thu, 31 May 2012 03:25:00 +0000

Jede große Webseite hat ein Symbol oder Bild im Browser zugeordnet, dieses nennt man Favicon. Diese Symbole werden auf Browser-Tabs direkt neben dem Titel der Seite angezeigt. Ein Favicon macht eine Website einzigartig und verleiht ihm seine Identität.

Schauen Sie sich Facebook an. Es hat das "f"-Symbol, das sofort und in der ganzen Welt erkennbar ist und einem heutzutage bereits im Traum verfolgt. Google hat das "g"-Symbol, und so weiter.

Im Wesentlichen sind diese Favicons ein Mittel dazu seinem Blog ein Branding zu verpassen. Jeder Blog braucht dies, um eine Marke darzustellen. Ohne eine Marke, hat ein Blog keine Glaubwürdigkeit. Es ist ein kleiner, aber wesentlicher Schritt den Sie nehmen um ihrem Projekt ein Favicon zu verpassen.

Im folgenden biete ich ihnen meine Sammlung von Favicon-Seiten und Tools an. Wenn Sie weitere Tools und Seiten kennen, lassen Sie es uns wissen! Wenn Sie Fragen bezüglich des Favicons und der Einbindung haben zögern Sie nicht einen Kommentar da zu lassen.

1. Favicon Generator und Gallery

Ermöglicht das Erstellen Ihrer eigenen Favicons. Sie müssen eine Bilddatei hochladen und wählen die Größe und das Tool erledigt den Rest. Sie können das Symbol auf Ihren Computer herunterladen. Diese Seite verfügt auch über eine Galerie vorhandener Favicons.

2. Animated Favicon

Dies ist ein interessantes Favicon-Tool. Anstelle der traditionellen .Ico Icons, macht es .Gif Icons für Sie, die animiert werden können. Besuchen Sie einfach die Website, check it out!

3. Photoshop Tutorial

Wenn Sie ein Photoshop-Fan wie ich sind, dann wird das sicher was für Sie sein. Dies ist ein Tutorial zum Erstellen von Favicons in Photoshop. Sie können Favicons auf Ihrem Computer erstellen, wenn Sie Photoshop installiert haben.

4. Favicon Maker v1

Dies wiederum ist ein einfacher Favicon Editor, mit dem Sie Ihre eigenen Favicons von Grund auf erstellen können. Das Beste daran ist, es gibt keine Anzeigen auf der Website, und keine Extras. Also gibt es keine störenden Sachen.

5. Dynamic Drive

Dieses Tool erledigt seinen Job. Sie können Bilder hochladen die direkt zu Favicons umgewandelt werden und ausserdem bekommen Sie weitere Anweisungen und Hilfestellungen!

6. iConvert

Dieses Tool ist einzigartig in dem Sinne, dass es Icons für Windows, Mac und Linux in einem einzigen Schritt schafft!

7. GenFavicon

Eines der besten Favicon Tools. Es ist wirklich einfach zu bedienen. Laden Sie einfach Ihr Bild hoch, und Sie können schneiden, bearbeiten und auch die Vorschau begutachten. Anschließend können Sie das Favicon erstellen.

8. Online Icon Maker

Ein weiteres großartiger Pixel-Editor. Es hat das Aussehen eines professionellen Icon Maker und verfügt über ein breites Farbenspektrum.

9. Convertico

Bei Convertico laden Sie Bilder hoch welche zu Favicons konvertiert werden. Sie können auch eine URL zu dem Bild, das Sie verwenden möchten angeben, völlig ausreichend. Es ist auch eines der besten Favicon Tools überhaupt.

10. Favicon.ru

So ziemlich das gleiche Muster wie bei den Anderen. Aber ich habe gemerkt, dass dieses Tool Favicons schneller generiert. Ich kann mich aber auch irren.

11. Favicon Editor v0.03

Ihrer Kreativität wird hier freier Lauf gelassen. Dieses Tool verfügt über eine einfachen und großen Pixel-Editor, mit dem Sie ein Favicon aus dem Nichts basteln können.

12. Degreave Favicon Generator

Einer meiner Favoriten. Hier kann man Favicons von Bildern her und aus einem großen Pixel-Editor erstellen, welcher über eine breite Palette von Farben verfügt.

13. Favicon Generator

Die Seite ist nicht sehr attraktiv, aber man findet hier definitiv ein sehr nützliches Werkzeug. Es erklärt, was ein Favicon ist, und wie man es auf Ihrer Website verwenden. Ich empfehle Ihnen dieses Tool zu verwenden!

14. Favicon editor

Dies ist ein einfacher Favicon Pixel-für-Pixel-Editor. Verfügt aber über 16 Millionen Farben und Sie haben selbst das ganze Vergnügen! Dies ist einer der wenigen Editoren, die den kompletten Satz der RGB-Farben bieten.

15. Web Script Lab Favicon Generator

Obwohl es ein einfaches Bild-Konverter-Tool ist, gibt es einige kleine, aber recht nützliche Werkzeuge von Web-Script-Lab die für Sie nützlich sein könnten.

16. Converticon

Eines der einfachsten Werkzeuge. Es führt Sie durch den Prozess, vom Bild hochladen bis zum Symbol umwandeln und hat viele verschiedene Auflösungen zur Auswahl.

17. Favicon.cc

Ein nettes Tool, das auch über 16 Millionen Farben verfügt und Ihnen die Möglichkeit gibt ein Bild zu importieren. Es hat auch Funktionen wie "neueste Favicons", am "besten bewertete Favicons" usw.

18. Faviconr

Einfaches Tool, das Favicons aus Bildern die Sie hochladen müssen erzeugt.

19. Favikon

Hier ist ein nettes kleines Tool. Es fordert Sie auf ein Bild hochzuladen und zeigt Ihnen dann den generierten Favicon damit Sie sehen können, wie er aussieht und ob er so in dieser Form erstellt werden soll. Sie können das Favicon dann als .Ico oder .PNG. Datei hochladen.

20. Favicon Japan

Dies ist ein einfaches Bild-Konvertierungs-Tool und dazu auch noch in japanischer Sprache. Aber wer die Japaner genauer kennt weiß auch über ihr Zeichen-Know-How bescheid, also sind die Archive dort gut zum durchstöbern geeignet.

21. Favicon Tool

Dieses Tool ist auch nicht in Deutsch oder Englisch erreichbar. Aber es ist sicher sehr hilfreich, denn es bietet einen Editor welcher die RGB-Werte manuell eingeben lässt! Darüber hinaus bietet es 16 Millionen Farben mit vielen Farbprofilen. Das Beste ist, wenn ich einen Schatten wähle sagt es mir die entsprechenden RGB-Werte.

22. Favicon Generator

Dies ist eines der einfachsten Favicon Pixel-für-Pixel-Editoren und sehr leicht zu benutzen.

23. Favicon Drawing tool

Wie der Name schon andeutet lässt ist dieses ein Favicon Zeichenwerkzeug und es hat viele Farben zur Auswahl.

24. Favicon Generator

Es gibt Ihnen Anweisungen, wie die Favicons verwenden werden sollen.

25. 256 Pixels

Das ist so ziemlich wie die anderen Favicon-Tools. Doch nicht vom Namen irritieren lassen, es bietet tatsächlich 16 Millionen Farben an.

26. HTML Kit Favicon

Einfaches Bild-Konvertierungs-Tools

27. Buddy Icon

Mit diesem Tool können Sie Ihre eigenen Symbole für Instant Messenger, Foren und anderes erstellen.

28. Favicon Tool

Konvertieren Sie Bilder in Icons und lernen Sie mehr darüber was Favicons tatsächlich sind und ihre Vorteile.

29. Favicon Factory

Einfaches Bild-Konvertierungs-Tool

30. Iconfu

Einfach zu verwenden, jedoch hat Iconfu seine Tore geschlossen, im Archiv findet man jedoch ein breites Spektrum an Icons zur freien Nutzung.

Das war meine Liste der Top-30-Favicon-Tools.

Schwebendes Facebook, Twitter, Google+ Widget auf der rechten Seite

noreply@blogger.com (Anonymous) — Sat, 28 Apr 2012 14:25:00 +0000

Nun haben wir schon etwas länger keine neuen Artikel mehr erstellt, da jedoch mehrere Anfragen bezüglich unseres "Facebook, Twitter, Google+ Widget" auf der rechten Seite der Page kamen, wollen wir euch hier diesem Widget näher bringen.

Im Grunde haben wir dieses Widget nur aus einem Artikel unseres Partnerblogs Visualbasix entnommen, welcher bereits ein Tutorial im Artikel "Social Media Widget Generator" dazu geschrieben hat. Das Widget funktioniert nach dem Schubladensystem, fährt man mit der Maus über einen der Icons fährt die zugehörige Social Media Seite raus, einfach mal bei uns rechts ausprobieren.

Tutorial:
1. Bei Blogger einloggen

2. Dashboard -> Vorlage -> HTML bearbeiten -> Fortfahren -> Widget-Vorlagen komplett anzeigen

3. Dort nach </head> suchen (Strg+F)

4. Nun trägst du diesen Code vor </head> ein und klickst auf "Vorlage speichern".

<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>

5. Nun musst du nur noch deine Daten in den Generator ein.
Deine Facebook Seiten URL | Dein Twitter Nutzername | Deine Feedburner ID

6. Generieren -> Auf Blogger Laden -> Deinen Blog aussuchen -> Speichern und fertig!

Hier noch ein Video Tutorial von Visualbasix:

Plista Widget für Blogspot

noreply@blogger.com (Anonymous) — Thu, 05 Apr 2012 14:58:00 +0000

Das Ähnliche Artikel Widget von Plista ist bereits weit verbreitet, jedoch sind die meisten Blogger die den Dienst von Plista nutzen keine Blogspot-Blogger, doch auch diese sind bei Plista immer willkommen.

Jeder Blogger kann sich über plista.com kostenfrei registrieren und das Widget einbauen, die Größe der Webseite spielt keine Rolle. Für WordPress, Typo3 und Joomla bietet Plista bereits fertige Plugins an, die den Einbau besonders leicht machen.

Für "Blogger" muss man sich selber etwas ausdenken, so scheint es im ersten Moment. Mit diesem Script hier wird das einbauen jedoch auch leicht gemacht. Einfach so ausführen wie angegeben, dann kann nichts schief gehen. Sollte es jedoch trotzdem nicht funktionieren einfach einen Kommentar da lassen oder Plista direkt anschreiben.

Nach der Zeile <div class='post-footer-line post-footer-line-1'/ > fügen Sie in der Vorlage folgenden Code ein:

<b:if cond='data:blog.pageType == "item"'>
<div id='plista_widget_standard_1'/>
<script src='http://static.plista.com/fullplista/fe7b55f989ef55cd0d4fec39.js' type='text/javascript'/>
<script type='text/javascript'>
if (document.querySelector) {
    plistatext = document.querySelector('.entry-content').textContent.substr(0, 255).trim();
    PLISTA.items.push({
                    objectid: "<data:post.id/>",
                    title: "<data:post.title/>",
                    url: "<data:post.url/>",
                    text: plistatext
    });
}
PLISTA.partner.init();
</script>
</b:if>

Jede Webseite hat eine eigene ID. Den rotmarkierten Code einfach damit ersetzen.

404 Fehlerseite bearbeiten bei Blogger

noreply@blogger.com (Anonymous) — Fri, 23 Mar 2012 15:03:00 +0000

Die 404 oder "nicht vorhanden" Fehlermeldung ist ein HTTP-Standard-Antwort-Code, dieser taucht auf wenn eine bestimmte Adresse auf dem Server nicht gefunden werden konnte, da er z.B. nicht existiert. In noch einfacheren Worten, die Seite die angezeigt wird, wenn die gesuchte Seite nicht gefunden wird nennt man 404 Error Page oder auch toter Link.

Bisher war es so das wenn man zB. auf einen Link zu einem Blogspot-Blog klickte der nicht existierte auf das orangene Design von Blogger weitergeleitet wurde und dort bekam man dann die Nachricht das die Seite nicht existiert zu lesen.

Doch seit kurzem nimmt Blogger größere Änderungen vor. Das nun jeder Blogspot-Blog eine landesspezifische TLD bekommt ist somit nicht die einzige Änderung. Denn beim 404-Error-Code hat sich nun auch einiges getan, hier wird nicht mehr wie gewohnt auf das Standartorange von Blogger weitergeleitet sondern direkt zum Blog wo man dann die Meldung "Die Seite, nach der Sie im Blog suchen, ist nicht vorhanden." erhält.

Diese Neuerung würde ich als positiv Bewerten, doch das ist nicht alles denn es ist möglich diesen Text individuell zu gestalten. So habe ich mich mal an ein Tutorial gemacht welches ihnen ganz einfach aufzeigt wie man diese benutzerdefinierte 404-Seite bekommt.

1. Schritt
Bei Blogger anmelden und zum Design/Vorlage > HTML bearbeiten (Kästchen "Widget-Vorlagen komplett anzeigen" klicken)

2. Schritt
Nach folgendem Code suchen (Strg+F) (wird wahrscheinlich zweimal vorkommen):

<b:include data='top' name='status-message'/>

und diesen ersätzen mit:

<b:if cond='data:blog.pageType == "error_page"'>
<b:include name='404-block'/>
<b:else/>
<b:include data='top' name='status-message'/>
</b:if>

3.Schritt
Nach folgendem Code suchen (wird wahrscheinlich zweimal vorkommen):

<b:includable id='status-message'>

und direkt darüber diesen hier einsetzen:

<b:includable id='404-block'>
<div id='custom-404-block'>
<h2>404</h2>
<div>Diese Seite existiert leider nicht!</div>
</div>
</b:includable>

4. Schritt
Jetzt braucht eure 404-Seite den passenden Titel, dazu suchst du nun nach:

<title><data:blog.pageTitle/></title>

und ersätzt diesen mit:

<b:if cond='data:blog.pageType == "error_page"'>
<title>Seite konnte nicht gefunden werden</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

5. Schritt
Template speichern und auf eine unterseite deines Blogs gehen welche nicht existiert. zB. deinblogname.blogspot.com/testtesttest. Das wars, die rotmarkierten Texte könnt ihr nach belieben verändern. Größe, Farbe, Links und Bilder sind alles möglich.

Viel Spaß, bei Fragen oder Problemen einfach Kommentar schreiben.

Von blogspot.com zu blogspot.de?

noreply@blogger.com (Anonymous) — Sat, 17 Mar 2012 08:31:00 +0000

Viele wird es überrascht haben einige werden schon im Vorfeld davon gehört bzw. es auf einigen Blogs bereits vorher gesehen haben. Bisher war es ja immer so das wenn man einen Blog bei Blogger erstellt hatte, man zB. "deinblog.blogspot.com" als Domain hatte. Beim letzten Aufruf auf deinem Blog kam dann nun wahrscheinlich "deinblog.blogspot.de" dabei raus. Überraschung!

Die gute Nachricht, dein Blog ist immernoch unter blogspot.com zu erreichen, jenachdem woher der Besucher kommt denke ich. Aber versuchs mal mit blogspot.co.uk, blogspot.in, blogspot.fr, blogspot.in oder blogspot.com.br funktioniert auch.

Weitere Informationen dazu werden in nächster Zeit folgen. Wie findet ihr das Ganze? Mir persönlich gefällt das nicht da ich nicht weiß wie sich das alles auf den Googleindex auswirkt und noch wenig darüber bekannt ist.

Update:
Blogger ersetzt schon seit Ende Januar nach und nach die Top-Level-Domain .com automatisch durch die landesspezifische TLD, also in unserem Fall .de Infos findest Du unter http://support.google.com/blogger/bin/answer.py?hl=de&answer=2402711 Im Moment sieht es so aus, dass es für den Leser keinerlei Unterschied macht, ob die .de oder die .com Adresse eingegeben wird. Die Weiterleitung funktioniert automatisch.

Siehe auch:
http://www.zeit.de/digital/internet/2012-02/google-blogger-domain-umleitung-zensur

Ein Herz für Blogger - Bookmark Gadget

noreply@blogger.com (Anonymous) — Fri, 16 Mar 2012 20:17:00 +0000

In diesem Beitrag möchte ich Ihnen eine coole neue Art zeigen den Besuchern das teilen interessanter zu machen. Bookmark-Tools sind wichtig und sollten auf jedem Blog zu finden sein und vor kurzem ist dieses tolle interaktive Bookmarking Gadget erstellt worden.

Dieses Gadget ist als Herz getarnt bzw. eben das Logo, welches links unten in ihrem Blog herumschwebt, sobald man mit der Maus darüber fährt spaltet sich das Herz und die Social Bookmark Buttons werden sichtbar. Die Enthüllung sieht genial aus und der Slide-Effekt ist sehr cool. Zu finden sind nun Icons für Facebook, Twitter, Pinterest, LinkedIn, Stumble, E-Mail und hundert weitere. Das Gadget wird auf der linken Ecke ihres Blog fixiert um die Aufmerksamkeit der Besucher zu packen und mehrere Bookmarks zu generieren. So unten habe ich ein Tutorial erstellt das ihnen zeigt wie Sie dieses Gadget auf ihrem Blog anwenden, zuerst sollten Sie sich jedoch die Live-Demo ansehen.

Ein Herz für Blogger - Bookmark Gadget Tutorial

</head>

3.Schritt
Kopieren Sie den folgenden Code direkt vor /head.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4.Schritt
Suchen und finden Sie den folgenden Code in Ihrem Blog-Html: (Klicken Sie auf Strg und F für die Suchleiste)

</body>

5.Schritt

Kopieren Sie den folgenden Code direkt vor /body.

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.blogspot-ratgeber.com/">Blogspot Ratgeber</a>

Der in gelb markierte Text bestimmt die Position des Gadgets, diese könen sie also ganz einfach ändern. Nun speichern Sie das Template ab und fertig.

Live Stream Blogger

noreply@blogger.com (Anonymous) — Wed, 14 Mar 2012 01:39:00 +0000

Wir machen und tun, liefern sauber ab und werden durch solche Seiten weiter in den Keller geschoben. "Live Stream"-Artikel sind DIE Erfindung(?) des Jahrzehnts zumindest für Blogger. Denn sie passen zu jedem Artikel. Wieso nur über ein Spiel einer beliebigen Sportart schreiben und dann kaum Leser bekommen? Es ist ganz einfach, setze einfach ein "Live Stream" in den Titel und schon kommen über Google Besucher ohne Ende.

Dies ist bereits seit Jahren zu beobachten und in den letzten Monaten hat es einen weiteren Ansturm darauf gegeben. Livestream-Blogs sprießen aus dem WWW wie Pickel aus einem pubertierenden Nerd. Es gibt Gute und noch mehr Schlechte, die einfach nur Traffic mit Copy&Paste Content wollen. So findet man auch Blogs die zB. 1000 Artikel mit dem selben Content haben und jedesmal sind einfach nur die Keywörter anders, oder noch schlimmer nur der Titel, und Google macht mit.

Besonders aufgefallen ist diese ganze Schmach besonders gestern, beim Champions League Spiel zwischen Bayern und Basel welches im Free TV nicht übertagen wurde. So gab es einen Ansturm auf "Bayern - Basel Live Stream" Artikel.

Nun ja, im Großen und Ganzen kann man niemanden verurteilen der diese "Nische" ausnutzt. Am Ende dieses Artikels stellen wir euch alle bekannten Seiten vor und tragen auch gerne euren Blog in die Liste der (such dir selber ein Wort dafür aus) ein.

Die Liste:
Dies sind die Blogs die sich auf Livestream-Artikel spezialisiert haben. Die Top 4 sind wirklich empfehlenswert, diese haben wenigstens noch Informationen zu dem Spiel, Tabellen, Spielerlisten usw. auf den Seiten, was dann schon wieder ok ist. Die linken zwar auch meist auf Stream-Portale, bieten aber selbst zumindest einen Mehrwert. Die Restlichen sind in der Tat reines Keyword-Fishing ohne auch nur einen Funken von Content.

http://bundesliga-livestream.blogspot.com

http://www.live-oder-livestream.com

http://www.fussball-fieber.org
http://weblogit.net
http://webcyclus.de

http://blog-fussball.de
http://www.fussball-livestream.org

http://www.sportlivestream.de

http://www.wettnetzwerk.com

http://www.pfeffer2004.de
http://fussball-live-im-stream.de

http://newsraid.blogspot.com (Kein Content)

http://schuleundfreizeit.blogspot.com/ (Kein Content)
http://bayecano.blogspot.de/ (Copy & Paste Content)

http://fussballlivestream.blogspot.com/ (Kein Content)

http://www.sport-live-stream-24.de/ (Kein Content)

http://fussball-live-stream-aktuell.de (Kein Content)

http://fussball-live-stream-24.de (Kein Content)

http://sport-live-stream.de/ (Kein Content)

http://fussball-livestream-24.blogspot.com/ (Kein Content)

http://fussballdeutschland.blogspot.com/ (Kein Content)

Rechte Maustaste im Blog deaktivieren

noreply@blogger.com (Anonymous) — Thu, 01 Mar 2012 11:02:00 +0000

Contentdiebstahl ist eine Sache mit der jeder Blogger früher oder später, im Falle er tut dies nicht selber, konfrontiert wird. Es gibt einige Wege dieses ein wenig einzudämmen, eine kostenlose Lizenz von creativecommons.org schützt einen nicht.

Hier habe ich ein Script vorbereitet das es den Besuchern nicht möglich macht das einfache "Copy&Paste" zu nutzen. Noch einfacher gesagt das folgende Script sperrt die rechte Maustaste, genauer gesagt verhindert es das Aufklappen des Kontextmenüs. Im Mozilla, Opera usw. ist es möglich, das Abfangen von Rechtsklicks durch JavaScript zu unterbinden. In diesen Fällen funktioniert das Script nicht.

Damit wird es nicht unmöglich gemacht die Inhalte zu kopieren denn Strg+C oder Strg+U machen dies auch möglich. Jedoch kennen die meisten User im Internet diese einfachen Möglichkeiten nicht und verlassen sich meistens aufs "Markieren-Rechtsklick-Kopieren-Einfügen". Ich würde jedem der wirklich einzigartigen Content erstellt und auch eine gewisse Zahl an Besuchern hat davon raten.

Aus eigener Erfahrung kann ich sagen das Mahnungen oder Bitten an Contentdiebe meisst erfolglos sind und wenn der Blog auf dem du deinen Content wieder gefunden hast über kein Impressum oder nicht einmal eine Kommentarfunktion verfügt gibt es nicht einmal diese Möglichkeit.

Jetzt zum Script
Melde dich bei Blogger an und erstelle ein neues HTML/JavaScript-Gadget in der Sidebar oder nutze eine vorhandene, dort musst du diesen Code einfach einfügen. Es ist auch möglich diesen Code für einzelne Artikel zu nutzen. In dem Fall setzt du ihn unter deinem Artikel ein.

<script language="JavaScript">



</script>

Sollte nun ein Besucher auf deiner Seite die rechte Maustaste nutzen erfolgt die Meldung "Function Disabled!". Dort könnt ihre eine Meldung die nach eurem Belieben ist eintragen. Einfach den Text bei Punkt 4 ändern.

Viel Glück im Kampf gegen die Contentdiebe. Sollten noch Fragen bestehen, nicht zögern und Kommentar schreiben!

"BlogSpot Ratgeber" abonnieren & verfolgen

noreply@blogger.com (Anonymous) — Wed, 29 Feb 2012 01:34:00 +0000

Hier zeige ich euch die einfachsten Wege auf, was ihr alles tun könnt um diesen Blog zu verfolgen.

1. Den Feed kostenlos abonnieren
Ihr könnt den Blog ganz bequem mit einem üblichen Feedreader abonnieren. Dazu klickt einfach in der Sidebar rechts oben auf das orangene Feed Zeichen (RSS), oder unter jedem Artikel auf das Feed-Banner.

Ihr könnt auf das RSS Zeichen klicken, dann gelangt ihr zu unserer Feedburner Seite mit einer großen Auswahl an Möglichkeiten wie ihr den Blog kostenlos abonnieren könnt. Oder ihr tragt einfach eure eMail-Adresse ein und drückt auf “submit”.

Auf unserer Feedburner-Seite habt ihr, die Wahl zwischen diversen Readern. Ist euer Reader nicht gleich per Button abgebildet, könnt ihr nochmal das Drop-Down-Menü anklicken, dort stehen weitere zur Verfügung. Zudem habt ihr auch dort die Möglichkeit den Feed via Mail zu abonnieren oder via XML-Version über euren Browser.

Im Falle des eMail-Abos bekommt ihr eine eMail, die ihr bestätigen müsst. Ohne diese Bestätigung wird das kostenlose Abonnement nicht freigeschaltet. Das ist wichtig, damit niemand eure eMail-Adresse missbrauchen kann.

Und wer sich nicht für einen öffentlichen Feedreader entscheiden möchte, der kann sich mal meine Lösung ansehen. Ich lese meine Feeds alle bequem auf meinem Desktop. Dazu habe ich einfach das kostenlose Programm Feedreader 3.14 installiert.

2. Die Facebook Fanpage liken
Wer sich für einen Feedreader oder das eMail-Abo nicht erwärmen kann, der kann die Beiträge auch auf Facebook verfolgen. Dazu einfach in der Sidebar über das Facebook-Plugin “gefällt mir” klicken oder auf Facebook direkt die Fanpage des Blogspot-Ratgebers liken.

3. Den Blog bei Google+ einkreisen
Die 3. Möglichkeit ist die, den Blog bei Google+ einzukreisen und dort zu verfolgen. Ich muss mich da auch erst dran gewöhnen. Ich habe das bisher leider ziemlich vernachlässigt, weil das nicht automatisch geht. Aber wir gewöhnen uns ja an alles, was die Großen uns so auferlegen und so gibt es diesen Blog auch auf Google+.

4. Den Blog bei Twitter verfolgen
Wer bei Twitter unterwegs ist, der kann auch dort sehen, was es im Blog neues gibt. Da besteht zwar, die Gefahr, dass die Tweets etwas untergehen, aber möglich ist es natürlich. Dazu klickt einfach wieder im Social Profil in der Sidebar auf das “Twitter-Zeichen”.

Ihr seht, ihr müßt auf neue Beiträge keinesfalls verzichten und seid nicht auf Google Friend Connect angewiesen. Schaut euch die verschiedenen Möglichkeiten genau an und entscheidet euch für die, die euch am ehesten liegt. Aus eigener Erfahrung kann ich sagen, dass das Feed-Abo die sicherste Methode ist um keine Beiträge zu verpassen, aber natürlich ist das subjektiv und jeder hat andere Vorlieben.

So oder so, besucht entweder täglich den Blog oder abonniert, verfolgt, kreist oder liked ihn. Am besten ihr tut alles zusammen, dann kann euch natürlich gar nichts mehr entgehen. :D

Und noch ein Hinweis
Es heißt zwar überall “abonnieren”, aber das ist in diesem Fall mit keinerlei Kosten verbunden. Egal ob über Feedreader, eMail oder wie auch immer, es ist 100% kostenlos die Beiträge des Blog zu abonnieren/verfolgen.

Eigenes Forum erstellen und im Blog einbinden

noreply@blogger.com (Anonymous) — Tue, 21 Feb 2012 10:19:00 +0000

Ich denke die Vorteile von Blog-Foren ergeben sich von selbst. In einem Blog-Forum können ihre Leser miteinander interagieren, neue Themen eröffnen, Diskussionen führen und Ideen geben.

Aber BlogSpot Blogs sind Sie nicht dazu berechtigt eine Sub-Domain oder sogar ein neues Verzeichnis zu erstellen. Also schein ein Forum im Blog unmöglich zu sein, nicht mehr! Bevor Sie weiterlesen, sehen Sie sich unser Beispiel für Sie an: Demoforum.

Anleitung/Tutorial wie Sie ein Forum in ihren Blog hinzufügen:

1.Schritt
Erstellen und veröffentlichen Sie eine neue Seite auf Ihrem Blog, dass ausschließlich für ein Forum diesen soll, am besten gleich als "Forum" benennen.

2.Schritt
Erstellen Sie ein neues Forum bei Nabble [Das dauert vielleicht 2 Minuten] oder einem anderen Forendienst welcher es erlaubt diese auch einzubetten.
Kopieren Sie den HTML-Code ...

3.Schritt
Gehen Sie in ihr Blogger-Dashboard -> Design -> HTML bearbeiten und markieren Sie die Box "Widget-Vorlagen komplett anzeigen".

4.Schritt
Suchen (Strg + F) Sie diesen Code, in der Vorlage:

<div id='content-wrapper'>

Nicht gefunden? Keine Panik, dass bedeutet das dieser hier nicht vorhanden ist in dem Fall suchen Sie nach dem Code:

<div class='columns fauxcolumns'>

(Sollte dieser ebenfalls nicht vorhanden sein, dann wenden Sie sich am besten an uns.)

Und unmittelbar davor fügen Sie den Foren-Code ein, mit diesem zusätzlichen Code welcher blau und rot markiert wurde:

<b:if cond='data:blog.url == "http://dein-blog.blogspot.com/p/forum.html"'>
HIER KOMMT IHR FORENCODE HIN
</b:if>

5.Schritt
Dieser Schritt wird alle ihre Inhalt, Sidebar Widgets etc. auf ihrer Forenseite verstecken.So wird NUR ihr Forum auf ihrer Foren-Seite sichtbar sein.

Suchen Sie nach diesem Code:

</head>

Farüber fügen Sie diesen Code ein:

<b:if cond='data:blog.url == "http://dein-blog.blogspot.com/p/forum.html"'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
.columns, .fauxcolumns {
display:none !important;
}
</style>
</b:if>

HINWEIS (wichtig): Ersetzen Sie den Code in rot, mit dem Link zu Ihrer Foren-Seite.

Das war es schon, nun können Sie ein neues Forum auf ihrer Webseite nutzen. Als nächstes laden Sie Ihre Leser und Freunde ein an ihrem Forum teilzunehmen. Alles weitere liegt in ihrer Hand. Wir wünschen euch viel Erfolg. Bei Fragen stehen wir euch gerne zur Verfügung.

Ich kanns jedem nur empfehlen. Eine bessere Alternative gibt es für BlogSpot-Blogs nicht. Desweiteren kann man andere Dinge auf der Seite, die als Foren-Seite vorgesehen war, erstellen. Als Beispiel fällt mir da SnackTV ein, der Vorteil ist, dass man durch diese Codes auf der Seite keine Widgets & Gadgets mehr hat und es funktioniert auch bei normalen Posts.

Google Pagerank Update im Februar 2012

noreply@blogger.com (Anonymous) — Sat, 11 Feb 2012 03:23:00 +0000

Ich bin ein bisschen spät dran mit dieser Ankündigung, doch Google hat mal wieder ein Update in Sachen Pagerank ins Rollen gebracht. Dieses kleine Update began am 6. Februar 2012 und lief bis zum 8. Februar 2012. Ein "großes" Update soll, so einige Stimmen, Ende des Monats stattfinden. Google aktualisiert den Pagerank normalerweiße in einer vierteljährlichen Periode, was bedeutet das sich der "PR" alle drei bis vier Monate angleicht, also steigt, fällt oder unverändert besteht.

Nach Meinung vieler ist der PR heutzutage nich tmehr ausschlaggebend, doch Blogs mit höheren PageRanks werden schneller im Vergleich zu Blogs mit niedrigeren PageRank gecrawlt. Ein Crawler oder Searchbot besucht jede Website mehrmals täglich. Weblogs, die einen PageRank von über 5 haben werden jede Minute und Blogs unter PR 5 pro Stunde gecrawlt. Und je schneller deine Blog-Crawling-Geschwindigkeit ist desto höher die Chancen ganz oben in den Suchergebnissen aufzutauchen.

Warum hat mein PageRank sich nicht erhöht?
Dies ist eine Frage, die oft gestellt wird. Eine PageRank Erhöhung ist nicht sequentiell. Ein Blog muss nicht unbedingt Pagerank 1 haben um dann beim nächsten Update einen PR 2 zu erhalten. Ein Blog mit PageRank 0 kann zB. auch direkt zu PR 4 in Abhängigkeit von der Anzahl der Backlinks und deren Qualität steigen. Blogspot Ratgeber stand, da dieser Blog noch relativ neu war, noch auf PR0 und ist mit diesem Update auf PR2 gestiegen.

Es gibt Blogs die mit ihren Backlinks usw. einen PR von 6 verdient hätten jedoch nach diesem Update sogar runtergestuft wurden. Wie kann sowas sein? Nun ja, der PageRank ist schon eine Frage für sich und wird wohl immer seltsam bleiben. Tatsache ist, dass man nicht bei jedem Update einen Anstieg erwarten kann, alleine wenn sich dieser nicht nach unten bewegt gilt dies bereits als großer Erfolg meiner Meinung nach. Da der Pagerank auf einem automatischen System basiert sind Schwankungen Teil des Spiels.

Kann mein PR im nächsten Monat bereits fallen?
Wenn Sie zu den Glücklichen gehören, die bereits einen sehr hohen PR besitzen oder das letzte Update Sie damit gesegnet hat, respektieren Sie diese Chance und missbrauchen Sie sie nicht. Google überwacht kontinuierlich Blogs nach einem Update, worauf dann ein größeres Update folgt das einen Monat dauern kann. Also der gesamte Monat Februar könnte eine Testphase für Sie sein!

Ist der PageRank wichtig?
Also für mich ist nichts wichtiger als der Alexa Rank. Alexa hat einer der besten Ranking-Algorithmen, dass gute Webseiten von Schlechten herausfiltert. Wichtig ist nach Angaben vieler Googlemitarbeiter, Experten und solcher die sich so nennen nicht der PageRank sondern die Qualität des Contents.

Nun ein paar Worte von Matt Cutts dazu:

Arbeitet an eurem Alexa Rank. Wenn es etwas gibt das mehr zählt, in den Augen der Werbekunden und Sponsoren-Blogs, dann ist es der numerische Wert der Alexa Toolbar.

Der beste Tipp um den PageRank zu erhöhen!
Schreibe Gastbeiträge auf anderen Blogs! Dies ist mit Abstand die effektivste Methode, gerade auch wenn euer Blog wenig an Leserschaft hat und relativ neu ist. Schreibt Gastbeiträge auf Top Blogs, die in euer Nische liegen und euer PageRank wirds euch danken.

Externe Blogartikel zu diesem Thema:

Fliegender Twitter-Vogel für Blogs

noreply@blogger.com (Anonymous) — Sat, 21 Jan 2012 21:20:00 +0000

Twitter hat weltweit an großer Popularität gewonnen und mit über 200 Millionen Usern eine große Community, welche ca. 65 Millionen Tweetes täglich erstellen. So ist es heute bereits Pflicht für jeden Blogger und Webmaster Twitter Buttons zu nutzen. Aber warum einen alten verstaubten Button nutzen wenn es auch schöner geht? "Twitter-Bird" nistet sich in deinem Blog ein, fliegt solltest du scrollen von Ecke zu Ecke und bleibt so immer im Blickfeld des Besuchers. "Twitty" verfügt über deinen Twitter Link aber auch einen normalen Tweet Link, sprich wenn man mit dem Cursor über den Vogel fährt, werden ein "tweet-this"- und "Follow-me"-Link angezeigt.

Beim Aufruf der Webseite fliegt der Vogel von oben in die Seite hinein und sucht sich einen zufälligen Ort im sichtbaren Bereich aus, bei dem er sich niederlassen kann. Wobei der Ort nicht ganz zufällig ausgewählt wird: Es handelt sich stets um ein existierendes HTML-Element wie ein Bild, eine Tabelle oder ein Div-Container. Schliesslich setzt sich ein realer Vogel auch auf ein Element des Baumes (Ast) ab und nicht irgendwo mitten in der Luft.Auch wenn sich der Vogel tendenziell neben den Inhalt setzt, kann es vorkommen, dass er den Text oder eine Grafik verdeckt. In diesem Falle kann man mit dem Cursor vor ihm "herumfuchteln" um ihn zu "verscheuchen", worauf er sich an einem anderen Ort ein neues Plätzchen sucht.

Hier gehts zur Demo

So bekommst auch du einen eigenen animierten Vogel:

Blogger einloggen > Design >Post bearbeiten
Vorher ein Backup des aktuellen Templates machen
Such nach </body> (Strg+F)
Setzte genau darüber diesen Code:

<script src='http://file1.npage.de/004690/48/html/blogratgeber-twitter-vogel.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = "blogratgeber";
var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";
tripleflapInit();
</script>

5. Ändere blogratgeber zu deinem Twitter-Namen

6. Speichere das Template und Fertig!

Viel Spaß mit dem animierten Twitter Vogel. Solltest du Probleme haben zögere nicht uns zu schreiben.

Facebook Twitter Google+ Icon ein-/ausblenden

noreply@blogger.com (Anonymous) — Fri, 20 Jan 2012 17:19:00 +0000

Unter den Blogposts vieler Blogs sind die Social-Media Typischen Buttons zu finden. Nicht jeder wünscht sich diese dort, dennoch sind sie meinstens automatisch bei Blogbeginn geschaltet. Es ist sehr einfach diese zu entfernen. In der alten Bloggeroberfläche geht ihr auf Design -> Seitenelemente und sucht die Rubrik "Blogposts", dort klickt ihr nun auf bearbeiten. In der neuen Bloggeroberfläche einfach auf Layout klicken und das selbige tun.

Nun erscheint ein neues Fenster, schaut unter "Optionen für Post-Seite" nach, dort findet ihr den Begriff "Freigabeschaltflächen anzeigen" mit den jeweiligen Buttons nach sich. Einfach ankreuzen wenn ihr Bedarf oder eben nicht habt. Diese Änderung wird sofort durchgeführt mit dem Klick auf Speichern.

Solltest du hierher gefunden haben, weil du dieses Gadget auf deinem Blog hast aber es nicht so funktioniert wie es funktionieren sollte? Dies kann schlicht und einfach bedeuten, dass das Template welches du benutzt diese Funktion nicht unterstützt, entweder muss nun ein wenig am Script geschraubt werden oder du holst dir die Buttons manuell. Dazu wirst du bei uns bald sicher fündig werden. Solltest du dennoch Probleme haben, zögere nicht uns zu schreiben.

Was ist SnackTV?

noreply@blogger.com (Anonymous) — Thu, 19 Jan 2012 03:00:00 +0000

Mit SnackTV können Sie einfach, schnell und kostenfrei professionelle und legale Videos in Ihr Blog einbinden, und bietet zu jedem Blog-Thema das passende Video von namhaften Lizenzgebern. Ob Sport, News, Musik, Auto, Wissen, Stars & Lifestyle, SnackTV bietet ausschließlich professionelle Video-Inhalte für Ihre Website, ihren Blog oder ihr Portal.

Video-Content von Top-Lizenzgebern!
Die Premium-Videos erhält SnackTV von über 80 namhaften Lizenzgebern wie TV-Sendern, TV-Produktionsfirmen und Internetagenturen und stellt diese Inhalte uns, den Publishern, als Video-Programm kostenfrei zur Verfügung. SnackTV übernimmt die komplette rechtliche Abwicklung mit den Lizenzgebern und Verwertungsgesellschaften wie GEMA.

Publisher können die für ihre Zielgruppe geeigneten Kategorien schnell und unkompliziert auswählen. Sie erhalten so ihr ganz individuelles Video-Programm, aus dem sie Videos in Artikeln oder als Playlisten platzieren können. Und das einfach und unkompliziert Dank SVDT von SnackTV. Die Semantic Video Delivery Technology überprüft in Sekundenschnelle die Inhalte der aktuellen Website und sucht in der SnackTV-Datenbank das passende Video zu den gefundenen Schlagwörtern. Natürlich ist auch eine manuelle Platzierung von Einzelvideos oder Playlisten wie gewohnt problemlos möglich.

Als Publisher können Sie zudem auch Ihren individuell konfektionierten Video-Channel im Portal platzieren. Die von ihnen gewählten Video-Kategorien lassen sich priorisieren, so dass es noch besser zu Ihrer Zielgruppe passt. Mit dem Video-Programm von SnackTV erweitern Sie einfach und schnell Ihr redaktionelles Angebot um faszinierende Bewegtbilder.

Video-Player von SnackTV
Mit der Innovationsneuheit SVDT von SnackTV können Redaktionen und Inhaltemanager einfach und bequem jeden Textbeitrag mit professionellen Videobeiträgen ergänzen. Dank der Semantic Video Delivering Technology (SVDT) werden bis zu fünf Videos automatisch kontextbezogen ausgewählt. Die Videos werden in einem Embed Player präsentiert und ausgespielt: als einzelnes Video oder in Playlisten.Videos können aber natürlich auch zusätzlich manuell ausgewählt und platziert werden. Hierfür werden Publishern spezielle Tools zur Verfügung gestellt, wie z.B. den Video-Newsfeed oder dem SnackTag-Generator.

Einbindung in Artikel
Kontextbezogene Integration einzelner Videos oder themenspezifischer Playlisten in Artikel durch die Redaktion des Publishers oder durch SVDT.

Einbindung auf Rubrikenseiten
Kontextbezogene Einbindung auf Einstiegsseiten, z.B. alle aktuellen Aufmacher zur Video-Kategorie "Auto" in der Portalrubrik "Auto". Manuelle oder automatisierte Belegung mit SVDT.

Einbindung in Suchergebnisse
Über die XML- bzw. RSS-Feeds machen Sie die SnackTV-Inhalte auch über Ihre interne Suchfunktion für User auffindbar.

Der SnackTV-Channel
Die SnackTV-Channel sind einfach und schnell in jede Website zu integrieren. Die Channel werden von komplett fertig zur Einbindung zur Verfügung gestellt und können individuell auf das Publisher-Look & Feel angepasst werden. Faszinierende Inhalte und innovative Player-Technologie garantieren höchsten Entertainment- und Informations-Genuss auf jeder Website.

Die Vorteile für Publisher im Überblick

Professionelles und umfassendes Video-Angebot aus einer Hand
Zu jedem Thema das passende Video von Top-Lizenzgebern
Kostenfreier Zugang ohne Risiko
Einfache und schnelle Integration auf Websites, Blogs und Portalen
Kontextsensitive Ausspielung Dank SVDT von SnackTV
Innovative Player-Technologie
Individuelle Anpassung des Video-Players und -Channel
Zusätzliche Erlöse durch Premium-Video-Ad-Kampagnen
Rechtliche Sicherheit bei allen Inhalten
Erhöhung der publizistischen Attraktivität

10.000 Foren Profil Einträge - Top Backlinks - Google wird's freuen

noreply@blogger.com (Anonymous) — Sun, 15 Jan 2012 08:03:00 +0000

Wir tragen Ihre Webseite, in über 10.000 Foren-Profile ein. Hierbei werden Ihre Startseite oder Unterseite mit jeweils verschiedenen, von Ihnen gewählten Keywords, eingetragen.

Wir nutzen qualitative Foren und Portalr damit die Backlinks auch eine hohe Relevanz haben. Des Weiteren haben viele Foren einen Pagerank von 7 und höher. Hochwertige Backlinks bedeuten schnellen Aufstieg bei Google und Co.

Die Backlinks werden im Laufe einiger Tage und Wochen nach und nach eingetragen, damit ein natürliches Linkwachstum simuliert werden kann und ihr Traffic auf natürliche Art und Weise wachsen kann.

Wir erstellen extra einen neuen Account auf diversen Foren für Sie und sorgen dafür, dass auch Ihre Webseite favorisiert und als empfehlenswert eingestuft wird. Sie bekommen zum Schluss in einer Text-Datei detailliert genannt, in welche Foren wir Ihre Website eingetragen haben bzw. die Links direkt zu den Foren.

Diese kleine Dienstleistung kostet 99€, klicken Sie einfach unter diesem Artikel auf den Spenden-Button und überweisen Sie, bei Interesse, den Betrag.

Nach Ihrem Kauf setzen wir uns umgehend mit Ihnen in Verbindung - wir benötigen lediglich die URL Ihrer Webseite und beginnen nach Übermittlung dieser und Zahlungseingang umgehend mit der Arbeit. Bei Fragen vorab nutzen Sie bitte die Kommentar-Funktion oder schreiben Sie uns direkt eine Mail an blogratgeber[at]googlemail.com.

Was nützen mir Backlinks konkret?
- mehr zielgerichteter Traffic = mehr potenzielle Kundschaft
- bessere Positionen in Suchmaschinen, wie Google, Yahoo, Bing,..
- höherer eigener Pagerank

Warum sind gute Google Positionen wichtig?
84% aller Internetbenutzer nutzen regelmäßig Suchmaschinen.
87% davon schauen nur die erste Seite der Ergebnisse an.
76% der Suchmaschinennutzer haben bei der Suche eine Kaufabsicht.

Sie sehen also, Suchmaschinen, insbesondere Google ist der wichtigste Werbepartner den ein erfolgreiches (Internet-)Unternehmen heutzutage haben kann. Je besser die Position der eigenen Webseite für relevante Suchanfragen, desto mehr zielgerichtete Besucher finden diese. Ja nach Angebot und Konvertierungsrate der Webseite bedeutet dies in der Regel direkte Auswirkungen auf den generierten Umsatz-

Bekomme ich genau die gebuchte Anzahl an Backlinks?
Meißt erstellen wir 5-15% mehr, niemals weniger!

Wielange bleiben die erstellten Links bestehen?
Von uns erstellte Blog, Post oder Profil Backlinks bleiben in der Regel dauerhaft bestehen (ausgenommen natürlich höhere Gewalten, wie Abschaltung der Webseite, etc.)

Was bedeutet "verifizierte" Backlinks?
Viele Anbieter im Bereich Linkaufbau bieten Ihnen zwar 10.000 Backlinks an, erstellen Ihnen dann aber möglicherweise nur 500, weil in den AGBs darauf hingewiesen wird, dass eine Erfolgsrate von 3-6% zu erwarten sei. Verifiziert heisst, dass wir solange für Sie backlinks erstellen und überprüfen, bis auch tatsächlich mindestens die georderte Anzahl von backlinks erreicht ist. Wir glänzen durch unsere 110% Erfolgsrate. Das heisst, wir erstellen immer einige Backlinks mehr als gebucht wurden.

Bekomme ich mehrere Links von der gleichen Seite?
Nein, alle Links kommen von unterschiedlichen URLs. Keine Duplikate! Teilweise kann es vorkommen, dass vereinzelt mehrfach von derselben Domain verlinkt wird - die Duplikatsrate liegt hierbei allerdings bei maximal 3%.

Wieviele URLs und Keywords kann Ich angeben?
Im Gegensatz zu vielen anderen Anbietern schränken wir Sie hier nicht auf z.B. eine URL und 3 Keywords ein, Sie können gerne unbegrenzt viele URL/Keyword Kombinationen angeben. Um die Linkaufbau-Kampagne so organisch wie möglich wirken zu lassen, sollten Sie große Anzahlen an Backlinks sogar auf mehrere URLs (im Optimalfall auch auf Unterseiten) und unterschiedliche Keywords und Keywordkombinationen "verteilen". Gerne können Sie sogar mehrere, unterschiedliche Webseiten innerhalb einer Kampagne verlinken. Sollten Sie Schwierigkeiten haben, stehen wir Ihnen gerne bei der Wahl der optimalen Keywords / URLs zur Verfügung.

Wir sind gewillt eine professionelle Dienstleistung zu erbringen und geben uns erst dann zufrieden, wenn auch Sie zufrieden sind.

Blog-Artikel auf dem Computer speichern

noreply@blogger.com (Anonymous) — Thu, 05 Jan 2012 00:00:00 +0000

Wenn du einen Blog anlegst, solltest du immer mal wieder ein BackUp des Blogs auf deinem Rechner speichern. Auch alle deine Bilder solltest du immer auch auf deinem PC speichern. So kannst du deine Beiträge später immer wieder herstellen, wenn es mal Probleme gibt.

Den Blog sicherst du, in dem du unter

Einstellungen/ Grundlegend/ Blog exportieren bzw.
Einstellungen/ Sonstiges/ Blog-Extras/ Blog exportieren

klickst. Dieses BackUp kannst du dann jederzeit unter

Einstellungen/ Grundlegend/ Blog importieren bzw.
Einstellungen/ Sonstiges/ Blog-Extras/ Blog importieren

wieder in den Blog laden.

Blogger Layout selber erstellen

noreply@blogger.com (Anonymous) — Wed, 04 Jan 2012 23:34:00 +0000

Ich finde, für manche Anwendungen sind Wordpress oder Joomla als CMS überdimensioniert und zu komplex - wer Beispielsweise eine kostengünstige Webseite mit ein paar Unterseiten will und keine Lust hat, einen eigenen Host aufzusetzen und sich groß um die Verwaltung seiner Seite zu kümmern, kann so ein Projekt mit Blogger sehr simpel umsetzen. Wie so was geht werde ich hier beschreiben - ich möchte mit meinem Beispiel keinen Webdesign-Preis gewinnen, sondern nur die grundlegenden Schritte zu einem funktionierenden, eigenen Layout innerhalb von blogspot.com zeigen.

Der Entwurf

<main>

<aside>

Um sich's besser vorzustellen habe ich einen Entwurf gebaut - das fertige Layout soll 'klassisch' aufgebaut sein, d.h. ganz oben eine Navigation, dann kommt ein dreigeteilter Header, darunter ein Hauptteil mit Sidebar und ganz unten der Footer. In der Navigation kommen die Links zu den Unterseiten, der Hauptteil kann für eine Begrüßung, Slider oder für Posts verwendet werden und in die Sidebar sollen sich die Blogger-Gadgets mit einem Klick einbauen lassen, wie in den 'normalen' Blogger-Layouts auch - kein allzu ambitioniertes Konzept also.

Das fertige Layout

Wer sich das fertige Layout 'live' anschauen will:

Layout-Test-Blog

Die Grundlage

Die 'neuen' Blogger-Layouts benützen ein xml mit eigener Spezifikationen - ihr müsst also die genaue xml-Deklaration kennen, sonst wird euer Layout nicht funktionieren; beziehungsweise gibt es beim speichern Fehlermeldungen.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>

Die <!DOCTYPE> Deklaration ist in diesem Beispiel html, das Layout wird in HTML5 geschrieben, mehr braucht's dafür nicht. Zusammen mit den CDATA-Abschnitten und den restlichen Layout-Tags schaut die Sache so aus:

Grundform Blogger `xml` Layout

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 
xmlns='http://www.w3.org/1999/xhtml' 
xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
  
 <head>
     <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[

/*---- CSS für Skin ----*/

  ]]></b:skin>

    <b:template-skin>
    <![CDATA[

/*---- CSS für's Layout [optional] ----*/

   ]]></b:template-skin>

 </head>

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass 
+ &quot; &quot; + data:blog.pageType'>

<!-- HTML für's Layout -->

 </body>

</html>

Nehmt diesen Code und kopiert ihn in ein neuen, leeren Test-Blog, wo ihr vorher den bestehenden Code gelöscht habt. Wenn es beim speichern keine Fehlermeldung gibt, besitzt ihr eine funktionierendes Grundgerüst für Blogger, auf das ihr jetzt eure eigenes Layout aufbauen könnt.

Start: Allgemeine CSS

Fangen wir mit ein paar allgemeinen CSS-Regeln -

Definition für `body` Tag

body {  
    margin: 0 auto;  
    font-family: 'Helvetica Neue Light', 'Helvetica Neue-Light', 
'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#777;
    background: #f0f0f0 url(http://goo.gl/GVSg1) repeat right top;
    padding: 0;
    max-width: 980px;
    min-width:880px;
}

Es gibt in meine Layout eine Mindestweite min-width und eine maximale Weite max-width - zwischen beiden Werten lässt sich das Layout später skalieren. Außerdem ist body mit margin: 0 auto; zentriert.

Nervige Blogger Nav-Bar ausblenden

body .navbar  {
  height: 0px !important;
  visibility: hidden;
  display: none;
}

`HTML5` Layout-Tags normalisieren

header, footer, aside, nav, article {
 display: block;
}

Nachdem mir durch Fehler im FF klar geworden ist, dass die Browser HTML5 Tags auf unterschiedliche Art und Weise darstellen - mal als inline, mal als block Element - ist es wohl besser, alle HTML5 Layout-Tags am Anfang als block Element zu definieren:

Navigation

Die Vorbereitungen sind gemacht - fangen wir jetzt also mit dem eigentlichen Layout an.

Ganz oben auf die Seite soll eine Navigation kommen - und weil es 'einfach' gehen soll, wollen wir dazu das Seiten-Gadget von Blogger benützen. In HTML5 kommen Layout-Elemente in 'semantische' Container und nicht mehr in <div> Container wie bisher. Die ganze HTML für die Navigation schaut so aus:

<nav>...</nav>

That's all. Nicht besonders kompliziert, oder?
Der Inhalt von diesen 'semantischen' Container wird das PageList-Gadget werden. Das wiederum liegt in einem <section> Element - <section> ist ein neues, nicht ganz einfach zu begreifendes Prinzip in HTML5. Solche <section> Elemente sollen nicht Inhalte mit CSS-Regeln organisieren - dazu sind <div> Container da - sondern repräsentiert einen semantischen Bereich, in dem Fall den Inhalt 'PageList-Gadget'.
Wem das zu kompliziert ist, hier die Pi mal Daumen Regel: In Blogger brauchen alle Widgets ein <section>, in das sie eingebettet sind. Nicht jedes Widget braucht ein eigenes, aber Widgets[=Inhalte] funktionieren nur in einer dafür definierten <section>.
Dankenswerterweise müssen wir diese <section> nicht selber schreiben, sondern Blogger stellt dazu eigene Tags zu Verfügung, hier etwa für den Navigationsbereich:

<b:section class='nav' id='nav' showaddelement='yes'>
...
</b:section>

Der Blogger <section> Tag besitzt einige Attribute, [die in dem Post nicht näher interessieren] die für den Vorlagen Designer wichtig sind - showaddelement='yes' besagt etwa, das unter Seitenelemente neue Gadgets in diese <section> eingebaut werden kann.
Über <section> werde ich vielleicht mal einen eigenen Post schreiben, jetzt nur eine Bemerkung dazu: Blogger <section> besitzen eine class und eine id, versucht trotzdem _nie_ eine CSS über eine <section> zu schreiben, das endet im Chaos.

Vollständige HTML

Theoretisch schaut die ganze HTML für den Navbar nun so aus:

<nav>
      <b:section class="nav" id="nav" showaddelement="yes">
...
</b:section>
</nav>

beziehungsweise _ohne_ Inhalt in xml Kurzschreibweise:

<nav>
       <b:section class="nav" id="nav" showaddelement="yes"/>
</nav>

Nur: Blogger hat in diesem einen Fall ein Problem mit dem <nav> Tag und wird diese <section> nicht unter 'Seitenelemente' anzeigen. Die Navigation wird trotzdem funktionieren, nur müsst ihr das Widget per Hand einbauen:

<nav>
         <b:section class='nav' id='nav' showaddelement='yes'>
  <b:widget id='PageList1' locked='false' title='' type='PageList'/>
</b:section>
</nav>

Innerhalb eines <div> Containers:

<div class='menu'>
         <b:section class='nav' id='nav' showaddelement='yes'>
  <b:widget id='PageList1' locked='false' title='' type='PageList'/>
</b:section>
</div>

Ich beschreibe das deshalb so ausführlich, weil ich weiß, wie unglaublich frustrierend und zeitaufwändig es sein kann, wenn man einen Bug nicht gleich als solchen erkennt - nehmt also die letzte Schreibweise mit <div> Container, die ist zwar nicht so schön, funktioniert aber sicher auch unter 'Seitenelemente' ...

CSS für Navbar

Hier die CSS für die Navbar in der Version mit <div> Container.

/* Nav
----------------------------------------------- */  
.menu li{
 display: inline-block;
}
.menu ul li a {
   display: block;
   margin-right: 20px;
   font-size: 14px;
   line-height: 44px;
   text-align: center;
   text-decoration: none;
   color: #777;
}
.menu ul li a:hover {
   color: #ccc;
}   
.nav ul li.selected a {
   color: #ccc;
}

Ein kleiner Trick mit dem ich mir einen <div> Container zum clearen unterhalb der PageList spare: Ich floate die Liste nicht nach links, sonder gebe den li Tags mit display: inline-block; inline Eigenschaften. Damit bleiben die li Elemente in der Zeile und laufen 'normal' nach rechts.

Header

Als nächstes kommt der Header und zwar soll der - wie erwähnt - zentriert und dreigeteilt werden. In 'klassischen' <div> Layouts müsstet ihr dazu unzählige <div> Container mit Columnen und Fauxcolumnen schreiben, damit das ganze eine Form bekommt. Ich werde das ganz simpel mit einer CSS-Tabelle lösen, dazu eine Vorbemerkung:

Ich dachte, Tabellen seien böse?

Wer Tabellen in Zusammenhang mit Web-Layouts erwähnt, erinnert zunächst mal an die schlechte alte Zeit, in der die Leute ihre Websites mit html Tabellen zusammengefrickelt haben. Das war irgendwann Ende der 90'iger [bevor die Leute ihre Websites mit Frames zusammengefrickelt haben :=)]. html Tabellen haben eine semantische Bedeutung und sind zur Organisation von Daten gedacht, nicht für's layouten von Webseiten.

Die CSS Eigenschaft display: table; oder display: table-cell; ist etwas völlig anderes. Diese Eigenschaft gibt einem html Element eine konkrete Darstellung im Layout. Das hat mit semantischen html nichts zu tun. Die Layout-Eigenschaft display: table; ist bislang daran gescheitert, dass sie der Internet Explorer7 nicht versteht. Selbst Google unterstützt den Internet Explorer7 seit August 2011 nicht mehr, also spricht wohl ~~nichts~~ wenig dagegen, die Eigenschaft display: table; einzusetzen.

HTML für CSS-Tabelle

Der gesamte Inhalt vom Header kommt zwischen <header> ... </header> Tags. Im Header gibt es drei html Elemente, nämlich einen <div class="main"> Container und links und rechts davon jeweils einen <aside> Container. Der htlm5 Tag <aside> ist für Inhalte gedacht, der neben dem Hauptinhalt liegt und zu diesem Inhalt semantisch dazugehört.

Diese drei Container werden von einem weiteren <div> Container umschlossen, der die Tabelleneigenschaft gibt. In den drei Containern gibt es - wie in der Navbar - jeweils ein <section> Tag, in dieser <section> befinde für die Inhalte, in diesem Fall jeweils ein HTML/Java Gadget.

<header>
 <div class='grid'>
  <aside>
   <b:section class='header' id='aside-l' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML1' locked='false' title='' type='HTML'/>
   </b:section>
  </aside>
  <div class='main'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML2' locked='false' title='' type='HTML'/>
   </b:section>
  </div>
  <aside>
   <b:section class='header' id='aside-r' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML3' locked='false' title='' type='HTML'/>
   </b:section>
  </aside>
 </div>
</header>

Bitte beachtet: Jedes HTML/Java Gadget braucht eine eindeutige id, genauso wie die <section> Tags. Unter Seitenelemente wird die id automatisch richtig gesetzt, wenn ihr Gadgets per Hand einsetzt, müsst ihr das anpassen. Im Fall des Falles gibt es eine Fehlermeldung im Editor.

CSS für Header

Die CSS für den Header - mit vertical-align: middle; lassen sich übrigens Inhalte in CSS-Tabellenzellen vertikal mittig zentrieren - ich war überrascht, dass das geht.

/* Header
----------------------------------------------- */
header .grid {
    display: table;
    margin: 0px auto;
    border-spacing: 10px 10px;
}
header aside, header .main {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-spacing: 10px 10px;
    background-color: rgb(200, 200, 200); 
}
header aside {
    width: 245px;
    hight: 105px;
}
header .main {
    width: 490px;
    hight: 105px;
    background: url(http://goo.gl/e7ps2) no-repeat;
    background-size: cover;
}
header aside:first-of-type {
      -webkit-border-top-left-radius: 12px;
   -webkit-border-bottom-left-radius: 12px;
          -moz-border-radius-topleft: 12px;
       -moz-border-radius-bottomleft: 12px;
              border-top-left-radius: 12px;
           border-bottom-left-radius: 12px;
}
header aside:last-of-type {
     -webkit-border-top-right-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
         -moz-border-radius-topright: 12px;
      -moz-border-radius-bottomright: 12px;
             border-top-right-radius: 12px;
          border-bottom-right-radius: 12px;
}

Das Header-Bild habe ich als Hintergrund eingebunden und mit der CSS3 Eigenschaft background-size skaliert. Man könnte dazu auch das Header-Gadget nehmen, aber ehrlich gesagt, finde ich dieses Gadget zu fummelig, direkt ist einfacher.

Zentriert wird die Tabelle mit margin: 0 auto; - die Abstände zwischen den Tabellenzellen wird mit border-spacing: 10px 10px; erzeugt.

Hauptteil

Der Hauptteil der Seite und die Sidebar wird genauso mit der Eigenschaft display: table; gebaut, wie der Header. In den Hauptteil kommt das Post-Gadget Blog1 - das ist nur dann notwendig, wenn ihr Inhalt auf die einzelnen 'statischen Seiten' stellen wollt. Seiten sind nichts anderes als Pots, die aus der Archivierung herausgenommen sind. Ohne Post-Gadget gibt es also keine Seiten. Wer das Post-Gadget nicht braucht, kann es auch wieder ausblenden, dazu später noch etwas.

HTML - Hauptteil

<div id='content'>
 <div id='mainContent'>
   <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog-Posts' type='Blog'/>
</b:section>
   </div>
 <aside>
  <b:section class='main' id='aside-main'>
<b:widget id='Profile1' locked='false' title='Über mich' type='Profile'/>
<b:widget id='PopularPosts1' locked='false' title='Beliebte Posts' type='PopularPosts'/>
<b:widget id='Followers1' locked='false' title='Leser' type='Followers'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
 </aside>
</div>

Hier sind einige der HTML/Java Gadgets schon eingebaut - ihr könnt das aber genauso gut auch unter Seitenelemente machen. Das HTML/Java Gadget HTML4 wird später der Ort, wo eine Begrüßung, Slideshow oder sonst etwas eingebaut wird. Dazu später noch mehr.

CSS - Hauptteil

/* Content
----------------------------------------------- */  

#content {
   width: 100%;
   display: table;
   margin: 0px auto;
   border-spacing: 10px 10px;
}
#mainContent {
   display: table-cell;
   width: 606px;
   vertical-align: middle;
   padding-right: 22px;
   background-color: rgb(200, 200, 200); 
   -webkit-border-radius: 12px;
      -moz-border-radius: 12px; 
           border-radius: 12px; 
}
#content aside {
   display: table-cell;
   width: 374px;
   background-color: rgb(200, 200, 200);  
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px; 
            border-radius: 12px; 
}

Footer

Den Footer zu bauen ist trivial. Der Inhalt kommt zwischen dem <footer>...</footer> Tag und darein ein <section> Element mit einem HTML/Java Gadget. Ich beschreibe das jetzt nicht extra, ich denke, nach dem bisher gesagte ist klar, wie es geht.

Das Ergebnis

Ihr könnt euch nun anschauen, wie das Layout 'live' auusschaut. Wie gesagt, es ging mir nicht darum, ein Preis für Webdesign zu gewinnen, sondern das Prinzip dahinter zu demonstrieren. Mit ~~wenig~~ a bisserl Aufwand habt ihr ein blogspot.com Blog zur eigenen Homepage gemacht, mit integriertem Blog, zwanzig Unterseiten und unbegrenzten Speicherplatz - und das ganze für lau. Was wollt ihr mehr? Ihr könnt auch noch die eigene Domain drüberlegen und kein Mensch wird mehr erkennen, dass das ursprünglich mal ein Blogger Blog war.

Ein paar Anmerkungen

In dem Test-Blog ist das Post-Gadget ausgeblendet und der Besucher landet auf einer 'echten' Homepage. Das geht mit einer Zeile CSS:

.index #Blog1 {
  display: none:
}

Die Klasse .index ist in Blogger Blogs ein eigener Seitentyp. Davon gibt es insgesamt sieben Stück, die wichtigsten sind .item [=Post-Seite], .static_page [=statische Seite] und .mobile [=mobile Seite]. Das Startgadget HTML4 auf den statischen Seiten nicht anzuzeigen, geht etwa mit dieser CSS:

.static_page #HTML4 {
   display: none;
}

Mit den Konzept 'Seitentypus' kann man relativ schnell den statischen Seiten ein eigenes Layout geben. Ich habe in das Layout noch einiges anderes reingesteckt, aber dabei ging es nur um Äußerlichkeiten, die das Grundprinzip vom Layout nicht betreffen.

Texte ein-/ausklappen

noreply@blogger.com (Anonymous) — Wed, 04 Jan 2012 23:31:00 +0000

Ein kleines jQuery-Script um 'Text-mitten-im-Post-ein-und-ausklappen". Klick auf "auf»" und der verborgene Text wird sichtbar.

Wer reitet so spät durch Nacht und Wind? Es ist der Vater mit seinem Kind; Er hat den Knaben wohl in dem Arm, Er faßt ihn sicher, er hält ihn warm.

Die Idee

Zum selber ausprobieren gibt's einen Fiddler. Ein-/Ausklappen geschieht mit HTML und CSS. Das jQuery Script gibt durch einen toggler dem <div> Container mit der Klasse class="hidden"; die class="click"; und umgekehrt. Für die Klassen class="hidden"; und class="click"; werden durch display:none; und display;block; der Text und die Buttons ein- beziehungsweise ausgeblendet. Die Darstellung erfolgt also über CSS, jQuery gibt dem Elternelement der Buttons abhängig vom 'Klick-Ereignis' lediglich eine andere Klasse. Viele Lösungen die ich gefunden habe, machen das Ein-/Ausblenden direkt mit Javascript, was ich für zu kompliziert halte.

Der Code

<style>
.button {
  margin:-0.3em 1em 0.3em 1em; 
  cursor:pointer; 
  color:#c00; 
  font-weight:bold;
}
/* unclicked style .hidden */
.hidden #auf {
  display: block; 
  text-align:right;
}
.hidden #zu {
  display: none;
}
.hidden span {
  display: none;
}
/* clicked style .click */
.click #auf {
  display: none;
}
.click #zu {
  display: block;
}
.click span {
  display: block;
}
</style>
<script type="text/javascript">
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>
<div class="hidden">
            <div class="button" id="auf">weiter&#187;</div>   
                <span>verborgene Inhalt</span>   
           <div class="button" id="zu">&#171;zurück</div>                       
</div>

Die Anwendung

Damit das ganze funktioniert, braucht ihr das jQuery-Framework - das ist standardmässig bei den dynamischen Ansichten dabei, in den 'normalen' Layouts dagegen nicht, d.h. ihr müsst es vorher noch in euren Blog einbinden. Dazu sucht ihr den </head> Tag im HTML-Quelltext und kopiert direkt _davor_ dieses Script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>

That's all. Ihr benützt damit die Google AJAX Libraries, das ist die schnellste und sicherste Möglichkeit, das jQuery Framework in den Blog zu bekommen. Wichtig: Die Zahl '1' bedeutet, das Google automatisch immer die neuste Version von jQuery ausliefert, unabhängig welche Versionsbezeichnung gerade die aktuellste ist.

Zum einmaligen ausprobieren könnt ihr nun den Code so wie er ist in der HTML-Ansicht vom Editor in einem Post kopieren, das wird funktionieren.

Wenn ihr das öfters als einmal machen wollt, legt das jQuery Script in ein HTML/Java Gadget und platziert es so tief wie möglich, am besten in den Footer.

<script type="text/javascript">
$(".button").click( function() {$(this).parent().toggleClass("click")});
</script>

Die CSS kommt im Vorlagen Designer in die Box CSS hinzufügen und zwar _ohne_ <style> Anweisungen.

.button {
  margin:-0.3em 1em 0.3em 1em; 
  cursor:pointer; 
  color:#c00; 
  font-weight:bold;
}
/* unclicked style .hidden */
.hidden #auf {
  display: block; 
  text-align:right;
}
.hidden #zu {
  display: none;
}
.hidden span {
  display: none;
}
/* clicked style .click */
.click #auf {
  display: none;
}
.click #zu {
  display: block;
}
.click span {
  display: block;
}

Das HTML kopiert ihr in der HTML-Ansicht des Editors in den Post:

<div class="hidden">
            <div class="button" id="auf">weiter&#187;</div>   
                <span>verborgene Inhalt</span>   
           <div class="button" id="zu">&#171;zurück</div>                       
</div>

Und weiter?

Probiert das in dynamischen Ansichten - solange es dort [noch] keine HTML/Java Gadgets gibt - besser nicht aus. Es funktioniert, aber nur mit einem einzigen Post. In den 'normalen' Layouts sollte es dagegen mit allen Browser problemlos klappen. Das schöne an jQuery Script ist, dass ihr euch nicht mit Browserkompatibilität o.ä. rumschlagen müsst, die bringt das Framework von Haus aus mit. Für einen eigenen 'Jump-Break', Fotos mitten im Post oder Lösungen zu Aufgaben, könnte ich mir das als hilfreich vorstellen.

Blogspot Ratgeber

Facebook Layer/Popup für deinen Blog

Widget hinzufügen

Widget anpassen

Geben Sie Ihren Benutzernamen ein

Ändern Sie den 20 Sekunden Countdown

Popup bei jedem Laden der Seite

Probleme mit dem Facebook-Widget?

Professionelles Logo Design für 10€

BlogSpot Pagerank Check Tool

4 gute Widgets für ihren Blog

Social Bookmark Gadget: Weihnachtsdekoration für Blogger

Weihnachtsdekoration - Bookmark Gadget Tutorial

Jemanden bei Blogspot blockieren bzw. sperren

Verbannen Sie jemanden aus ihrem Blog:

Benutzerdefinierte Permalinks für Beiträge

30 kostenlose Favicon Tools & Editoren - Favicon erstellen, downloaden & einbinden - sowie HTML ready

1. Favicon Generator und Gallery

2. Animated Favicon

3. Photoshop Tutorial

4. Favicon Maker v1

5. Dynamic Drive

6. iConvert

7. GenFavicon

8. Online Icon Maker

9. Convertico

10. Favicon.ru

11. Favicon Editor v0.03

12. Degreave Favicon Generator

13. Favicon Generator

14. Favicon editor

15. Web Script Lab Favicon Generator

16. Converticon

17. Favicon.cc

18. Faviconr

19. Favikon

20. Favicon Japan

21. Favicon Tool

22. Favicon Generator

23. Favicon Drawing tool

24. Favicon Generator

25. 256 Pixels

26. HTML Kit Favicon

27. Buddy Icon

28. Favicon Tool

29. Favicon Factory

30. Iconfu

Schwebendes Facebook, Twitter, Google+ Widget auf der rechten Seite

Plista Widget für Blogspot

404 Fehlerseite bearbeiten bei Blogger

Von blogspot.com zu blogspot.de?

Ein Herz für Blogger - Bookmark Gadget

Ein Herz für Blogger - Bookmark Gadget Tutorial

Live Stream Blogger

Rechte Maustaste im Blog deaktivieren

"BlogSpot Ratgeber" abonnieren & verfolgen

Eigenes Forum erstellen und im Blog einbinden

Google Pagerank Update im Februar 2012

Fliegender Twitter-Vogel für Blogs

Facebook Twitter Google+ Icon ein-/ausblenden

Was ist SnackTV?

10.000 Foren Profil Einträge - Top Backlinks - Google wird's freuen

Blog-Artikel auf dem Computer speichern

Blogger Layout selber erstellen

Der Entwurf

Das fertige Layout

Layout-Test-Blog

Die Grundlage

Grundform Blogger xml Layout

Start: Allgemeine CSS

Definition für body Tag

Nervige Blogger Nav-Bar ausblenden

HTML5 Layout-Tags normalisieren

Navigation

Vollständige HTML

CSS für Navbar

Header

Ich dachte, Tabellen seien böse?

HTML für CSS-Tabelle

CSS für Header

Grundform Blogger `xml` Layout

Definition für `body` Tag

`HTML5` Layout-Tags normalisieren