Στάλες στο γαλάζιο ®: Sliders

Nivo Slider with Default Theme & Default Settings.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9oz3a5ariIoC9IzFkABwMP8uSsos4t2zieN1pRvQX7ypOG9vB0cb4BCbmiQwhewTrHp3fG8ZoUq0LiiZkTTWScDouDa1KQjk6EelFfmtnDWWSdmI-G7rXXGvZrJYei02TNe9Fv1CblY/s1600/Nivo+Slider+with+Default+Theme+%2526+Default+Settings.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5766829331669254818" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9oz3a5ariIoC9IzFkABwMP8uSsos4t2zieN1pRvQX7ypOG9vB0cb4BCbmiQwhewTrHp3fG8ZoUq0LiiZkTTWScDouDa1KQjk6EelFfmtnDWWSdmI-G7rXXGvZrJYei02TNe9Fv1CblY/s400/Nivo+Slider+with+Default+Theme+%2526+Default+Settings.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 219px;" /></a> 
Πριν λίγο καιρό, σας είχαμε παρουσιάσει το <a href="http://loneeagle110.blogspot.com/2012/07/nivo-slider-with-pascal-theme-random.html" target="_blank">Nivo Slider with Pascal Theme & Random Settings</a>. 
Σήμερα θα σας δείξουμε το αντίστοιχο slider με τις Default ρυθμίσεις, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας. 
Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!! 
Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας. 
<center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center>1. Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML. 
2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... 
<div class="code"><div class="code_content"><head> 
</div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή θα προσθέστε τα scripts. 
<div class="code"><div class="code_content"> 
<script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js"></script> 
<script type="text/javascript"> 
$(window).load(function() { 
$('#slider').nivoSlider({ 
effect:'random', 
slices:15, 
animSpeed:500, 
pauseTime:3000, 
directionNav:true, //Next & Prev 
directionNavHide:true, //Only show on hover 
controlNav:true, //1,2,3... 
keyboardNav:true, //Use left & right arrows 
pauseOnHover:true, //Stop animation while hovering 
manualAdvance:false, //Force manual transitions 
captionOpacity:0.8, //Universal caption opacity 
beforeChange: function(){}, 
afterChange: function(){}, 
slideshowEnd: function(){} //Triggers after all slides have been shown 
}); 
}); 
</script> 
 
