Inserire uno jQuery Smart Posts Blog

Per inserire questo jQuery Smart Posts Blog è un procedimento semplice dobbiamo procedere solamente con: 

1. L'inserimento di un codice sul foglio HTML
2. L'inserimento del codice sul Widget HTML/JavaScript

Vedi la demo.

Procediamo con l'inserimento del codice sul foglio html, andiamo su Design → Modifica HTML, e Espandete i modelli widget (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 seguente codice:

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'/>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel({
wrap:&quot;both&quot;,
scroll:2,
animation:&quot;slow&quot;
});
function mycarousel_initCallback(carousel) {
jQuery(&#39;#featured-next-button&#39;).bind(&#39;click&#39;, function() {
carousel.next();
return false;
});

jQuery(&#39;#featured-prev-button&#39;).bind(&#39;click&#39;, function() {
carousel.prev();
return false;
});
jQuery(&#39;.button-nav span&#39;).bind(&#39;click&#39;, function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery(&#39;#feature-carousel&#39;).jcarousel({
wrap:&quot;both&quot;,
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

<style type='text/css'>
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 650px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 650px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrwZOmSV9L2FPXyUAf9ToeF1HwINn7nDECZS_9dOPbp3RYYyTr7X1VbIDcyAamnEtoccWPj0xm3HNi0m1McUS0QgRywlf8T8Z6gv8jBYytqDv0lIHZHoLXy8JXNMtA3prWFjgpMsTqrAp/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrwZOmSV9L2FPXyUAf9ToeF1HwINn7nDECZS_9dOPbp3RYYyTr7X1VbIDcyAamnEtoccWPj0xm3HNi0m1McUS0QgRywlf8T8Z6gv8jBYytqDv0lIHZHoLXy8JXNMtA3prWFjgpMsTqrAp/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

(In questo codice si possono modificare i colori di sfondo, le dimensioni larghezza/altezza.)

Adesso clicchiamo su salva modello.

Infine torniamo su Elementi pagina → Aggiungi un gadget → HTML/JavaScript. E aggiungiamo il codice riportato di seguito:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>

<li><a href='URL'><img src='http://www.autoprontaconsegna.com/images/annunci_auto.jpg'/></a></li>

<li><a href='URL'><img src='http://www.frcar.it/imgg_ind/auto_nuova_importazione.jpg'/></a></li>

<li><a href='URL'><img src='http://www.autoprontaconsegna.com/images/annunci_auto_2.jpg'/></a></li>

<li><a href='URL'><img src='http://www.guidaprodotti.com/immagini/tuning-auto.jpg'/></a></li>

<li><a href='URL'><img src='http://www.immaginimix.com/wp-content/uploads/foto-auto-1.jpg'/></a></li>

</ul>
</div>
(Qua inserite l'URL e Immagini)

Se avete dubbi o ci sono degli errori non esitate a contattarmi, grazie.

Postato sotto: Blog,Informatica,JavaScript