Questo widget vi permetterà di risparimiare spazio nella sidebar con l'aggiunta di questi elementi importanti in un unico spazio dedicato cosa che sta diventando indispensabile nei nuovi blog
E' necessario modificare il modello di Blogger per installare questo widget ma è certamente un utilissimo elemento per il vostro blog.
I passi neccessari sono 3:
- Installare il nucleo Javacript library object.
- Installare Yahoo! Tab View requirements.
- Installare il Widget.
Primo passo: Installare il nucleo Javacript library object
Prima di tutto, assicuratevi che le impostazioni del vostro feed siano cosi:
inoltre, assicuratevi anche che "Impostazioni"->"Archiviazione", "Attivare pagine di post?" sia "Si"
Copiate ed incollate il seguente codice Javascript tra il tag </b:skin> e </head>:
<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
// "cb" is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {
// search function requires these parameters:
// 1. query: a blogger address, such as "bloggerperinulli.blogspot.com",
// 2. type: type of return data, either "comments" or "posts",
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.
search: function(query, type, start, increment, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&start-index='
+ start + '&max-results=' + increment + '&callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},
// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as "bloggerperinulli.blogspot.com",
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&callback=' + func + '&orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},
// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},
// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},
// getLink return a href link if "name" matches the content inside "a" tags) of the link
getLink: function(entry, name) {
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},
// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},
// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},
// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},
// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + " Widget by <a href='http://bloggerperinulli.blogspot.com" + "'>Denvoizer</a>";
}
};
</script>
Salvate il vostro template.
Secondo Passo:Installare Yahoo! Tab View requirements
Copiate ed incollate questo codice subito dopo il codice inserito nel primo passo.
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>
<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>
<style type='text/css'>
.yui-content {
padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}
.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>
Salvate il vostro template.
Terzo passo: Installare il Widget
Aggiungete questo codice tra qualcunque tag di tipo "b:widget".
<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>BLOGGER PER I NULLI</h2>
<div class='yui-navset' id='multiTab1'/>
</div>
<!--
<div>
<h2>Hackosphere</h2>
<div class='yui-navset' id='multiTab2'/>
</div>
-->
</div>
<div id='103'/>
</div>
<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');
function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;
if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;
text += "<div id='" + label + "'><ul>";
var numberPost = (json.feed.entry.length <= nPost) ?
json.feed.entry.length : nPost;
for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "<a href='" + cb.getLink(entry, "alternate")
+ "'>" + cb.getTitle(entry) + "</li>";
}
text += '</ul></div>';
tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));
}
var blog1 = "bloggerperinulli.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['prima etichetta', 'seconda etichetta','terza etichetta'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');
// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');
// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');
/*
var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');
// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');
// Preferred Labels
for (var i=0; i < labels2.length; i++)
if (labels2[i]) cb.searchLabel("bloggerperinulli.blogspot.com", labels2[i], 'listTab2');
*/
</script>
</b:includable>
</b:widget>
Salvate il vostro template.
Dopo aver esequinto i primi 3 semplici passi, è¨ rimasto da cambiare ed impostare le informazioni del proprio blog:
per cambiare il titolo, cercate questa linea:
<h2>blogger per i nulli</b>
per cambiare le etichette:
var labels1 = ['prima etichetta', 'seconda etichetta','terza etichetta'];
per cambiare il numero massimo di righe per ogni cella:
var nPost = 10;
ed in fine, METTETE IL LINK DEL VOSTRO BLOG:
blog1 = "bloggerperinulli.blogspot.com";
Tutto qua! semplice no?
Un ringraziamento a Hocto
Post
ciao, posso chiederti un favore? in pratica il mio blog sulle scritte dei post si presenta una riga che taglia tutte le scritte, ora con firefox questo problema non si verifica ma con explorer e chrome purtroppo si, come posso fare per eliminare questo problema? ti prego aiutami:-(....l'indirizzo del mio blog e' http://symbianstreet.blogspot.com
se lo visiti per vedere il problema puoi lasciarmi un commento su come sistemare la situazione? ti ringrazio tantissimo ciao da psyco killer
Ciao Psyco killer...
prova a togliere questo pezzo di codice:
<script language="JavaScript"> var code = '';
var now = new Date();
var nIndex = now.getTime();
document.write('<s cript src="http://www.bannerexplosion.it/ads.asp?id=8850&nocache=' + nIndex + '">');
document.write('</+>');
</script>
<script language="JavaScript">document.write(code);</script>
vedrai che tutto tornera apposto.
Omar
CIAO OMAR, INTANTO TI RINGRAZIO PER L'IMMEDIATA RISPOSTA CHE GIA' PER ME VALE TANTISSIMO, PURTROPPO QUESTA PORZIONE DI CODICE NON RIESCO A TROVARLA, NEMMENO SE FACCIO ESPANDI MODELLI WIDJET:-(
HAI PERCASO QUALCHE ALTRO SUGGERIMENTO?
STA COSA MI STA FACENDO IMPAZZIRE....
SCUSAMI TANTO PER L'INVADENZA, MA CREDIMI NON CI DORMO QUASI LA NOTTE...
GRAZIE MILLE
Ciao PsYcO KiLLeR...
innanzitutto sei il ben venuto su Blogger per i nulli, e devi sapere che per me ed i miei colleghi è un piacere dare una mano a chi ne ha bisogno...
per quanto riguarda il codice, cerca di trovare questa riga:
<h2 class='title'>SYMBIANSTREET E' SEGNALATO DA:</h2>
il codice javascript dovrebbe essere qualche riga più sotto... qualcosa di questo tipo
<!------- BannerExplosion ------------->
<div align="center"><script language="JavaScript"> var code = '';
var now = new Date();
var nIndex = now.getTime();
document.write('<s cript src="http://www.bannerexplosion.it/ads.asp?id=8850&nocache=' + nIndex + '">');
document.write('</+>');
</script>
<script language="JavaScript">document.write(code);</script><br/>
<a href="http://www.bannerexplosion.it">BannerExplosion.it </a></div>
<!--------- End BannerExplosion --------------->
se non riesci a trovare questo codice puoi sempre inviarmi il codice Template del tuo blog e cercherò di risovere il problema.
Omar.
Blogger per i nulli
OMAR NULLA DA FARE, NON RIESCO A TROVARLO, HO PROVATO A MANDARTI IL CODICE DEL MIO TEMPLATE MA NON RIESCO....MI POTRESTI DIRE COME FARE PER POSTARTI IL CODICE?
VI RINGRAZIO TANTISSIMO, SIETE GENTILISSIMI PERALTRO AVEVA GIA' UN PO' CHE SEGUIVO IL VOSTRO BLOG, MOLTE COSE LE HO IMPARATE GRAZIE A VOI;-)
Ciao Psyco killer...
Ti ringraziamo per i complimenti... per quanto riguarda il codice, puoi mandarci il file .xml su questo indirizzo: bloggerperinulli@yahoo.it
OMAR NON CI SONO COMPLIMENTI CHE POSSANO BASTARE, SIETE VERAMENTE GENTE IN GAMBA E SERIA, QUESTO DICE TUTTO;-)
IO HO APPENA MANDATO UN E-MAIL ALLA VOSTRA CASELLA DI POSTA CHE MI AVETE SEGNALATO...
INTITOLATA "LAYOUT SYMBIANSTREET"
RINGRAZIO TE E TUTTO IL TEAM DI BLOGGER PER I NULLI...
BUONA GIORNATA AMICI
Ciao sto cercando di fare una Tag Board per metterci le parole chiave del mio sito in java ma il lavoro è lungo potresti dirmi più o meno i punti da sviluppare.
Un'altra domanda, quanti annunci adsense posso inserire nel blog, ovvero quanti widget banner?
@southbassthard
I widget banner sono massimo 3 a quanto pare.
per quanto riguarda la Tag Borad, scrivero prossimamente un articolo spiegando i passaggi necessari per crearla.
(scusa di averti risposto in ritardo; avevo pianificato di rispondere a questa domanda tempo fà con tutta la spiegazione del Tag Board ma ho deciso di consacrare un articolo al riguardo)
Ciao, volevo chiederti un favore, ho seguito questa guida: http://technoburger.net/blogger-blogspot-heading ora nel mio blog vedo delle scritte strane. Il blog è damicoilaria.blogspot.com . La prego mi aiuti le ho provate tutte non so come fare! Grazie
Ciao Jacopo,
Non vedo nessuna scritta strana nel suo blog!
cmq ora cerchero' di provare questa guida e vediamo che viene fuori :)