</div></div>3. Το επόμενο βήμα είναι, να κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... 
<div class="code"><div class="code_content">]]></b:skin> 
</div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα. 
<div class="code"><div class="code_content">/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */ 
.theme-default .nivoSlider{position:relative; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvHgB4FijacPoLSYr-UbWKlJas0KOOGqw3hPK2Rmn2Wq4MDrAV-KuWbC0AH95SYjrzqZ22FnrLtMv-SWh2Oh4dHrSR5RKnYj24OKmKSSfKtWmBtAw0Ttaly1cnKrmPtAgBH3cQfb5JEM/s16/LE-Loading.gif) no-repeat 50% 50%; -webkit-box-shadow:0px 1px 5px 0px #4a4a4a; -moz-box-shadow:0px 1px 5px 0px #4a4a4a; box-shadow:0px 1px 5px 0px #4a4a4a} 
.theme-default .nivoSlider img{ position:absolute;top:0px;left:0px;display:none} 
.theme-default .nivoSlider a{ border:0; display:block} 
.theme-default .nivo-controlNav{ position:absolute;left:50%;bottom:-42px;margin-left:-40px; 
/* Tweak this to center bullets */ } 
.theme-default .nivo-controlNav a{ display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9BaW7pmmZvQQ6eyyMum8fZ4R3B7S3EGJbtrwNGUF_edbp27UxOoqOa_QTiYPxRS4GELB5rjREX_mQr13sb18jE7B7K0A01jZ4uJC5bTgWcPSGyEXGbob-3Bm7eHEZ0IZQ_1IehJIMxU/s1600/LE.DefaultBullets.png) no-repeat;text-indent:-9999px;border:0; margin-right:3px; float:left} 
.theme-default .nivo-controlNav a.active{ background-position:0 -22px} 
.theme-default .nivo-directionNav a{ display:block; width:30px; height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vv9VGcYo9byftBh8qYc5tsxnIRBPnWWdxAOfmbCPsHvIDANpgJDGwzY4UgFHMlrvVhecSJG1_WowPRL3gAni0wBRGmVPu98FwiLXLRq_CeqJj7VzSwnIlo0a3kopO1hqWeXK05qDduw/s1600/LE.Arrows.png) no-repeat;text-indent:-9999px;border:0} 
.theme-default a.nivo-nextNav{ background-position:-30px 0; right:15px} 
.theme-default a.nivo-prevNav{ left:15px} 
.theme-default .nivo-caption{ font-family:Helvetica,Arial,sans-serif} 
.theme-default .nivo-caption a{ color:#fff; border-bottom:1px dotted #fff} 
.theme-default .nivo-caption a:hover{ color:#fff} 
/* Nivo Slider by http://loneeagle110.blogspot.com */ 
.nivoSlider{ position:relative} 
.nivoSlider img{ position:absolute; top:0px; left:0px} 
/* If an image is wrapped in a link */ 
.nivoSlider a.nivo-imageLink{ position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none} 
/* The slices and boxes in the Slider */ 
.nivo-slice{ display:block;position:absolute;z-index:5;height:100%} 
.nivo-box{ display:block;position:absolute;z-index:5} 
/* Caption styles */ 
.nivo-caption{ position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8; 
/* Overridden by captionOpacity setting */ width:100%;z-index:8} 
.nivo-caption p{ padding:5px;margin:0} 
.nivo-caption a{ display:inline !important} 
.nivo-html-caption{ display:none} 
/* Direction nav styles (e.g. Next &Prev) */ 
.nivo-directionNav a{ position:absolute;top:45%;z-index:9;cursor:pointer} 
.nivo-prevNav{ left:0px} 
.nivo-nextNav{ right:0px} 
/* Control nav styles (e.g. 1, 2, 3...) */ 
.nivo-controlNav a{ position:relative;z-index:9;cursor:pointer} 
.nivo-controlNav a.active{ font-weight:bold} 
.theme-default #slider{ margin:100px auto 50px auto;width:618px; 
/* Make sure your images are the same size */ 
height:246px; 
/* Make sure your images are the same size */ } 
.theme-pascal.slider-wrapper, 
.theme-orman.slider-wrapper{ margin-top:150px} 
.clear{ clear:both} 
/* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */ 
</div></div>4. Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. 
5. Το επόμενο βήμα μπορεί να γίνει με 2 τρόπους: 
1ος Τρόπος: 
Θα πάτε, Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript. 
<center><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvuzxKmxERSatjsUhAKE-btebpQ1EOXsTiusXzU7qPyrl95W2FDm_Cnkr5t_WX-5-__YBY_CJmhzOy1uWPJcpECs-ZyQWkA1ZyKLzA-a8E8vYiUUY9SDShyhJDgO5lyLM1gRhBH14J2oI/s1600/Html+JavaScript+gadget.jpg" width="500"></center>Κάντε αντιγραφή τον παρακάτω κώδικα και επικολλήστε τον μέσα στο HTML/JavaScript. 
<center><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqldwzrKrKovSi68e-9w0C1qcR36Yi46WRHP9WeehsmOc2ZHnjP2CpjU6HgiPnv3xJk80_9WvM4T21TdTr2tCQDw7b-AAKnUDafL_10Evpu2lLW45-v7nNZlnYgKei-pmQKpa6Pa7kpyc/s1600/Select+HTMLJavascript+gadget+and+paste+the+code+in+the+content+box.jpg" width="500"></center>θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο gadget και μέσα απο την Διάταξη θα το σύρετε πάνω από το χώρο των αναρτήσεων 
2ος Τρόπος: 
Μέσα από την Επεξεργασία HTML θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... 
<div class="code"><div class="code_content"><div id='content-wrapper'> 
</div></div>και θα επικολλήσετε τον παρακάτω κώδικα ακριβώς από πάνω του. 
Τέλος θα πατήσετε προεπισκόπηση κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο πρότυπο σας. 
<div class="code"><div class="code_content"> 
<div class="slider-wrapper theme-default"> 
<div id="slider" class="nivoSlider"> 
<a href="...http://Εδώ το URL της 1ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /01.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> 
<a href="...http://Εδώ το URL της 2ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /02.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> 
<a href="...http://Εδώ το URL της 3ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /03.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> 
<a href="...http://Εδώ το URL της 4ης Ανάρτησης .html..."><img src="...Εδω η εικόνα /04.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> 
</div> 
<div id="htmlcaption" class="nivo-html-caption"></div> 
 
</div></div>Αυτό ήταν!!! 
Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!! 
<marquee behavior="alternate" direction="left" scrollamount="3"><h2>Καλή Επιτυχία!!!!!</h2></marquee>

Π ριν λίγο καιρό, σας είχαμε παρουσιάσει το Nivo Slider with Pascal Theme & Random Settings . Σήμερα θα σας δείξουμε το αντίστοιχο s...

Διαβάστε περισσότερα »

Nivo Slider with Pascal Theme & Random Settings.

8:00 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNsCIRFNIcg5tN2qrdznRVe6MMyCXd2l53a7bwVQqFmx5AgfkYf6XoiQGYwHyp16lDOp0SfztMHs1Q8auL9LGCHyz28g45YK9JlkIkloctjtd82m24Pz566oM_KTEOd9iyCVI_ox_HcI/s1600/Nivo+Slider.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5766539266087041378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNsCIRFNIcg5tN2qrdznRVe6MMyCXd2l53a7bwVQqFmx5AgfkYf6XoiQGYwHyp16lDOp0SfztMHs1Q8auL9LGCHyz28g45YK9JlkIkloctjtd82m24Pz566oM_KTEOd9iyCVI_ox_HcI/s400/Nivo+Slider.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 211px;" /></a> <h3 class="post-title entry-title">Σήμερα θα σας δείξουμε πως μπορείτε να βάλετε ένα Slider στο blog σας, εύκολα και γρήγορα, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας. Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!! Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας. <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center> 1. Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML. 2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <div class="code"><div class="code_content"> <head> </div></div> Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή θα προσθέστε τα scripts. <div class="code"><div class="code_content">  <script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js' type='text/javascript'></script> <script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js' type='text/javascript'></script> <script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>  </div></div> 3. Το επόμενο βήμα είναι, να κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <div class="code"><div class="code_content"> ]]></b:skin> </div></div> Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα. <div class="code"><div class="code_content"> /* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */ #slider{ width:618px; height:246px} .nivoSlider{ position:relative} .nivoSlider img{ position:absolute;top:0px;left:0px} /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink{ position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none} /* The slices and boxes in the Slider */ .nivo-slice{ display:block;position:absolute;z-index:5;height:100%} .nivo-box{ display:block;position:absolute;z-index:5} /* Caption styles */ .nivo-caption{ position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8} .nivo-caption p{padding:5px;margin:0} .nivo-caption a{ display:inline !important} .nivo-html-caption{ display:none} /* Direction nav styles (e.g. Next &Prev) */ .nivo-directionNav a{ position:absolute;top:45%;z-index:9;cursor:pointer} .nivo-prevNav{ left:0px} .nivo-nextNav{ right:0px} /* Control nav styles (e.g. 1, 2, 3...) */ .nivo-controlNav a{ position:relative;z-index:9;cursor:pointer} .nivo-controlNav a.active{ font-weight:bold} /* Nivo Slider Tutorial http://loneeagle110.blogspot.com Skin Name:Pascal Theme Skin URI:http://nivo.dev7studios.com Skin Type:fixed Description:A nice,light skin for the Nivo Slider. Version:1.0 Author:Gilbert Pellegrom &Pascal Gartner Author URI:http://dev7studios.com */ .theme-pascal.slider-wrapper{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdW1W1-iDY6FKsZkb419QO8ZqfJWyhlQ6HNPeqwPI7s6GgDU_tYiJ8bOwoqVcApGk_iW1LbOe-lGHp2Q8l1ltWTcbHlM8_Xtofayca8qFvwRnlwM3s4KgzKSelhjy07uKw41p2hO4lhQ/s1600/LE-Slider-bg.png) no-repeat;width:668px;height:299px;margin:0 auto;padding-top:17px;position:relative} .theme-pascal .nivoSlider{ position:relative;width:630px;height:235px;margin-left:19px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvHgB4FijacPoLSYr-UbWKlJas0KOOGqw3hPK2Rmn2Wq4MDrAV-KuWbC0AH95SYjrzqZ22FnrLtMv-SWh2Oh4dHrSR5RKnYj24OKmKSSfKtWmBtAw0Ttaly1cnKrmPtAgBH3cQfb5JEM/s16/LE-Loading.gif) no-repeat 50% 50%} .theme-pascal .nivoSlider img{ position:absolute;top:0px;left:0px;display:none;width:630px; /* Make sure your images are the same size */ height:235px; /* Make sure your images are the same size */} .theme-pascal .nivoSlider a{ border:0; display:block} .theme-pascal .nivo-controlNav{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQtHtea63ocjxKDdpvHzpirDGA6v11pMMjg_BSpJz3-nGO7-7tsXajxdbf-ZQge9zU4TMvQhvtkKey-jsQF5P7u4Fi405WfcFMz0ZVnnCPxZuqjQDtfqCcwMEg0UMSj7Ic-i3NSMoj1g/s1600/LE-ControlNav.png) no-repeat; width:251px; height:40px; position:absolute; left:200px; /* Tweak this to center bullets */ bottom:-42px;padding:8px 0 0 82px;z-index:20} .theme-pascal .nivo-controlNav a{ display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpQTU-9aVY8gBdxmJukshP3m8djEQFVR3JM_91BB1zxuHB1qlBvIpXZyDdz9FuBsmD5dnYwpcDK5Vefowcsg1iMrX3FC1-NZDct6DHc8dgzmhcx9ylBU1rEZFTQV_MPNLMkCLPar95UY/s1600/LE-Bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left} .theme-pascal .nivo-controlNav a.active{ background-position:0 -22px} .theme-pascal .nivo-directionNav a{ display:none} .theme-pascal .nivo-caption{ bottom:40%;left:auto;right:0px;width:auto;max-width:630px;overflow:hidden;background:#fff;text-shadow:none;font-family:arial,serif;color:#4c4b4b} .theme-pascal .nivo-caption p{ padding:5px 15px;color:#333;font-weight:bold;font-size:27px;text-transform:uppercase} .theme-pascal .nivo-caption a{ color:#333;font-weight:bold;font-size:27px;text-transform:uppercase} .theme-pascal .ribbon{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuze3cuplWcKE8OGVBD-P-AJHQZRMsAzWkHly7pMlv_ibZbIWu3R0F6foOGbvfj5ngNBxzczPXe1ia1rcGqeQNbZ9OdxrBXiM3ybK2NP2DBlT8LSFCcJnMXIRQGljLUmXFu1yXTpXaKg/s1600/LE_Ribbon.png) no-repeat;width:111px;height:111px;position:absolute;top:-8px;left:-8px;z-index:300} /* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */ </div></div> 4. Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. 5. Το επόμενο βήμα μπορεί να γίνει με 2 τρόπους: 1ος Τρόπος: Θα πάτε, Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript. <center><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvuzxKmxERSatjsUhAKE-btebpQ1EOXsTiusXzU7qPyrl95W2FDm_Cnkr5t_WX-5-__YBY_CJmhzOy1uWPJcpECs-ZyQWkA1ZyKLzA-a8E8vYiUUY9SDShyhJDgO5lyLM1gRhBH14J2oI/s1600/Html+JavaScript+gadget.jpg" width="500"></center> Κάντε αντιγραφή τον παρακάτω κώδικα και επικολλήστε τον μέσα στο HTML/JavaScript. <center><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqldwzrKrKovSi68e-9w0C1qcR36Yi46WRHP9WeehsmOc2ZHnjP2CpjU6HgiPnv3xJk80_9WvM4T21TdTr2tCQDw7b-AAKnUDafL_10Evpu2lLW45-v7nNZlnYgKei-pmQKpa6Pa7kpyc/s1600/Select+HTMLJavascript+gadget+and+paste+the+code+in+the+content+box.jpg" width="500"></center> θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο gadget και μέσα απο την Διάταξη θα το σύρετε πάνω από το χώρο των αναρτήσεων 2ος Τρόπος: Μέσα από την Επεξεργασία HTML θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <div class="code"><div class="code_content"> <div id='content-wrapper'> </div></div> και θα επικολλήσετε τον παρακάτω κώδικα ακριβώς από πάνω του. Τέλος θα πατήσετε προεπισκόπηση κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο πρότυπο σας. <div class="code"><div class="code_content">  <div class="slider-wrapper theme-pascal"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /01.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> <a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /02.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> <a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /03.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> <a href="...http://Εδώ το URL της Ανάρτησης .html..."><img src="...Εδω η εικόνα /04.jpg..." alt="" title="...Εδώ ο Τίτλος..."/></a> </div> <div id="htmlcaption" class="nivo-html-caption"> </div> </div>  </div></div> Αυτό ήταν!!! Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!! </h3> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>Καλή Επιτυχία!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders Nivo Slider with Pascal Theme & Random Settings.

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

Διαβάστε περισσότερα »

Featured Post Content Slider to Blogger.

6:15 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ17gyEaYlxNYnnKtq7jUOXM0TxATu87gQwhPWCpityjJmrrl4c71IQz_w_jhgdhBSlAGzPv8x_2v-CmABX7pv-_BuUZdPvXjyK1AbPLIiItgindNqk8bPEtGSgMQRfGmtlj4G5Cm_7Uo/s1600/Featured+Post+Content+Slider+to+Blogger.jpg"><img alt="Featured Post Content Slider to Blogger" border="0" id="BLOGGER_PHOTO_ID_5705621845342614402" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ17gyEaYlxNYnnKtq7jUOXM0TxATu87gQwhPWCpityjJmrrl4c71IQz_w_jhgdhBSlAGzPv8x_2v-CmABX7pv-_BuUZdPvXjyK1AbPLIiItgindNqk8bPEtGSgMQRfGmtlj4G5Cm_7Uo/s400/Featured+Post+Content+Slider+to+Blogger.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 198px;" /></a> <h3 class="post-title entry-title">Το παρακάτω σχέδιο "Slider", θα σας βοηθήσει να αναδείξετε τις αναρτήσεις που θέλετε ή απλά να ομορφύνετε το ιστολόγιό σας με αγαπημένες φωτογραφίες. Ποιος από εσάς δεν επιθυμεί κάτι τέτοιο;;; <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center> 0.Πριν την οποιαδήποτε αλλαγή κρατήστε BACKUP ΤΟ ΠΡΟΤΥΠΟ ΣΑΣ για να αποφύγετε δυσάρεστες καταστάσεις σε περίπτωση λάθους!!!!!!! 1. Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML 2. Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <div class="code"><div class="code_content"> </head> </div></div> Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το </head> και θα προσθέσετε τον παρακάτω κώδικα. <div class="code"><div class="code_content">  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { slideshowle(5000); // χρόνος εναλλαγής εικόνων }); function slideshowle(speed) { $('ul.slideshowle').append('<li id="slideshowle-caption" class="caption"><div class="slideshowle-caption-container"><h3></h3></div></li>'); $('ul.slideshowle li').css({opacity: 0.0}); $('ul.slideshowle li:first').css({opacity: 1.0}); $('#slideshowle-caption h3').html($('ul.slideshowle a:first').find('img').attr('title')); $('#slideshowle-caption p').html($('ul.slideshowle a:first').find('img').attr('alt')); $('#slideshowle-caption').css({opacity: 0.7, bottom:0}); var timer = setInterval('gallery()',speed); $('ul.slideshowle').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { var current = ($('ul.slideshowle li.show')? $('ul.slideshowle li.show') : $('#ul.slideshowle li:first')); var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshowle-caption')? $('ul.slideshowle li:first') :current.next()) : $('ul.slideshowle li:first')); var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); $('#slideshowle-caption').animate({bottom:-70}, 300, function () { $('#slideshowle-caption h3').html(title); $('#slideshowle-caption p').html(desc); $('#slideshowle-caption').animate({bottom:0}, 500); }); current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type="text/css"> ul.slideshowle { list-style:none; width:600px; // πλάτος height:250px; // ύψος overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana;} ul.slideshowle li { position:absolute; left:0; right:0; } ul.slideshowle li.show { z-index:500;} ul img { width:600px; // πλάτος height:250px; // ύψος border:none;} #slideshowle-caption { width:600px; // πλάτος height:70px; // το ύψος της διαφάνειας που θα εμφανίζεται το κείμενο position:absolute; bottom:0; left:0; color:#fff; // χρώμα κειμένου background:#000; // χρώμα φόντου z-index:500;} #slideshowle-caption .slideshowle-caption-container { padding:5px 10px; z-index:1000;} #slideshowle-caption h3 { margin:0; padding:0; font-size:16px;} #slideshowle-caption p { margin:5px 0 0 0; padding:0;} </style>  </div></div> <blockquote> Σημείωση!!!! Για τους φίλους που θέλουν να μεγαλώσουν ή να μικρύνουν το μέγεθος του Slider θα πρέπει να αλλάξουν τις τιμές που είναι με πράσινο χρώμα πλάτος/ύψος & στα 3 σημεία του css. </blockquote> 3.Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση. Εισάγετε τον παρακάτω κώδικα με 2 τρόπους: 1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript. <center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center> θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα. <center><img src="http://i56.tinypic.com/24cegdl.jpg"></center> 2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML. Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις. <div class="code"><div class="code_content">  <ul class="slideshowle"> <li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα ..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li> <li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li> <li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα ..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li> <li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li> // για επιπλέον παρουσιάσεις </ul>  </div></div> <blockquote>Για να προσθέσετε κι άλλες παρουσιάσεις θα προσθέσετε τον παρακάτω κώδικα όσες φορές χρειάζεται στο σημείο // για επιπλέον παρουσιάσεις <li><a href="...το url της ανάρτησης..."><img src="...Ο σύνδεσμος για την εικόνα..." title="...ο τίτλος..." alt="...το κείμενο που θα εμφανίζεται..." /></a></li> </blockquote> 4.Τέλος πατήστε Προεπισκόπηση & αν δεν σας βγάλει κάποιο λάθος, πατήστε ΑΠΟΘΗΚΕΥΣΗ. Και κάντε Ανανέωση την σελίδα σας. </h3> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders Featured Post Content Slider to Blogger.

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

Διαβάστε περισσότερα »

Featured Slider with jQuery ( Grey - Red - White Color ) .

5:00 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMC481EExrduEnE1b7V0lc2LulQO_z5xsFJK1-aLJe5so3DqrXp1T5LuJHdrM7grI4PFRBYaL8aa0xzkPSnnicMaCaOiDPNUaVXqtDjUBRce9bCLNrw0E6X6jUHgtD4CRC7ogPxZjY7jQ/s1600/Featured+Slider+with+jQquery.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Featured Slider with jQquery" border="0" id="BLOGGER_PHOTO_ID_5533428369925555570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMC481EExrduEnE1b7V0lc2LulQO_z5xsFJK1-aLJe5so3DqrXp1T5LuJHdrM7grI4PFRBYaL8aa0xzkPSnnicMaCaOiDPNUaVXqtDjUBRce9bCLNrw0E6X6jUHgtD4CRC7ogPxZjY7jQ/s400/Featured+Slider+with+jQquery.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 302px;" /></a> <h3 class="post-title entry-title">Σε αυτή την ανάρτηση θα σας παρουσιάσουμε ακόμα ένα εντυπωσιακό "slider" πλουτίζοντας σιγά-σιγά κι αυτήν την κατηγορία του ιστολογίου μας. Είναι ένα widget που θα σας βοηθήσει να αναδείξετε τις αναρτήσεις που θέλετε & παράλληλα να ομορφύνετε το ιστολόγιό σας. Ένα υπάρχον σχέδιο το οποίο τροποποίησα σε 2 ακόμα χρώματα για να καλύψω τα γούστα σας. <center><img src="http://i41.tinypic.com/t0rt5x.jpg" /></center> Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server ή ακόμα καλύτερα να τα φορτώσετε μέσα στο html σας. <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/jquery-1.2.6.min.js" target="_blank">jquery-1.2.6.min.js</a> <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/jquery.jcarousel.pack.js" target="_blank">jcarousel.pack.js</a> <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js" target="_blank">personalized-1.5.2.packed.js</a> Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a> Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML. Και με το Ctrl + F θα κάνετε αναζήτηση για το.... <div class="code"><div class="code_content"> </head> </div></div> Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το </head> Θα προσθέσετε τα scripts του Slideshow αφού πρώτα έχετε προσθέσει τις διευθύνσεις των scripts στα σημεία "...jquery-1.2.6.min.js..." & "...jcarousel.pack.js..." & "...personalized-1.5.2.packed.js...". <div class="code"><div class="code_content"> <script src='...jquery-1.2.6.min.js...' type='text/javascript'></script> <script src='...jcarousel.pack.js...' type='text/javascript'></script> <script src='...personalized-1.5.2.packed.js...' type='text/javascript'></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> </div></div> Ακριβώς από κάτω από τα scripts θα προσθέσετε το ανάλογο css για όποιο φόντο θέλετε. <center>Tο css με Άσπρο φόντο. <img alt="Featured Slider with jQquery" src="http://i51.tinypic.com/jie6hd.jpg" width="500"></center> <div class="code"><div class="code_content"> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#ffffff;padding:20px 0;} #news-slider img{border:none;height:254px;width:307px;} </style> </div></div> <center>Δείτε το στην πράξη <object data="http://stales.ucoz.com/Featured_Slider_jQquery.swf" height="250" menu="false" type="" width="500" wmode="transparent"></object></center> <center>Tο css με Κόκκινο φόντο. <img alt="Featured Slider with jQquery" src="http://i52.tinypic.com/8z0fwg.jpg" width="500"></center> <div class="code"><div class="code_content"> <style type='text/css'> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-red.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-red.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#990000;padding:20px 0;} #news-slider img{border:none;height:254px;width:307px;} </style> </div></div> <center>Tο css με Σκούρο Γκρι φόντο. <img alt="Featured Slider with jQquery" src="http://i51.tinypic.com/312ajxe.jpg" width="500"></center> <div class="code"><div class="code_content"> <style type='text/css'> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-black.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-black.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#333;padding:20px 0;} #news-slider img{border:none;height:254px;width:307px;} </style> </div></div> Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση. Εισάγετε τον παρακάτω κώδικα με 2 τρόπους: 1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript. <center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center> θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα. <center><img src="http://i56.tinypic.com/24cegdl.jpg"></center> 2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML. Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις. <div class="code"><div class="code_content">  <div id='news-slider'> <ul class='jcarousel-skin-tango' id='mycarousel'> <li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 1...'><img src='...direct link image 1.jpg...'/></a></li> <li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 2...'><img src='...direct link image 2.jpg...'/></a></li> <li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 3...'><img src='...direct link image 3.jpg...'/></a></li> <li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 4...'><img src='...direct link image 4.jpg...'/></a></li> <li><a href='...Ο σύνδεσμος της ανάρτησης για την εικόνα 5...'><img src='...direct link image 5.jpg...'/></a></li> </ul> </div>  </div></div> Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. Τώρα θα πάτε στο Πίνακα ελέγχου σας & μέσα από την Σχεδίαση θα προσαρμόσετε το gadget στο σημείο που θέλετε να εμφανίζεται στη σελίδα σας, συνήθως πάνω από τις αναρτήσεις σας. <blockquote> Σημείωση: Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider . Δηλαδή, αν το πλάτος του Slider είναι 410px και το ύψος 300px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις Μπορείτε να δείτε <a href="http://loneeagle110.blogspot.com/2010/07/6-online-free-photo-editors.html" target="_blank">εδώ</a> & <a href="http://loneeagle110.blogspot.com/2010/03/20-on-line-photo-editors.html" target="_blank">εδώ</a> μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας. </blockquote> </h3> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders Featured Slider with jQuery ( Grey - Red - White Color ) .

Σ ε αυτή την ανάρτηση θα σας παρουσιάσουμε ακόμα ένα εντυπωσιακό "slider" πλουτίζοντας σιγά-σιγά κι αυτήν την κατηγορία του ιστολο...

Διαβάστε περισσότερα »

Create a Free Travel Slideshow with Music - TripAdvisor

10:00 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0aPClH3jUF0y7IzVqt_70P1oCswJJ8FssXcxXz-dPr6gX5xvvaJl8CpxjoAjtDEOJW-35pBJ5INLaBKQS3eTYeO4z14Tgvr60NPgP2lb_9xPYOmuV30wyoO97NG6nE2S9Qrp4HHeBgdM/s1600/%25CE%25A4ripAdvisor.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="ΤripAdvisor, Online Tools, Sliders, Slideshows, Create a Free Travel Slideshow with Music" border="0" id="BLOGGER_PHOTO_ID_5608789228598718370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0aPClH3jUF0y7IzVqt_70P1oCswJJ8FssXcxXz-dPr6gX5xvvaJl8CpxjoAjtDEOJW-35pBJ5INLaBKQS3eTYeO4z14Tgvr60NPgP2lb_9xPYOmuV30wyoO97NG6nE2S9Qrp4HHeBgdM/s400/%25CE%25A4ripAdvisor.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 163px;" /></a> <h3 class="post-title entry-title">Το μεγαλύτερο παγκοσμίως site με κριτικές κι απόψεις για ταξίδια σε όλο τον κόσμο κυκλοφόρησε και στα <a href="http://www.tripadvisor.com.gr/" target="_blank">Ελληνικά</a>. Το ΤripAdvisor κυκλοφορεί πλέον σε 25 γλώσσες και αθόρυβα κατακτά την παγκόσμια αγορά. Παράλληλα όμως σας δίνει την δυνατότητα μέσα από τη ιστοσελίδα του να δημιουργήσετε το δικό σας slideshow, από φωτογραφίες που τυχόν μπορεί να έχετε στο facebook, στο Picasa, στο Flickr ή και ακόμα να ανεβάσετε κάποιες μέσα από τον υπολογιστή σας. Η διαδικασία είναι απλή και δεν έχετε παρά να δοκιμάσετε κάνοντας "κλικ" στο κίτρινο κουμπάκι <center><a href="http://tripwow.tripadvisor.com/tripwow/builder/?cs=ihnbm&ssid=ta-demo&theme=" target="_blank"><img src="http://i52.tinypic.com/vd0cax.jpg" /></a></center> Στη σελίδα που θα βρεθείτε θα δείτε τα υπάρχοντα έτοιμα θέματα. Μπορείτε να επιλέξετε κάποιο & να συνεχίσετε ή να αφήσετε αυτήν την επιλογή για αργότερα. Πατήστε continue... <center><img src="http://i53.tinypic.com/34gomsx.jpg" width="500" /></center> Εδώ θα επιλέξετε από που θα πάρετε τις φωτογραφίες που θα χρησιμοποιήσετε. <center><img src="http://i54.tinypic.com/9qzrz7.jpg" width="500" /></center> Με το που θα ανεβάσετε την πρώτη φωτογραφία, θα ανοίξει στην δεξιά πλευρά της σελίδας κάποια πεδία επιλογών, όπου θα πρέπει να γράψετε λίγα λόγια, α) για εσάς, β) την ονομασία του slideshow σας, γ) αν θέλετε να προσθέσετε κάποιο αρχείο ήχου για μοσική υπόκρουση. <center><img src="http://i55.tinypic.com/293xg5g.jpg" width="500" /></center> Και στην περίπτωση που δεν έχετε επιλέξει κάποιο θέμα ως φόντο, έχετε την δυνατότητα πηγαίνοντας το δείκτη του ποντικιού σας πάνω σε κάποιο, να το δείτε σε προεπισκόπηση με την εικόνα σας, για να αποφασίσετε. <center><img src="http://i56.tinypic.com/2vuhois.jpg" width="500" /></center> Αφού περάσετε τις εικόνες σας όλες, θα πατήσετε το Done! Σε αυτό το σημείο ΑΝ ΔΕΝ έχετε λογαριασμό στη σελίδα θα σας ζητηθεί να δημιουργήσετε ένα, μέσα από μια απλή & συνηθισμένη διαδικασία. Από κεί & πέρα η διαδικασία διαμοιρασμού είναι ολοφάνερη, όπως βλέπετε στην παρακάτω εικόνα. <center><img src="http://i56.tinypic.com/w6v51z.jpg" width="500" /></center> Και για να το περάσετε στην ιστολόγιό σας δεν έχετε παρά να πατήσετε το πράσινο κουμπί " Embed on your site" και να σας δωθεί ο κώδικας που θα κάνετε αντιγραφή-επικόλληση μέσα σε ένα HTML/JavaScript gadget, από την διαδρομή Πίνακας ελέγχού --> Σχεδίαση --> Στοιχεία Σελίδας --> Προσθήκη gadget --> HTML/JavaScript. <center><img src="http://i54.tinypic.com/2i9cnb.jpg" width="500" /></center> <blockquote> Μια φιλική παρατήρηση Καλό θα ήταν το σημείο που λέει "Start playing the slideshow automatically" να μην το τσεκάρετε, έτσι ώστε να μην αργεί στη φόρτωση της η σελίδα σας όταν θα ανοίγει. </blockquote> Μπορείτε να ρίξετε μια ματιά στα αμέτρητα slideshows χρηστών από όλο το κόσμο και να πάρετε κάποιες ιδέες <a href="http://tripwow.tripadvisor.com/slideshow" target="_blank">εδώ</a>!!! Κι <a href="http://tripwow.tripadvisor.com/slideshow/greece.html" target="_blank">εδώ</a> να απολαύσετε τις 11.923 Ελληνικές δημιουργίες!!! Καλή επιτυχία στο δικό σας & θα χαρούμε πολύ να μας στείλετε τον σύνδεσμο της σελίδας σας για να το δούμε!!! </h3>

