Σύνδεση
Αρχική
Επικοινωνία
Αρχειοθήκη
Ίσα κάτω
Σχετικά με εμάς
Άδεια χρήσης/License
Περιεχόμενο της σελίδας
Γράψτε για μας
Posted by
LoneEagle
|
Posted in
Blogger Help
,
Blogger Tutorials
,
JQuery Tutorials
,
Sliders
|
Posted on
2/11/2012
Το παρακάτω σχέδιο "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.Τέλος πατήστε Προεπισκόπηση & αν δεν σας βγάλει κάποιο λάθος, πατήστε ΑΠΟΘΗΚΕΥΣΗ.
Και κάντε Ανανέωση την σελίδα σας.
</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.
<!--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>
All Rights Reserved.