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.



Diverso tempo dopo nel dormiveglia (è sempre il momento migliore...) ho capito tutto e l'analisi fatta il giorno seguente mi ha dato conferma. Dalle statistiche, che evidentemente non avevo studiato a sufficenza fino aquel momento, si evinceva come la maggior parte dei visitatori "abituali" arrivassero da google usando come parola chiave il nome del blog; questo sta a significare che si ricordano il nome del sito ma le loro abitudini di navigazione sono quelle appena descritte.
Perchè? Perche la nicchia di quel blog non è una nicchia di persone che masticano bene di internet come possono essere quelli che navigano in templatexblogger!

Ho quindi immediatamente dato la possibilità di iscriversi alla newsletter, servizio molto più conosciuto rispetto ai feed e... miracolo! Le iscizioni hanno cominciato ad aumentare vertiginosamente. Bingo!
Tutto questo lungo esempio per farti capire che non tutti gli utenti navagano allo stesso modo e in base alla tua nicchia devi creare un blog in relazione alle persone che lo visiteranno.

Per assurdo un blog che spiega nel dettaglio il CSS può anche non mettere l'escrizione ai feed, tanto la maggior parte dei visitatori sa che lo trova nella barra dell'URL, mentre se parli di lavori con l'uncinetto inserire una barra per i bookmark alla fine del post non servirà a niente!


Ma ci sono le vie di mezzo e in questi casi una barra con le icone più conosciute e d'obbligo; in questo post te ne propongo una veramente bella, come quella qui sotto:



Come installarla:

1- Vai su Luyout --> Modifica HTML

2- Fai un backup del template ed espandi i modelli widget

3- Cerca il tag <data:post.body/> (che stà sempre a rappresentare il corpo del post) e incolla appena dopo, se vuoi inserirla alla fine del post, o appena prima se vuoi inserila tra il titolo e il post questo codice:

<div align='left'>
  <span class='post-icons'>


<!-- Widget Title , Share This Start, Remove Or Leave--><p align='left'>
  <img alt='' border='0' id='' src='http://3.bp.blogspot.com/_JwD5r652h00/S4LlnJNSFHI/AAAAAAAAAU8/b0CwEmD94jg/s400/share-this.png'/></p>
<!-- Widget Title , Share This End, Remove Or Leave-->

 

<!-- Stumbleupon Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/SnleiulEMVI/AAAAAAAABeU/kO09nNTlQeo/s200/stumbleupon.png'/></a>
  <!-- Stumbleupon Button End, Remove Or leave -->


<!-- Technorati Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlenauwzjI/AAAAAAAABec/btszO5xBOgg/s200/technorati.png'/></a>
  <!-- Technorati Button End, Remove Or leave -->


<!-- Delicious Button Start, Remove Or leave -->
  <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/Snld35mPSDI/AAAAAAAABds/ccrOpOmP9Zk/s200/delicious.png'/></a>
  <!-- Delicious Button End, Remove Or leave -->


<!-- Digg Button Start, Remove Or leave -->
  <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/Snld_x-wXoI/AAAAAAAABd0/cTsGU_Y-zQ8/s200/digg.png'/></a>
  <!-- Digg Button End, Remove Or leave -->


<!-- Reddit Button Start, Remove Or leave -->
  <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleX1tMMtI/AAAAAAAABeM/gQSYdrmSc3k/s200/reddit.png'/></a>
  <!-- Reddit Button End, Remove Or leave -->

 

<!-- FaceBook Button Start, Remove Or leave -->
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/SnleIlLdGwI/AAAAAAAABd8/RfHnWIGGMEY/s200/facebook.png'/></a>
  <!-- FaceBook Button End, Remove Or leave -->


<!-- Yahoo Button Start, Remove Or leave -->
  <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/SnlexsGX2QI/AAAAAAAABes/ai6zvzZKCgw/s200/yahoo.png'/></a>
  <!-- Yahoo Button End, Remove Or leave -->

<!-- Twitter Button Start, Remove Or leave -->
  <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
  <script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/>
  <a expr:onclick='&quot;return TweetAndTrack.open(this, &quot;&quot; + data:post.url + &quot;&quot;);&quot;' href='#'>
  <span style='display:none;'>I&#39;m reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>
  <!-- Twitter Button End, Remove Or leave -->

</span>
  </div>
Modifiche:
  • Ogni social è delimitato dalle scritte in rosso, puo toglierlo semplicemente cancellando il codice compreso tra le due righe
  • Puoi cambiare anche la scritta "share this" semplicemente creando la tua immagine, hostandola e inserendo l'indirizzo al posto del link in rosa.
4- Salva

Altri articoli simili:



0 commenti: