Inserire Script immagini a Fisarmonica

Inserire uno script dentro un blog si può fare in tanti modi, oggi posto uno script con immagini a Fisarmonica, da inserire nel proprio blog, vedi script.

Per inserire questo script, andiamo su Design → Modifica HTML, (consiglio sempre di salvare una copia del vostro Template prima di modificare HTML), cerchiamo con la ricerca veloce (CTRL+F) il codice </head> e subito prima incolliamo il codice riportato qui sotto:

<style type='text/css'>
    /*stile generale del div contenitore*/
    #news{
    width:400px;
    padding:20px;
    background-color:transparent;
    font-family:arial;
    }
    /*stile css del titolo h1*/
    #news h1{

    margin:0;
    margin-bottom:20px;
    color:#990000;
    font-size:17px;
    }
    /*stile generale dei link*/
    #news a{
    /*allineamento verticale*/
    display:block;
    margin-bottom:2px;
    /*immagine di sfondo*/
    background:url(http://img135.imageshack.us/img135/962/cssnewsaccordionbg.jpg) repeat-x;
    /*rimuove sottolineatura*/
    text-decoration:none;
    /*rimuove bordo grigio aggiunto da FF*/
    outline:none;
    color:#990000;
    text-align:justify;
    /*clear usato dovuto ad immagine floatati per mantenere altezza dell&#39;elemento*/
    clear:both;
    /*cursor di default dei link - specificato per Internet Explorer*/
    cursor:hand;
    }
    /*stile dei titoli dei news*/
    #news a b{
    /*converte elementi inlinea a blocco*/
    display:block;
    height:20px;
    /*allineamento verticale centrato del testo*/
    line-height:20px;
    padding:5px 0 5px 10px;
    /*immagine della freccia destra*/
    background:url(http://img822.imageshack.us/img822/1248/cssnewsaccordionarrow.jpg) no-repeat top right;
    }
    /*in apertura, gli elementi span contenuti nei link sono nascosti*/
    #news a span{
    display:none;
    }
    /*stile delle immagine contenuti in span*/
    #news a span img{
    /*rimuove bordi aggiunti di default dai browser a immagini linkati*/
    border:none;
    /*posizionamento a sinistra*/
    float:left;
    /*margine tra immagine e testo*/
    margin:0 10px 10px 0;
    }
    /*richiesto da Internet Explorer 6 per buon funzionamento del accordion*/
    #news a:hover{
    border:0;
    }
    /*stile sullo stato hover dei link*/
    #news a:hover b{
    /*cambio di posizione dell&#39;immagine di sfondo*/
    background-position:bottom right;
    }
    #news a:hover span{
    /*cambio da valore none a block - il span è visibile*/
    display:block;
    /*spazio cuscinetto tra bordi e contenuto*/
    padding:10px;
    /*rimuove il cursor di tipo link per uno di default*/
    cursor:default;
    font-size:11px;
    }
    </style>

In questo codice come avete capito si possono modificare i colori l'altezza, lunghezza..... nelle strighe rosse potete cambiare le immagini caricate da voi online.

Adesso clicchiamo su salva modello.

Andiamo su Elementi pagina --> Widget HTML/JavaScript, copiate e incollate il codice riportato qui sotto:

<div id="news">
    <h1>Inserire Script immagini a Fisarmonica</h1>
    <a href="http://cercasoluzione3.blogspot.com/2011/06/aggiungere-una-pagina-iniziale-su.html">
        <b>Aggiungere una pagina iniziale su Blogger</b>
        <span>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZd_E7mNeL78L1gQGJCULQVMIQzwK39O8IyNvMy6TRk08vrOWfd9XP8BHxcwDJmURvPDoY_RkoJRu8eptb0E3ahYskVuecF8FYpv3PNDakb4xiPWwHLDnjRySr2KZ1sHcs5NUXQar_fD4/s1600/Blogconunapaginainiziale_cs3.bmp" alt="" width='125px' height='125px'/>
            Quante ricerche facciamo ogni giorno su Google per trovare una soluzione su come togliere i post nella pagina iniziale? cioè vogliamo che nella Home compaia solamente quello che inseriamo noi senza avere di mezzo i Post.
Oggi inserisco un piccolo metodo come fare tutto ciò...

        </span>
    </a>
    <a href="http://cercasoluzione3.blogspot.com/2011/06/accendere-il-pc-con-la-tastiera.html">
        <b>Accendere il PC con la Tastiera</b>
        <span>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTupjFyCCHAh7AoJqZyhPewpJRjxukjtfJm1SdmD9LNwpMpqHCq-w4VIyt5n2yeeL2RvH-PuRDOBp97dJXXjYAihz4ZCsPzmc3u1HOkLfn-y2ie1qndjReuxv9dRw0ZVJpTuvSI_J_tWuQ/s1600/pc-cs3.jpg" alt="" width='125px' height='125px'/>
            Un modo molto semplice e interessante è Accendere un PC con la testiera, questo serve solamente a proteggere di più il nostro PC, e come mettere una password ad un telefonino quando altrui vogliono spiare i nostri dati...

        </span>
    </a>
    <a href="http://cercasoluzione3.blogspot.com/2011/06/eliminare-il-blocco-dei-72minuti-su.html">
        <b>Eliminare il Blocco dei 72minuti su Megavideo</b>
        <span>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3JejCW1trNb_YBIQJDzPXbVNTMCXJSrXVQ5kUjmJR2vbL5AkhIVtbqeCadP-6LyuCaVT4eQyPcJxDWbyMhK6Fa_5jPjs3R8UsvTsdvOHdpAIX4_MHe-RNeOOsiOFLzayc4gwvSFcsyb2/s1600/megavideo-cs3.jpg" alt="" width='125px' height='125px'/>
            Quanto fastidio che ci da ogni volta Megavideo con quei blocchi di video dopo un tot di minuti, ogni volta che guardiamo un film al momento più interessante cosa succede? è finito il tempo limite di Megavideo...

        </span>
    </a>
    <a href="http://cercasoluzione3.blogspot.com/2011/05/bloccare-un-determinato-sito-o-banner.html">
        <b>Bloccare un determinato SITO o Banner Pubblicitario</b>
        <span>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjhpZ30sIRLR9SQxUTKwNKpL8WmI5Px4cRp5eZpsrnJ5Ctk2EnUYlj45cSerVAlT952_BhGFXXvwsKixNdaGhVyVqy2AfQXdBoOUYvqPZqMg7l7mRh7U3RFE9KN0gWrfwpXTxkUYaSg35T/s1600/Website_Blocker-cs3.jpg" alt="" width='125px' height='125px'/>
            Bloccare un determinato sito è un procedimento molto utile, mettiamo caso che ad utilizzare il pc sia un minorenne e non vorremmo che entri dentro ai sito porno, oppure quando entriamo in siti normali ma ci compaiono dei banner pubblicitari che ci disturbano troppo...

        </span>
    </a>
</div>

Qua si impostano le pagine che si vogliono inserire dentro lo script, seguite le stringhe rosse e non vi confonderete, tanto sono solo quelle rosse da sostituire. Salvate e il gioco e fatto.

Postato sotto: Blog,Informatica,JavaScript