Blogger Tuning alles über Blogspot

jQuery SlideShow integrieren

noreply@blogger.com (Unknown) — Thu, 10 May 2012 19:58:00 +0200

Hallo, ich möchte euch heute erklären wie ihr einen Slider in eurem Blog integriert.

Ein Slider ist wo eure Featured Posts angezeigt werden, die ihr für wichtig und hilfreich hält.

Hier ein Screenshot:

(Bitte vorher euer Template sichern bevor ihr änderungen vornehmt)
Nun geht ihr auf:
Dashboard ➜ Vorlage ➜ HTML bearbeiten ➜ Fortfahren ➜ Widget-Vorlagen komplett anzeigen (Haken setzten)

findet:
</head>

direkt darunter einfügen:

<script type=’text/javascript’>

//<![CDATA[





//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.

//** May 2nd, 08'- Script rewritten and updated to 2.0.

//** June 12th, 08'- Script updated to v 2.3, which adds the following features:

//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.

//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).

//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.





//** July 11th, 08'- Script updated to v 2.4:

//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")

//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.





var featuredcontentslider={





//3 variables below you can customize if desired:

ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',

bustajaxcache: true, //bust caching of external ajax page after 1st request?

enablepersist: true, //persist to last content viewed when returning to page?





settingcaches: {}, //object to cache "setting" object of each script instance





jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.

this.turnpage(this.settingcaches[fcsid], pagenumber)

},





ajaxconnect:function(setting){

var page_request = false

if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)

try {

page_request = new ActiveXObject(“Msxml2.XMLHTTP”)

}

catch (e){

try{

page_request = new ActiveXObject(“Microsoft.XMLHTTP”)

}

catch (e){}

}

}

else if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else

return false

var pageurl=setting.contentsource[1]

page_request.onreadystatechange=function(){

featuredcontentslider.ajaxpopulate(page_request, setting)

}

document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg

var bustcache=(!this.bustajaxcache)? “” : (pageurl.indexOf(“?”)!=-1)? “&”+new Date().getTime() : “?”+new Date().getTime()

page_request.open(‘GET’, pageurl+bustcache, true)

page_request.send(null)

},





ajaxpopulate:function(page_request, setting){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(“http”)==-1)){

document.getElementById(setting.id).innerHTML=page_request.responseText

this.buildpaginate(setting)

}

},





buildcontentdivs:function(setting){

var alldivs=document.getElementById(setting.id).getElementsByTagName(“div”)

for (var i=0; i<alldivs.length; i++){

if (this.css(alldivs[i], “contentdiv”, “check”)){ //check for DIVs with class “contentdiv”

setting.contentdivs.push(alldivs[i])

alldivs[i].style.display=”none” //collapse all content DIVs to begin with

}

}

},





buildpaginate:function(setting){

this.buildcontentdivs(setting)

var sliderdiv=document.getElementById(setting.id)

var pdiv=document.getElementById(“paginate-”+setting.id)

var phtml=”"

var toc=setting.toc

var nextprev=setting.nextprev

if (typeof toc==”string” && toc!=”markup” || typeof toc==”object”){

for (var i=1; i<=setting.contentdivs.length; i++){

phtml+=’<a href=”#’+i+’” class=”toc”>’+(typeof toc==”string”? toc.replace(/#increment/, i) : toc[i-1])+’</a> ‘

}

phtml=(nextprev[0]!=”? ‘<a href=”#prev” class=”prev”>’+nextprev[0]+’</a> ‘ : ”) + phtml + (nextprev[1]!=”? ‘<a href=”#next” class=”next”>’+nextprev[1]+’</a>’ : ”)

pdiv.innerHTML=phtml

}

var pdivlinks=pdiv.getElementsByTagName(“a”)

var toclinkscount=0 //var to keep track of actual # of toc links

for (var i=0; i<pdivlinks.length; i++){

if (this.css(pdivlinks[i], “toc”, “check”)){

if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)

pdivlinks[i].style.display=”none” //hide this toc link

continue

}

pdivlinks[i].setAttribute(“rel”, ++toclinkscount) //store page number inside toc link

pdivlinks[i][setting.revealtype]=function(){

featuredcontentslider.turnpage(setting, this.getAttribute(“rel”))

return false

}

setting.toclinks.push(pdivlinks[i])

}

else if (this.css(pdivlinks[i], “prev”, “check”) || this.css(pdivlinks[i], “next”, “check”)){ //check for links with class “prev” or “next”

pdivlinks[i].onclick=function(){

featuredcontentslider.turnpage(setting, this.className)

return false

}

}

}

