Πριν λίγο καιρό, σας είχαμε παρουσιάσει το Nivo Slider with Pascal Theme & Random Settings.
Σήμερα θα σας δείξουμε το αντίστοιχο slider με τις Default ρυθμίσεις, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας.
Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!!
Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας.
2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....
<head>
<!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
<script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
]]></b:skin>
/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */
.theme-default .nivoSlider{position:relative; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvHgB4FijacPoLSYr-UbWKlJas0KOOGqw3hPK2Rmn2Wq4MDrAV-KuWbC0AH95SYjrzqZ22FnrLtMv-SWh2Oh4dHrSR5RKnYj24OKmKSSfKtWmBtAw0Ttaly1cnKrmPtAgBH3cQfb5JEM/s16/LE-Loading.gif) no-repeat 50% 50%; -webkit-box-shadow:0px 1px 5px 0px #4a4a4a; -moz-box-shadow:0px 1px 5px 0px #4a4a4a; box-shadow:0px 1px 5px 0px #4a4a4a}
.theme-default .nivoSlider img{ position:absolute;top:0px;left:0px;display:none}
.theme-default .nivoSlider a{ border:0; display:block}
.theme-default .nivo-controlNav{ position:absolute;left:50%;bottom:-42px;margin-left:-40px;
/* Tweak this to center bullets */ }
.theme-default .nivo-controlNav a{ display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9BaW7pmmZvQQ6eyyMum8fZ4R3B7S3EGJbtrwNGUF_edbp27UxOoqOa_QTiYPxRS4GELB5rjREX_mQr13sb18jE7B7K0A01jZ4uJC5bTgWcPSGyEXGbob-3Bm7eHEZ0IZQ_1IehJIMxU/s1600/LE.DefaultBullets.png) no-repeat;text-indent:-9999px;border:0; margin-right:3px; float:left}
.theme-default .nivo-controlNav a.active{ background-position:0 -22px}
.theme-default .nivo-directionNav a{ display:block; width:30px; height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vv9VGcYo9byftBh8qYc5tsxnIRBPnWWdxAOfmbCPsHvIDANpgJDGwzY4UgFHMlrvVhecSJG1_WowPRL3gAni0wBRGmVPu98FwiLXLRq_CeqJj7VzSwnIlo0a3kopO1hqWeXK05qDduw/s1600/LE.Arrows.png) no-repeat;text-indent:-9999px;border:0}
.theme-default a.nivo-nextNav{ background-position:-30px 0; right:15px}
.theme-default a.nivo-prevNav{ left:15px}
.theme-default .nivo-caption{ font-family:Helvetica,Arial,sans-serif}
.theme-default .nivo-caption a{ color:#fff; border-bottom:1px dotted #fff}
.theme-default .nivo-caption a:hover{ color:#fff}
/* Nivo Slider by http://loneeagle110.blogspot.com */
.nivoSlider{ position:relative}
.nivoSlider img{ 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}
/* Caption styles */
.nivo-caption{ position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;
/* Overridden by captionOpacity setting */ width:100%;z-index:8}
.nivo-caption p{ padding:5px;margin:0}
.nivo-caption a{ display:inline !important}
.nivo-html-caption{ display:none}
/* Direction nav styles (e.g. Next &Prev) */
.nivo-directionNav a{ position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{ left:0px}
.nivo-nextNav{ right:0px}
/* Control nav styles (e.g. 1, 2, 3...) */
.nivo-controlNav a{ position:relative;z-index:9;cursor:pointer}
.nivo-controlNav a.active{ font-weight:bold}
.theme-default #slider{ margin:100px auto 50px auto;width:618px;
/* Make sure your images are the same size */
height:246px;
/* Make sure your images are the same size */ }
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper{ margin-top:150px}
.clear{ clear:both}
/* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */
.theme-default .nivoSlider{position:relative; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvHgB4FijacPoLSYr-UbWKlJas0KOOGqw3hPK2Rmn2Wq4MDrAV-KuWbC0AH95SYjrzqZ22FnrLtMv-SWh2Oh4dHrSR5RKnYj24OKmKSSfKtWmBtAw0Ttaly1cnKrmPtAgBH3cQfb5JEM/s16/LE-Loading.gif) no-repeat 50% 50%; -webkit-box-shadow:0px 1px 5px 0px #4a4a4a; -moz-box-shadow:0px 1px 5px 0px #4a4a4a; box-shadow:0px 1px 5px 0px #4a4a4a}
.theme-default .nivoSlider img{ position:absolute;top:0px;left:0px;display:none}
.theme-default .nivoSlider a{ border:0; display:block}
.theme-default .nivo-controlNav{ position:absolute;left:50%;bottom:-42px;margin-left:-40px;
/* Tweak this to center bullets */ }
.theme-default .nivo-controlNav a{ display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9BaW7pmmZvQQ6eyyMum8fZ4R3B7S3EGJbtrwNGUF_edbp27UxOoqOa_QTiYPxRS4GELB5rjREX_mQr13sb18jE7B7K0A01jZ4uJC5bTgWcPSGyEXGbob-3Bm7eHEZ0IZQ_1IehJIMxU/s1600/LE.DefaultBullets.png) no-repeat;text-indent:-9999px;border:0; margin-right:3px; float:left}
.theme-default .nivo-controlNav a.active{ background-position:0 -22px}
.theme-default .nivo-directionNav a{ display:block; width:30px; height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vv9VGcYo9byftBh8qYc5tsxnIRBPnWWdxAOfmbCPsHvIDANpgJDGwzY4UgFHMlrvVhecSJG1_WowPRL3gAni0wBRGmVPu98FwiLXLRq_CeqJj7VzSwnIlo0a3kopO1hqWeXK05qDduw/s1600/LE.Arrows.png) no-repeat;text-indent:-9999px;border:0}
.theme-default a.nivo-nextNav{ background-position:-30px 0; right:15px}
.theme-default a.nivo-prevNav{ left:15px}
.theme-default .nivo-caption{ font-family:Helvetica,Arial,sans-serif}
.theme-default .nivo-caption a{ color:#fff; border-bottom:1px dotted #fff}
.theme-default .nivo-caption a:hover{ color:#fff}
/* Nivo Slider by http://loneeagle110.blogspot.com */
.nivoSlider{ position:relative}
.nivoSlider img{ 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}
/* Caption styles */
.nivo-caption{ position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;
/* Overridden by captionOpacity setting */ width:100%;z-index:8}
.nivo-caption p{ padding:5px;margin:0}
.nivo-caption a{ display:inline !important}
.nivo-html-caption{ display:none}
/* Direction nav styles (e.g. Next &Prev) */
.nivo-directionNav a{ position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{ left:0px}
.nivo-nextNav{ right:0px}
/* Control nav styles (e.g. 1, 2, 3...) */
.nivo-controlNav a{ position:relative;z-index:9;cursor:pointer}
.nivo-controlNav a.active{ font-weight:bold}
.theme-default #slider{ margin:100px auto 50px auto;width:618px;
/* Make sure your images are the same size */
height:246px;
/* Make sure your images are the same size */ }
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper{ margin-top:150px}
.clear{ clear:both}
/* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */
5. Το επόμενο βήμα μπορεί να γίνει με 2 τρόπους:
1ος Τρόπος:
Θα πάτε, Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.
2ος Τρόπος:
Μέσα από την Επεξεργασία HTML θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....
<div id='content-wrapper'>
Τέλος θα πατήσετε προεπισκόπηση κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο πρότυπο σας.
<!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="...http://Εδώ το URL της 1ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /01.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της 2ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /02.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της 3ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /03.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της 4ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /04.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"></div>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="...http://Εδώ το URL της 1ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /01.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της 2ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /02.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της 3ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /03.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της 4ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /04.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"></div>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!!
Δημοσίευση σχολίου Blogger Facebook
Παρακαλώ, την προσοχή σας ! ! !
* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.
Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:
* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.
Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"
Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!