jQuery Slider Box widget για τον Blogger

Είμαι σίγουρος ότι πολλοί το ψάχνετε ή το έχετε βρει ήδη, αλλά είναι πολύ δύσκολο στην εγκατάσταση λόγω του ότι πρέπει να επέμβετε στον κώδικα. Αυτό που θα δούμε σήμερα είναι πολύ πιο απλό.
Ακολουθήστε τα παρακάτω βήματα για να το βάλετε στη Σελίδα σας, (όσοι θέλετε δηλ.):

• Σύνδεση στον Blogger
• Σχεδίαση - Προσθήκη gadget
• Επιλέξτε HTML/JavaScript
• Επικολλήστε τον παρακάτω κώδικα:

<style>
.fp-slider {
height: 332px;
margin: 0 0 15px;
overflow: hidden;
padding: 0;
position: relative;
width: 615px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 615px;
}
.fp-slides, .fp-thumbnail {
height: 300px;
overflow: hidden;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: none repeat scroll 0 0 #747171;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTnBWTvR9vYjpGEv5tIxgTZ0C86sLDu2gfwVx7os7IOhoW28KVacPNeYd6ormCcATwwYrkDTs8MTvehlQC27pD8Pv0giHC-L3DdWHMrgurjukylV9PW-3cOgn0lSrcI_cojVAFWocDYW4/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 8px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL27i3w-TMQ1PzxN0JwwcayD2wKvIrtbwj8PEeegxfrHzAS5f7UHudX5aVGjKfgKJN8pTYJNZdTazlJkxE9HcUgj9dL8tMuXzm4J9hcHRa082x3cbxbnitTJ53lqfaxeJFBCCwgaPOFXPx/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWZ2-bw2rJq-5-tAtJxCzUVaQP-mvXIxGGDoQq2Ph3WTPvDFD-VnfTAUY5TaLhrUO_kLhAqfIE77tLFyqrEQjGMfa7p-Q_U4-So-N1UhT-FmomHfZSvF-cQvQEVDYO2OhyphenhyphenyakHLxzxH-B/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
div.jump-link {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5t_ubuzAqvwrMHKqeS0h_h5ryU5m4g4moeR9KhhXSVkjTdpqApPCEy-pK2geMk9CP1Uz1TLdUO3Uruzdwv_-kR835xGsoLouFehhNHW1pIaTHOFbKxM3S3GEO9vvMVo82urlJ1f5jWiQ2/s1600/post.png") repeat-x scroll 0 1px transparent;
border: 1px solid #EEEEEE;
font-size: 12px;
margin-left: 510px;
padding: 10px;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
<script type="text/javascript" src="http://yourjavascript.com/11292210222/slider 1.txt.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11229251922/slider 2.txt.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/21129126192/slider 3.txt.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/91212172521/slider 4.txt.js"></script>
<!-- Featured Content Slider Started -->
<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>
<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJfc2iYpW1eZQGALvr9QMDjwL9tcjdlqVgdWTDDdnqq2mnxoyQbuQkvaw_a5U-MIrwHOA1j1TbpiuumFG_5sY_ig4mkz_yqKIKRONrzdwpOjewpPUZmfrIdsng8jJ6oD6Yz_sRt2rSZ8/s1600/1.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 1</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxDBtufPXSLZEJff3yNdG2U8SQHdzjhUXI-lAPVi2HQacpm_8jqEMjPC7YuB1bbQctJ8s6eSIACHmaMGim70fxoiWy849OZLbC7NsROoPPgEXGyF-o63Blxph3atoR5gUxFXoOiIHp60/s1600/2.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 2</a>
</h3>

<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrDUOB-dUQOnnISyOj9cxKi4Fm6nC5X2uy9v89xj4IfvX4qNvexgRVdCSf6VxNTzVkn7sZXrP8zKnHT1iG3DHIDi7SxQadPZDSrDyLBbCC4a-MlMklW9pb2_Y25lrmM0LpO_PMHuEBqg/s1600/3.jpg"/></a>
</div>
<div class='fp-content-wrap'>

<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 3</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->

<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wQbLH8aTWJffEUnsa1d7G8dNoNxmSN0zvaw-eaGQilC63NPzub-bE-YWN9NahD5vmX5VFijwyltHvmipekFNQEE_WV2Go60lE4UPxnLTPsNyidF6F3a0y8IRUvzrUsOQ0FO_z9P4oZk/s1600/4.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 4</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>

</div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1QnrA_mdtqcHFYBFnLsG1rR2AmE1fyVdnAj210-tXaVdbufhR_7zx6uZFZcpb9aWFQHesp06FqYJUUSaayEpVMKj4EZ0zD2MKTp1yOB3BBXOpaGmPOAvSNQNCr8iLE_9n8kDyfv9qqfg/s1600/5.jpg"/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Τίτλος προεπιλεγμένης διαφάνειας 5</a>
</h3>
<p>
Γράψτε το κείμενο που θέλετε να εμφανίζεται στην εικόνα. Μπορείτε να βάλετε πρόλογο μίας ανάρτησης ή ό,τι άλλο επιθυμείτε εσείς.Μια ευγενική προσφορά της www.bloggertipsandtricks.net 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
<a class='fp-next' href='#fp-next'></a>
<a class='fp-prev' href='#fp-prev'></a>
</div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='fp-nav'>
<span class='fp-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!-- Featured Content Slider End --></div>

• Στη θέση της "δίεσης" #, βάλτε τους συνδέσμους που θέλετε να οδηγούν οι εικόνες και οι περιγραφές του Slider
• Αντικαταστήστε τις υπάρχουσες φωτογραφίες με τις δικές σας. Σας τις έχω τονίσει με κόκκινο φόντο.
• Πατήστε αποθήκευση και το gadget είναι έτοιμο.

Υ.Γ. Η θέση του συγκεκριμένου gadget είναι ακριβώς πάνω από τις αναρτήσεις.

LIVE DEMO