this.turnpage(setting, setting.currentpage, true)

if (setting.autorotate[0]){ //if auto rotate enabled

pdiv[setting.revealtype]=function(){

featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

}

sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on

featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

}

setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation

this.autorotate(setting)

}

},





urlparamselect:function(fcsid){

var result=window.location.search.match(new RegExp(fcsid+”=(\\d+)”, “i”)) //check for “?featuredcontentsliderid=2″ in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab’s index

},





turnpage:function(setting, thepage, autocall){

var currentpage=setting.currentpage //current page # before change

var totalpages=setting.contentdivs.length

var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)

turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust

if (turntopage==setting.currentpage && typeof autocall==”undefined”) //if a pagination link is clicked on repeatedly

return

setting.currentpage=turntopage

setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex

this.cleartimer(setting, window["fcsfade"+setting.id])

setting.cacheprevpage=setting.prevpage

if (setting.enablefade[0]==true){

setting.curopacity=0

this.fadeup(setting)

}

if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)

setting.contentdivs[setting.prevpage-1].style.display=”none” //collapse last content div shown (it was set to “block”)

setting.onChange(setting.prevpage, setting.currentpage)

}

setting.contentdivs[turntopage-1].style.visibility=”visible”

setting.contentdivs[turntopage-1].style.display=”block”

if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via “markup”, and user omitted)

this.css(setting.toclinks[setting.prevpage-1], “selected”, “remove”)

if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via “markup”, and user omitted)

this.css(setting.toclinks[turntopage-1], “selected”, “add”)

setting.prevpage=turntopage

if (this.enablepersist)

this.setCookie(“fcspersist”+setting.id, turntopage)

},





setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)

var targetobject=setting.contentdivs[setting.currentpage-1]

if (targetobject.filters && targetobject.filters[0]){ //IE syntax

if (typeof targetobject.filters[0].opacity==”number”) //IE6

targetobject.filters[0].opacity=value*100

else //IE 5.5

targetobject.style.filter=”alpha(opacity=”+value*100+”)”

}

else if (typeof targetobject.style.MozOpacity!=”undefined”) //Old Mozilla syntax

targetobject.style.MozOpacity=value

else if (typeof targetobject.style.opacity!=”undefined”) //Standard opacity syntax

targetobject.style.opacity=value

setting.curopacity=value

},





fadeup:function(setting){

if (setting.curopacity<1){

this.setopacity(setting, setting.curopacity+setting.enablefade[1])

window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)

}

else{ //when fade is complete

if (setting.cacheprevpage!=setting.currentpage) //if previous content isn’t the same as the current shown div (happens the first time the page loads/ script is run)

setting.contentdivs[setting.cacheprevpage-1].style.display=”none” //collapse last content div shown (it was set to “block”)

setting.onChange(setting.cacheprevpage, setting.currentpage)

}

},





cleartimer:function(setting, timervar){

if (typeof timervar!=”undefined”){

clearTimeout(timervar)

clearInterval(timervar)

if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn’t the same as the current shown div

setting.contentdivs[setting.cacheprevpage-1].style.display=”none”

}

}

},





css:function(el, targetclass, action){

var needle=new RegExp(“(^|\\s+)”+targetclass+”($|\\s+)”, “ig”)

if (action==”check”)

return needle.test(el.className)

else if (action==”remove”)

el.className=el.className.replace(needle, “”)

else if (action==”add”)

el.className+=” “+targetclass

},





autorotate:function(setting){

window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, “next”)}, setting.autorotate[1])

},





getCookie:function(Name){

var re=new RegExp(Name+”=[^;]+”, “i”); //construct RE to search for target name/value pair

if (document.cookie.match(re)) //if cookie found

return document.cookie.match(re)[0].split(“=”)[1] //return its value

return null

},





setCookie:function(name, value){

document.cookie = name+”=”+value





},









init:function(setting){

var persistedpage=this.getCookie(“fcspersist”+setting.id) || 1

var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index

this.settingcaches[setting.id]=setting //cache “setting” object

setting.contentdivs=[]

setting.toclinks=[]

setting.topzindex=0

setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)

setting.prevpage=setting.currentpage

setting.revealtype=”on”+(setting.revealtype || “click”)

setting.curopacity=0

setting.onChange=setting.onChange || function(){}

if (setting.contentsource[0]==”inline”)

this.buildpaginate(setting)

if (setting.contentsource[0]==”ajax”)

this.ajaxconnect(setting)

}





}





//]]>

</script>





<style>

#slider4{

