Μάθετέ πως προσθέτουμε slider στο blog μας

Καλήμερα σε όλους τους φίλους και αναγνώστες του blog μου, σήμερα θα προσθέσουμε slider στο blog μας. Για όσους δεν ξέρουν το τι είν...


Καλήμερα σε όλους τους φίλους και αναγνώστες του blog μου, σήμερα θα προσθέσουμε slider στο blog μας.
Για όσους δεν ξέρουν το τι είναι το slider ας κοιτάξουν την παρακάτω εικόνα, αυτό που βλέπετε παρακάτω είναι το slider το οποίο εμφανίζει εικόνα στην αριστερή μεριά και από δεξιά ένα κείμενο πατώντας είτε στην εικόνα είτε στο κείμενο μεταφερόμαστε στο ανάλογο άρθρο.

Slider for blogger

Για να το προσθέσουμε αυτό το slider στο blog μας θα πάμε;

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

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

Capture11

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

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5;

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

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>

Kαι θα πατήσουμε αποθήκευση.

μετά θα αντιγράψουμε αυτών τον κωδικό;

<div class="jflow-content-slider">
<div id="slides">
<-! Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<a target="_blank" href="http://www.lefta4you.blogspot.com /"><img style="width: 125px; height: 125px;" alt=" aw2 " src="http://s001.radikal.ru/i196/1101/00/65847a85fb87.png " /></div></div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">

TEXT-OF-THE-SLIDE

</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<-! Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<a target="_blank" href="http://www.lefta4you.blogspot.com /"><img style="width: 125px; height: 125px;" alt=" aw2 " src="http://s001.radikal.ru/i196/1101/00/65847a85fb87.png " /></div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">

TEXT-OF-THE-SLIDE

</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<-! Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<a target="_blank" href="http://www.lefta4you.blogspot.com /"><img style="width: 125px; height: 125px;" alt=" aw2 " src="http://s001.radikal.ru/i196/1101/00/65847a85fb87.png " /></div></div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">

TEXT-OF-THE-SLIDE

</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
.
.
.
.
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>

<span class="jFlowControl">2</span>

<span class="jFlowControl">3</span>

<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

Στο σημείο που γράφει ;http://www.lefta4you.blogspot.com /  βάλτε το λινκ στο οποίο θέλετε να παραπέμπει η εικόνα.

Στο σημείο που λέει; 
http://s001.radikal.ru/i196/1101/00/65847a85fb87.png "    
βάλτε το λινκ της εικόνας που θέλετε να εμφανίζετε.

Στο σημείο που λέει; TITLE-OF-THE-SLIDE  βάλτε τον τίτλο που θέλετε να εμφανίζετε.
Στο σημείο που λέει; TEXT-OF-THE-SLIDE βάλτε το κείμενο που θέλετε να εμφανίζετε

και πάμε να το βάλουμε στο blog μας με των ποιο γνωστό τρόπο;

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


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

Σχόλια

Όνομα

ΑΠΑΤΕΩΝΕΣ ΣΤΟ ΙΝΤΕΡΝΕΤ ΒΓΑΛΤΕ ΧΡΗΜΑΤΑ ΔΙΑΜΟΡΦΩΣΤΕ ΤΟ BLOG ΣΑΣ ΔΩΡΕΑΝ ΒΙΝΤΕΟ ΜΑΘΗΜΑΤΑ ΚΑΙ ΕΚΠΑΙΔΕΥΣΗ ΔΩΡΕΑΝ ΘΕΜΑΤΑ ΓΙΑ BLOGSPOT ΕΚΠΑΙΔΕΥΣΗ Ελλάδα Η ΥΠΗΡΕΣΙΕΣ ΜΟΥ Κοινωνία ΠΑΙΧΝΙΔΙΑ banner Blogger widget google html Lifestyle photoshop Proionta Project
false
ltr
item
LFY.GR: Μάθετέ πως προσθέτουμε slider στο blog μας
Μάθετέ πως προσθέτουμε slider στο blog μας
http://lh5.ggpht.com/_WHx2S6Dj1Y8/TUJ13u_AwmI/AAAAAAAABBs/ExphMKscOGI/Slider%20for%20blogger_thumb%5B3%5D.jpg?imgmax=800
http://lh5.ggpht.com/_WHx2S6Dj1Y8/TUJ13u_AwmI/AAAAAAAABBs/ExphMKscOGI/s72-c/Slider%20for%20blogger_thumb%5B3%5D.jpg?imgmax=800
LFY.GR
http://www.lfy.gr/2011/01/slider-blog.html
http://www.lfy.gr/
http://www.lfy.gr/
http://www.lfy.gr/2011/01/slider-blog.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