Ecco una bella notizia per coloro che cercano di avere una form per commenti subito sotto un articolo. Metodo gia supportato da Wordpress.



Se volete ottenere un risultato del genere seguite questi passi:

Come si può aggiungere una comment form subito sotto gli articoli di blogger?
Primo passo:
1. entrate in modalità Blogger Draft
2.Impostazioni->Commenti: fate la modifica riportato sull'immagine qui sotto

3. Fatto! Ora dovrebbe visulizzare una forma per i commenti subito sotto l'articolo. Se non è il caso fate la seguente modifica. (PASSO DUE)

Secondo passo:
1. Layout->modifica HTML (vi consiglio di fare un backup del vostro template)
2. Selezionate la voce Espandi i modelli widget
3 Cercate il seguente codice:


<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</p>

4. Sostituitelo con il seguente:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>

5. Salvate il vostro template. Ed il gioco è fatto!

Ecco a voi un metodo semplice ed efficace per poter visualizzare gli vostri ultimi articoli postati, questo metodo vi consente anche di poter scegliere il numero di articoli da visualizzare.

Come si può vedere dall'immagine sottostante esistono due opzioni:


Primo passo: Scegliere il codice

Opzione A:


<script style="text/javascript" src="http://www.presssalad.com/filecab/rpost-english.js"></script><script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="INDIRIZZO DEL VOSTRO BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script><scriqt><span style="font-size:80%;"><!--non cancellare-->↑ Usa questo <a href="http://" title="ultimi post">Widget</a>!</span></scriqt>



Opzione B: (solo titolo articolo)

<script style="text/javascript" src="http://www.presssalad.com/filecab/rpost-english2.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="INDIRIZZO DEL VOSTRO BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script><scriqt><span style="font-size:80%;"><!--DontEdit-->↑ Usa questo <a href="http://" title="Recent Posts Widget">Widget</a>!</span></scriqt>


Secondo passo: L'installazione

1.Layout->Elementi pagina->aggiungi un gadget->HTML/JavaScript.
2.Copiate ed incollate il codice JavaScript nella finestra HTML/JavaScript.
3.Cercate questa linea

...script src="INDIRIZZO DEL VOSTRO BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"...

E sostituite INDIRIZZO DEL VOSTRO BLOG con il votrso indirizzo effettivo.

4.Aggiungete magari un titolo e Salvate.

Semplice no? :D

Ora per poter cambiare il numero di articoli da visualizzare cercate questa variabile … var numposts = 5;var… e mettete al posto di 5 il numero che vi pare!

sorgente: madtomatoe

Abbiamo gia postato una articolo dedicato ai famosi post espandibili; la possibilità di "troncare" gli articoli che si trovano sulla home page aggiungendo un pulsante oppure un link del tipo "leggi tutto l'articolo" per aprirlo interamente.
Oggi ,cari amici, ho per voi un nuovo e semplicissimo metodo per creare quest ultimi, un metodo creato da Mohamed Rias.
le novità sono:

L'impostazione dell'articolo viene fatta in AUTOMATICO: non c'è più bisogno d'inserire lo span

<span id="fullpost">

</span>
come spiegato in quest articolo

La creazione automatica dei thumbnails : l'anteprima di un'immagine più grande (presente nello stesso articolo ) presentata in formato ridotto.

Ora vediamo quali sono i passi da seguire:
Primo passo: Aggiungere il codice JavaScript nell'Header

Layout->Modifica HTML
Cercate il seguente tab: </head> -e non /header-(grazie a Dino per la segnalazione ;-) )
Copiate ed incollate il seguente codice immediatamente sopra questo tag.


<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src='http://www.smashingtips.com/wp-content/uploads/2009/05/read-more.js' type='text/javascript'/>

Salvate il vostro template.

Ultimo passo: Aggiungere il codice nella parte corrispondente al post
selezionate la voce :"Espandi i modelli widget"
Ora cercate la seguente riga di codice : <p><data:post.body/></p>
E sostituitela con il seguente codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'><img src='http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/></a></span></div>
</b:if>

Salvate il vostro template.

ecco a voi un anteprima del risultato finale:

