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!


Altri articoli simili:



0 commenti: