Barra Verticale Social Slider per Blogger

Quello che andremo ora a descrivere è una barra verticale da inserire in Blogger che contiene le icone dei Social Network come Facebook o Twitter ma anche Feed Rss, You Tube e la Newsletter. Lo scopo è rendere visibili al massimo i nostri contatti con i Social Network e non, e fornire uno strumento poco invasivo per poter condividere i nostri Articoli in modo rapido. La coseguenza è ottenere sempre più visibilità nel Web e nei motori di ricerca, quindi più traffico. Come strumento ricorda molto la Share Sidebar.
Dunque vediamo come inserire Social Slider in Blogger!

Apriamo il codice sorgente del nostro Blog "modificare codice HTML", incolliamo il codice CSS qui sotto riportato subito prima di ]] </ B: skin>

Codice CSS:

#socialslider {
display : block;
padding : 0;
z-index : 9999;
}
#socialslider {
position : absolute;
}
#socialslider li {
background : none;
}
#socialslider img {
padding : 0;
margin : 0;
border : none;
}
.socialslider-grupa {
float : left;
}
#socialslider-linki {
float : left;
width : 75px;
}
#socialslider-linki img {
width : 32px;
height : 32px;
}
#socialslider-ikony {
position : absolute;
top : -1px;
width : 32px;
z-index : 110;
}
#socialslider-ikony ul {
left : 0;
position : relative;
bottom : -10px;
width : 32px;
}
#socialslider-ikony ul li {
padding : 0 6px 10px 6px;
width : 20px;
height : 20px;
}
#socialslider-ikony img {
width : 20px;
height : 20px;
border : none;
margin : 0;
}
#socialslider-ikony ul, #socialslider-linki ul, #socialslider-ikony li,
#socialslider-linki li {
display : block;
list-style : none;
margin : 0;
padding : 0;
}
#socialslider-linki li {
padding : 5px;
text-align : center;
width : 75px;
}
#socialslider-linki img {
display : block;
border : none;
margin : 0 auto;
}
#socialslider-linki a {
border : none;
font-size : 10px;
text-decoration : none;
}
#socialslider-autor a {
font-family : Segoe UI, Tahoma;
font-size : 10px;
text-decoration : none;
}
#socialslider-ikony {
background : transparent url('http://www.freetraffictip.com/wpcontent/
plugins/social-slider-2/images/handle-lewy-ciemny.png') no-repeat right
top;
padding-top : 1px;
padding-right : 1px;
}
#socialslider-ikony ul {
background : transparent url('http://www.freetraffictip.com/wpcontent/
plugins/social-slider-2/images/handle-lewy-ciemny.png') no-repeat right
bottom;
padding-bottom : 1px;
padding-right : 1px;
}


Ora cerchiamo </ Head> e subito prima incolliamo il codice Javascript:

<script type="text/javascript">
jQuery(document).ready(function () {var hideDelay=200;var
hideDelayTimer=null;jQuery("#socialslider").hover(function(){if(hideDelayTimer)c
learTimeout(hideDelayTimer);jQuery("#socialslider").animate({left:'0'},"normal")
;},function(){if(hideDelayTimer)clearTimeout(hideDelayTimer);hideDelayTimer=setT
imeout(function(){hideDelayTimer=null;jQuery("#socialslider").animate({left:'-
86'},"normal");},hideDelay);});});
</script>

A questo punto andiamo nel Layout del Blog ed aggiungiamo un widget Box HTML/javascript ed inseriamo quest altro codice:


<div id="socialslider" style="top: 150px; width: 85px; left: -86px; borderright:
1px solid #5b5b5b; border-top: 1px solid #5b5b5b; border-bottom: 1px
solid #5b5b5b; background: #222; position: fixed;">
<div id="socialslider-contener" class="socialslider-contener">
<div id="socialslider-linki" class="socialslider-grupa">
<ul>
<li><a href='URL DEL TUO FEED' title='RSS' style='color:
#eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wpcontent/
plugins/social-slider-2/icons/standard/rss-32.png' alt='RSS'
/>RSS</a></li><li><a href='URL DELLA TUA NEWSLETTER FEEDBURNER' title='Newsletter' style='color: #eee;' target='_self'
rel='nofollow'><img src='http://www.freetraffictip.com/wpcontent/
plugins/social-slider-2/icons/standard/newsletter-32.png'
alt='Newsletter' />Newsletter</a></li><li><a href='URL DEL TUO ACCOUNT TWITTER' title='Twitter' style='color: #eee;' target='_self' rel='nofollow'><img
src='http://www.freetraffictip.com/wp-content/plugins/social-slider-
2/icons/standard/twitter-32.png' alt='Twitter' />Twitter</a></li><li><a
href='URL DELLA TUA PAGINA FACEBOOK' title='Facebook' style='color:
#eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wpcontent/
plugins/social-slider-2/icons/standard/facebook-32.png' alt='Facebook'
/>Facebook</a></li><li><a href='YOUR YOUTUBE URL HERE'
title='YouTube' style='color: #eee;' target='_self' rel='nofollow'><img
src='http://www.freetraffictip.com/wp-content/plugins/social-slider-
2/icons/standard/youtube-32.png' alt='YouTube' />YouTube</a></li><li
id='socialslider-autor'><a href='http://www.blogger9.com/2011/07/social-slidergadget-
special-for.html/' title='Social Slider' style='color: #ccc;'
target='_self'>Social Slider</a></li> </ul>
</div>
<div id="socialslider-ikony" style="right: -33px;">
<ul>
<li><img src='http://www.freetraffictip.com/wp-content/plugins/socialslider-
2/icons/standard/rss-20.png' alt='RSS' /></li><li><img
src='http://www.freetraffictip.com/wp-content/plugins/social-slider-
2/icons/standard/newsletter-20.png' alt='Newsletter' /></li><li><img
src='http://www.freetraffictip.com/wp-content/plugins/social-slider-
2/icons/standard/twitter-20.png' alt='Twitter' /></li><li><img
src='http://www.freetraffictip.com/wp-content/plugins/social-slider-
2/icons/standard/facebook-20.png' alt='Facebook' /></li><li><img
src='http://www.freetraffictip.com/wp-content/plugins/social-slider-
2/icons/standard/youtube-20.png' alt='YouTube' /></li> </ul>
</div>
</div>
</div>
<script src="http://www.freetraffictip.com/wpcontent/
plugins/tweetmeme/button.js" type="text/javascript"></script>

Sostituite poi il testo in grassetto con i vostri URL. Così è come appare nella Foto sopra, se siete un pò pratici di CSS potete personalizzare i colori, le dimensioni e cambiare anche le icone.

Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!