Inserire una sezione social + rss + casella di ricerca in blogger

In questo post voglio spiegarti come inserire all'interno del tuo blog su blogger una bellissima e utilissima sezione per la ricerca, per l'iscrizione ai feed, l'iscrizione alla mail, i link al tuo profilo di Twitter e facebook e i pulsanti per la condivisione in tutti i principali social network (Digg,Twitter,Facebook,Stumbleupon,Delicious).

Il tutto in modo quasi automatico, basta solamente cambiare qualche parte di codice.

Come inserirla:

1- Vai su Design --> modifica HTML

2- Espandi i modelli Widget e fai un backup del template

3- Ora cerca il tag </head> e incolla appena prima il codice che trovi qui:

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.
.addthis_toolbox .custom_images a{width:32px;height:32px
;addthis_toolbox .custom_images a img{opacity:0.85}
padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}





.rssbox a{c
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7
;olor:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
s:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radi
u.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
er-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-bor
d1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

4- Salva

5- Ora vai su Design --> Elementi pagina e aggiungi dove preferisci un elemento tipo html/javascript

6- Incollaci all'interno questo codice:

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4juf-jg11bZgRNPIcH8snDlE85IgUuxgDHiTTaSO9uxjWqGz9Fg7j_9XQajwlfh3Dp_RhEQGWmahHT9EuCyAhZUpXD2hZ5IgfwBtFGGx0DrSi16e2hgMoVG8cou6h7VomqvG1H1CtgBfU/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
<a href="http://feeds.feedburner.com
/
</div></td>
<td><div class="emailsbox">
a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkUy4SxWgasWF0Yf1VZUWh7HW6pISR03UUvzkTavlMMcCWNOvBfeHdNVYkvkYTwI34pog83MWSYBUKyk0uz4lo-nco9m8xybQofMXCuuIfFoIyAdMyxpp2ja_OhoHbRre7WfOLn5kN_ATY/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
<a href="http://feedburner.google.com/fb
/
</div></td>
</tr><tr>
box">
<a href="http://twitte
<td><div class="twitte
rr.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIq8EfXH2e6dufs-P2_JEGrQEOu3ykY3YnFSME-R2CIYKTzdlJ8hPkcW5_-Li9qDi6CSygqJG-lERKsG8IblJEQeiIpJvMFEMACzzZBeVoGlVKtlkn4qHPhq94rEglsTbgY65ifQodDjZ/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCoXZLd6aX2gMzslDNRjWVGkLc2PgFY_mRP5IO4bu6R27Wda9ayCAoVGj-KwD8QAf05zKy_FTGMsQgO5MivYwD55Z15jCLMx4XrYrXA_BjYXn55PVLNeTvytasQtQXrqJKwviCBst0D13r/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
<a href="http://www.facebook.com
/
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
s' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjlL9m4inWH9hvgn2ogPGPyMMVMuuxHJBzxgwHnq1CtOdXJ2FarQ3nx1HdGNxeVOtlZadMCy4eYNe2FLX7-oTSFwNbo09k3X4sMPwUySXoSsEpoavndWIUldEKW36HOXUw0vMC4hl4EDw/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Fa
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbPMj4euVArEhVxBA-YSIBScf_VJWHtN-CC6rNsyIhMboLjzVDA3waNvwn4vW2q-VBbgytlCpL39pIrVAKGavSQ-fLsbnpH-GDrmFyYNmahP_TzP-hR1HYyn1mzkp1EWNkUk4wdfNGQ9o/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicio
ucebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQDhhcJFdjGULOEzudQxG148MKAvSw3fiJzSy3spEAsg-IMFbpWRetQW57SQwCNJSkKnwXSrWneUrhVyh13ohv3vMy3zP2bI_LF7QjexjpUaCd7MXS-W9EiovrryBIeub9p_whz7LqCs/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemPhUuakwgpoMk_MdNaAaGYun6VkAuDitha_8q_QVKe6-Hd07d1I3JFd8JXe1_awFTBzQY0FW6MYf_1qQC5OGSxqkXAIq4JhJ4p7ghN8i6HU0WuyXZMlR8fK1xxuyRwgTXgr6tAstfHw/' width='32'/></a>
U/TIb9eJ5RTWI/AAAAAAAAB9c/tYvdT6xgaLw/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9egD8XSI/A
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifTZybwBa6MIJRwClB00TCiyVjJ5fTO6RxX6GjPBqHyED0IvKcDZ9MdyZFyWjt1HrQGsteqDDaPzgaA70wPKUEIl2DCsF1XXYailuYWNRWayHNkCRiAKx6kzQ0DGlLAtDvmYrEmdqLBk/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_
2AAAAAAAB9k/rZY5eofO2SY/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

7- Sostituisci queste parti con i tuoi dati:

FEEDBURNER-ID con il tuo ID di feedburner.(Devi farlo 4 volte).

TWITTER-USERNAME con il tuo username di Twitter.

FACEBOOK-USERNAME con il tuo username di Facebook. Se non sai come trovarlo entra sul tuo profilo e copia l'URL; se vuoi puoi anche inserire l'URL ad una pagina specifica che hai creato tu.

8- Salva ed il lavoro è completo.

Se hai delle difficoltà scrivi un commento e ti risponderò in tempo record! :)