border: 2px solid #181818;

background: #ffffff;

margin-left: 9px;

}

#paginate-slider4{

border-color: #181818;

margin-left: 9px;

margin-top: 4px;

}

#paginate-slider4 a img{

width: 80px;

height: 60px;

border: 2px solid #181818;

margin-top: 5px;

}

#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{

border: 2px solid #ffc04e;

}

.sliderwrapper{

position: relative; /*leave as is*/

overflow: hidden; /*leave as is*/

border: 10px solid navy;

width: 515px; /*width of featured content slider*/

height: 335px;

}

.sliderwrapper .contentdiv{

visibility: hidden; /*leave as is*/

position: absolute; /*leave as is*/

left: 0; /*leave as is*/

top: 0; /*leave as is*/

padding: 5px;

background: white;

width: 515px; /*width of content DIVs within slider. Total width should equal slider's inner width */

height: 100%;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);

-moz-opacity: 1;

opacity: 1;

}

.pagination{

width: 515px; /*Width of pagination DIV. Total width should equal slider's outer width */

text-align: right;

background-color: #ffffff;

padding: 0px 5px;

}

.pagination a{

padding: 0 5px;

text-decoration: none;

color: #181818;

background: #ffffff;

}

.pagination a:hover, .pagination a.selected{

color: #181818;

background-color: #ffffff;

}

</style>

Schritt 2:
Dashboard ➜ Layout ➜ Gadget hinzufügen ➜ HTML/JavaScript und fügt den unten angegebenen code ein:

<div style=”float:left;”>

<div id=”slider4″ class=”sliderwrapper”>

<div style=”background: url(‘Your Image URL 1‘) center left no-repeat” class=”contentdiv”>

</div>

<div style=”background: url(‘Your Image URL 2‘) center left no-repeat” class=”contentdiv”>

</div>

<div style=”background: url(‘Your Image URL 3‘) center left no-repeat” class=”contentdiv”>

</div>

<div style=”background: url(‘Your Image URL 4‘) center left no-repeat” class=”contentdiv”>

</div>

<div style=”background: url(‘Your Image URL 5‘) center left no-repeat” class=”contentdiv”>

</div>



<div style=”background: url(‘Your Image URL 6‘) center left no-repeat” class=”contentdiv”>

</div>





</div>





<div id=”paginate-slider4″>





<a href=”Landing Page URL 1” class=”toc”><img alt=”IMAGE-1″ src=”Thumbnail URL 1“/></a>





<a href=”Landing Page URL 2” class=”toc”><img alt=”IMAGE-2″ src=”Thumbnail URL 2“/></a>





<a href=”Landing Page URL 3” class=”toc”><img alt=”IMAGE-3″ src=”Thumbnail URL 3“/></a>





<a href=”Landing Page URL 4” class=”toc”><img alt=”IMAGE-4″ src=”Thumbnail URL 4“/></a>





<a href=”Landing Page URL 5” class=”toc”><img alt=”IMAGE-5″ src=”Thumbnail URL 5“/></a>





<a href=”Landing Page URL 6” class=”toc”><img alt=”IMAGE-5″ src=”Thumbnail URL 6“/></a>





</div>





<script type=”text/javascript”>

featuredcontentslider.init({

id: “slider4″, //id of main slider DIV

contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

toc: “markup”, //Valid values: “#increment”, “markup”, ["label1", "label2", etc]

nextprev: ["", "Next"], //labels for “prev” and “next” links. Set to “” to hide.

revealtype: “mouseover”, //Behavior of pagination links to reveal the slides: “click” or “mouseover”

enablefade: [true, 0.1], //[true/false, fadedegree]

autorotate: [true, 5000], //[true/false, pausetime]

onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

}

})

</script>





</div>

Hier bitte ändern:
Your image URL die url des Bildes
Landing page URL die url des Beitrags
Thumbnail URL die thumbnail url (verkleinerte Bilder)

Star Ratings bei Blogger erstellen

noreply@blogger.com (Unknown) — Sat, 5 May 2012 06:05:00 +0200

Hallo, liebe Leser ich möchte euch heute erklären wie man Star Ratings oder auch Post Ratings genannt, schnell und einfach erstellt.

Was sind Star-Ratings?
Star Ratings sind die Sterne die bei der Google suche erscheinen die ihr sicherlich schonmal beim googlen gesehen habt.

oder ihr ihr schau mal selbst bei Google >Hier Klickern<<

Wozu braucht man Star-Ratings?
Star Ratings (Sternewertung) sind dazu da, dass die Besucher einen eindruck auf ihren Blog-Post haben, diese zeigen die Qualität des Artikels an. Außerdem sind diese SEO freundlich d.h. desto mehr Leser den Artikel als Positiv bewerten desto mehr crawlt Google ihr Blog.

Installation:
Ihr meldet euch bei Blogger unter dieser adresse an http://draft.blogger.com/
klickt dann auf:
Dashboard ➜ Layout ➜ Blogposts bearbeiten ➜ Haken setzen: Sternewertung

Wenn ihr nun ein Standart Template von Blogger verwendet müsste jetzt unter jedem Artikel die Sternewertung erscheinen.

Aber wenn ihr ein selbst hochgeladenes individuelles Template verwendet dann müsst ihr:

Dashboard ➜ Vorlage ➜ HTML bearbeiten ➜ Fortfahren ➜ Widget-Vorlagen komplett anzeigen (Haken setzten)

Diesen Code finden:
<p class='post-footer-line post-footer-line-3'>

wenn's den nicht gibt dann diesen:
<div class='post-footer-line post-footer-line-3'>

den gibts auch nicht? Dann diesen:
<data:post.body/>

und fügt diesen Code direkt darunter ein:

 <span class='star-ratings'>  

 <b:if cond='data:top.showStars'>  

 <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>  

 </b:if>  

 </span>

Vorlage speichern und fertig.

Html Sitemap erstellen bei Blogger

noreply@blogger.com (Unknown) — Fri, 4 May 2012 16:00:00 +0200

Hallo, liebe Leser ich möchte euch heute erklären wie man eine HTML Sitemap erstellt.

Sitemaps sind sehr wichtig für die Sucmaschinenoptimierung (SEO) es dient dazu das Google eure seiten schneller indexiert.

Bei Blogspot hat jedes Blog schon eine Sitemap vorinstalliert dies können Sie prüfen indem Sie ihrblog.blogspot.com/robots.txt aufrufen die unterste Zeile müsste nämlich so aussehen:
Sitemap: http://ihrblog.blogspot.com/feeds/posts/default?orderby=UPDATED

Nun aber wollen wir Google was gutes tun und erstellen eine voll automatische Html Sitemap.
Warum Html? Denn Google bevorzugt die Seiten die mit .html enden und indexiert diese ziemlich schnell.

Nun zur Installation:
Dashboard ➜ Seiten ➜ Neue Seite ➜ Leere Seite
Als Titel Sitemap eingeben, diesen Code einfügen und Veröffentlichen:

 <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>  

 <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Nun können Sie ihre vollautomatische Sitemap aufrufen indem Sie ihrblog/p/sitemap.html in die adressenzeile eingeben.
Fügen Sie ihre Sitemap in ihr Blog ein, so das es lesbar für Google ist.

Quelle

Breadcrumb Navigation für Blogger

noreply@blogger.com (Unknown) — Fri, 4 May 2012 07:32:00 +0200

Hallo, liebe Leser heute erklär ich euch wie man die "Breadcrumbs Navigation" erstellt.

Was sind Breadcrumbs und wofür sind sie gut?
Breadcrumbs sind labels die bei jedem Post über den den Artikel erscheinen eine art Navigation.
Gut sind diese auf jedenfall für die Suchmaschinenoptimierung (SEO)
also für unseren lieben Freund Google :)
Und für Besucher natürlich denn es sieht bei der Google Suche professionell und schick aus.

So würde es bei einem Artikel aussehen:

So sieht es bei der Google Suche aus:

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

findet den Code:
<b:include data='top' name='status-message'/>
und fügt diesen direkt darüber ein:
<b:include data='posts' name='breadcrumb'/>

findet den Code: (Wenn in eurem Template mehrere von diesem code sind dann finden den der am nächst möglichen der an den Code: b:include data="post" name="post"> ist)
<b:includable id='main' var='top'>

fügt direkt darüber diesen Code ein:

 <b:includable id='breadcrumb' var='posts'>  

<b:if cond='data:blog.homepageUrl != data:blog.url'>  

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home </a></span> » <span><data:blog.pageName/></span></div>  

<b:else/>  

<b:if cond='data:blog.pageType == &quot;item&quot;'>  

<!-- breadcrumb for the post page -->  

<b:loop values='data:posts' var='post'>  

<b:if cond='data:post.labels'>  

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>  

<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home </a></span>  

<b:loop values='data:post.labels' var='label'>  

» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>  

</b:loop>  

» <span><data:post.title/></span>  

</div>  

<b:else/>  

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home </a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>  

</b:if>  

</b:loop>  

