Nivo Featured Posts Slider

Χρήστος Διολής 317 views0

blogger-tips-3
Μοιράσου το

Ένα από τα πιο δημοφιλή sliders που κυκλοφορούν στο internet είναι το Nivo jQuery powered featured posts slider και σε αυτή εδώ την ανάρτηση θα αναλύσουμε την version με το Pascal Theme!Οι versions του Nivo jQuery powered featured posts slider δεν έχουν καμία σχέση με τα κοινά sliders, είναι πολύ πιο όμορφες και βελτιστοποιημένες αναδεικνύοντας τα άρθρα που θέλουμε με τον καλύτερο τρόπο.

Nivo Featured Posts Slider

Για να το εγκαταστήσετε σας συστήνουμε πρώτα απ’ όλα να κάνετε backup το template σας και μετά να αντιγράψετε τον ακόλουθο κώδικα:

#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;

}

/*

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(http://1.bp.blogspot.com/-ILr32hEyEv4/TjarIFuIrEI/AAAAAAAAE3U/

vSN_lW1qjIM/s1600/slider.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(http://4.bp.blogspot.com/-q9aJRd_k5RQ/Tjaqy4XX5OI/AAAAAAAAE3E/

Y32S6GBDjso/s1600/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(http://4.bp.blogspot.com/-HIPfhGDE4hk/TjaqyBgponI/AAAAAAAAE28/

Tx8B5kcVWvg/s1600/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(http://2.bp.blogspot.com/-roNkMPuTzA0/Tjaqxid76eI/AAAAAAAAE24/i-
Q9G-YMd8c/s1600/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(http://2.bp.blogspot.com/-nA_TG0PDAWI/TjaqzNcGeVI/AAAAAAAAE3I/

2k21uBeyfng/s1600/ribbon.png) no-repeat;

width:111px;

height:111px;

position:absolute;

top:-8px;

left:-8px;

z-index:300;

}

Στην συνέχεια πηγαίνετε blogger > Πρότυπο >Επεξεργασία HTML κάνετε click μέσα στο template και πατώντας Ctrl + F ψάχνετε να βρείτε το: ]]></b:skin>. Μόλις το βρείτε κάντε επικόλληση τον κώδικα ακριβώς από πάνω του!

Σβήνουμε το ]]></b:skin> από το search και ψάχνουμε να βρούμε το: </head>. Μόλις το βρείτε κάντε επικόλληση τον παρακάτω κώδικα ακριβώς από  πάνω του:

<!–Start Slider Scripts–>
<script src=’http://code.jquery.com/jquery-1.6.1.min.js’ type=’text/javascript’/>
<script src=’http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!–End Slider Scripts info @ http://www.spiceupyourblog.com–>

Μόλις τελειώσετε πατήστε Αποθήκευση Προτύπου. Εάν όλα πήγαν καλά και δεν σας έβγαλε error (Εάν ακολουθήσατε σωστά τα βήματα δεν πρόκειται) συνεχίζουμε: Πηγαίνετε blogger > Διάταξη > Προσθήκη gadget > HTML/JavaScript και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα:

<div class=”slider-wrapper theme-pascal”>

<div class=”ribbon”></div>

<div id=”slider” class=”nivoSlider”>

<a href=”Η ΔΙΕΥΘΥΝΣΗ ΣΑΣ”><img src=”Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ” alt=”” title=”Ο ΤΙΤΛΟΣ ΤΟΥ ΑΡΘΡΟΥ” /></a>

<a href=”Η ΔΙΕΥΘΥΝΣΗ ΣΑΣ”><img src=”Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ” alt=”” title=”Ο ΤΙΤΛΟΣ ΤΟΥ ΑΡΘΡΟΥ” /></a>

<a href=”Η ΔΙΕΥΘΥΝΣΗ ΣΑΣ”><img src=”Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ” alt=”” title=”Ο ΤΙΤΛΟΣ ΤΟΥ ΑΡΘΡΟΥ” /></a>

<a href=”Η ΔΙΕΥΘΥΝΣΗ ΣΑΣ”><img src=”Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ” alt=”” title=”Ο ΤΙΤΛΟΣ ΤΟΥ ΑΡΘΡΟΥ” /></a>

</div>

</div>

ΑΛΛΑΓΕΣ

Η ΔΙΕΥΘΥΝΣΗ ΣΑΣ: Εδώ βάζετε το url του άρθρου σας.

Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ: Εδώ βάζετε το url της εικόνας σας.

Ο ΤΙΤΛΟΣ ΤΟΥ ΑΡΘΡΟΥ: Εδώ βάζετε τον τίτλο του άρθρου.

Για να δείτε το demo της δικής μας εγκατάστασης παρακαλώ πατήστε εδώ.