Featured

Search This Blog

Από το Blogger.

Popular

Slideshow for blogger

Share it:

simple-jquery-blogger-featured-slide-showΚαλησπέρα bloggers σήμερα θα σας παρουσιάσω ένα πολύ όμορφο Slideshow για το blog σας είναι ένα παρά πολύ απλό κομψό Slideshow, υπάρχουν παρά πολλά  Slideshow τα όποια θα μπορούσατε να τα επιλέξετε και να τα βάλετε στο blog σας, προσωπικά έμενα δεν μου αρέσει να γεμίζω το blog μου με διάφορα, προσπαθώ να το έχω όσο γίνετε ποιο απλό και κατανοητό.
Για όσους έχουν την ιδία άποψη το συγκεκριμένο Slideshow είναι ότι πρέπει.



Πριν προχωρήσω παρακάτω θα σας θυμίσω πως την προηγούμενη φορά βάλαμε ένα παρά πολύ όμορφο gadget το:

Blogger widget share social network με καρδια


Πάμε να το προσθέσουμε στο blog μας.

1) Πίνακάς έλεγχου
2) Σχεδίασή
3) Επεξεργασία HTML
4) τσεκάρουμε το τετραγωνάκι (Επέκταση προτύπων γραφικών στοιχείων)
5) Πατάμε στο πληκτρολόγιο μας ctrl+f οπού μας ανοίγει ένα παραθυράκι αναζητήσεις.

Αντιγράφουμε των παρακάτω κωδικό; ]]></b:skin> και το  επικολλούμε στον παραθυράκι της αναζητήσεις, και αμέσως το βρίσκουμε μέσα στους κωδικούς HTML.

Ακριβώς πάνω από αυτών των κωδικό προσθέτουμε αυτών:

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {

height:250px; width: 500px;

overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjAIOn_Q5SXYUUVlzO7Wr-RzvJskTa8tgXeVO6uaHTdKxM-1RmX48C5LEVFPsXpeZwk-cieVb_OfmnWCp6x0oPGLZuml-jZZVB8e6lHat3L-WIHx1S4eqCndIeZaUk2kH2y0uMkiuNbOWD/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>

Και πάμε τώρα να αντιγράψουμε των τελευταίο κωδικό για να τελειώσουμε, κωδικός:

<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LFpx7Kxat9MeH5oPqyBXAEFEbIxM0YFPu3e8j7V2xduhR2xKiu8ZMSXNkor69smBdKML3eH0lyjOCxkD4zDe1EPRXkM7jovbPBuPVV68-WlOmrfmpZcKyWfD4MEfw1QaQlzIowW0RShd/s1600/slider-image-1.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXShtDmXFsUKpTLOSRtvSsnEfmD0U58g8DK_zVeSTrf13veo8_PIaZQmoIBFK4Bg5Qp4h2Lsop0vi1ifkIMvgxrCdsf6qVdHMjK5wTxYnzESgX_0WirIGH2jgatnCI9WmQfZpMlOwMqwEu/s1600/slider-image-2.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnAu0uAEm9d8sRvfV97mlBCZoj5jjKWPUVSSnHE518BW_Cspah8xXE6l5kJn5zocp82EKbnbk9494hO7i6hGQof49WGf1a6NQcwC85C5kROa9NoUaAkNhzUED3OI_YJ2-bBz1Y0g8_FORG/s1600/slider-image-3.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jViz416LAQlF8y2EqMIhMe6fweD5Gmqgz6SjqwNp8lRX2R6pBZ_RPpDMAnSQhl1hQSzQPE9Y8PkTkSN4WTRgmlQdMUtaqPxZroF9IAl15ouX3uZVYricE2sXbqC8ELV0B5x0B2D3x2y8/s1600/slider-image-4.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ENDTg3Fhw0laH7lcZzNVVc06vOTkXy72k23aJDYCXcSaE6yPhN5_6g8u5Q5-6gnB8BLHtoyQ57MLuAkClnlUFN3WuiIYDMBrIio9izu8Kj-geW4-iQobWWUgzM8HGjY0-ivKDUrpoebk/s1600/slider-image-6.jpg" alt="" /></a>
</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>

<a href="#" rel="3">3</a>

<a href="#" rel="4">4</a>

<a href="#" rel="5">5</a>

</div>
</div>
</div>
</div>

Μετα παμε;

1) Πίνακάς έλεγχου
2) Σχεδίασή
3) Προσθήκη Gadget
4) Html/javascript
5) Επικόλλησή του κωδικά
6) Αποθήκευσή


Προσοχη:
1) οπου λεει https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LFpx7Kxat9MeH5oPqyBXAEFEbIxM0YFPu3e8j7V2xduhR2xKiu8ZMSXNkor69smBdKML3eH0lyjOCxkD4zDe1EPRXkM7jovbPBuPVV68-WlOmrfmpZcKyWfD4MEfw1QaQlzIowW0RShd/s1600/slider-image-1.jpg Βαλτέ το λινκ της εικόνας που θέλετε να εμφανίζετε στο slidshow.

2) οπου λεει : http://www.spiceupyourblog.com/ Βαλτέ το λινκ του ορθού στο όποιο αντίστοιχη η εικόνα.

Πατάμε αποθήκευση πρότυπου και τέλος

Και είστε έτοιμη.!! εάν σας άρεσε το άρθρο αφήστε σχόλιο.

Share it:

ΔΙΑΜΟΡΦΩΣΤΕ ΤΟ BLOG ΣΑΣ

Post A Comment:

4 comments:

  1. ΠΟΛΥ ΚΑΛΟ ΣΥΓΧΑΡΙΤΗΡΙΑ ΓΙΑ ΤΙ ΔΟΥΛΕΙΑ ΣΟΥ

    ΑπάντησηΔιαγραφή
  2. Μια ερώτηση . Αφού πατάμε προσθήκη gadget πως μπορούμε να το κάνουμε να μην βγένει και σε άλλες σελίδες ?

    ΑπάντησηΔιαγραφή
  3. οταν θελουμε να βαλουμε εικονες απο τον υπολογιστη τι κανουμε ? ειναι αλλη διαδικασια? η απλα στο srt βαζουμε την διευθυνση της εικονας μας?

    ΑπάντησηΔιαγραφή
  4. αν θελουμε να βαλουμε εικονες που ειναι αποθηκευμενες στο υπολογιστη μας τι κανουμε?

    ΑπάντησηΔιαγραφή