<b:else/>  

<b:if cond='data:blog.pageType == &quot;archive&quot;'>  

<!-- breadcrumb for the label archive page and search pages.. -->  

<div class='breadcrumbs'>  

<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa </a></span> » <span>Zwischenzeit <data:blog.pageName/></span>  

</div>  

<b:else/>  

<b:if cond='data:blog.pageType == &quot;index&quot;'>  

<div class='breadcrumbs'>  

<b:if cond='data:blog.pageName == &quot;&quot;'>  

<span><a expr:href='data:blog.homepageUrl'>Home </a></span> » <span>Alle Posts</span>  

<b:else/>  

<span><a expr:href='data:blog.homepageUrl'>Home </a></span> » <span>Mit den Labels; <data:blog.pageName/></span>  

</b:if>  

</div>  

</b:if>  

</b:if>  

</b:if>  

</b:if>  

</b:if>  

</b:includable>

Zum Schluss findet den Code:
]]></b:skin>

Direkt darüber diesen CSS Code einfügen:

.breadcrumbs {  

padding:5px 5px 5px 0px;  

margin: 0px 0px 15px 0px;  

font-size:95%;  

line-height: 1.4em;  

border-bottom:3px double #e6e4e3;  

}

Google Suche für Posts

noreply@blogger.com (Unknown) — Fri, 4 May 2012 06:43:00 +0200

Hallo, liebe Leser heute werde ich euch erklären wie man für jeden einzelnen Artikel einen "Bei Google suchen" Button erstellt.

Es ist wichtig für die Suchmaschinenoptimierung (SEO), man kann sagen Sie senden automatisch einen Ping an Google und ihre Posts lassen sich dadurch schneller indexieren.

Kommen wir zur Sache, Sie gehen wie folgt vor..
Dashboard ➜ Vorlage ➜ HTML bearbeiten ➜ Fortfahren ➜ Widget-Vorlagen komplett anzeigen (Haken setzen)

findet den Code:
div class="postmeta-primary">

direkt darunter diesen Code einfügen:

 <a expr:href='&quot;http://www.google.de/search?hl=de&amp;q=&quot; +data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank' title='Bei Google Suchen'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidw3ED6GDs6gylaOpoFJTwzV9vbcAz1ch388sDEcn5Yhgbrj4-tGlR6YF33bKM0s23eQS6uj3y_a7YpzS_5yn7bmEKGfcDAb1HkO3k6FXsUWzCaxWrViYCFkzgA9IHNyipJ7vnnQV-jl8/s1600/google.gif'/></a>

Vorlage speichern.

Das wars auch schon nun müsste bei jeden ihrer Artikel ein Button erscheinen

CSS-Menü erstellen für Soziale Netzwerke

noreply@blogger.com (Unknown) — Tue, 1 May 2012 11:44:00 +0200

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

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

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

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

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

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

und fügt diesen code direkt über den b:skin code:

.sosyalmenu {  

  }  

 .sosyalmenu a{  

   background-image   : url(http://1.bp.blogspot.com/-Jx253mpITbY/T5u14T16d6I/AAAAAAAADsI/IX50RQLoqTk/s1600/sosyalmenu.png);  

   background-color   : transparent;  

   background-repeat  : no-repeat;  

   height            : 48px;  

   width            : 48px;  

   float             : left;  

   display           : block;  

   margin            : 0 5px 0 0;  

  }  

   

  #feedburner_png {  

   background-position : 0px -48px;  

  }  

   

  #feedburner_png:hover {  

   background-position : 0px 0px;  

  }  

   

  #googleplus_png {  

   background-position : -240px -48px;  

  }  

   

  #googleplus_png:hover {  

   background-position : -240px 0px;  

  }  

   

  #facebook_png {  

   background-position : -48px -48px;  

  }  

   

  #facebook_png:hover {  

   background-position : -48px 0px;  

  }  

   

  #twitter_png {  

   background-position : -144px -48px;  

  }  

   

  #twitter_png:hover {  

   background-position : -144px 0px;  

  }  

   

  #youtube_png {  

   background-position : -96px -48px;  

  }  

   

  #youtube_png:hover {  

   background-position : -96px 0px;  

  }  

   

  #linkedin_png {  

   background-position : -192px -48px;  

  }  

   

  #linkedin_png:hover {  

   background-position : -192px 0px;  

  }

Vorlage Speichern und Weiter

