Σήμερα θα σας δείξουμε πως μπορείτε να βάλετε ένα Slider στο blog σας, εύκολα και γρήγορα, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας.
Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!!
Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας.
1. Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.
2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....
<head>
Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή θα προσθέστε τα scripts.
<!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
3. Το επόμενο βήμα είναι, να κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....
]]></b:skin>
Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.
/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */
#slider{ width:618px; height:246px}
.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}
/* Nivo Slider Tutorial http://loneeagle110.blogspot.com
Skin Name:Pascal Theme Skin URI:http://nivo.dev7studios.com Skin Type:fixed Description:A nice,light skin for the Nivo Slider. Version:1.0
Author:Gilbert Pellegrom &Pascal Gartner Author URI:http://dev7studios.com */
.theme-pascal.slider-wrapper{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdW1W1-iDY6FKsZkb419QO8ZqfJWyhlQ6HNPeqwPI7s6GgDU_tYiJ8bOwoqVcApGk_iW1LbOe-lGHp2Q8l1ltWTcbHlM8_Xtofayca8qFvwRnlwM3s4KgzKSelhjy07uKw41p2hO4lhQ/s1600/LE-Slider-bg.png) no-repeat;width:668px;height:299px;margin:0 auto;padding-top:17px;position:relative}
.theme-pascal .nivoSlider{ position:relative;width:630px;height:235px;margin-left:19px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvHgB4FijacPoLSYr-UbWKlJas0KOOGqw3hPK2Rmn2Wq4MDrAV-KuWbC0AH95SYjrzqZ22FnrLtMv-SWh2Oh4dHrSR5RKnYj24OKmKSSfKtWmBtAw0Ttaly1cnKrmPtAgBH3cQfb5JEM/s16/LE-Loading.gif) no-repeat 50% 50%}
.theme-pascal .nivoSlider img{ position:absolute;top:0px;left:0px;display:none;width:630px;
/* Make sure your images are the same size */
height:235px;
/* Make sure your images are the same size */}
.theme-pascal .nivoSlider a{ border:0; display:block}
.theme-pascal .nivo-controlNav{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQtHtea63ocjxKDdpvHzpirDGA6v11pMMjg_BSpJz3-nGO7-7tsXajxdbf-ZQge9zU4TMvQhvtkKey-jsQF5P7u4Fi405WfcFMz0ZVnnCPxZuqjQDtfqCcwMEg0UMSj7Ic-i3NSMoj1g/s1600/LE-ControlNav.png) no-repeat; width:251px; height:40px; position:absolute; left:200px;
/* Tweak this to center bullets */
bottom:-42px;padding:8px 0 0 82px;z-index:20}
.theme-pascal .nivo-controlNav a{ display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpQTU-9aVY8gBdxmJukshP3m8djEQFVR3JM_91BB1zxuHB1qlBvIpXZyDdz9FuBsmD5dnYwpcDK5Vefowcsg1iMrX3FC1-NZDct6DHc8dgzmhcx9ylBU1rEZFTQV_MPNLMkCLPar95UY/s1600/LE-Bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left}
.theme-pascal .nivo-controlNav a.active{ background-position:0 -22px}
.theme-pascal .nivo-directionNav a{ display:none}
.theme-pascal .nivo-caption{ bottom:40%;left:auto;right:0px;width:auto;max-width:630px;overflow:hidden;background:#fff;text-shadow:none;font-family:arial,serif;color:#4c4b4b}
.theme-pascal .nivo-caption p{ padding:5px 15px;color:#333;font-weight:bold;font-size:27px;text-transform:uppercase}
.theme-pascal .nivo-caption a{ color:#333;font-weight:bold;font-size:27px;text-transform:uppercase}
.theme-pascal .ribbon{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuze3cuplWcKE8OGVBD-P-AJHQZRMsAzWkHly7pMlv_ibZbIWu3R0F6foOGbvfj5ngNBxzczPXe1ia1rcGqeQNbZ9OdxrBXiM3ybK2NP2DBlT8LSFCcJnMXIRQGljLUmXFu1yXTpXaKg/s1600/LE_Ribbon.png) no-repeat;width:111px;height:111px;position:absolute;top:-8px;left:-8px;z-index:300}
/* 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-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /01.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /02.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /03.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /04.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
Αυτό ήταν!!!
Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!!
<head>
<!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
]]></b:skin>
/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */
#slider{ width:618px; height:246px}
.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}
/* Nivo Slider Tutorial http://loneeagle110.blogspot.com
Skin Name:Pascal Theme Skin URI:http://nivo.dev7studios.com Skin Type:fixed Description:A nice,light skin for the Nivo Slider. Version:1.0
Author:Gilbert Pellegrom &Pascal Gartner Author URI:http://dev7studios.com */
.theme-pascal.slider-wrapper{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdW1W1-iDY6FKsZkb419QO8ZqfJWyhlQ6HNPeqwPI7s6GgDU_tYiJ8bOwoqVcApGk_iW1LbOe-lGHp2Q8l1ltWTcbHlM8_Xtofayca8qFvwRnlwM3s4KgzKSelhjy07uKw41p2hO4lhQ/s1600/LE-Slider-bg.png) no-repeat;width:668px;height:299px;margin:0 auto;padding-top:17px;position:relative}
.theme-pascal .nivoSlider{ position:relative;width:630px;height:235px;margin-left:19px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvHgB4FijacPoLSYr-UbWKlJas0KOOGqw3hPK2Rmn2Wq4MDrAV-KuWbC0AH95SYjrzqZ22FnrLtMv-SWh2Oh4dHrSR5RKnYj24OKmKSSfKtWmBtAw0Ttaly1cnKrmPtAgBH3cQfb5JEM/s16/LE-Loading.gif) no-repeat 50% 50%}
.theme-pascal .nivoSlider img{ position:absolute;top:0px;left:0px;display:none;width:630px;
/* Make sure your images are the same size */
height:235px;
/* Make sure your images are the same size */}
.theme-pascal .nivoSlider a{ border:0; display:block}
.theme-pascal .nivo-controlNav{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQtHtea63ocjxKDdpvHzpirDGA6v11pMMjg_BSpJz3-nGO7-7tsXajxdbf-ZQge9zU4TMvQhvtkKey-jsQF5P7u4Fi405WfcFMz0ZVnnCPxZuqjQDtfqCcwMEg0UMSj7Ic-i3NSMoj1g/s1600/LE-ControlNav.png) no-repeat; width:251px; height:40px; position:absolute; left:200px;
/* Tweak this to center bullets */
bottom:-42px;padding:8px 0 0 82px;z-index:20}
.theme-pascal .nivo-controlNav a{ display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpQTU-9aVY8gBdxmJukshP3m8djEQFVR3JM_91BB1zxuHB1qlBvIpXZyDdz9FuBsmD5dnYwpcDK5Vefowcsg1iMrX3FC1-NZDct6DHc8dgzmhcx9ylBU1rEZFTQV_MPNLMkCLPar95UY/s1600/LE-Bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left}
.theme-pascal .nivo-controlNav a.active{ background-position:0 -22px}
.theme-pascal .nivo-directionNav a{ display:none}
.theme-pascal .nivo-caption{ bottom:40%;left:auto;right:0px;width:auto;max-width:630px;overflow:hidden;background:#fff;text-shadow:none;font-family:arial,serif;color:#4c4b4b}
.theme-pascal .nivo-caption p{ padding:5px 15px;color:#333;font-weight:bold;font-size:27px;text-transform:uppercase}
.theme-pascal .nivo-caption a{ color:#333;font-weight:bold;font-size:27px;text-transform:uppercase}
.theme-pascal .ribbon{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuze3cuplWcKE8OGVBD-P-AJHQZRMsAzWkHly7pMlv_ibZbIWu3R0F6foOGbvfj5ngNBxzczPXe1ia1rcGqeQNbZ9OdxrBXiM3ybK2NP2DBlT8LSFCcJnMXIRQGljLUmXFu1yXTpXaKg/s1600/LE_Ribbon.png) no-repeat;width:111px;height:111px;position:absolute;top:-8px;left:-8px;z-index:300}
/* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */
<div id='content-wrapper'>
<!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com-->
<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /01.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /02.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /03.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
<a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /04.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>
<!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com-->
Δημοσίευση σχολίου Blogger Facebook
Παρακαλώ, την προσοχή σας ! ! !
* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.
Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:
* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.
Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"
Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!