Nivo Slider with Default Theme & Default Settings. |  Στάλες στο γαλάζιο ® <link href='http://2.bp.blogspot.com/-I8YGjs1cl0c/UAfkuSJzAqI/AAAAAAAAPkw/1wDQyfwZTjs/s72-c/Nivo%2BSlider%2Bwith%2BDefault%2BTheme%2B%2526%2BDefault%2BSettings.jpg' rel='https://4.bp.blogspot.com/-ucvLyH7G8ns/WNrpJ42EDOI/AAAAAAAAfwo/V5doGhzXC8QztinTcD9Jfy_YBPCPzpPOgCLcB/s640/Stales_sto_Galazio.jpg'/>

0


Πριν λίγο καιρό, σας είχαμε παρουσιάσει το Nivo Slider with Pascal Theme & Random Settings.
Σήμερα θα σας δείξουμε το αντίστοιχο slider με τις Default ρυθμίσεις, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας.
Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!!
Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας.
1. Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.
2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....
<head>
Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή θα προσθέστε τα scripts.
<!--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-->
3. Το επόμενο βήμα είναι, να κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....
]]></b:skin>
Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.
/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */
.theme-default .nivoSlider{position:relative; background:#fff url(https://lh4.googleusercontent.com/-GYrRtMrka3c/UAanMlRD_HI/AAAAAAAAPd8/srjpC1_uFg8/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(http://2.bp.blogspot.com/-t2D6TBN5Vqs/UAb8lF8144I/AAAAAAAAPgM/_ItytHOJdj0/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(http://1.bp.blogspot.com/-GQa_-TomLaU/UAb8lf23R4I/AAAAAAAAPgY/z2GtSlYVok0/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 */
4. Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.
5. Το επόμενο βήμα μπορεί να γίνει με 2 τρόπους:
1ος Τρόπος:
Θα πάτε, Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.
Κάντε αντιγραφή τον παρακάτω κώδικα και επικολλήστε τον μέσα στο HTML/JavaScript.
θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο gadget και μέσα απο την Διάταξη θα το σύρετε πάνω από το χώρο των αναρτήσεων
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-->
Αυτό ήταν!!!
Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!!

Καλή Επιτυχία!!!!!

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

Παρακαλώ, την προσοχή σας ! ! !

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

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)