Dashboard ➜ Layout ➜ Gadget hinzufügen ➜ HTML/JavaScript und fügt den unten angegebenen code ein
(vergisst nicht eure URL's einzutragen)

 <div class='sosyalmenu'>  

 <a id='feedburner_png' href='FEEDBURNER URL' target='_blank' title='Abonnieren'></a>  

   

 <a id='googleplus_png' href='GOOGLE+ URL' target='_blank' title='Google+'></a>  

   

 <a id='facebook_png' href='FACEBOOK URL' target='_blank' title='Facebook'></a>  

   

 <a id='twitter_png' href='TWITTER URL' target='_blank' title=Twitter'></a>  

   

 <a id='youtube_png' href='YOUTUBE URL' target='_blank' title='Youtube'></a>  

   

 <a id='linkedin_png' href='LINKEDIN URL' target='_blank' title='Linkedin></a>  

 </div>

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

Seiten Navigation für Blogger

noreply@blogger.com (Unknown) — Mon, 30 Apr 2012 05:35:00 +0200

Bei den Standarteinstellungen von Blogger sieht die Page Navigation zu einfach aus. Mit dem Code den ich jetzt geben werde lässt es sich Profosionell und Schick aussehen, wer es mal probieren möchte geht wie folgt:

Bitte vorher eine Sicherung des Templates runterladen falls es doch nicht gefällt.

Dashboard>>>Vorlage>>>HTML bearbeiten>>>Fortfahren>>>Widget-Vorlagen komplett anzeigen (Haken setzen)

(Zum suchen Strg+F drücken und einfügen)
Findet den Code:
</body>

Fügt diesen Code direkt davor ein:

<style type="text/css">  

   .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}  

   .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAB324J9MdLR5KbNtIlyMkk1o-EvLMyJYt-ahWJbLTXh8jlGWcj_Lhp0KxAzee5jFz6VruJrXVYv3jiT-JDZER90Kfpet8moUqep1YdiZe6kBf6nMrw1UJjlL0AF8wJRkDqXyUXciNz4J/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}  

   .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}  

   .showpageOf{float:left;padding-top : 6px;}  

   .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXKiOZKiQK-dVuaffxidFueBUy_qgZuSrRgMA0pCtnaXpAunR6iSjyS7Yf-ZvJd7Li4XmaScVX6vPESrqxmJPHIx2KlG-GrpT60jY6kQpMYL5cABj7nBuJAnI8RQ6q6CGGgdj8Dj_sD5r/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}  

   .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXKiOZKiQK-dVuaffxidFueBUy_qgZuSrRgMA0pCtnaXpAunR6iSjyS7Yf-ZvJd7Li4XmaScVX6vPESrqxmJPHIx2KlG-GrpT60jY6kQpMYL5cABj7nBuJAnI8RQ6q6CGGgdj8Dj_sD5r/) no-repeat 0 100%;color : #fff;}  

   .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXKiOZKiQK-dVuaffxidFueBUy_qgZuSrRgMA0pCtnaXpAunR6iSjyS7Yf-ZvJd7Li4XmaScVX6vPESrqxmJPHIx2KlG-GrpT60jY6kQpMYL5cABj7nBuJAnI8RQ6q6CGGgdj8Dj_sD5r/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}  

   .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}  

 </style>  

 <script style='text/javascript'>  

 var pageCount=5;  

 var displayPageNum=1;  

 var upPageWord="Previous";  

 var downPageWord="Next";  

 </script>  

 <script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js"/>

Blogger Titel Einstellungen

noreply@blogger.com (Unknown) — Mon, 30 Apr 2012 04:48:00 +0200

Bei vielen Templates ist die SEO (Suchmaschinenoptimierung) noch nicht so richtig eingestellt, denn bei der Google suche erscheint in den meisten voreigestellten Templates so die Anzeige:
~~Blog Titel - Post Titel~~
Ihre Blog Beschreibung

Die optimale Einstellung müsste aber so aussehen:
Post Titel - Blog Titel
Ihre Blog Beschreibung

Laut erste variante würde der Besucher also nur den Titel ihres Blog's sehen bei Google er würde ihr Blog vielleicht nicht besuchen das es interessant für ihn klingen würde.

Laut zweite variante würde der Besucher genau das sehen wonach er gesucht hat und zwar den Post Titel also den Artikel. Kontrollieren Sie also wie es auf ihrem Blog aussieht.

(Zum schnelleren suchen der codes Strg+F kombination benutzen)
Wenn es der erste Fall ist löschen Sie alles zwischen den code:
<b:include data='blog' name='all-head-content'/>
bis:
<b:skin>

und ersetzten es mit diesem:

