Back to Top
  3. Image Slider Widget for Blogger - Add Your Image Links and Customize as You Like

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

Image Slider Widget for Blogger - Add Your Image Links and Customize as You Like
Ένα λυτό, όμορφο image slider για το Blogger σας στο οποίο μπορείτε να προσθέσετε τις φωτογραφίες (μπορούν να είναι ταυτόχρονα ενεργοί σύνδεσμοι) που εσείς επιθυμείτε. Το widget είναι πλήρως τροποποιήσιμο, απλό στην εγκατάσταση του με διαφορετικά, κάθε φορά, εφέ εναλλαγής των εικόνων.

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

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

<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:0px auto; padding:0; position:relative; height:300px; width: 275px;}
#slidewrap{position:absolute;}
#slider {    border-color: BLACK;    border-radius: 5px 5px 5px 5px;    border-style: solid;    border-width: 10px 10px 30px;    box-shadow: 0 0 3px YELLOW;    height: 240px;    margin: 0px;    position: relative;    width: 300px;}
#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: 34px;    position: absolute;    text-align: center;    width: 192px;    z-index: 51; opacity: 0.6;}
.nivo-controlNav a{ background:WHITE 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:WHITE 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="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>

Η μορφή του slider μετά την εγκατάσταση θα είναι αυτή, χωρίς τη φωτογραφία που θα πρέπει να έχει διαστάσεις 300x250.


Αντικαταστήστε:  το IMAGE URL με αυτό της φωτογραφίας που επιλέξατε,
 το LINK URL με τη διεύθυνση της σελίδας που θα μεταφέρεται κάποιος κάνοντας κλικ στη φωτογραφία,
τις παραμέτρους Width και Height για να προσαρμόσετε εικόνες διαφορετικών διαστάσεων,
τα WHITE, BLACK, YELLOW με τα χρώματα που θέλετε.
Αλλάξτε τις τιμές στο border-radius: 5px 5px 5px 5px; για να αλλάξετε την καμπυλότητα των γωνιών.
Για να προσθέσετε επιπλέον φωτογραφίες επικολλήστε το 

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

κάτω από το τελευταίο του κώδικα.
Αφήστε σχόλια για περαιτέρω επεξηγήσεις, απορίες κ.λ.π.

0σχόλια

Δημοσίευση σχολίου