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


  jquery.js

  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 για να επεξεργαστείτε τις  φωτογραφίες σας