Donnerstag, 10. Mai 2012

jQuery SlideShow integrieren

| |
0 Kommentare
jQuery SlideShow intergrieren
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:
SlideShow

(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)
Weiterlesen

Samstag, 5. Mai 2012

Star Ratings bei Blogger erstellen

| |
1 Kommentare
Star Ratings bei Blogger erstellen
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.




Sternewertung Google

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
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.
Weiterlesen

Freitag, 4. Mai 2012

Html Sitemap erstellen bei Blogger

| |
9 Kommentare
Sitemap
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
Weiterlesen

Breadcrumb Navigation für Blogger

| |
0 Kommentare
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:
Breadcrumps



So sieht es bei der Google Suche aus:
Breadcrumps Google

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;
}

Weiterlesen

Google Suche für Posts

| |
6 Kommentare
Google Suche für Posts
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='http://3.bp.blogspot.com/-M02b9ihbokY/T4EGIrQB5cI/AAAAAAAABD0/P0ZaN8EN_0o/s1600/google.gif'/></a>
Vorlage speichern.

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