Inserire slideshow di immagini su blogger



Per svariati motivi può essere importante inserire una slideshow di immagini nel proprio blog:

-Per una migliore navigabilità del blog stesso
-Per dare rilevanza e dei post specifici
-Per pubblicizzare alcuni prodotti
-Semplicemente per bellezza inserendo delle foto random
-Ecc ecc...

In questo post ti spiegherò come aggiungerne una al tuo blogger.com seguendo alcuni semplici passi.

Come inserirla:

1- Vai su design --> modifica html

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

3- Cerca (usando ctrl+F) il tag </head> e incolla appena prima questo codice:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

4- Salva

5- Vai su Design --> Elementi pagina e aggiungi un elemento tipo html/javascript

6- Incolla all'interno questo codice:
<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFqOF9GSsiMEX2O5-_trfNleV_oaQUCg7wsbD_mhrlk0d1Sl6RUHwnpOdPGPS3_BYQt8uFZWmCRAPyhk1u_blmq3ujhxLtNqE5sLSfKsGjLLHU7kANl9hdSzxrrVn7XKB-vYLpAImBZU/s1600/1.jpg" title="Titolo post 1" alt="Descrizione post 1." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJVVhXUkXj61LisOlSYENfVSAMs7kLseXH_9xwuBNhGJxJyUmbTZmQUmBgW8W1yDnH7E6k5oy-oGSFpVW5bGs35OjoeKecWyMPzPtWQvnH_2-hIcdso2DIYx7eMRGCS5uaKsauZTxHjg/s1600/2.jpg" title="Titolo post 2" alt="Descrizione post 2." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheT86D5Kfyym5gJvydXplYWEPrgKYVcPOfTiBL-MnK1UcCCTOHGBBMkzLdDlbWKokLYEM_Gca29Dd5nLv-7Quf1PU3pq2Q2SkO1s8KdksejgPtUECbpcryPV85sfpBcmlW4cxkEWynOts/s1600/3.jpg" title="Titolo post 3" alt="Descrizione post 3." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPW9s-9jHX4QCgTcnxfAvBphPvk7WJ9N2YQMNaozpmkupAp4IhC0hcWeGJRggO0366FHjUr5fLL1xIk7EHTLBgADi-LQyis5dLqRU7opMNIev8blrkQG2Bm1T2Uo9nKqRrDfQPwBimDJw/s1600/4.jpg" title="Titolo post 4" alt="Descrizione post 4." /></a></li>

</ul>

7- Sostituisci le parti colorate con:

-L'url dell'iimagine che vuoi far apparire
-Il titolo del post o della pagina
-Un'introduzione al post

8- Salva e il gioco dovrebbe essere fatto.

Attenzione: di default la slideshow ha una grandezza di 600px X 240px.
Per modificarle cerca nella prima parte di codice le parti in rosso e cambiale con le misure che preferisci.

Non esitare a chiedere qualsiasi informazione!

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!


Inserire immagini random come annunci pubblicitari nella sidebar

Nella maggior parte dei blog che ospitano annunci pubblicitari vi sarà capitato di vedere i banner che cambiano ad ogni aggiornamento di pagina. Ti sei mai chiesto come mostrare banner pubblicitari casuali in Blogger?

Nel tutorial di oggi ti spiegherò come creare un Banner Random Widget per Blogger che mostrerà i banner pubblicitari in sequanza casuale quando un visitatore visita una nuova pagina sul tuo blog.

Questo widget è possibile aggiungerlo in qualsiasi posizione all'interno del tuo bloge il risultato sarà simile a quello in questa immagine


Come installarla:

1- Vai su Design --> Elementi pagina

2- Aggiungi un elemento HTML/Javascript

3- Incolla il codice che trovi qui sotto
<div align="center">
    <table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody><tr>
    <td><center>

    <!--  BANNER#1  -->

    <script language="JavaScript">
    images = new Array(2);

    images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    index = Math.floor(Math.random() * images.length);
    document.write(images[index]);
    </script>

    </center></td>

    <td><center>

    <!--  BANNER#2  -->

    <script language="JavaScript">
    images = new Array(2);

    images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    index = Math.floor(Math.random() * images.length);
    document.write(images[index]);
    </script>

    </center></td>
    </tr>
    <tr>

    <td><center>

    <!--  BANNER#3  -->

    <script language="JavaScript">
    images = new Array(2);

    images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    index = Math.floor(Math.random() * images.length);
    document.write(images[index]);
    </script>

    </center></td>

    <td><center>

    <!--  BANNER#4  -->

    <script language="JavaScript">
    images = new Array(2);

    images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

    index = Math.floor(Math.random() * images.length);
    document.write(images[index]);
    </script>

    </td></center>

    </tr>

    </tbody></table>

    <table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody>
          <tr>
           <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="file:///C:/Documents%20and%20Settings/Mohammad/Desktop/ADVERTISE-HERE.gif" /></a></center></td>
          </tr>

        </tbody></table>

    </div>

4- Fai le seguenti modifiche:

URL OF ADVERTISER: sostituiscili con i link delle tue pubblicità

URL OF BANNER’S IMAGE-1: sostituiscili con i link delle immagini dei banner relativi alla pubblicità

AD DESCRIPTION: sostituisci con le parole che vuoi far apparire in caso l'immagine non venga visualizzata

width="265: modificala per cambiare la distanza tra gli annunci.

5- Salva

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

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.