Online Tools Sliders Slideshows TripAdvisor Create a Free Travel Slideshow with Music - TripAdvisor

Τ ο μεγαλύτερο παγκοσμίως site με κριτικές κι απόψεις για ταξίδια σε όλο τον κόσμο κυκλοφόρησε και στα Ελληνικά . Το ΤripAdvisor κυκλοφορεί ...

Διαβάστε περισσότερα »

jQuery Featured Content Slideshow.

5:15 μ.μ. LoneEagle 4

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKskyoliusEJtmZfpkS6FHrzP0WHfDktYbWKChelFg2Zbq_8Mk3_QjPTD824LwoGTyIyu6QrnzZWlnd_QUJEpyNPzoMAYH7ZXtt8uIsWaRN4BP6988CWw-9y1yQJQo-trz9KzOas5qcI/s1600/jQuery+Featured+Content+Slideshow.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="jQuery Featured Content Slideshow" border="0" id="BLOGGER_PHOTO_ID_5533042262682934050" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKskyoliusEJtmZfpkS6FHrzP0WHfDktYbWKChelFg2Zbq_8Mk3_QjPTD824LwoGTyIyu6QrnzZWlnd_QUJEpyNPzoMAYH7ZXtt8uIsWaRN4BP6988CWw-9y1yQJQo-trz9KzOas5qcI/s400/jQuery+Featured+Content+Slideshow.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 160px;" /></a> Ακόμα ένα σχέδιο για "Slider" για να αναδείξετε τις φωτογραφίες ή τις αναρτήσεις σας. Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server. <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/1.4.2.jquery.min.js" target="_blank">1.4.2.jquery.min.js</a> Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a> Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML. Και με το Ctrl + F θα κάνετε αναζήτηση για το.... <div class="code"><div class="code_content"> <head> </div></div> Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <head> Θα προσθέσετε το script του Slideshow αφού πρώτα έχετε προσθέσει την διευθύνση του script στο σημείο που λέει "....1.4.2.jquery.min.js....." . <div class="code"><div class="code_content">  <script src='....1.4.2/jquery.min.js....' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { slideShow(3000); }); function slideShow(speed) { $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3></div></li>'); $('ul.slideshow li').css({opacity: 0.0}); $('ul.slideshow li:first').css({opacity: 1.0}); $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title')); $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt')); $('#slideshow-caption').css({opacity: 0.7, bottom:0}); var timer = setInterval('gallery()',speed); $('ul.slideshow').hover( function () { clearInterval(timer); }, function () { timer = setInterval('gallery()',speed); } ); } function gallery() { var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first')); var title = next.find('img').attr('title'); var desc = next.find('img').attr('alt'); next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000); $('#slideshow-caption').animate({bottom:-70}, 300, function () { $('#slideshow-caption h3').html(title); $('#slideshow-caption p').html(desc); $('#slideshow-caption').animate({bottom:0}, 500); }); current.animate({opacity: 0.0}, 1000).removeClass('show'); } //]]> </script> <style type="text/css"> ul.slideshow{list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; } ul.slideshow li{position:absolute; left:0; right:0} ul.slideshow li.show{z-index:500} ul img{width:600px; height:240px; border:none} #slideshow-caption{width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500} #slideshow-caption .slideshow-caption-container{padding:5px 10px; z-index:1000} #slideshow-caption h3{margin:0; padding:0; font-size:16px} #slideshow-caption p{margin:5px 0 0 0; padding:0} </style>  </div></div> Επεξήγηση κώδικα: Τα σημεία που έχω χρωματίσει είναι αυτά που μπορείτε άφοβα να τα αλλάξετε. Το ul img{width:600px; = το πλάτος του slider και το height:240px; = το ύψος του slider. Ακριβώς παρακάτω.. #slideshow-caption{width:600px; = το πλάτος της διαφάνειας που εμφανίζεται το κείμενό σας height:70px; = το ύψος της διαφάνειας. Στα σημεία color:#fff; = το χρώμα του κειμένου background:#000; = το φόντο της διαφάνειας. Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση. Εισάγετε τον παρακάτω κώδικα με 2 τρόπους: 1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript. <center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center> θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα. <center><img src="http://i56.tinypic.com/24cegdl.jpg"></center> 2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML. Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις. <div class="code"><div class="code_content">  <ul class="slideshow"> <li><a href="#"><img src="...direct link image 1.jpg..." title="...η περιγραφή σας..." alt="" /></a></li> <li><a href="#"><img src="...direct link image 2.jpg..." title="...η περιγραφή σας..." alt="" /></a></li> <li><a href="#"><img src="...direct link image 3.jpg..." title="...η περιγραφή σας..." alt="" /></a></li> <li><a href="#"><img src="...direct link image 4.jpg..." title="...η περιγραφή σας..." alt="" /></a></li> <li><a href="#"><img src="...direct link image 5.jpg..." title="...η περιγραφή σας..." alt="" /></a></li> </ul>  </div></div> Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε να κάνετε ανανέωση στη σελίδα σας. Σημείωση: Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider . Δηλαδή, αν το πλάτος του Slider είναι 600px και το ύψος 240px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις Μπορείτε να δείτε <a href="http://loneeagle110.blogspot.com/2010/07/6-online-free-photo-editors.html" target="_blank">εδώ</a> & <a href="http://loneeagle110.blogspot.com/2010/03/20-on-line-photo-editors.html" target="_blank">εδώ</a> μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας. <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders jQuery Featured Content Slideshow.

