Easy Slider HTML

Easy Slider - Για να αναδείξετε τις εικόνες σας η τις αναρτήσεις σας

Καλησπέρα σε όλους 


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






Τώρα ας δούμε πως θα κάνουμε την εγκατάσταση του στο blog .

Βήμα 1ο :

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


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

3 .  Βρείτε στο πρότυπο σας την ετικέτα : ]]></b:skin> και κολλήστε ακριβώς από πάνω τον παρακάτω κώδικα :

/* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }       
/* Easy Slider */
    #slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
    #slider{margin-top:1em;border:1px solid #666666;}  
    #slider li, #slider2 li{
        /*
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */
        width:650px;
        height:241px;
        overflow:hidden;
        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:250px;
        top:310px;
        z-index:1000;
        }   
    #nextBtn, #slider1next{
        left:940px;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{ 
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url(http://sites.google.com/site/bloggertricks2/easyslider/btn_prev.gif) no-repeat 0 0;   
        }   
    #nextBtn a, #slider1next a{
        background:url(http://sites.google.com/site/bloggertricks2/easyslider/btn_next.gif) no-repeat 0 0;   
        }

Σημείωση : Μπορεί να χρειαστεί να προσαρμόσετε το πλάτος η τα κουμπιά του Slider  , ανάλογα με το πρότυπο σας

 

Κατανοήστε τον κώδικα :

width:650px; –  Το πλάτος του Slider
height:241px; – Το ύψος του Slider
width:30px;  -  Το πλάτος των κουμπιών του Slider
height:77px; -  Το ύψος των κουμπιών του Slider
left:250px;  - Η θέση του  του κουμπιού  Previous , προσαρμόστε το ανάλογα με τις ανάγκες σας
top:310px;  - Η θέση και των δυο κουμπιών , προς τα πάνω η προς τα κάτω . Προσαρμόστε το ανάλογα με τις ανάγκες σας
left:940px; -  Η θέση του  του κουμπιού  Next , προσαρμόστε το ανάλογα με τις ανάγκες σας

4 . Τώρα βρείτε στο πρότυπο σας την ετικέτα : </head> και κολλήστε ακριβώς από πάνω τον παρακάτω κώδικα :

<script src='http://sites.google.com/site/bloggertricks2/easyslider/jquery.js' type='text/javascript'/>
    <script src='http://sites.google.com/site/bloggertricks2/easyslider/easySlider1.7.js' type='text/javascript'/>
    <script type='text/javascript'>
        $(document).ready(function(){   
            $(&quot;#slider&quot;).easySlider({
                auto: true,
                continuous: true
            });
        });   
    </script>

Αν θέλετε μπορείτε να κατεβάσετε τα  jquery αρχεία , για να τα φιλοξενήσετε στο δικό σας file hosting site
   
1 .  jquery.js

2 . easySlider1.7.js

Βήμα 2ο :

Τώρα το τελευταίο βήμα .

Εισάγετε τον παρακάτω κώδικα με 2 τρόπους :

1 . Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα  , πατώντας προσθήκη gadget –> HTML/JavaScript

2 .  Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα :  <div id='content-wrapper'>  και κολλάμε τον παρακάτω κώδικα ακριβώς από πάνω
 

<div id='slider'>
            <ul>               
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt=' Εδώ img alt ' src=' Εδω η εικόνα /01.jpg '/></a></li>
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt='Εδώ img alt ' src=' Εδω η εικόνα /02.jpg '/></a></li>
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt='Εδω img alt  ' src=' Εδω η εικόνα /03.jpg '/></a></li>
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt='Εδω img alt  ' src=' Εδω η εικόνα /04.jpg '/'/></a></li>   
            </ul>
        </div>

Αλλάζετε τα links με τα δικά σας και αποθηκεύετε .

Αυτό ήταν όλο   …..


Σημείωση : Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider .

Δηλαδή : αν το πλάτος του Slider είναι 500px και το ύψος 300px  και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις


Μπορείτε να δείτε εδώ μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας

http://bloggertrics.blogspot.gr/2010/04/easy-slider.html