Featured Slider with jQuery ( Grey - Red - White Color ) .

Σε αυτή την ανάρτηση θα σας παρουσιάσουμε ακόμα ένα εντυπωσιακό "slider" πλουτίζοντας σιγά-σιγά κι αυτήν την κατηγορία του ιστολογίου μας.
Είναι ένα widget που θα σας βοηθήσει να αναδείξετε τις αναρτήσεις που θέλετε & παράλληλα να ομορφύνετε το ιστολόγιό σας.
Ένα υπάρχον σχέδιο το οποίο τροποποίησα σε 2 ακόμα χρώματα για να καλύψω τα γούστα σας.



Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server ή ακόμα καλύτερα να τα φορτώσετε μέσα στο html σας.

jquery-1.2.6.min.js

jcarousel.pack.js

personalized-1.5.2.packed.js

Δείτε σχετική ανάρτηση εδώ

Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.

Και με το Ctrl + F θα κάνετε αναζήτηση για το....

</head>

Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το </head>
Θα προσθέσετε τα scripts του Slideshow αφού πρώτα έχετε προσθέσει τις διευθύνσεις των scripts στα σημεία "...jquery-1.2.6.min.js..." & "...jcarousel.pack.js..." & "...personalized-1.5.2.packed.js...".

<script src='...jquery-1.2.6.min.js...' type='text/javascript'></script>
<script src='...jcarousel.pack.js...' type='text/javascript'></script>
<script src='...personalized-1.5.2.packed.js...' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});
jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>

Ακριβώς από κάτω από τα scripts θα προσθέσετε το ανάλογο css για όποιο φόντο θέλετε.

Tο css με Άσπρο φόντο.

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#ffffff;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

Δείτε το στην πράξη



Tο css με Κόκκινο φόντο.

<style type='text/css'>
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-red.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-red.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#990000;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

Tο css με Σκούρο Γκρι φόντο.

<style type='text/css'>
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}
.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-black.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-black.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}
.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}
#news-slider{background-color:#333;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

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

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

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



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



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

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

<!--Featured-Slider-STARTS-http://loneeagle110.blogspot.com-->
<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 1...'><img src='...direct link image 1.jpg...'/></a></li>
<li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 2...'><img src='...direct link image 2.jpg...'/></a></li>
<li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 3...'><img src='...direct link image 3.jpg...'/></a></li>
<li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 4...'><img src='...direct link image 4.jpg...'/></a></li>
<li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 5...'><img src='...direct link image 5.jpg...'/></a></li>
</ul>
</div>
<!--Featured-Slider-STOPS-http://loneeagle110.blogspot.com-->

Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.

Τώρα θα πάτε στο Πίνακα ελέγχου σας & μέσα από την Σχεδίαση θα προσαρμόσετε το gadget στο σημείο που θέλετε να εμφανίζεται στη σελίδα σας, συνήθως πάνω από τις αναρτήσεις σας.

Σημείωση:

Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider .

Δηλαδή, αν το πλάτος του Slider είναι 410px και το ύψος 300px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις

Μπορείτε να δείτε εδώ & εδώ μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας.

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