Content Slider For Blogger with jQuery

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

Ας προχωρήσουμε στη πράξη....



Καταρχήν ΜΗΝ ξεχάσετε πριν ξεκινήσετε το οτιδήποτε να κρατήσετε BackUp το template σας.

Πως γίνεται αυτό??
Λοιπόν....
Θα πάτε στον Πανόπτη --> Διάταξη --> Επεξεργασία HTML.
Εκει θα δείτε το.....
Πριν επεξεργαστείτε το πρότυπό σας, ίσως θέλετε να αποθηκεύσετε ένα αντίγραφο. Λήψη πλήρους προτύπου
Κάντε "κλικ"
Θα το αποθηκεύσετε στην επιφάνεια εργασίας σας & προχωράτε στα πειράματα σας

Βήμα 1ο:

1. Συνδεθείτε στο blogger λογαριασμό σας

2. Πηγαίνετε Διάταξη -–> Επεξεργασία HTML και τσεκάρετε το κουτάκι Επέκταση προτύπων γραφικών στοιχείων

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

]]></b:skin>

και κολλήστε ακριβώς από πάνω του τον παρακάτω κώδικα :

<!--contentSlide-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
#contentSlide {
border: 1px solid #000; // μορφή & πάχος - χρώμα περιγράμματος ( εξωτερικό )
background:#212421; // χρώμα φόντου
color:#383638; // χρώμα κειμένου
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px; // συνολικό πλάτος slideshow
height:263px; // συνολικό ύψος slideshow
background:transparent url(http://i50.tinypic.com/118kl1j.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto;
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px;
height:263px;
}
.control { // εμφάνιση πλοήγησης - βελάκια & αποστάσεις
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://i46.tinypic.com/2zyx8p4.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://i50.tinypic.com/kf1sfp.jpg) no-repeat 0 0;
}
.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421; // χρώμα περιγράμματος εικόνας
border: 1px solid #999; // πάχος & μορφή περιγράμματος
}
<!--contentSlide-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Βήμα 2ο:

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

</head>

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

<!--contentSlide-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>
<!--contentSlide-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κάνετε αποθήκευση προτύπου & πάμε τώρα στο τελευταίο βήμα .

Βήμα 3ο :

Πανόπτης ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

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

<!--contentSlide-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">
<div class="slide">

<h2>...TITLE...</h2>

<p><a href="...your link..."><img alt="...your title..." width="300" src="...link direct image..." height="145" /></a>...your post...</p></div>

<div class="slide">
<h2>...TITLE...</h2>
<p><a href="...your link..."><img alt="...your title..." width="300" src="...link direct image..." height="145" /></a>...your post...</p></div>

<div class="slide">
<h2>...TITLE...</h2>
<p><a href="...your link..."><img alt="...your title..." width="300" src="...link direct image..." height="145" /></a>...your post...</p></div>

<div class="slide">
<h2>...TITLE...</h2>
<p><a href="...your link..."><img alt="...your title..." width="300" src="...link direct image..." height="145" /></a>...your post...</p></div>

<div class="slide">
<h2>...TITLE...</h2>
<p><a href="...your link..."><img alt="...your title..." width="300" src="...link direct image..." height="145" /></a>...your post...</p></div>

</div>
</div></div>
<!--contentSlide-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Και τέλος πατήστε ΑΠΟΘΗΚΕΥΣΗ.

Μετά θα πρέπει μέσα από την διάταξη της σελίδας σας να το βάλετε ακριβώς κάτω από την Κεφαλίδα ή το μενού σας.

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