Ακόμα ένα σχέδιο για "Slider" για να αναδείξετε τις φωτογραφίες ή τις αναρτήσεις σας. Καταρχήν θα πάτε να κατεβάσετε τα scripts κα...

Διαβάστε περισσότερα »

Featured Content Slider for Blogger Using jQuery.

12:32 μ.μ. LoneEagle 3

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwqrErzzcq5r25E-iWL5bCpxTToRRuBi3c9OWCllq_kjpEPGeSW1x_zSXa9gxjmJJdf1H1Qb9yrwFyTuY8mELEvKFwwJGjiSal5EoY4ECJKQ3TouHC9LVh5E6NTy5NHPHs7C5OK50q6A/s1600/Featured+Content+Slider+for+Blogger+Using+jQuery.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Featured Content Slider for Blogger Using jQuery,Blogger Help,Blogger Tutorials,JQuery Tutorials,Sliders" border="0" id="BLOGGER_PHOTO_ID_5534197498262564146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwqrErzzcq5r25E-iWL5bCpxTToRRuBi3c9OWCllq_kjpEPGeSW1x_zSXa9gxjmJJdf1H1Qb9yrwFyTuY8mELEvKFwwJGjiSal5EoY4ECJKQ3TouHC9LVh5E6NTy5NHPHs7C5OK50q6A/s400/Featured+Content+Slider+for+Blogger+Using+jQuery.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 158px;" /></a> Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server. <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/1.3.2jquery.min.js" target="_blank">1.3.2/jquery.min.js</a> <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/1.5.3jquery-ui.min.js" target="_blank">1.5.3/jquery-ui.min.js</a> Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a> Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML. Και με το Ctrl + F θα κάνετε αναζήτηση για το.... <div class="code"><div class="code_content"> </head> </div></div> Μόλις το βρείτε, θα πάτε στην αμέσως προυγούμενη γραμμή από το </head> και θα προσθέσετε τα scripts του Slideshow αφού πρώτα έχετε προσθέσει τις διευθύνσεις των scripts στα σημεία "....1.3.2/jquery.min.js...." & "....1.5.3/jquery-ui.min.js...." . <div class="code"><div class="code_content">  <script src='....1.3.2/jquery.min.js....' type='text/javascript'/> <script src='....1.5.3/jquery-ui.min.js....' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>  </div></div> Κατόπιν με το Ctrl + F θα κάνετε αναζήτηση για το.... <div class="code"><div class="code_content"> ]]></b:skin> </div></div> Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το ]]></b:skin> και θα προσθέσετε το css του Slideshow ( δηλαδή το πως θα εμφανίζεται, χρώματα φοντου, κειμένου, μέγεθος εικόνων, πλατος, υψος κ.τ.λ. ). <div class="code"><div class="code_content">  #featured{width:400px; padding-right:250px; position:relative; height:250px; background:#fff; border:5px solid #ccc} #featured ul.ui-tabs-nav{position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px} #featured ul.ui-tabs-nav li{padding:1px 0; padding-left:13px; font-size:12px; color:#666} #featured ul.ui-tabs-nav li span{font-size:11px; font-family:Verdana; line-height:18px} #featured .ui-tabs-panel{width:400px; height:250px; background:#999; position:relative; overflow:hidden} #featured .ui-tabs-hide{display:none} #featured li.ui-tabs-nav-item a{display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none} #featured li.ui-tabs-nav-item a:hover{background:#f2f2f2} #featured li.ui-tabs-selected{background:url('selected-item.gif') top left no-repeat} #featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#ccc} #featured ul.ui-tabs-nav li img{float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee} #featured .ui-tabs-panel .info{position:absolute; top:180px; left:0; height:70px; width:400px; background:url('transparent-bg.png')} #featured .info h2{font-size:18px; font-family:Georgia,serif; color:#fff; padding:5px; margin:0; overflow:hidden} #featured .info p{margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0} #featured .info a{text-decoration:none; color:#fff} #featured .info a:hover{text-decoration:underline}  </div></div> Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση >>> προσθήκη gadget HTML/JavaScript. <center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center> θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα. <center><img src="http://i56.tinypic.com/24cegdl.jpg"></center> <div class="code"><div class="code_content">  <div id='featured'> <ul class='ui-tabs-nav'> <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='....ο σύνδεσμος της ανάρτησή σας....'><img alt="pic1" src="....το direct link για τη μικρή εικόνα 1...." />....ο τίτλος....</a></li> <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='....ο σύνδεσμος της ανάρτησή σας....'><img alt="blogger" src="....το direct link για τη μικρή εικόνα 2...." />....ο τίτλος....</a></li> <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='....ο σύνδεσμος της ανάρτησή σας....'><img alt="buzz" src="....το direct link για τη μικρή εικόνα 3...." />....ο τίτλος....</a></li> <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='....ο σύνδεσμος της ανάρτησή σας....'><img alt="chat" src="....το direct link για τη μικρή εικόνα 4...." />....ο τίτλος....</a></li> </ul>  <div class='ui-tabs-panel' id='fragment-1' style=''> <img alt="mac" src="....το direct link για τη μεγάλη εικόνα 1...." /> <div class='info'> <h3><a href='#'>....ο τίτλος....</a></h3> ....η περιγραφή σας....<a href='....ο σύνδεσμος της ανάρτησή σας....'>read more</a> </div> </div>  <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''> <img alt="" src="....το direct link για τη μεγάλη εικόνα 2...." /> <div class='info'> <h3><a href='#'>....ο τίτλος....</a></h3> ....η περιγραφή σας....<a href='....ο σύνδεσμος της ανάρτησή σας....'>read more</a> </div> </div>  <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''> <img alt="" src="....το direct link για τη μεγάλη εικόνα 3...." /> <div class='info'> <h3><a href='#'>....ο τίτλος....</a></h3> ....η περιγραφή σας....<a href='....ο σύνδεσμος της ανάρτησή σας....'>read more</a> </div> </div>  <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''> <img alt="" src="....το direct link για τη μεγάλη εικόνα 4...." /> <div class='info'> <h3><a href='#'>....ο τίτλος....</a></h3> ....η περιγραφή σας....<a href='....ο σύνδεσμος της ανάρτησή σας....'>read more</a> </div> </div> </div>  </div></div> Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. Τώρα θα πάτε στο Πίνακα ελέγχου σας & μέσα από την Σχεδίαση θα προσαρμόσετε το gadget στο σημείο που θέλετε να εμφανίζεται στη σελίδα σας, συνήθως πάνω από τις αναρτήσεις σας. Σημείωση: Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider . Δηλαδή, αν το πλάτος του Slider είναι 410px και το ύψος 300px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις Μπορείτε να δείτε <a href="http://loneeagle110.blogspot.com/2010/07/6-online-free-photo-editors.html" target="_blank">εδώ</a> & <a href="http://loneeagle110.blogspot.com/2010/03/20-on-line-photo-editors.html" target="_blank">εδώ</a> μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας. <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders Featured Content Slider for Blogger Using jQuery.

Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server. 1.3.2/jquery.min.js 1.5.3/jquery-ui.min.js Δείτε σχετική ...