Nel frattempo... condividi l'articolo!

Read More

Inserire una slideshow di immagini in homepage su blogger

Per rendere il tuo blog più accattivante consiglio sempre di mettere una bella slideshow degli articoli più letti e più interessanti del tuo blog in homepage. Ne ho già proposte diverse e anche questa non è niente male; a differenza delle altre questa propone solamente un'immagine e non dà la possibilità di aggiungere parte di testo.
Interessante se le immagini hanno un forte impatto.

Puoi vedere una demo del suo funzionamento qui

Read More

Aggiungere immagini random come header su blogger

Se hai molta fantasia e ti appassiona la grafica sicuramente avrai avuto difficoltà nel scegliere l'intestazione perfetta tra tutte quelle che hai creato...
Con questa semplice modifica del template questo non sarà più un problema in quanto potrai caricare diverse immagini e, ogni volta che qualcuno si sposta da una pagina all'altra del tuo blog, vedrà l'header cambiare.

E' una modifica molto interessante, in quanto crea un effetto "dinamico" e di cambiamento ai navigatori che rimarrà sicuramente impresso.

Attenzione però a non caricare troppe immagini, rischieresti di rallentare di molto la velocità di apertura delle pagine.

Read More

Inserire barra dei social alla fine di ogni singolo post

Per tutti quelli che volgiono inserire alla fine di ogni singolo post di blogger dei pulsanti di condivisione sui social più conosciuti, propongo un'ottima soluzione.

Il risultato è come quello che trovi alla fine dei miei post, una sequenza di immagini che si illuminano al passaggio del mouse.

Come inserirla:

1- Vai su Layout --> Modifica html ed espandi i modelli widget

2- Fai un backup del template

Read More

Inserire barra icone dei social più conosciuti

Creare un blog che sia intutitivo e pratico per più utenti possibile è un compito dal quale qualsiasi blogger che vuole crearsi il suo nome on-line non può astenersi.
Intuitivo e pratico significa che chiunque abbia la possibilità di continuare a seguirlo con la massima facilità. Ti faccio un esempio che mi è capitato:
Studiando le statistiche di questo blog, che gestisco io ma nel quale scrive la mia ragazza, non riuscivo a capacitarmi delle poche iscrizioni ai feed rss e a google friend connect rispetto ai visitatori che tornavano spesse volte nel blog.

Read More

Come disabilitare il tasto destro in un blog o sito

Quando un sito è ben fatto può capitare che altri blogger, o gestori dei tantissimi aggregatori di notizie, copino tali e quali i nostri articoli nei loro siti. Fin qui niente di apparentemente tanto malvagio ma quando non viene riportata nemmeno la fonte non è per niente simpatico.

Read More

Come inserire una firma alla fine di ogni post in blogger

 Se ti sei mai chiesto come inserire una tua firma alla fine di ogni post questo è il posto giusto per capire come fare. Con questo sistema puoi anche inserire diverse firme, una per ogni autore, nel caso tu faccia parte di un team di persone che scrivono allo stesso blog.
L'effetto di questa piccola modifica è senza dubbio gradevole, dà un senso di unicità ad ogni singolo post inserito.

Read More

Widget per gli ultimi commenti di blogger

Spesso capita che un widget ben fatto venga apprezzato e installato da molti utenti con la conseguente possibilità di pesanti disagi.

Questo succede quando gli script vengono caricati su dei servizi di hosting che non hanno banda sufficente ad accontentare tutti; il nostro widget quindi rallenta molto il caricamenteo della pagina e a volte non viane neanche visualizzato.

Read More

Finalmente le pagine statiche anche in blogger

Read More

30 menu orizzontali per il tuo blog con CSS e HTML

"  Guida i tuoi visitatori..."

Quante volte ti è capitato di entrare in un sito e non riuscire a trovare quello che cercavi pur sapendo che da qualche parte c'è?
Questo capita spesso quando non si riesce a navigare in un modo semplice e il risultato sai qual'è? Che si va a cercare in un altro sito!
Oltre alla ormai scontata casella di ricerca è molto importante, in certi casi, usare un menu. Te ne propongo una trentina con la speranza che tu possa trovare quello che più si addice al tuo blog.

Read More

Come aggiungere le stelline per votare un post

Per la maggior parte dei blogger le soddisfazioni maggiori arrivano quando i lettori si dimostrano interessati agli argomenti trattati e ti fanno capire che in qualche modo sei stato utile. Questo avviene tramite i commenti (ps: consiglio a tutti di di andare sulle impostazioni e dare la possibilità a chiunque di commentare), ma spesso i lettori, per pigrizia fretta o per poche idee non scrivono niente e quelli che lasciano il proprio commento sono una netta minoranza.
Blogger ha già provveduto a questo e da la possibilità di inserire (vai su layout--> elementi pagina e clicca sul gadget relativo al post) un piccolo script che permette di votare il post e in draft.blogger si possono aggiungere anche le stelline ma funzionano bene solamente con i template di default, mentre con tutti gli altri creano dei problemi.

Read More