2013-07-26

Un fantastico social widget blu per blogger

Commenta per primo!
Se hai un blog su blogger, questo fantastico widget sicuramente ti piacerà!
Lo chiamo social perchè è un widget che si collega ai vari social network, Facebook, Twitter, Google+ e che quindi ti permette di incrementare la tua autorità su internet e di aumentare like, follower e così via!

Fantastico social widget blu per blogger

Questo widget è stato creato grazie all'utilizzo di CSS e HTML, con i quali diventa molto facile incorporare questo riquadro, che contiene sia l'iscrizione ai feed RSS, sia le icone dei social network, sul tuo sito. Ma non ti preoccupare anche senza conoscere questi linguaggi, implementarlo nel tuo blog, sarà un gioco da ragazzi!


Se sei soddisfatto di come appare, segui quindi questi semplici step:

  • Fai il login a Blogger e vai alla Dashboard del tuo blog
  • Seleziona Layout in basso a sinistra
  • Clicca su Aggiungi un gadget e scegli HTML/Javascript
  • Infine incolla il codice che vedi sotto
<style> #sidebar-iscrizioni-social{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0} .sidebar-iscrizioni-social-contenitore{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .sidebar-iscrizioni-social-modulo{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto} .sidebar-iscrizioni-social-campomail{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%} .sidebar-iscrizioni-social-bottone{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%} .sidebar-iscrizioni-social-bottone:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff} .sidebar-iscrizioni-social-bottone:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px} #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%} a.social-icons{margin-right: 5px;height:45px;width:45px;} a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);} </style> <div id="sidebar-iscrizioni-social"> <div class="sidebar-iscrizioni-social-contenitore"> <br/> <a class="social-icons" href="https://facebook.com/pcmiglioreegratis"><img src="http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png" /></a> <a class="social-icons" href="https://twitter.com/pcmigliorgratis"><img src="http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png" /></a> <a class="social-icons" href="https://plus.google.com/u/0/116352856410403119654"><img src="http://3.bp.blogspot.com/--KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png" /></a> <a class="social-icons" href="http://pc-migliore-gratis.blogspot.it/feeds/posts/default"><img src="http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png" /></a> <p>Iscriviti alla nostra newsletter per ricevere gli aggiornamenti gratis!</p> <div class="sidebar-iscrizioni-social-modulo"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=pcmiglioreegratis" class="sidebar-iscrizioni-social-modulo" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pcmiglioreegratis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="pcmiglioreegratis" /> <input name="loc" type="hidden" value="en_US" /><input class="sidebar-iscrizioni-social-campomail" name="email" autocomplete="off" placeholder="Digita il tuo indirizzo mail qui"/> <input class="sidebar-iscrizioni-social-bottone" title="" type="submit" value="Iscriviti ora !" /></form> </div></div></div>

Abbiamo quasi finito. Ora personalizza il tuo widget:
  • sostituisci pcmiglioreegratis con il tuo username di facebook
  • sostituisti pcmigliorgratis con il tuo username di twitter
  • sostituisci 116352856410403119654 con il tuo user di google+
  • sostituisci http://pc-migliore-gratis.blogspot.it/feeds/posts/default con l'indirizzo del tuo feed RSS
  • sostituisci pcmiglioreegratis con il tuo user di feedburner
Salva il tuo social widget HTML/Javascript e posizionalo nella pagina dove più ti piace! :)
Io qui l'ho posizionato sulla destra, e non mi sembra niente male!

Lascia un commento