Διαβάστε περισσότερα »

Image Slide Show - ( Example 3 ) Two styles.

8:55 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOD8kDcacj3xbDwXI8hrujTmNuEYI8EIjlBudR5HEu95s4W0FEQSrtJ7jE5pLWV_-NXWo7Nmqwz2EzNjfMSFn6A0F5V86uGI5LoGWHyIJkdug-bL5V-vsf2I6BdlNwfQDy_vWvxUCsMU4/s1600/Image+Slide+Show.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Image Slide Show" border="0" id="BLOGGER_PHOTO_ID_5532290672376429202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOD8kDcacj3xbDwXI8hrujTmNuEYI8EIjlBudR5HEu95s4W0FEQSrtJ7jE5pLWV_-NXWo7Nmqwz2EzNjfMSFn6A0F5V86uGI5LoGWHyIJkdug-bL5V-vsf2I6BdlNwfQDy_vWvxUCsMU4/s400/Image+Slide+Show.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 211px;" /></a> Και τελειώνουμε αυτήν την παρουσίαση, με το τρίτο σχέδιο, το οποίο είναι για δύο διαστάσεις πλάτους. Δείτε το & επιλέξτε εσείς πιο από τα δύο θέλετε να χρησιμοποιήσετε. Και μήν νομίζετε πως τελειώσαμε εδώ..... Τα καλύτερα έρχονται.... Μέινετε συντονισμένοι... με τους πρώτους! !!! Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server. <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/s3Slider.js" target="_blank">s3Slider.js</a> <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/jquery.js" target="_blank">jquery.js</a> Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a> Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML. Και με το Ctrl + F θα κάνετε αναζήτηση για το.... <div class="code"><div class="code_content"> <head> </div></div> Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <head> Θα προσθέσετε τα scripts του Slideshow αφού πρώτα έχετε προσθέσει τις διευθύνσεις των scripts στα σημεία "....jquery.js....." & "....s3Slider.js...." . <div class="code"><div class="code_content">  <script type="text/javascript" src="....jquery.js....."></script> <script type="text/javascript" src="....s3Slider.js....;"></script> <script type="text/javascript"> $(document).ready(function() { $('#slider').s3Slider({ timeOut: 3000 }); $('#slider1').s3Slider({ timeOut: 4000 }); }); </script>  </div></div> Έπειτα θα ξανακάνετε αναζήτηση με το Ctrl + F για το... <div class="code"><div class="code_content"> </head> </div></div> Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το </head> και θα προσθέσετε το ccs του Slideshow. Υπόψην πως το ίδιο css, κάνει για δύο μεγέθη σε πλάτος α) για 370px & β) για 680px <div class="code"><div class="code_content">  <style media='screen' type='text/css'> #slider { width: 410px; height: 300px; position: relative; overflow: hidden; } #slider1 { width: 720px; height: 300px; position: relative; overflow: hidden; } #sliderContent, #slider1Content { width: 720px; position: absolute; top: 0; margin-left: 0; } .sliderImage, .slider1Image { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 384px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .slider1Image span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 694px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong, .slider1Image span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } .left { top: 0; left: 0; width: 110px !important; height: 280px; } .right { right: 0; bottom: 0; width: 90px !important; height: 290px; } ul { list-style-type: none;} </style>  </div></div> Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση. Εισάγετε τον παρακάτω κώδικα με 2 τρόπους: 1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript. <center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center> θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα. <center><img src="http://i56.tinypic.com/24cegdl.jpg"></center> 2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML. Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις. Κώδικας SlideShow για (width=370px) <div class="code"><div class="code_content">  <div id="slider"> <ul id="sliderContent"> <li class="sliderImage"> <a href="#"><img src="...direct link image 1.jpg..." alt="1" /></a> ...Ο τίτλος για την εικόνα 1... ...Το κείμενο σας...</li> <li class="sliderImage"> <a href="#"><img src="...direct link image 2.jpg..." alt="2" /></a> ...Ο τίτλος για την εικόνα 2... ...Το κείμενο σας...</li> <li class="sliderImage"> <a href="#"><img src="...direct link image 3.jpg..." alt="3" /></a> ...Ο τίτλος για την εικόνα 3... ...Το κείμενο σας...</li> <li class="sliderImage"> <a href="#"><img src="...direct link image 4.jpg..." alt="4" /></a> ...Ο τίτλος για την εικόνα 4... ...Το κείμενο σας...</li> <li class="sliderImage"> <a href="#"><img src="...direct link image 5.jpg..." alt="5" /></a> ...Ο τίτλος για την εικόνα 5... ...Το κείμενο σας...</li> <div class="clear sliderImage"></div> </ul> </div>  </div></div> Κώδικας SlideShow για (width=680px) <div class="code"><div class="code_content">  <div id="slider1"> <ul id="slider1Content"> <li class="slider1Image"> <a href="#"><img src="...direct link image 1.jpg..." alt="1" /></a> ...Ο τίτλος για την εικόνα 1... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 2.jpg..." alt="2" /></a> ...Ο τίτλος για την εικόνα 2... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 3.jpg..." alt="3" /></a> ...Ο τίτλος για την εικόνα 3... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 4.jpg..." alt="4" /></a> ...Ο τίτλος για την εικόνα 4... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 5.jpg..." alt="5" /></a> ...Ο τίτλος για την εικόνα 5... ...Το κείμενο σας...</li> <div class="clear slider1Image"></div> </ul> </div>  </div></div> Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. Τώρα θα πάτε στο Πίνακα ελέγχου σας & μέσα από την Σχεδίαση θα προσαρμόσετε το gadget στο σημείο που θέλετε να εμφανίζεται στη σελίδα σας, συνήθως πάνω από τις αναρτήσεις σας. Σημείωση: Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider . Δηλαδή, αν το πλάτος του Slider είναι 410px και το ύψος 300px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις Μπορείτε να δείτε <a href="http://loneeagle110.blogspot.com/2010/07/6-online-free-photo-editors.html" target="_blank">εδώ</a> & <a href="http://loneeagle110.blogspot.com/2010/03/20-on-line-photo-editors.html" target="_blank">εδώ</a> μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας. <center>Δείτε το στην πράξη... το Example 3 <a href="http://www.serie3.info/s3slider/demonstration.html" target="_blank"><img src="http://i45.tinypic.com/1672np3.jpg" /></a> και με κάποιες δικές μου τροποποιήσεις. <a href="http://puppy-doggy.blogspot.com/" target="_blank"><img src="http://i45.tinypic.com/1672np3.jpg" /></a></center> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders Image Slide Show - ( Example 3 ) Two styles.

Και τελειώνουμε αυτήν την παρουσίαση, με το τρίτο σχέδιο, το οποίο είναι για δύο διαστάσεις πλάτους. Δείτε το & επιλέξτε εσείς πιο από τ...

Διαβάστε περισσότερα »

Image Slide Show - ( Example 2 ).

7:20 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5e3l5odmWlgGIp2kNXr2SUmo52jndDIVDLhRRKyLOjsZeWFvc-LCat1p8xl1mv3Rp1Qv3vxlld5ohCyOp5hVF0yvO4zyonRWgNdIDqnGI57dCI4rV8cJgfqd28lTjEoPPP-qqsTnnFVk/s1600/Image+Slide+Show.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Image Slide Show" border="0" id="BLOGGER_PHOTO_ID_5532432774949335442" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5e3l5odmWlgGIp2kNXr2SUmo52jndDIVDLhRRKyLOjsZeWFvc-LCat1p8xl1mv3Rp1Qv3vxlld5ohCyOp5hVF0yvO4zyonRWgNdIDqnGI57dCI4rV8cJgfqd28lTjEoPPP-qqsTnnFVk/s400/Image+Slide+Show.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 167px;" /></a> Τώρα, ας δούμε το δεύτερο σχέδιο... Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server. <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/s3Slider.js" target="_blank">s3Slider.js</a> <img align="middle" border="0" height="12" src="http://www.websitebullets.com/bullet/429/1.gif" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px;" width="11" /> <a href="http://scriptsrb.googlecode.com/files/jquery.js" target="_blank">jquery.js</a> Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a> Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML. Και με το Ctrl + F θα κάνετε αναζήτηση για το.... <div class="code"><div class="code_content"> <head> </div></div> Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <head> Θα προσθέσετε τα scripts του Slideshow αφού πρώτα έχετε προσθέσει τις διευθύνσεις των scripts στα σημεία "....jquery.js....." & "....s3Slider.js...." . <div class="code"><div class="code_content">  <script type="text/javascript" src="....jquery.js...."></script> <script type="text/javascript" src="....s3Slider.js...."></script> <script type="text/javascript"> $(document).ready(function() { $('#slider1').s3Slider({ timeOut: 4000 }); }); </script>  </div></div> Έπειτα θα ξανακάνετε αναζήτηση με το Ctrl + F για το... <div class="code"><div class="code_content"> </head> </div></div> Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το </head> και θα προσθέσετε το ccs του Slideshow. <div class="code"><div class="code_content">  <style type="text/css" media="screen"> #slider1 { width: 720px; height: 300px; position: relative; overflow: hidden; } #slider1Content { width: 720px; position: absolute; top: 0; margin-left: 0; } .slider1Image { float: left; position: relative; display: none; } .slider1Image span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 694px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .slider1Image span strong { font-size: 14px; } .left { top: 0; left: 0; width: 110px !important; height: 280px; } .right { right: 0; bottom: 0; width: 90px !important; height: 290px; } ul { list-style-type: none;} </style>  </div></div> Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση. Εισάγετε τον παρακάτω κώδικα με 2 τρόπους: 1ος. Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript. <center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center> θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα. <center><img src="http://i56.tinypic.com/24cegdl.jpg"></center> 2ος. Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML. Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <div id='content-wrapper'> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις. <div class="code"><div class="code_content">  <div id="slider1"> <ul id="slider1Content"> <li class="slider1Image"> <a href="#"><img src="...direct link image 1.jpg..." alt="1" /></a> ...Ο τίτλος για την εικόνα 1... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 2.jpg..." alt="2" /></a> ...Ο τίτλος για την εικόνα 2... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 3.jpg..." alt="3" /> ...Ο τίτλος για την εικόνα 3... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 4.jpg..." alt="4" /> ...Ο τίτλος για την εικόνα 4... ...Το κείμενο σας...</li> <li class="slider1Image"> <a href="#"><img src="...direct link image 5.jpg..." alt="5" /> ...Ο τίτλος για την εικόνα 5... ...Το κείμενο σας...</li> <div class="clear slider1Image"></div> </ul> </div>  </div></div> Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. Τώρα θα πάτε στο Πίνακα ελέγχου σας & μέσα από την Σχεδίαση θα προσαρμόσετε το gadget στο σημείο που θέλετε να εμφανίζεται στη σελίδα σας, συνήθως πάνω από τις αναρτήσεις σας. Σημείωση: Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider . Δηλαδή, αν το πλάτος του Slider είναι 410px και το ύψος 300px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις Μπορείτε να δείτε <a href="http://loneeagle110.blogspot.com/2010/07/6-online-free-photo-editors.html" target="_blank">εδώ</a> & <a href="http://loneeagle110.blogspot.com/2010/03/20-on-line-photo-editors.html" target="_blank">εδώ</a> μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας. <center>Δείτε το στην πράξη... το Example 2 <a href="http://www.serie3.info/s3slider/demonstration.html" target="_blank"><img src="http://i45.tinypic.com/1672np3.jpg" /></a></center> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Sliders Image Slide Show - ( Example 2 ).