<b:if cond='data:blog.url == data:blog.homepageUrl'>  

 <meta content='BLOG BESCHREIBUNG' name='description'/>  

 <meta content='KEYWORDS' name='keywords'/>  

 </b:if>  

 <b:if cond='data:blog.pageType == &quot;index&quot;'>  

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

 <b:else/>  

 <title><data:blog.pageName/> ~ <data:blog.title/></title>  

 </b:if>

Facebook Share (Teilen) Button hinzufügen

noreply@blogger.com (Unknown) — Mon, 30 Apr 2012 03:26:00 +0200

Facebook Sharer ist ein schönes Werkzeug was im jeden Artikel unter den Posts erscheint. So können die Besucher den jeweiligen Artikel bei Facebook teilen.

Das heißt Werbung umsonst, und Sie können die Statistiken sehen wie oft der Artikel schon geteilt worden ist.

Dazu gehen Sie auf Dashboard>>>Vorlage>>>HTML bearbeiten>>>Fortfahren>>>Widget-Vorlagen komplett anzeigen (Haken setzen)

Kopieren Sie den code:

<a name="fb_share" type="button_count"  

 href="http://www.facebook.com/sharer.php">Teilen</a>  

 <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"   

     type="text/javascript">  

 </script>

und platzieren Sie es über diesem code:
(können Sie am schnellsten finden indem Sie Strg+F drücken und dort einfügen)
<div class='post-footer'>

Vorlage speichern! Nun müsste unter jedem ihrer Artikel der "Teilen" Button vorhanden sein.

Lassen Sie ihr Blog schneller öffnen

noreply@blogger.com (Unknown) — Mon, 30 Apr 2012 02:22:00 +0200

Bloggen ist für die einen ein Hobby für die anderen schon ein Job womit man sich sen Geld verdienen kann.
Egal wie man die Sache betrachtet jeder schenkt wertvolle Zeit in sein Blog um das beste daraus zu machen.

Da die schnelligkeit des Blogs ein wichtiger Faktor ist wollte euch erklären nach meinen erfahrungen was in ein Blog sein darf und was nicht damit es sich schneller öffnet.

Warum sollte ein Blog sich schnell öffnen?

Wichtigster Faktor "Google", denn Google liebt Websites die schnell und übersichtlich sind. Wenn ihr euer Blog in ein Datenmüll verwandelt mit irgendwelchen Flash Animationen oder nervige Pop-Ups oder zu grosse Bilder usw. da wartet der googlebot nicht lange und verlässt euer Blog das heisst Seiten werden nicht indexiert.
Noch ein sehr wichtiger Faktor die "Besucher" denn die haben auch nicht ewig Zeit wenn die Seite lange am laden ist tätigt man einfach den zurück Button und weg ist man.

Fügen Sie Jump-Breaks in ihre Posts
Das heisst also ungefähr nach 50-60 Wörtern den Jump-Break (Weiterlesen) einfügen, wenn Sie zuviele Posts ohne Jump Break auf ihrer Haupseite haben bedeutet das, mehr Wörter mehr Bilder also mehr Arbeit für den Googlebot was ihn überhaup nicht gefällt, wenn Sie dann pech haben verlässt der ihr Blog ohne eine Seite zu indexieren.

Also.. den unten angezeigten Jump Break (Weiterlesen) code bei jedem Artikel einfügen.


Sidebar richtig nutzen
Es sollten keine Flash Animationen z.B. wie Uhren oder ähnliches sein, sondern informationen über ihr Blog wie Text Kategorien oder Links zu ihrer Sozialen Netzwerke wie Facebook, Twitter und co.

Verkleinern Sie die Bilder

Artikelilder gehören zu jedem Artikel, doch es sollten nicht zu grosse Bilder sein.
Laden Sie ihre Bilder als "Klein" oder "Mittel" hoch.

Background Image verkleinern
Vom optischen sieht ein Blog mit einem Hintergrundbild schön aus aber man sollte mal die grösse abchecken weil ein zu grosses Hintergrundbild macht ihr Blog langsamer. Man sollte lieber ein kleines Bild wählen das beim nebeneinanderkommen einen weiderholeffekt ausstrahlt. Ich allerdings empfehle kein Hintergrundbild sondern die passende Farbe als Hintergrund.

Werbung richtig platzieren
Werbung bedeutet zwar Geld aber bei der Auswahl von Werbung sollten Sie vorsichtig sein, es sollte nicht an jeder Ecke ein Banner oder Pop-Up platziert sein das macht ihr Blog zu einer Schnecke, außerdem mögen die Besucher und der Googlebot das nicht, ihr Blog sollte rein aussehen damit man den Überblick nicht verliert.

