Slideshow for blogger

Καλησπέρα bloggers σήμερα θα σας παρουσιάσω ένα πολύ όμορφο Slideshow για το blog σας είναι ένα παρά πολύ απλό κομψό Slideshow, υπάρχουν παρ...

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(http://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/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="http://2.bp.blogspot.com/-1ot3ioCYwow/Tdcf3NzfIHI/AAAAAAAAD-Q/Ckavo7b8GMw/s1600/slider-image-1.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-jm2AH-oMcH4/Tdcf3py1SYI/AAAAAAAAD-U/OGqxPE8eVNA/s1600/slider-image-2.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="http://4.bp.blogspot.com/-TCA28AlpMjI/Tdcf4MHoYuI/AAAAAAAAD-Y/NzvcJOrjM_4/s1600/slider-image-3.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-d_zcV_6OCLY/Tdcf5E4Fu2I/AAAAAAAAD-c/33kU0yD1TYk/s1600/slider-image-4.jpg" alt="" /></a>
<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-0uxQB121U-A/Tdcf56FpJuI/AAAAAAAAD-g/ltXixg26NtM/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) οπου λεει http://2.bp.blogspot.com/-1ot3ioCYwow/Tdcf3NzfIHI/AAAAAAAAD-Q/Ckavo7b8GMw/s1600/slider-image-1.jpg Βαλτέ το λινκ της εικόνας που θέλετε να εμφανίζετε στο slidshow.

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

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

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

Σχόλια

BLOGGER: 4
Loading...
Όνομα

ΑΠΑΤΕΩΝΕΣ ΣΤΟ ΙΝΤΕΡΝΕΤ ΒΓΑΛΤΕ ΧΡΗΜΑΤΑ ΔΙΑΜΟΡΦΩΣΤΕ ΤΟ BLOG ΣΑΣ ΔΩΡΕΑΝ ΒΙΝΤΕΟ ΜΑΘΗΜΑΤΑ ΚΑΙ ΕΚΠΑΙΔΕΥΣΗ ΔΩΡΕΑΝ ΘΕΜΑΤΑ ΓΙΑ BLOGSPOT ΕΚΠΑΙΔΕΥΣΗ Η ΥΠΗΡΕΣΙΕΣ ΜΟΥ Κοινωνία ΠΑΙΧΝΙΔΙΑ banner Blogger widget google html Lifestyle photoshop Proionta Project
false
ltr
item
LFY.GR: Slideshow for blogger
Slideshow for blogger
http://lh3.ggpht.com/-LREVeSOyti8/T1h5udkJvVI/AAAAAAAAA_U/vNqLLtaodRc/simple-jquery-blogger-featured-slide-show_thumb%25255B11%25255D.png?imgmax=800
http://lh3.ggpht.com/-LREVeSOyti8/T1h5udkJvVI/AAAAAAAAA_U/vNqLLtaodRc/s72-c/simple-jquery-blogger-featured-slide-show_thumb%25255B11%25255D.png?imgmax=800
LFY.GR
http://www.lfy.gr/2012/03/slideshow-for-blogger.html
http://www.lfy.gr/
http://www.lfy.gr/
http://www.lfy.gr/2012/03/slideshow-for-blogger.html
true
7742921601199696161
UTF-8
Δεν βρεθηκαν αρθρα Προβολή όλων Περισσότερα Απάντηση Ακυρωση απάντησεις Διαγραφη Απο Αρχικη Σελιδες Αρθρα Προβολή όλων Προτεινόμενα άρθρα Κατηγορια Αρχειο SEARCH Ολα τα αρθρα Δεν βρεθηκαν αρθρα Back Home Κυριακή Δευτέρα Τρίτη Τετάρτη Πέμπτη Παρασκευή Σάββατο Κυρ Δευ Τρί Τετ Πέμ Παρ Σάβ Ιανουάριος Φεβρουάριος Μάρτιος Απρίλιος Μάιος Ιούνιος Ιούλιος Αύγουστος Σεπτέμβριος Οκτώβριος Νοέμβριος Δεκέμβριος Ιαν Φεβ Μάρ Απρ Μάιος Ιού Ιού Αύγ Σεπ Οκτ Νοέ Δεκ Μολις τωρα Πριν από 1 λεπτό $$1$$ minutes ago Πριν από 1 ώρα $$1$$ hours ago Εχθές $$1$$ days ago $$1$$ weeks ago 5 εβδομαδες πριν Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy