Link Image Slider Widget for Blogger - Add Your Image and Customize as You Like

Ένα λυτό, όμορφο image slider για το Blogger σας στο οποίο μπορείτε εύκολα να προσθέσετε τις φωτογραφίες -μπορούν να είναι ταυτόχρονα ενεργοί σύνδεσμοι- που εσείς επιθυμείτε. Το widget είναι πλήρως τροποποιήσιμο, απλό στην εγκατάσταση του με διαφορετικά, κάθε φορά, εφέ εναλλαγής των εικόνων.


Το widget βρέθηκε στο allblogsolution και τροποποιήθηκε ελαφρώς, έτσι ώστε κάθε φωτογραφία να λειτουργεί ως σύνδεσμος -link-. Έτσι π.χ. μπορούμε να τοποθετήσουμε 4, 5 η και περισσότερες φωτογραφίες διαφημίσεων στο slider, εξοικονομώντας πολύτιμο χώρο στο blog μας.

Το εγκαθιστούμε ως Gadget ακολουθώντας με τη σειρά τα παρακάτω βήματα:

Ανοίγουμε το Blogger μας ⇨ Διάταξη ⇨ Προσθήκη Gadget ⇨ HTML/JavaScript ⇨ στο παράθυρο ''Περιεχόμενο'' κάνουμε αντιγραφή και επικόλληση τον παρακάτω κώδικα ⇨ Αποθήκευση.

<title><data:blog.pageTitle/></title>

 <style type="text/css"/>
/* dimpost.com - Basic Style */
 body{ background: transparent; font:15px/2 'Adobe Caslon Pro', Georgia, Serif; margin:0; padding:0;}
a{outline:0 none}
#pagewrap{ margin:10px auto; padding:0; position:relative; height:400px; width: 640px;}
#slidewrap{position:absolute;}
#slider {    border-color: #c0c0c0;    border-radius: 5px 5px 5px 5px;    border-style: solid;    border-width: 10px 10px 30px;    box-shadow: 0 0 3px #2F2F2F;    height: 280px;    margin: 10px;    position: relative;    width: 600px;}
#slider images{    position:absolute;    top:0px;    left:0px;    display:none;}
/* The Nivo Slider styles */
.nivoSlider { position:relative;}
.nivoSlider images { position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice { display:block; position:absolute; z-index:5; height:100%;}
.nivo-box { display:block; position:absolute; z-index:5;}
.nivo-directionNav{display:none!important}
.nivo-html-caption {    display:none;}
.nivo-caption{ position:absolute; right:20px; text-align:center; top:130px; width:192px; z-index:60;}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {    bottom: -23px;    display: block;    height: 15px;    left: 204px;    position: absolute;    text-align: center;    width: 192px;    z-index: 51; opacity: 0.6;}
.nivo-controlNav a{ background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center; display:inline-block; height:14px; width:14px; text-indent:-9999px; cursor:pointer;}
.nivo-controlNav .active{ background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); }
 </style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript">
</script> <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> $(window).load(function() {  $('#slider').nivoSlider(); }); </script>
<!--[if IE]>  <script src="modernizr-2.0.min.js"></script> <![endif]--> 
 <div id="pagewrap"><div id="slidewrap">
<div id="slider">
<a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="LINK URL" target="_blank">
<img alt="ενεργό link" border="2" height="250" src="IMAGE URL" width="275" /></a>

<a href="LINK URL"_blank">
<img alt="ενεργό link" border="2" height="250" src="IMAGE URL" width="275" /></a>

<a href="LINK URL"_blank">
<img alt="ενεργό link" border="2" height="250" src="IMAGE URL" width="275" /></a>

<a href="LINK URL"_blank">
<img alt="ενεργό link" border="2" height="250" src="IMAGE URL" width="275" /></a>

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

Αντικαταστήστε:  το IMAGE URL με αυτό της φωτογραφίας που επιλέξατε,

 το LINK URL με τη διεύθυνση της σελίδας που θα μεταφέρεται κάποιος κάνοντας κλικ στη φωτογραφία,


τις τιμές στα "Width" και "Height" για να προσαρμόσετε εικόνες διαφορετικών διαστάσεων.


Αλλάξτε τις τιμές στο "border-radius: 5px 5px 5px 5px;" για να αλλάξετε την καμπυλότητα στις γωνίες.


Για να προσθέσετε επιπλέον φωτογραφίες επικολλήστε το 

<a href="LINK URL"_blank"> <img alt="ενεργό link" border="2" height="250" src="IMAGE URL" width="275" /></a>

κάτω από το τελευταίο του κώδικα.

Αφήστε σχόλια για περαιτέρω επεξηγήσεις, παρατηρήσεις κ.λπ.