Link Image Slider Widget for Blogger - Add Your Image and Customize as You Like
Το 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>
Αφήστε σχόλια για περαιτέρω επεξηγήσεις, παρατηρήσεις κ.λπ.