Test Werkzeuge benutzen
Einfach mal selber testen wie schnell euer Blog sich öffnet, davor aber vorher die Cookies und Internetcache löschen, schaut was sich zuerst öffnet und was länger braucht, was ihr eventuell daran noch ändern könnt.
Mit Webmaster-Tools könnt ihr analysieren welche probleme vorhanden sind ob jemand euer Blog verlinkt hat und natürlich die geschwindigkeit testen

Kategorien erstellen bei Blogger

noreply@blogger.com (Unknown) — Wed, 18 Apr 2012 16:07:00 +0200

Kategorien erstellen bei Blogger:
So wirds gemacht...
Viele kennen das Problem man hat sich ein Blog erstellt und auch schon ein paar Posts geschrieben, aber da fehlt etwas; die Kategorien! Wofür man die Kategorien braucht ist ganz einfach,
Besucher die auf ihr Blog kommen wollen Übersicht nicht nur das die Kategorien gehören einfach dazu zum bloggen. Es sieht nicht nur übersichtlich und Schick aus sondern auch professionell.

Es gibt zwei Varianten Kategorien bei Blogspot hinzu zufügen:

1- "Per Labels" und zwar geht ihr auf "Dashboard>>>Layout>>>Gadget hizufügen>>>Labels"
Titel ändern: von Labels auf Kategorien,
Anzeigen: Ausgewählte Labels dann auf bearbeiten klicken und die Hacken setzen auf die Labels die ihr als kategorie haben wollt.

Tipp
2- Per HTML dazu geht ihr auf "Dashboard>>>Layout>>>Gadget hinzufügen>>>HTML/JavaScript" wählen.
Titel: Kategorien
Content:

<a href="Label Link">Kategorie Name1</a>  

 <a href="Label Link">Kategorie Name2</a>  

 <a href="Label Link">Kategorie Name3</a>  

 <a href="Label Link">Kategorie Name4</a>

Diesen Code könnt ihr erweitern so oft ihr wollt immer nach dem Schema.
Mein Tipp ist die zweite Variante da ihr es individuell gestalten könnt (Fett,Kursiv,Unterstrichen usw,)

AddThis Soziales Netzwerk Buttons hinzufügen

noreply@blogger.com (Unknown) — Tue, 27 Mar 2012 06:37:00 +0200

Blogger und Webseitenbetreiber bekommen ihre Besucher nicht nur von Suchmaschinen wie Google oder Yahoo, auch von Sozialen Netzwerken wie Facebook oder Twitter kann man auch sehr viele Besucher erzielen.

Helfen Sie ihren Besuchern ihre Posts zu Teilen AddThis ist einer der besten!

Durch einen kleinen code den Sie von AddThis erhalten den Sie in das "HTML" einfügen, werden 178 Soziale Netzwerke freigeschaltet wo ihre Besucher nur mit einem klick den Artikel teilen können.

Das ist nicht alles sobald Sie sich bei AddThis angemeldet haben können in Statistiken einsehen was die Besucher geteilt haben wie oft und bei welchem Netzwerk es geshart haben.
Um AddThis zu nutzen melden Sie sich hier an

“1. Select your service.” Sie müssen den Service wählen indem fall Blogger
“2. Select a button style.” Buttons auswählen
“3. Do you want analytics?” wenn Sie "no" wählen bekommen sie keine Statistiken zusehen, wenn Sie aber "yes" wählen können Sie in die Statistiken einsehen müssen sich aber auch registrieren.
“4. You're done!”
“5. ”Get Your Button” klicken

sobald sie es angeklickt haben kommt so ein ähnlicher code:

<!-- AddThis Button BEGIN --> <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4b18b4862da7e904"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4b18b4862da7e904"></script> <!-- AddThis Button END –>

Diesen code müssen Sie kopieren dann auf: Dashboard>>>Design>>>HTML bearbeiten>>>Widget-Vorlagen komplett anzeigen klicken.
Über den code einfügen
<div class='post-footer'>

Tipp: Sie können mit der Tastenkombination "Strg +F" den code schneller aufsuchen.

Wichtig: Jedesmal bevor Sie Änderungen an der HTML vornehmen speichern Sie ihr Template ab. Dazu einfach auf "Vollständige Vorlage herunterladen" klicken.

Gadget hinzufügen auf Blogger

noreply@blogger.com (Unknown) — Tue, 20 Mar 2012 09:17:00 +0100

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

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

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

1.Variante

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

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

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

2.Variante

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

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

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

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