Spero che sia tutto chiaro... :-)
Aggiornamento 7/06/2009:
per poter cambiare la dimensione del Thumbnail (la foto "anteprima") basta cambiare questi due valori:
img_thumb_height = 130 (per l'altezza)
img_thumb_width = 281 (per la larghezza)

Per cambiare il pulsante READ MORE cercate questa riga nel secondo blocco di codice:
<img src='http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/>
potete mettere l'indirizzo di un'immagine oppure cancellare questa riga e sostituirla con un semplice "leggi intero articolo".

Questo widget vi permette di visualizzare il vostri articoli / commenti più recenti oppure articoli di determinate categorie utilizzando una "tab-view" widget, come questa:

come installare una tab view, blogger per i nulli

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:

  1. Installare il nucleo Javacript library object.
  2. Installare Yahoo! Tab View requirements.
  3. Installare il Widget.

Primo passo: Installare il nucleo Javacript library object
Prima di tutto, assicuratevi che le impostazioni del vostro feed siano cosi:
come installare una tab view, blogger per i nulli

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&amp;start-index='
+ start + '&amp;max-results=' + increment + '&amp;callback=' + func + '&amp;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&amp;callback=' + func + '&amp;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 &lt; 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 &lt; 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 &lt;a href='http://bloggerperinulli.blogspot.com" + "'&gt;Denvoizer&lt;/a&gt;";
}
};
</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 &lt;= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i &lt; numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "&lt;a href='" + cb.getLink(entry, "alternate")
+ "'&gt;" + 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 &lt; 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 &lt; 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

Uno dei problemi più segnalati dai Bloggers è quello di perdere i propri Widgets quando si vuole cambiare l'aspetto del proprio blog, cosa sicuramente non gradita a causa del fatto che bisogna ricreare tutti i Widget uno per uno!!!!!!!!

Esiste un metodo per fare il backup ai nostri Widgets?

La risposta è SI. Possiamo fare il backup dei nostri widgets prima di cambiare il template del nostro blog.

Come si fa il backup dei Widgets?

è molto semplice; prima di cambiare il template cercate il codice che corrisponde ai vostri widgets senza selezionare la voce: Espandi i modelli widget.

Selezionate il codice Widget come mostrato qui sotto:


Salvate il codice corrispondete a questi Widgets ( sul blocco note ad esempio ).

A questo punto potete caricare il vostro nuovo template. Cliccando su carica vi dovrebbe apparireun risultato di questo tipo:



A questo punto NON CONFERMATE IL CARICAMENTO ma cercate questo codice <b:widget id=', Salvare il codice Widgets gia copia sul blocco note subito sotto questo codice.

A questo punto SALVATE il vostro template.
Ed è tutto!

Spero che sia tutto facile!

Uno speciale ringraziamento a Mohammed di http://www.techieblogger.com.


Creare una barra di ricerca su blogger non è mai stato cosi facile!.
In realtà esistono 3 modi(tipi) di barre di ricerca. Ma in quest'articolo ci concentreremo su quella di tipo "custom search form " ovvero una barra di ricerca che può essere personalizzata mediante CSS.

1) Layout->Elementi di pagina.
2) cliccate su Aggiungi un Gadget di tipo HTML/JavaScript ed incollate il seguente codice:


<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>


Dovrebbe venire un risultato di questo tipo:


Spero che vi sia tutto chiaro.

-Aggiornato il 15 maggio 2009-

Se per caso non siete riusciti a spostare il vostro blog a sinistra con il metodo descritto precedentemente, cercate di fare la stessa modifica all'attributo BODY (in CSS)
dovrebbe essere una cosa di questo tipo:


body{margin:0px auto 0px; padding:0px;font-family:Arial,Helvetica,sans-serif; font-size:12px; color:$bodytextcolor; background:$bgcolor; width:990px}


-Post Originale-
Per Spostare, allineare, il proprio blog a sinistra bisogna interaggire solo sul codice CSS.
Prima di tutto vi invito a fare un backup del vostro Template:
Layout->Modifica HTML-> Salva Modello.
Cercate nel vostro codice HTML questo frammento di Codice:

#outer-wrapper {
padding-left: 200px;
padding-right: 190px;
text-align: left;
xxxxxxxxxxxxxxxxxxxx
border-top: 0;
overflow: hidden;
}

Questo contiene l'intero Blog, aggiungendo le seguenti due righe di codice l'intero blog si sposterà a sinistra lasciando un ampio spazio a destra dove si può creare un'altra colonna ad esempio.
Queste due righe vanno messi al posto delle xxxxxxxxxxxxxxxxxxxxxxxxx


float:left;
margin-left:20px;


Per creare una nuova colonna a destra potete copiare ed incollare questo pezzo di codice:


#rightcolumn {
float:right;
margin-right:20px;
}

ed inseritelo subito sotto il tag <body> come mostrato qui sotto:

<body>
<div id="rightcolumn"> </div>

Tutto qua :-).
Se avete qualche dubbio non esitate a postarlo.


Si tratta di un template creato dall'ingegnere Antonio Luppetti e con un grande generosità ( da ingegneri ) l'ha offerto al pubblico GRATIS!
Tenete presente che questo blog è di tipo avanzato, perciò bisogna essere abbastanza familiari con i codici HTML per poterlo installare correttemente.

comunque sia vi invito sempre a provarlo.
Live Demo | Scarica questo template