<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='http://jj4me.altervista.org/slide-js/bjqs-1.3.min.js'/>

/***********************************************
* Coding by www.designsimonas.com please do not remove my credits
***********************************************/
<script>
jQuery(document).ready(function($) {

$(&#39;#banner-slide&#39;).bjqs({

height : 300, // altezza dello slideshow
width : 620, // larghezza dello slideshow
animtype : &#39;fade&#39;,
animduration : 450,
animspeed : 5000, // durata dello slideshow in millesimi di secondi
automatic : true,
showcontrols : true,
centercontrols : true,
nexttext : &#39;&#39;,
prevtext : &#39;&#39;,
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally

// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover

// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : false, // start slider at random slide
responsive : false // enable responsive capabilities (beta)

});

});
</script>


<script src='http://jj4me.altervista.org/slide-js/libs/jquery.secret-source.min.js'/>

<script>
jQuery(function($) {

$(&#39;.secret-source&#39;).secretSource({
includeTag: false
});

});
</script>

/* Basic jQuery Slider essential styles */

ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
border:1px solid #ddd;
}
li.bjqs-slide {
position:absolute;
display:none;
}
ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
ul.bjqs-controls.v-centered li a {
position:absolute;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right:-10px;
background: #c0dcda url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMAiG1s61GRjAkOzHllXuhtmsmN1RxfQyihPT2kLwiTSDl_-vN8frUzn2XEC2J-fuaYV93BbVMqpz7iPtM8WZ_db2bHOnbPD8JBdIJk1WA7aFe0tfIjqyxfi1pcWD2A47o3Y3ZBlddmtzd/s1600/arr-n.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left:-10px;
background: #c0dcda url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIkJQuaIPi60FWED9QypxTX6BilmqIpNxRUl637UiQ0E5QaGwVyyw-IfWBJoz9hpWPIpE53Ea1SqgzaVdIVoVX-NMllNkL3ovdnDJSP1X0cmbW_69tpYP-0AVweKkqEQYx7U_D492-L9v2/s1600/arr-p.png)no-repeat center center;
color:#fff;
font-weight:bold;
padding:5px;
width:20px;
height:20px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
ol.bjqs-markers{
list-style: none;
padding: 0;
margin: 0;
width:100%;
}
ol.bjqs-markers.h-centered {
text-align: center;
}
ol.bjqs-markers li {
display:inline;
}
ol.bjqs-markers li a {
display:inline-block;
background:#ccc;color:#fff;
padding:5px 10px;
margin:2px 5px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover {
background:#999;
color:#fff;
}
p.bjqs-caption {
display:block;
width:100%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
text-align: center;
background:#555;
color:#fff;
opacity:0.7;
font-size:12px;
text-transform:uppercase;
}

<div id="banner-slide">

<ul class="bjqs">

<li><a href='URL-POST'><img src="URL-IMMAGINE" title="" /><p class='bjqs-caption'>INSERISCI IL TESTO O IL TITOLO DEL POST</p></a></li>


</ul>

</div>
<br/><br/><br/>

<div class="buttons"><a href="URL">ABOUT ME</a></div>
<div class="buttons1"><a href="URL">MY SHOP</a></div>
<div class="buttons2"><a href="URL">PINTEREST</a></div>
<div class="buttons3"><a href="URL">INSTAGRAM</a></div>
<div class="buttons4"><a href="URL">FACEBOOK</a></div>
<div class="buttons5"><a href="URL">CONTACT</a></div>

.buttons {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:5px 10px; background:#EDE9E6;line-height:25px;}
.buttons1 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#E6DBD6;}
.buttons2 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:20px; padding:6px 10px;line-height:25px; background:#B4AAB5;}
.buttons3 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#545257;}
.buttons4 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#F2B885;}
.buttons5 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#DEE6B5;}
.buttons a, .buttons1 a, .buttons2 a, .buttons3 a, .buttons4 a, .buttons5 a {color:#fff !important; text-decoration: none !important;}

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
day = "<strong class='date_day'>"+da[0]+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(day+month+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
display: block;
width:40px;
height:40px;
border-radius: 100px;
-moz-border-radius:100px;
float: left;
margin: 5px 2px 0 -45px;
border: 0;
text-transform: uppercase;
position:absolute;
z-index:1;
padding:5px;
font:normal &#39;Courier New&#39;, Arial, Helvetica;
color:#ffffff;
font-size: 11px;
text-align:center;
background:#000;
}
.date_month {
display:block;
margin-top:-2px;
text-align:center;
line-height:100%;
}
.date_day {
text-align:center;
line-height:100%;
padding-top:-2px;
}
.date_year {
padding:0;
line-height:100%;
display:block;
text-align:center;

}
</style>
</b:if>

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>