Featured Post Content Slider to Blogger. |  Στάλες στο γαλάζιο ® <link href='http://1.bp.blogspot.com/-zLT_BXEc4kY/Ty5w1rJa84I/AAAAAAAAMq4/tTUdcTs-ayc/s72-c/Featured%2BPost%2BContent%2BSlider%2Bto%2BBlogger.jpg' rel='https://4.bp.blogspot.com/-ucvLyH7G8ns/WNrpJ42EDOI/AAAAAAAAfwo/V5doGhzXC8QztinTcD9Jfy_YBPCPzpPOgCLcB/s640/Stales_sto_Galazio.jpg'/>

0


Featured Post Content Slider to Blogger

Το παρακάτω σχέδιο "Slider", θα σας βοηθήσει να αναδείξετε τις αναρτήσεις που θέλετε ή απλά να ομορφύνετε το ιστολόγιό σας με αγαπημένες φωτογραφίες.



Ποιος από εσάς δεν επιθυμεί κάτι τέτοιο;;;



0.Πριν την οποιαδήποτε αλλαγή κρατήστε BACKUP ΤΟ ΠΡΟΤΥΠΟ ΣΑΣ για να αποφύγετε δυσάρεστες καταστάσεις σε περίπτωση λάθους!!!!!!!

1. Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML

2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....


</head>


Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το </head>
και θα προσθέσετε τον παρακάτω κώδικα.


<!--Featured-Slider-STARTS-http://loneeagle110.blogspot.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
slideshowle(5000); // χρόνος εναλλαγής εικόνων
});
function slideshowle(speed) {
$('ul.slideshowle').append('<li id="slideshowle-caption" class="caption"><div class="slideshowle-caption-container"><h3></h3><p></p></div></li>');
$('ul.slideshowle li').css({opacity: 0.0});
$('ul.slideshowle li:first').css({opacity: 1.0});
$('#slideshowle-caption h3').html($('ul.slideshowle a:first').find('img').attr('title'));
$('#slideshowle-caption p').html($('ul.slideshowle a:first').find('img').attr('alt'));
$('#slideshowle-caption').css({opacity: 0.7, bottom:0});
var timer = setInterval('gallery()',speed);
$('ul.slideshowle').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
var current = ($('ul.slideshowle li.show')? $('ul.slideshowle li.show') : $('#ul.slideshowle li:first'));
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshowle-caption')? $('ul.slideshowle li:first') :current.next()) : $('ul.slideshowle li:first'));
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
$('#slideshowle-caption').animate({bottom:-70}, 300, function () {
$('#slideshowle-caption h3').html(title);
$('#slideshowle-caption p').html(desc);
$('#slideshowle-caption').animate({bottom:0}, 500);
});
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>

<style type="text/css">
ul.slideshowle {
list-style:none;
width:600px; // πλάτος
height:250px; // ύψος
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;}
ul.slideshowle li {
position:absolute;
left:0;
right:0;
}
ul.slideshowle li.show {
z-index:500;}
ul img {
width:600px; // πλάτος
height:250px; // ύψος
border:none;}
#slideshowle-caption {
width:600px; // πλάτος
height:70px; // το ύψος της διαφάνειας που θα εμφανίζεται το κείμενο
position:absolute;
bottom:0;
left:0;
color:#fff; // χρώμα κειμένου
background:#000; // χρώμα φόντου
z-index:500;}
#slideshowle-caption .slideshowle-caption-container {
padding:5px 10px;
z-index:1000;}
#slideshowle-caption h3 {
margin:0;
padding:0;
font-size:16px;}
#slideshowle-caption p {
margin:5px 0 0 0;
padding:0;}
</style>
<!--Featured-Slider-STOPS-http://loneeagle110.blogspot.com-->



Σημείωση!!!!

Για τους φίλους που θέλουν να μεγαλώσουν ή να μικρύνουν το μέγεθος του Slider θα πρέπει να αλλάξουν τις τιμές που είναι με πράσινο χρώμα πλάτος/ύψος & στα 3 σημεία του css.


3.Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση.

Εισάγετε τον παρακάτω κώδικα με 2 τρόπους:

1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript.



θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα.



2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML.

Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις.


<!--Featured-Slider-STARTS-http://loneeagle110.blogspot.com-->
<ul class="slideshowle">
<li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα ..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li>

<li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li>

<li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα ..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li>

<li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li>
// για επιπλέον παρουσιάσεις
</ul>
<!--Featured-Slider-STOPS-http://loneeagle110.blogspot.com-->


Για να προσθέσετε κι άλλες παρουσιάσεις θα προσθέσετε τον παρακάτω κώδικα όσες φορές χρειάζεται στο σημείο // για επιπλέον παρουσιάσεις

<li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li>



4.Τέλος πατήστε Προεπισκόπηση & αν δεν σας βγάλει κάποιο λάθος, πατήστε ΑΠΟΘΗΚΕΥΣΗ.

Και κάντε Ανανέωση την σελίδα σας.


ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!

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

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

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

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

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

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

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

 
Top
Blogger Tutorials

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