Τώρα, ας δούμε το δεύτερο σχέδιο... Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server. s3Slider.js jquery.js...

Διαβάστε περισσότερα »

Στάλες στο γαλάζιο ®

Nivo Slider with Default Theme & Default Settings.

Nivo Slider with Pascal Theme & Random Settings.

Featured Post Content Slider to Blogger.

Featured Slider with jQuery ( Grey - Red - White Color ) .

Create a Free Travel Slideshow with Music - TripAdvisor

jQuery Featured Content Slideshow.

Featured Content Slider for Blogger Using jQuery.

Image Slide Show - ( Example 3 ) Two styles.

Image Slide Show - ( Example 2 ).

Τι να κάνετε για να μη χάνετε τα νέα του Στάλες στο γαλάζιο ® στο Facebook...!!!

Δείτε το βίντεο & κάντε SUBSCRIBE στο κανάλι μου...!!!

Popular Posts

Tags

Router's Pass

Μια ιστοσελίδα με τα default κλειδιά για κάθε μάρκα και μοντέλο router.

Get ever article right into your inbox.
We will ensure your privacy and can be unsubscribed anytime.

Τι να κάνετε για να μη χάνετε τα νέα του Στάλες στο γαλάζιο ® στο Facebook...!!!

Δείτε το βίντεο & κάντε SUBSCRIBE στο κανάλι μου...!!!

Μια ιστοσελίδα με τα default κλειδιά για κάθε μάρκα και μοντέλο router.

Get ever article right into your inbox. We will ensure your privacy and can be unsubscribed anytime.

Get ever article right into your inbox.
We will ensure your privacy and can be unsubscribed anytime.