Made with anime.js: Basic JavaScript Animation Library (Tutorial - Codes).

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSqGf-NlK0j3aq-gJJux-Eint7c-wesAu_hMo_DhxFiNSEPKg940ZDvant1CbHyzJtVMfZ85kcsK68AlxNWz57BP_up68qncwmrz9FX0J1rl62uNytvWkwj1Lc4dGR94DEQrPm69ATZE/s1600/anime.js.png" imageanchor="1"><img border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSqGf-NlK0j3aq-gJJux-Eint7c-wesAu_hMo_DhxFiNSEPKg940ZDvant1CbHyzJtVMfZ85kcsK68AlxNWz57BP_up68qncwmrz9FX0J1rl62uNytvWkwj1Lc4dGR94DEQrPm69ATZE/s640/anime.js.png" width="640" /></a></div>A flexible yet lightweight JavaScript library used to create basic animation. It works with CSS, individual Transforms, SVG, DOM attributes and JS Objects.<br /> <br /> <center><p data-height="300" data-theme-id="dark" data-slug-hash="xOgyjB" data-default-tab="js,result" data-user="juliangarnier" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/juliangarnier/pen/xOgyjB/">anime.js logo animation</a> by Julian Garnier (<a href="http://codepen.io/juliangarnier">@juliangarnier</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br /> <p data-height="300" data-theme-id="dark" data-slug-hash="RRKpgq" data-default-tab="js,result" data-user="juliangarnier" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/juliangarnier/pen/RRKpgq/">Playback controls - anime.js</a> by Julian Garnier (<a href="http://codepen.io/juliangarnier">@juliangarnier</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br /> <p data-height="300" data-theme-id="dark" data-slug-hash="dXNgVB" data-default-tab="html,result" data-user="juliangarnier" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/juliangarnier/pen/dXNgVB/">Follow SVG Path - anime.js</a> by Julian Garnier (<a href="http://codepen.io/juliangarnier">@juliangarnier</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br /> <p data-height="300" data-theme-id="dark" data-slug-hash="OXWBbM" data-default-tab="html,result" data-user="juliangarnier" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/juliangarnier/pen/OXWBbM/">Random target values - anime.js</a> by Julian Garnier (<a href="http://codepen.io/juliangarnier">@juliangarnier</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script></center><br /> <br />

Blogger Tutorials JQuery Tutorials Made with anime.js: Basic JavaScript Animation Library (Tutorial - Codes).

A flexible yet lightweight JavaScript library used to create basic animation. It works with CSS, individual Transforms, SVG, DOM attributes ...

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

Nivo Slider with Default Theme & Default Settings.

</br> <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> <br /> <span style="float:left;font-family:geneva;font-size:100px;line-height:80px;padding-right:5px;padding-top:1px;">Π</span>ριν λίγο καιρό, σας είχαμε παρουσιάσει το <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>. <br /> Σήμερα θα σας δείξουμε το αντίστοιχο slider με τις Default ρυθμίσεις, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας. <br /> Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!! <br /> Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας. <br /> <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML. <br /> <strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <br /> <div class="code"><div class="code_content"><head> <br /> </div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή θα προσθέστε τα scripts. <br /> <div class="code"><div class="code_content"><!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com--> <br /> <script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js"></script> <br /> <script type="text/javascript" src="https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js"></script> <br /> <script type="text/javascript"> <br /> $(window).load(function() { <br /> $('#slider').nivoSlider({ <br /> effect:'random', <br /> slices:15, <br /> animSpeed:500, <br /> pauseTime:3000, <br /> directionNav:true, //Next & Prev <br /> directionNavHide:true, //Only show on hover <br /> controlNav:true, //1,2,3... <br /> keyboardNav:true, //Use left & right arrows <br /> pauseOnHover:true, //Stop animation while hovering <br /> manualAdvance:false, //Force manual transitions <br /> captionOpacity:0.8, //Universal caption opacity <br /> beforeChange: function(){}, <br /> afterChange: function(){}, <br /> slideshowEnd: function(){} //Triggers after all slides have been shown <br /> }); <br /> }); <br /> </script> <br /> <!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com--> <br /> </div></div><strong><em><span style="color:#cc0000;">3.</span></em></strong> Το επόμενο βήμα είναι, να κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <br /> <div class="code"><div class="code_content">]]></b:skin> <br /> </div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα. <br /> <div class="code"><div class="code_content">/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */ <br /> .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} <br /> .theme-default .nivoSlider img{ position:absolute;top:0px;left:0px;display:none} <br /> .theme-default .nivoSlider a{ border:0; display:block} <br /> .theme-default .nivo-controlNav{ position:absolute;left:50%;bottom:-42px;margin-left:-40px; <br /> /* Tweak this to center bullets */ } <br /> .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} <br /> .theme-default .nivo-controlNav a.active{ background-position:0 -22px} <br /> .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} <br /> .theme-default a.nivo-nextNav{ background-position:-30px 0; right:15px} <br /> .theme-default a.nivo-prevNav{ left:15px} <br /> .theme-default .nivo-caption{ font-family:Helvetica,Arial,sans-serif} <br /> .theme-default .nivo-caption a{ color:#fff; border-bottom:1px dotted #fff} <br /> .theme-default .nivo-caption a:hover{ color:#fff} <br /> /* Nivo Slider by http://loneeagle110.blogspot.com */ <br /> .nivoSlider{ position:relative} <br /> .nivoSlider img{ position:absolute; top:0px; left:0px} <br /> /* If an image is wrapped in a link */ <br /> .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} <br /> /* The slices and boxes in the Slider */ <br /> .nivo-slice{ display:block;position:absolute;z-index:5;height:100%} <br /> .nivo-box{ display:block;position:absolute;z-index:5} <br /> /* Caption styles */ <br /> .nivo-caption{ position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8; <br /> /* Overridden by captionOpacity setting */ width:100%;z-index:8} <br /> .nivo-caption p{ padding:5px;margin:0} <br /> .nivo-caption a{ display:inline !important} <br /> .nivo-html-caption{ display:none} <br /> /* Direction nav styles (e.g. Next &Prev) */ <br /> .nivo-directionNav a{ position:absolute;top:45%;z-index:9;cursor:pointer} <br /> .nivo-prevNav{ left:0px} <br /> .nivo-nextNav{ right:0px} <br /> /* Control nav styles (e.g. 1, 2, 3...) */ <br /> .nivo-controlNav a{ position:relative;z-index:9;cursor:pointer} <br /> .nivo-controlNav a.active{ font-weight:bold} <br /> .theme-default #slider{ margin:100px auto 50px auto;width:618px; <br /> /* Make sure your images are the same size */ <br /> height:246px; <br /> /* Make sure your images are the same size */ } <br /> .theme-pascal.slider-wrapper, <br /> .theme-orman.slider-wrapper{ margin-top:150px} <br /> .clear{ clear:both} <br /> /* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */ <br /> </div></div><strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ. <br /> <strong><em><span style="color:#cc0000;">5.</span></em></strong> Το επόμενο βήμα μπορεί να γίνει με 2 τρόπους: <br /> <span style="color:#2937FF;">1ος Τρόπος:</span> <br /> Θα πάτε, Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript. <br /> <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. <br /> <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 και μέσα απο την Διάταξη θα το σύρετε πάνω από το χώρο των αναρτήσεων <br /> <span style="color:#2937FF;">2ος Τρόπος:</span> <br /> Μέσα από την Επεξεργασία HTML θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <br /> <div class="code"><div class="code_content"><div id='content-wrapper'> <br /> </div></div>και θα επικολλήσετε τον παρακάτω κώδικα ακριβώς από πάνω του. <br /> Τέλος θα πατήσετε προεπισκόπηση κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο πρότυπο σας. <br /> <div class="code"><div class="code_content"><!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com--> <br /> <div class="slider-wrapper theme-default"> <br /> <div id="slider" class="nivoSlider"> <br /> <a href="<span style="color:lime;"><b>...http://Εδώ το URL της 1ης Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /01.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a> <br /> <a href="<span style="color:lime;"><b>...http://Εδώ το URL της 2ης Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /02.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a> <br /> <a href="<span style="color:lime;"><b>...http://Εδώ το URL της 3ης Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /03.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a> <br /> <a href="<span style="color:lime;"><b>...http://Εδώ το URL της 4ης Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /04.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a> <br /> </div> <br /> <div id="htmlcaption" class="nivo-html-caption"></div> <br /> <!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com--> <br /> </div></div>Αυτό ήταν!!! <br /> Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!! <br /> <marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:red;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee>

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

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

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

Nivo Slider with Pascal Theme & Random Settings.

</br><br /><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><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:geneva;font-size:100px;line-height:80px;padding-right:5px;padding-top:1px;">Σ</span>ήμερα θα σας δείξουμε πως μπορείτε να βάλετε ένα Slider στο blog σας, εύκολα και γρήγορα, με το οποίο μπορείτε να αναδείξετε τις εικόνες σας ή να παρουσιάσετε τις αναρτήσεις σας.<br />Η εγκατάσταση είναι σχετικά εύκολη, όσο για το αποτέλεσμα, εντυπωσιακότατο!!! <br /><br />Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας.<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.<br /><strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /><br /><div class="code"><div class="code_content"><br /><head><br /></div></div><br /><br />Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή θα προσθέστε τα scripts.<br /><br /><div class="code"><div class="code_content"><br /><!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com--><br /><script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/jquery-1.7.1.min.js' type='text/javascript'></script><br /><script src='https://3ebb454f-a-62cb3a1a-s-sites.googlegroups.com/site/stalesstogalazio/le.nivo.slider.js' type='text/javascript'></script><br /><script type='text/javascript'><br />$(window).load(function() {<br />$('#slider').nivoSlider();<br />});<br /></script><br /><!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com--><br /></div></div><br /><br /><strong><em><span style="color:#cc0000;">3.</span></em></strong> Το επόμενο βήμα είναι, να κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /><br /><div class="code"><div class="code_content"><br />]]></b:skin><br /></div></div><br /><br />Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br />/* Nivo Slider STARTS Widget by http://loneeagle110.blogspot.com */<br />#slider{ width:618px; height:246px}<br />.nivoSlider{ position:relative}<br />.nivoSlider img{ position:absolute;top:0px;left:0px}<br />/* If an image is wrapped in a link */<br />.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}<br />/* The slices and boxes in the Slider */<br />.nivo-slice{ display:block;position:absolute;z-index:5;height:100%}<br />.nivo-box{ display:block;position:absolute;z-index:5}<br />/* Caption styles */<br />.nivo-caption{ position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8; <br />/* Overridden by captionOpacity setting */ <br />width:100%; z-index:8}<br />.nivo-caption p{padding:5px;margin:0}<br />.nivo-caption a{ display:inline !important}<br />.nivo-html-caption{ display:none}<br />/* Direction nav styles (e.g. Next &Prev) */<br />.nivo-directionNav a{ position:absolute;top:45%;z-index:9;cursor:pointer}<br />.nivo-prevNav{ left:0px}<br />.nivo-nextNav{ right:0px}<br />/* Control nav styles (e.g. 1, 2, 3...) */<br />.nivo-controlNav a{ position:relative;z-index:9;cursor:pointer}<br />.nivo-controlNav a.active{ font-weight:bold}<br />/* Nivo Slider Tutorial http://loneeagle110.blogspot.com <br />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<br />Author:Gilbert Pellegrom &Pascal Gartner Author URI:http://dev7studios.com */<br />.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}<br />.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%}<br />.theme-pascal .nivoSlider img{ position:absolute;top:0px;left:0px;display:none;width:630px; <br />/* Make sure your images are the same size */ <br />height:235px; <br />/* Make sure your images are the same size */}<br />.theme-pascal .nivoSlider a{ border:0; display:block}<br />.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; <br />/* Tweak this to center bullets */ <br />bottom:-42px;padding:8px 0 0 82px;z-index:20}<br />.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}<br />.theme-pascal .nivo-controlNav a.active{ background-position:0 -22px}<br />.theme-pascal .nivo-directionNav a{ display:none}<br />.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}<br />.theme-pascal .nivo-caption p{ padding:5px 15px;color:#333;font-weight:bold;font-size:27px;text-transform:uppercase}<br />.theme-pascal .nivo-caption a{ color:#333;font-weight:bold;font-size:27px;text-transform:uppercase}<br />.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}<br />/* Nivo Slider STOPS Widget by http://loneeagle110.blogspot.com */<br /></div></div><br /><br /><strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><br /><strong><em><span style="color:#cc0000;">5.</span></em></strong> Το επόμενο βήμα μπορεί να γίνει με 2 τρόπους: <br /><br /><span style="color:#2937FF;">1ος Τρόπος:</span><br /><br />Θα πάτε, Διάταξη --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.<br /><br /><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><br /><br />Κάντε αντιγραφή τον παρακάτω κώδικα και επικολλήστε τον μέσα στο HTML/JavaScript.<br /><br /><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><br /><br />θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο gadget και μέσα απο την Διάταξη θα το σύρετε πάνω από το χώρο των αναρτήσεων<br /><br /><span style="color:#2937FF;">2ος Τρόπος:</span><br /><br />Μέσα από την Επεξεργασία HTML θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /><br /><div class="code"><div class="code_content"><br /><div id='content-wrapper'> <br /></div></div><br /><br />και θα επικολλήσετε τον παρακάτω κώδικα ακριβώς από πάνω του. <br /><br />Τέλος θα πατήσετε προεπισκόπηση κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ στο πρότυπο σας.<br /><br /><div class="code"><div class="code_content"><br /><!--Nivo Slider-STARTS-Widget-by-http://loneeagle110.blogspot.com--><br /><div class="slider-wrapper theme-pascal"><br /><div class="ribbon"></div><br /><div id="slider" class="nivoSlider"><br /><a href="<span style="color:lime;"><b>...http://Εδώ το URL της Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /01.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a><br /><a href="<span style="color:lime;"><b>...http://Εδώ το URL της Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /02.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a><br /><a href="<span style="color:lime;"><b>...http://Εδώ το URL της Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /03.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a><br /><a href="<span style="color:lime;"><b>...http://Εδώ το URL της Ανάρτησης .html...</b></span>"><img src="<span style="color:orange;"><b>...Εδω η εικόνα /04.jpg...</b></span>" alt="" title="<span style="color:yellow;"><b>...Εδώ ο Τίτλος...</b></span>"/></a><br /></div><br /><div id="htmlcaption" class="nivo-html-caption"><br /></div><br /></div><br /><!--Nivo Slider-STOPS-Widget-by-http://loneeagle110.blogspot.com--><br /></div></div><br /><br />Αυτό ήταν!!!<br /><br />Επιστρέψτε στην σελίδα σας κάντε ανανέωση!!!<br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:red;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee>

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

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

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

"Share This" Slide Open Egg Widget For Blogger.

</br><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBcqAx0HRbIf7rIHr0ot8SccLSL3Qa79eRuUA3aTZ69lAQ1oLAfSpVbjgPhszRpqWZdwmEm_NE3TtD4vJLx7ZSRc2hkqTPR1SmZxCs_Ct2M-en6nfVUt5gn4JV0AGEuqvjOsN35qccU8/s1600/Share+This+Slide+Open+Egg+Widget+For+Blogger.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5754566735928241794" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBcqAx0HRbIf7rIHr0ot8SccLSL3Qa79eRuUA3aTZ69lAQ1oLAfSpVbjgPhszRpqWZdwmEm_NE3TtD4vJLx7ZSRc2hkqTPR1SmZxCs_Ct2M-en6nfVUt5gn4JV0AGEuqvjOsN35qccU8/s400/Share+This+Slide+Open+Egg+Widget+For+Blogger.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 207px;" /></a>Πριν λίγες μέρες σας είχαμε παρουσιάσει το <a href="http://loneeagle110.blogspot.com/2012/06/share-this-slide-open-heart-widget-for.html" target="_blank">Slide Open Heart Widget</a> της "Share This". Σήμερα θα σας δείξουμε το άλλο σχέδιο της, το "Slide Open Egg Widget". Ένα αυγουλάκι.... που κλείνει μέσα του τους αγαπημένους σας κοινωνικούς συνδέσμους. Η εγκατάσταση είναι τόσο εύκολη, όσο δε φαντάζεστε & το αποτέλεσμα απλά, ΥΠΕΡΟΧΟ!!!<br /> Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε <blink>πιστά</blink> τις οδηγίες μας.<br /> <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.<br /> <strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /> <div class="code"><div class="code_content"></head><br /> </div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /> <div class="code"><div class="code_content"><!--Share-This-Slide-Open-Egg-STARTS-Widget-by-http://loneeagle110.blogspot.com/--> <br /> <script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script><br /> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><br /> <script type="text/javascript">stLight.options({publisher: "ur-8aa1df45-a767-e1ea-8b1d-2d7ed4549143", onhover:false}); </script><br /> <link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link><br /> <!--Share-This-Slide-Open-Egg-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /> </div></div>Το επόμενο βήμα είναι:<br /> <strong><em><span style="color:#cc0000;">3.</span></em></strong> Θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /> <div class="code"><div class="code_content"></body><br /> </div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /> <div class="code"><div class="code_content"><!--Share-This-Slide-Open-Egg-STARTS-Widget-by-http://loneeagle110.blogspot.com/--> <br /> <div style='position:fixed;bottom:3%;left:2%;'> <br /> <div id='shareThisShareEgg' class='shareEgg'></div><br /> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', [<span style="color:orange;"><b>'sharethis','facebook','twitter','pinterest','linkedin','technorati','email'</b></span>], {title:'ShareThis Rocks!!!',url:'http://www.sharethis.com',theme:'shareegg'});</script></div><br /> <!--Share-This-Slide-Open-Egg-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /> </div></div><br /> <blockquote><span style="color:red;">Όλοι οι κοινωνικοί συνδέσμοι που περιλαμβάνει το widget αλφαβητικά:</span><br /> Με πορτοκαλί χρώμα είναι όσους έχω χρησιμοποιήσει στo widget.<br /> 'googleplus','google_reader',<span style="color:orange;"><b>'facebook'</b></span>,<span style="color:orange;"><b>'twitter'</b></span>,<span style="color:orange;"><b>'linkedin'</b></span>,<span style="color:orange;"><b>'pinterest'</b></span>,<br /> 'blinklist','bebo','delicious','digg','dzone','diigo','blogmarks','evernote',<br /> 'friendfeed',<span style="color:orange;"><b>'email</b></span>','seven_live_seven','a1_webmarks','adfty','allvoices',<br /> 'amazon_wishlist','arto','baidu','blip','blogged','blogger','brainify',<br /> 'buddymarks','bus_exchange','care2','chiq','connotea','citeulike','corank',<br /> 'corkboard','current','dealsplus','dotnetshoutout','edmodo','fark',<br /> 'fashiolista','folkd','formspring','fresqui','funp','fwisp','google',<br /> 'google_bmarks','google_translate','hadash_hot','hatena','hyves','identi',<br /> 'instapaper','jumptags','kaboodle','linkagogo','linkedin','livejournal',<br /> 'meneame','messenger','mister_wong','mixx','myspace','n4g','netlog',<br /> 'netvouz','newsvine','nujij','odnoklassniki','oknotizie','orkut','plaxo',<br /> 'reddit','segnalo','sina','slashdot','sonico','speedtile','squidoo','startaid',<br /> 'stumbleupon','stumpedia',<span style="color:orange;"><b>'technorati'</b></span>,'twackle','typepad','tumblr',<br /> 'viadeo','virb','vkontakte','voxopolis','wordpress','xanga','xerpi','xing',<br /> 'yammer','yigg',<span style="color:orange;"><b>'sharethis'</b></span>,'startlap'<br /> </blockquote><br /> <strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /> <br /> <marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee><br />

Blogger Help Blogger Tutorials JQuery Tutorials Social Bookmarking "Share This" Slide Open Egg Widget For Blogger.

Πριν λίγες μέρες σας είχαμε παρουσιάσει το Slide Open Heart Widget της "Share This". Σήμερα θα σας δείξουμε το άλλο σχέδιο της, τ...

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

"Share This" Slide Open Heart Widget For Blogger.

</br><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoG82OXoAscs9NSNc1bd6EAWcAxSXukelZ74D03QxhRbrWD1wr69bco6zgHtP9oPE0E7_Q5u3QCkBBpwQtfKtO42jYfuh53Mpu99bBQD5i9J-1Kd0lDXKmzAzk7Y_Ac3Qk3v9YMLOm9pI/s1600/Share+This+Slide+Open+Heart+Widget+For+Blogger.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5754566261743379826" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoG82OXoAscs9NSNc1bd6EAWcAxSXukelZ74D03QxhRbrWD1wr69bco6zgHtP9oPE0E7_Q5u3QCkBBpwQtfKtO42jYfuh53Mpu99bBQD5i9J-1Kd0lDXKmzAzk7Y_Ac3Qk3v9YMLOm9pI/s400/Share+This+Slide+Open+Heart+Widget+For+Blogger.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 207px;" /></a>Το ShareThis είναι ένας ιστοχώρος που έχει δημιουργήσει διάφορα σχέδια κουμπιών κοινωνικής δικτύωσης, διαμοιρασμού για όλες τις μορφές ιστοσελίδων (wordpress, Drupal, Joomla, Blogger, Websites). Σε αυτήν την ανάρτηση θα σας δείξουμε τον τρόπο για να περάσετε στο ιστολόγιό σας στον blogger, μια καρδιά που κλείνει μέσα της τους αγαπημένους σας κοινωνικούς συνδέσμους.<br /> Η εγκατάσταση είναι τόσο εύκολη, όσο δε φαντάζεστε & το αποτέλεσμα απλά, ΥΠΕΡΟΧΟ!!!<br /> Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας.<br /> <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.<br /> <strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /> <div class="code"><div class="code_content"></head><br /> </div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /> <div class="code"><div class="code_content"><!--Share-This-Slide-Open-Heart-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /> <script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><br /> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><br /> <script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false});</script><br /> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><br /> <!--Share-This-Slide-Open-Heart-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /> </div></div>Το επόμενο βήμα είναι:<br /> <strong><em><span style="color:#cc0000;">3.</span></em></strong> Θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /> <div class="code"><div class="code_content"></body><br /> </div></div>Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /> <div class="code"><div class="code_content"><!--Share-This-Slide-Open-Heart-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /> <div style='position:fixed; bottom:3%;left:2%;'><br /> <div class='shareEgg' id='shareThisShareHeart'/><br /> </div><br /> <script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', [<span style="color:orange;"><b>'facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'</b></span>], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><br /> <!--Share-This-Slide-Open-Heart-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /> </div></div><br /> <blockquote><span style="color:red;">Όλοι οι κοινωνικοί συνδέσμοι που περιλαμβάνει το widget αλφαβητικά:</span><br /> Με πορτοκαλί χρώμα είναι όσους έχω χρησιμοποιήσει στo widget.<br /> 'googleplus','google_reader',<span style="color:orange;"><b>'facebook'</b></span>,<span style="color:orange;"><b>'twitter'</b></span>,<span style="color:orange;"><b>'linkedin'</b></span>,'pinterest',<br /> 'blinklist','bebo','delicious','digg','dzone','diigo','blogmarks','evernote',<br /> 'friendfeed',<span style="color:orange;"><b>'email</b></span>','seven_live_seven','a1_webmarks','adfty','allvoices',<br /> 'amazon_wishlist','arto','baidu','blip','blogged','blogger','brainify',<br /> 'buddymarks','bus_exchange','care2','chiq','connotea','citeulike','corank',<br /> 'corkboard','current','dealsplus','dotnetshoutout','edmodo','fark',<br /> 'fashiolista','folkd','formspring','fresqui','funp','fwisp','google',<br /> 'google_bmarks','google_translate','hadash_hot','hatena','hyves','identi',<br /> 'instapaper','jumptags','kaboodle','linkagogo','linkedin','livejournal',<br /> 'meneame','messenger','mister_wong','mixx','myspace','n4g','netlog',<br /> 'netvouz','newsvine','nujij','odnoklassniki','oknotizie','orkut','plaxo',<br /> 'reddit','segnalo','sina','slashdot','sonico','speedtile','squidoo','startaid',<br /> <span style="color:orange;"><b>'stumbleupon'</b></span>,'stumpedia','technorati','twackle','typepad','tumblr',<br /> 'viadeo','virb','vkontakte','voxopolis','wordpress','xanga','xerpi','xing',<br /> 'yammer','yigg',<span style="color:orange;"><b>'sharethis'</b></span>,'startlap'<br /> </blockquote><br /> <strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /> <marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:red;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee><br /> <br />

Blogger Help Blogger Tutorials JQuery Tutorials Social Bookmarking "Share This" Slide Open Heart Widget For Blogger.

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

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

Slide Out Social Bookmarking Widget.

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatqMof667lkLpNUJLAzZF0Rpi_X-hio4mKvLR2wI-DGZF4O2d9z3RclmfJw5w-fQRCd2J3HaAol4rhXjfOT7CwVThLgBJGbkTAtJobSGs3qNH1W-NMefZI3LW4m7PRsFO1-iI7IaUCko/s1600/Slide+Out+Social+Bookmarking+Widget+for+Blogger.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5754293207654981778" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatqMof667lkLpNUJLAzZF0Rpi_X-hio4mKvLR2wI-DGZF4O2d9z3RclmfJw5w-fQRCd2J3HaAol4rhXjfOT7CwVThLgBJGbkTAtJobSGs3qNH1W-NMefZI3LW4m7PRsFO1-iI7IaUCko/s400/Slide+Out+Social+Bookmarking+Widget+for+Blogger.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;">Ακόμα ένα Widget για κοινωνική δικτύωση & διαμοιρασμού των άρθρων σας.<br />Είναι μια παραποίηση του γνωστού σε όλους "digg-digg", αυτή τη φορά με εμφάνιση & απόκρυψη. <br />Περιέχει counter buttons από τους δημοφιλέστερους κοινωνικούς δεσμούς (Facebook, Google+, StumbleUpon, Digg, Twitter, .<br /><br />"Digg-Digg" Widget Μπορείτε να βρείτε <a href="http://loneeagle110.blogspot.com/2010/10/social-bookmarking-widget-digg-digg.html" target="_blank">εδώ</a> & <a href="http://loneeagle110.blogspot.com/2011/07/floating-like-buttons-digg-digg.html" target="_blank">εδώ</a><br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.<br /><strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <br /><br /><div class="code"><div class="code_content"><br /><head><br /></div></div><br /><br />Μόλις το βρείτε θα πάτε στην αμέσως επόμενη γραμμή & θα προσθέστε τα scripts.<br /><br /><div class="code"><div class="code_content"><br /><!--SlideOut-Social-Bookmarking-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><br /><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script><br /><script type="text/javascript"><br />/*<![CDATA[*/<br />jQuery(document).ready(function () {<br />jQuery(".slideboxwle").hover(function () {<br />jQuery(this).stop().animate({<br />left: "0"<br />}, "medium");<br />}, function () {<br />jQuery(this).stop().animate({<br />left: "-70"<br />}, "medium");<br />}, 500);<br />});<br />/*]]>*/<br /></script><br /><!--SlideOut-Social-Bookmarking-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br /><strong><em><span style="color:#cc0000;">3.</span></em></strong> Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ και θα πάτε Σχεδίαση --> Στοιχεία Σελίδας --> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.<br /><br /><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><br /><br />Κάντε αντιγραφή τον παρακάτω κώδικα και επικολλήστε τον μέσα στο HTML/JavaScript.<br /><br /><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><br /><br /><div class="code"><div class="code_content"><br /><!--SlideOut-Social-Bookmarking-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br /><style type="text/css">.slideboxwle{background:url("http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/share-tab-le.png") no-repeat scroll right top transparent !important;display:block;float:left;padding:0px 58px 0 0px;width:46px;height:auto;z-index:99999;position:fixed;left:-70px;top:20%}.slideboxwle div{border:none;position:relative;display:block}#floatingbuttons{background:#fff;border-radius:5px 5px 5px 5px;border:0px solid#999;float:left;padding:0 0 3px 0;bottom:15%;z-index:399}#floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px}.addbuttons{clear:both;text-align:center;padding-top:5px}.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#ccc;background:none;font-family:arial,sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px}.addbuttons a:hover span{color:#000;background:none;text-decoration:none}</style> <br /><div class="slideboxwle" style=""><div><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <br /><script type="text/javascript"> <br />(function () { <br />var s = document.createElement('SCRIPT'), <br />s1 = document.getElementsByTagName('SCRIPT')[0]; <br />s.type = 'text/javascript'; <br />s.async = true; <br />s.src = 'http://widgets.digg.com/buttons.js'; <br />s1.parentNode.insertBefore(s, s1); <br />})(); <br /></script> <br /><!-- Buttons --> <br /><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> <br /><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <br /><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div> <br /><div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <br /><div class='floatbutton' id='digg'> <br /><a class="DiggThisButton DiggMedium"></a></div> <br /><div class='floatbutton' id='twitter'> <br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a></div> <br /><div class="addbuttons"> <br /><a href="http://loneeagle110.blogspot.com/2012/06/slide-out-social-bookmarking-widget.html" title="Add Slide Out Social Bookmarking Widget!"><span class="getfloat">Get this</span></a></div></div></div></div> <br /><!--SlideOut-Social-Bookmarking-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br /><strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><br />Αυτό ήταν!!!<br /><br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Social Bookmarking Slide Out Social Bookmarking Widget.

Ακόμα ένα Widget για κοινωνική δικτύωση & διαμοιρασμού των άρθρων σας. Είναι μια παραποίηση του γνωστού σε όλους "digg-digg", ...

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

"Shareaholic" Widget with Tooltips and Count for Blogger.

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1cnwz78Bd7_e73k2ZOqfsd261zxNxxo5EJWnIj-mFs4XtRG8JXJVMTOtBrr5BBAgVrnM5y_T215TP25P3fPjxqKbfiIzNwE1z-2g7ihuIEw-RDjSQpSMUZ1gL-ZXMgH04VAC5eWJ5rQI/s1600/Add+This+Shareaholic+Social+Sharing+Widget+With+Tooltips+And+Count+for+Blogger..jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5754334339084227634" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1cnwz78Bd7_e73k2ZOqfsd261zxNxxo5EJWnIj-mFs4XtRG8JXJVMTOtBrr5BBAgVrnM5y_T215TP25P3fPjxqKbfiIzNwE1z-2g7ihuIEw-RDjSQpSMUZ1gL-ZXMgH04VAC5eWJ5rQI/s400/Add+This+Shareaholic+Social+Sharing+Widget+With+Tooltips+And+Count+for+Blogger..jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;">Το Shareaholic.com είναι ένας ιστοχώρος που έχει δημιουργήσει αρκετά σχέδια "κουμπιών" κοινωνικής δικτύωσης & διαμοιρασμού για όλες τις μορφές ιστοσελίδων (Wordpress, Blogger, Websites).<br /><br />Σε αυτήν την ανάρτηση θα σας δείξουμε τον τρόπο για να περάσετε στο ιστολόγιό σας στον blogger, αυτό το όμορφο εργαλείο διαμοιρασμού.<br />Η εγκατάσταση είναι τόσο εύκολη, όσο δε φαντάζεστε & το αποτέλεσμα απλά, ΥΠΕΡΟΧΟ!!!<br /> <br />Εσείς, αυτό που πρέπει να κάνετε είναι, να ακολουθήσετε πιστά τις οδηγίες μας.<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.<br /><strong><em><span style="color:#cc0000;">2.</span></em></strong> Εκεί θα τσεκάρετε το κουτάκι <span style="color:#cc0000;">"Επέκταση προτύπων γραφικών στοιχείων"</span>.<br /><strong><em><span style="color:#cc0000;">3.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /><br /><div class="code"><div class="code_content"><br />]]></b:skin><br /></div></div><br /><br />Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><!--Shareaholic-Social-Sharing-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br />div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display:block !important}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important;text-indent:0px !important;text-decoration:none !important}div.shr-count{font:12px bold,arial !important;position:relative !important}div.shr-count-outline{position:absolute !important;color:white !important}div.shr-count-center{position:absolute !important;color:blue !important}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}<br /><!--Shareaholic-Social-Sharing-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br />Το επόμενο βήμα είναι:<br /><br /><strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /><br /><div class="code"><div class="code_content"><br /><div class='post-footer'><br /></div></div><br /><br />Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><!--Shareaholic-Social-Sharing-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br /><b:if cond='data:blog.pageType == "item"'><br /><div class='shr_class shareaholic-show-on-load'><br /></div><br /><script type='text/javascript'><br />var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @<span style="color:orange;"><b>.....το UserName Σας από το Twitter.....</b></span>"}};<br /></script><br /><script type='text/javascript'><br />(function() {<br />var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;<br />sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";<br />var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);<br />})();<br /></script><br /><p style='float:right;margin-right:50px;'><a href='http://loneeagle110.blogspot.com/2012/06/shareaholic-widget-with-tooltips-and.html' style=' font-size:10px;color:#C6000F;text-decoration:none;' target='_blank'>Get this widget</a></p></b:if><br /><!--Shareaholic-Social-Sharing-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br /><strong><em><span style="color:#cc0000;">5.</span></em></strong> Στο σημείο που είναι χρωματισμένο (με πορτοκαλί) <span style="color:orange;"><b>.....το UserName Σας από το Twitter.....</b></span> θα γράψετε το UserName που έχετε λογαριασμό στο twitter. <br /><br /><strong><em><span style="color:#cc0000;">6.</span></em></strong> Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee><br /></span></h3>

Blogger Help Blogger Tutorials JQuery Tutorials Share Buttons "Shareaholic" Widget with Tooltips and Count for Blogger.

Το Shareaholic.com είναι ένας ιστοχώρος που έχει δημιουργήσει αρκετά σχέδια "κουμπιών" κοινωνικής δικτύωσης & διαμοιρασμού για...

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

Animated Shareaholic "Sassy Bookmarks" To Blogger.

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvv46yoxdZRKwfjYdC_sp1VFR2Qf4wKXjqYaVL4UuyvsBUQY4BFg605DU4UcOoT4oFFB972YOyfXR4czdckYFHZH7evfKIaneDdD15Niq03ulzyPLmb5HYBSxxoSLRBS29Ocb4lxb1KW0/s1600/Add+This+Shareaholic+Sassy+Bookmarks+To+Blogger..jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5754276001722616882" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvv46yoxdZRKwfjYdC_sp1VFR2Qf4wKXjqYaVL4UuyvsBUQY4BFg605DU4UcOoT4oFFB972YOyfXR4czdckYFHZH7evfKIaneDdD15Niq03ulzyPLmb5HYBSxxoSLRBS29Ocb4lxb1KW0/s400/Add+This+Shareaholic+Sassy+Bookmarks+To+Blogger..jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 267px;" /></a><br />Το Shareaholic πάντα πρωτότυπο & μέσα στα πράγματα για τα εργαλεία κοινωνικής δικτύωσης & διαμοιρασμού.<br />Πρόσφατα δημοσίευσε ένα widget για το blogger, εν ονόματι "Sassy Bookmarks".<br /><br />Το "Sassy Bookmarks" είναι ένα widget το οποίο εμφανίζει ένα κουμπί στην κάτω αριστερή γωνία της σελίδας.<br />Πατώντας το, εμφανίζει με ένα πολύ όμορφο εφέ, 6 εικονίδια από τα πιο σημαντικά που χρειάζεται ο καθένας μας.<br />Αυτά είναι τα.... Pinterest, Google Plus, Twitter, Facebook, Tumblr & Email.<br /><br />Τα βήματα που θα ακολουθήσετε για να το περάσετε στο ιστολόγιό σας είναι, λίγα & απλά.<br /><br />Ας ξεκινήσουμε λοιπόν...<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML.<br /><strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F.... <br /><br /><div class="code"><div class="code_content"><br /></body><br /></div></div><br /><br />Μόλις το βρείτε θα πάτε στην αμέσως προυγούμενη γραμμή & θα προσθέστε τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><!--Shareaholic-Sassy-Bookmarks-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br /><div class="shr_ss shr_publisher"><br /></div><br /><script type="text/javascript"><br />var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @<span style="color:orange;"><b>.....το UserName Σας από το Twitter.....</b></span>"}};<br /></script><br /><script type="text/javascript"><br />(function() {<br />var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;<br />sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";<br />var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);<br />})();<br /></script><br /><!--Shareaholic-Sassy-Bookmarks-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br /><strong><em><span style="color:#cc0000;">3.</span></em></strong> Στο σημείο που είναι χρωματισμένο (με πορτοκαλί) <span style="color:orange;"><b>.....το UserName Σας από το Twitter.....</b></span> θα γράψετε το UserName που έχετε λογαριασμό στο twitter. <br /><br /><strong><em><span style="color:#cc0000;">4.</span></em></strong> Θα κάνετε προεπισκόπηση του προτύπου σας κι αν δεν σας βγάλει κάποιο λάθος θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><br />Αυτό ήταν!!!<br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee>

Blogger Help Blogger Tutorials JQuery Tutorials Social Bookmarking Animated Shareaholic "Sassy Bookmarks" To Blogger.

Το Shareaholic πάντα πρωτότυπο & μέσα στα πράγματα για τα εργαλεία κοινωνικής δικτύωσης & διαμοιρασμού. Πρόσφατα δημοσίευσε ένα widg...

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

Thumbnail Viewer with Text or Image.

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCIUkP82OmmbEfb4JMtCaUYCXrktVE4xmR_8dt3RYgjtwpisH0_g_yqOUvozGUHNaDdh-mQFtaeyPTLa7DFeYEuDaYkFW7F9Zrg7Q6DLiTpoE1zjriTR487oyXcMsvfj4wKpk2OX9aXg8/s1600/Image+Thumbnail+Viewer.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Thumbnail Viewer with Text or Image" border="0" id="BLOGGER_PHOTO_ID_5532389082291198866" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCIUkP82OmmbEfb4JMtCaUYCXrktVE4xmR_8dt3RYgjtwpisH0_g_yqOUvozGUHNaDdh-mQFtaeyPTLa7DFeYEuDaYkFW7F9Zrg7Q6DLiTpoE1zjriTR487oyXcMsvfj4wKpk2OX9aXg8/s400/Image+Thumbnail+Viewer.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 284px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:'Apple Chancery',cursive;font-size:70px;line-height:50px;margin:5px 5px 0px 0px; position:relative;text-shadow:2px 2px 2px rgb(153, 102, 255);">Σ'</span> αυτήν την ανάρτηση θα σας δείξω έναν τρόπο για να εντυπωσιάσετε τους επισκέπτες σας, αλλά & να παρουσιάσετε με ωραίο τρόπο τις εικόνες σας, είτε μέσα από μικρογραφίες ή κρυμένες μέσα σε συνδέσμους.<br />Ευκαιρία λοιπόν να το δοκιμάσετε και ν'αφήσετε τους άλλους ν'απορούν για το πώς το κάνατε αυτό.<br />Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server.<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><img align="middle" border="0" height="12" oncontextmenu="return false" 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/ThumbnailViewer.css" target="_blank">thumbnailviewer.css</a><br /><img align="middle" border="0" height="12" oncontextmenu="return false" 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/ThumbnailViewer.js" target="_blank">thumbnailviewer.js</a><br /><img align="middle" border="0" height="12" oncontextmenu="return false" 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/loading.gif" target="_blank">loading.gif</a><br /><br />Στο script <span style="color: green;"><b>thumbnailviewer.js</b></span> θα πρέπει μόλις το κατεβάσετε να το ανοίξετε με το WordPad, με το Σημειωματάριο ή με κάποιον άλλον editor και να προσθέσετε το direct link της εικόνας του loading. <br /><br />Θα το βρείτε μέσα στο script, στο σημείο που λέει.... <br /><br />defineLoading: '<img src="<span style="color: orange;"><b>loading.gif</b></span>" /> Loading Image...',<br /><br /><center><img oncontextmenu="return false" src="http://i987.photobucket.com/albums/ae359/LoneEagle110/ThumbnailViewer.jpg" width="500"></center><br /><br />Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a><br /><br />Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Και με το Ctrl + F θα κάνετε αναζήτηση για το....<br /><br /><div class="code"><div class="code_content"><br /><head><br /></div></div><br /><br />Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <strong><em><span style="color:#cc0000;"><head></span></em></strong><br />και θα προσθέσετε τα scripts του Slideshow.<br /><br /><div class="code"><div class="code_content"><br /><link rel="stylesheet" href="....thumbnailviewer.css...." type="text/css" /><br /><script src="....thumbnailviewer.js...." type="text/javascript"></script><br /></div></div><br /><br />Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση >>> Στοιχεία σελίδας >>> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.<br /><br /><center><img oncontextmenu="return false" src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center><br /><br />θα το ανοίξετε & θα ρίξετε μέσα τον κώδικα από όποιον τρόπο θέλετε από τους δύο.<br /><br /><center><img oncontextmenu="return false" src="http://i56.tinypic.com/24cegdl.jpg"></center><br /><br /><span style="color: blue;"><b>1ος Τρόπος.</b></span><br /><br /><span style="color: yellow;"><b>Για εικόνες μόνο:</b></span><br /><br /><div class="code"><div class="code_content"><br /><!--Thumbnail-Viewer-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /><center><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /></center><br /><!--Thumbnail-Viewer-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br />Ο κώδικας που σας έχω βάλει παραπάνω είναι για 4 εικόνες.<br /><br />ΑΝ θέλετε περισσότερες, δεν έχετε παρά να προσθέσετε τον παρακάτω κώδικα όσες φορές χρειάζεται.<br /><br /><div class="code"><div class="code_content"><br /><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail"><img src="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" style="width: <span style="color: lightblue;"><b>100px;</b></span> height: <span style="color: yellow;"><b>70px</b></span>" /></a><br /></div></div><br /><br /><blockquote><br /><span style="color: red;"><b>Σημείωση:</b></span><br /><br />Το πλάτος <span style="color: lightblue;"><b>width:100px;</b></span> & το ύψος <span style="color: yellow;"><b>height:70px;</b></span> μπορείτε να τα αλλάξετε με τις διαστάσεις που εσείς θέλετε.<br /></blockquote><br /><br /><span style="color: blue;"><b>2ος Τρόπος.</b></span><br /><br /><span style="color: yellow;"><b>Σε κείμενο όπου να ανοίγει σε εικόνα:</b></span><br /><br /><div class="code"><div class="code_content"><br /><!--Thumbnail-Viewer-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /><center><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /></center><br /><!--Thumbnail-Viewer-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br />Για πρόσθετο κείμενο ... τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><p><a href="<span style="color: orange;"><b>....direct link εικόνας....</b></span>" rel="thumbnail" ><span style="color: lightblue;"><b>....το κείμενο σας....</b></span></a></p><br /></div></div><br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Blogger Help Blogger Tutorials Image Effects JQuery Tutorials Thumbnail Viewer with Text or Image.

Σ' αυτήν την ανάρτηση θα σας δείξω έναν τρόπο για να εντυπωσιάσετε τους επισκέπτες σας, αλλά & να παρουσιάσετε με ωραίο τρόπο τις ε...

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

Floating Vertical Menu (No 33).

</br><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMGNvhEQXaxOXohklqVrgbTL1nA-prCysXunSs0ojbqtne7TRAmZD9nThpFRQfZMQZ_NO2ijlTUYxRBORvX61PGXxhVo5x4AM8DPOv1B1UmkD7tUYpD21qJoIyiKI6OfHmE5PFuPkKtI/s1600/vertical+menu.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="Blue Vertical Menu, Blogger Help, Blogger Tutorials, Vertical Menus" border="0" id="BLOGGER_PHOTO_ID_5466346549069688098" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMGNvhEQXaxOXohklqVrgbTL1nA-prCysXunSs0ojbqtne7TRAmZD9nThpFRQfZMQZ_NO2ijlTUYxRBORvX61PGXxhVo5x4AM8DPOv1B1UmkD7tUYpD21qJoIyiKI6OfHmE5PFuPkKtI/s400/vertical+menu.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 238px;" /></a>Συνεχίζουμε να πλουτίζουμε την μεγάλη μας συλλογή στα μενού μ' ένα κινούμενο κάθετο, με τη χρήση jQuery για το blogger & όχι μόνο.<br /> <center><img src="http://i41.tinypic.com/t0rt5x.jpg" /></center>θα μπείτε στο Πίνακα ελέγχου σας & μετά >>> Σχεδίαση >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....<br /> <div class="code"><div class="code_content">]]></b:skin><br /> </div></div>Μόλις το βρείτε & πριν από το κλείσιμο του <strong><em><span style="color:#cc0000;">]]></b:skin></span></em></strong> (δηλαδή: στην προϋγούμενη γραμμή) θα προσθέσετε τον παρακάτω κώδικα.<br /> <div class="code"><div class="code_content"><!--Floating-Vertical-Menu-33-STARTS-Widget-by-http://loneeagle110.blogspot.com--><br /> #floatMenu {<br /> position:absolute;<br /> top:150px;<br /> left:1%;<br /> margin-left:0px;<br /> width:200px;<br /> }<br /> #floatMenu ul {<br /> margin-bottom:0px;<br /> }<br /> #floatMenu ul li a {<br /> display:block;<br /> border:1px solid #999;<br /> background-color:#222;<br /> border-left:6px solid #999;<br /> text-decoration:none;<br /> color:#ccc;<br /> padding:5px 5px 5px 25px;<br /> }<br /> #floatMenu ul li a:hover {<br /> color:#fff;<br /> background-color:#333333;<br /> }<br /> #floatMenu ul.menu1 li a:hover {<br /> border-color:#09f;<br /> }<br /> #floatMenu ul.menu2 li a:hover {<br /> border-color:#9f0;<br /> }<br /> #floatMenu ul.menu3 li a:hover {<br /> border-color:#f09;<br /> }<br /> <span style="color: lime;"><b><!-- για προσθήκη νέας ετικέτας START --></b></span><br /> #floatMenu ul.menu(4,5,6,7,8....) li a:hover {<br /> border-color:#....το HEX από το χρώμα που θέλετε...;<br /> }<br /> <span style="color: lime;"><b><!-- για προσθήκη νέας ετικέτας STOP --></b></span><br /> <!--Floating-Vertical-Menu-33-STOPS-Widget-by-http://loneeagle110.blogspot.com--><br /> </div></div><br /> <blockquote>Σημαντική βοήθεια για τα χρώματα μπορείτε να πάρετε <a href="http://loneeagle110.blogspot.com/2009/01/html-color-codes.html" target="_blank">εδώ</a><br /> </blockquote><br /> Κάνετε αποθήκευση προτύπου & πάμε στο 2ο βήμα.....Τώρα θα κοιταξετε να βρείτε το....<br /> <div class="code"><div class="code_content"></head> <br /> </div></div>Μόλις το βρείτε & πριν από το κλείσιμο του <strong><em><span style="color:#cc0000;"></head> </span></em></strong> (δηλαδή: στην προϋγούμενη γραμμή). Προσθέστε τα scripts.<br /> <div class="code"><div class="code_content"><!--Floating-Vertical-Menu-33-STARTS-Widget-by-http://loneeagle110.blogspot.com--><br /> <script language='javascript' src='http://scriptsrb.googlecode.com/files/jQuery.1.2.3.js'/><br /> <script language='javascript' src='http://scriptsrb.googlecode.com/files/jquery.dimensions.js'/><br /> <script language='javascript'><br /> $(document).ready(function(){<br /> });<br /> $(document).ready(function(){<br /> $(window).scroll(function () {<br /> });<br /> });<br /> var name = "#floatMenu";<br /> var menuYloc = null;<br /> $(document).ready(function(){<br /> menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))<br /> $(window).scroll(function () {<br /> });<br /> });<br /> var name = "#floatMenu";<br /> var menuYloc = null;<br /> $(document).ready(function(){<br /> menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))<br /> $(window).scroll(function () {<br /> var offset = menuYloc+$(document).scrollTop()+"px";<br /> $(name).animate({top:offset},{duration:500,queue:false});<br /> });<br /> });<br /> </script><br /> <!--Floating-Vertical-Menu-33-STOPS-Widget-by-http://loneeagle110.blogspot.com--><br /> </div></div>Πατήστε Αποθήκευση Προτύπου.<br /> Και πάμε στο τελευταίο βήμα.<br /> Πίνακας Ελέγχου ---> Σχεδίαση ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript<br /> Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα, χωρίς να προσθεσουμε κάτι στον Τίτλο.<br /> <div class="code"><div class="code_content"><!--Floating-Vertical-Menu-33-STARTS-Widget-by-http://loneeagle110.blogspot.com--><br /> <div id="floatMenu" style="top:<span style="color:lime;"><b>100px;</b></span> "> <br /> <ul class="menu1"><br /> <li><a href="<span style="color: orange;"><b>...your link...</b></span>" onclick="return false;"> Αρχική </a></li><br /> </ul><br /> <ul class="menu2"><br /> <li><a href="<span style="color: orange;"><b>...your link...</b></span>" onclick="return false;"> <span style="color:yellow;"><b>...tab 1...</b></span> </a></li><br /> <li><a href="<span style="color: orange;"><b>...your link...</b></span>" onclick="return false;"> <span style="color:yellow;"><b>...tab 2...</b></span> </a></li><br /> <li><a href="<span style="color: orange;"><b>...your link...</b></span>" onclick="return false;"> <span style="color:yellow;"><b>...tab 3...</b></span> </a></li><br /> </ul><br /> <ul class="menu3"><br /> <li><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Help." onclick="return false;"> Blogger Help </a></li><br /> </ul><br /> <span style="color: lime;"><b><!-- για προσθήκη START --></b></span> <br /> <ul class="menu(...4,5,6,7,8,...)"><br /> <li><a href="<span style="color: orange;"><b>...your link...</b></span>" onclick="return false;"> <span style="color:yellow;"><b>...Νέα ετικέτα...</b></span> </a></li><br /> </ul><br /> <span style="color: lime;"><b><!-- για προσθήκη STOP --></b></span> <br /> </div><br /> <!--Floating-Vertical-Menu-33-STOPS-Widget-by-http://loneeagle110.blogspot.com--><br /> </div></div><br /> <blockquote><span style="color:red;"><b>Σημείωση!!!!</b></span><br /> <div id="floatMenu" style="top:<span style="color:lime;"><b>100px;</b></span> "> // η απόσταση από την κορυφή της σελίδας<br /> Στην πρώτη γραμμή του παραπάνω κώδικα όπως θα δείτε, έχω προσθέσει (για ευκολία αλλά & για ασφάλεια ειδικά για τους νέους χρήστες) την παράμετρο για να ρυθμίσετε την απόσταση που θέλετε να έχει το μενού από την κορυφή της σελίδας σας, μέσα από το HTML/JavaScript gadget, χωρίς να χρειάζεται να μπείτε στην Επεξεργασία HTML. <br /> Πίστευω πως τα 100px είναι μια χαρά.<br /> Φυσικά αν δε σας καλύπτει το αλλάζετε.<br /> <br /> Όπου <strong><em><span style="color:#cc0000;">...your link...</span></em></strong> βάζετε τον σύνδεσμο της αντίστοιχης ετικέτας <strong><em><span style="color:#cc0000;">....tab 1,2,3,4,5 κτλ....</span></em></strong><br /> <strong><em><span style="color:#cc0000;">Αν κρατήσετε τον σύνδεσμο Blogger Help που έχει ο παραπάνω κώδικας, ίσως δώσετε την δυνατότητα & στους επισκέπτες σας να μας μάθουν & να μπορέσουν κι αυτοί με τη σειρά τους να βελτιώσουν την σελίδα τους.<br /> Μέσα από τις πληροφορίες που σας προσφέρουμε απλόχερα.<br /> Εμείς το ελάχιστο που μπορούμε να κάνουμε είναι να σας Ευχαριστήσουμε δημόσια εκ των προτέρων για αυτή σας την κίνηση.</span></em></strong><br /> <br /> Αφού περάσετε τις ετικέτες που θέλετε κάνετε αποθήκευση & μετά από την διάταξη της σελίδας σας, παίρνεται το gadget & το τοποθετείται στο πάνω-πάνω μέρος της πλαινής στήλης.<br /> </blockquote><br /> Πατάτε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ.<br /> <center>Το αποτέλεσμα:<br /> <img oncontextmenu="return false" src="http://i987.photobucket.com/albums/ae359/LoneEagle110/FloatingVerticalMenu33.jpg"/><br /> <br /> <marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee><br /> <br /> Για σχέδια σε Οριζόντια Μενού δείτε τα.....<br /> <br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-horizontal-menu-for-blogger-1.html" target="_blank">Οριζόντιο Μενού Νο 1</a><br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-horizontal-menu-for-blogger-2.html" target="_blank">Οριζόντιο Μενού Νο 2</a><br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-horizontal-menu-for-blogger-3.html" target="_blank">Οριζόντιο Μενού Νο 3</a><br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-horizontal-menu-for-blogger-4.html" target="_blank">Οριζόντιο Μενού Νο 4</a><br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-horizontal-menu-for-blogger-5.html" target="_blank">Οριζόντιο Μενού Νο 5</a><br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-horizontal-menu-for-blogger-6.html" target="_blank">Οριζόντιο Μενού Νο 6</a><br /> <a href="http://loneeagle110.blogspot.com/2010/03/blog-horizontal-menu-for-blogger-7.html" target="_blank">Οριζόντιο Μενού Νο 7</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-menu-fisheye-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 8</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-menu-for-blogger-9.html" target="_blank">Οριζόντιο Μενού Νο 9</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-blue-css-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 10</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-solid-block-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 11</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-glossy-5-colours-menu.html" target="_blank">Οριζόντιο Μενού Νο 12</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-indent-menu-for-blogger.html" target="_blank">Οριζόντιο Μενού Νο 13</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-animated-horizontal-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 14</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-frame-aura-horizontal-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 15</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-css-thick-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 16</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-sleek-pointer-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 17</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-wire-horizontal-chrome-bar-menu.html" target="_blank">Οριζόντιο Μενού Νο 18</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-bevel-menu-for-blogger.html" target="_blank">Οριζόντιο Μενού Νο 19</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-css-green-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 20</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-thick-underline-menu.html" target="_blank">Οριζόντιο Μενού Νο 21</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-inverted-shift-down.html" target="_blank">Οριζόντιο Μενού Νο 22</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-matt-black-menu-for.html" target="_blank">Οριζόντιο Μενού Νο 23</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-inverted-modern-bricks.html" target="_blank">Οριζόντιο Μενού Νο 24</a><br /> <a href="http://loneeagle110.blogspot.com/2010/04/blog-horizontal-overlapping-menu-25.html" target="_blank">Οριζόντιο Μενού Νο 25</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/8-horizontal-vertical-menu-26-8-colours.html" target="_blank">Οριζόντιο Μενού Νο 26</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/blog-horizontal-hover-gray-menu-27.html" target="_blank">Οριζόντιο Μενού Νο 27</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/blog-horizontal-styled-menu-28.html" target="_blank">Οριζόντιο Μενού Νο 28</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/blog-horizontal-dropdown-menu-29-3.html" target="_blank">Οριζόντιο Μενού Νο 29</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/horizontal-blueblack-dropdown-menu-30.html" target="_blank">Οριζόντιο Μενού Νο 30</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/horizontal-light-gray-menu-31.html" target="_blank">Οριζόντιο Μενού Νο 31</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/horizontal-purple-menu-32.html" target="_blank">Οριζόντιο Μενού Νο 32</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/horizontal-dolphin-menu-33.html" target="_blank">Οριζόντιο Μενού Νο 33</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/horizontal-glossy-blood-menu-34.html" target="_blank">Οριζόντιο Μενού Νο 34</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-glossy-rounded-blue-menu-35.html" target="_blank">Οριζόντιο Μενού Νο 35</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-glossy-rounded-blue-menu-35.html" target="_blank">Οριζόντιο Μενού Νο 36</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-glossy-green-menu-37.html" target="_blank">Οριζόντιο Μενού Νο 37</a><br /> <a href="http://loneeagle110.blogspot.com/2010/11/horizontal-proof-menu-no-38.html" target="_blank">Οριζόντιο Μενού Νο 38</a><br /> <a href="http://loneeagle110.blogspot.com/2010/11/horizontal-slant-menu-no-39.html" target="_blank">Οριζόντιο Μενού Νο 39</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-simple-grey-menu-40.html" target="_blank">Οριζόντιο Μενού Νο 40</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-orange-blue-menu-41.html" target="_blank">Οριζόντιο Μενού Νο 41</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-light-pall-menu-no-42.html" target="_blank">Οριζόντιο Μενού Νο 42</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-simple-blue-bubble-menu-43.html" target="_blank">Οριζόντιο Μενού Νο 43</a><br /> <a href="http://loneeagle110.blogspot.com/2010/11/horizontal-menu-44-3-colours.html" target="_blank">Οριζόντιο Μενού Νο 44</a><br /> <a href="http://loneeagle110.blogspot.com/2010/08/horizontal-simple-fox-menu-45.html" target="_blank">Οριζόντιο Μενού Νο 45</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/horizontal-underline-menu-for-blogger.html" target="_blank">Οριζόντιο Μενού Νο 46</a><br /> <a href="http://loneeagle110.blogspot.com/2010/11/horizontal-white-razer-menu-for-blogger.html" target="_blank">Οριζόντιο Μενού Νο 47</a><br /> <a href="http://loneeagle110.blogspot.com/2011/01/horizontal-bluewhite-dropdown-menu-48.html" target="_blank">Οριζόντιο Μενού Νο 48</a><br /> <a href="http://loneeagle110.blogspot.com/2011/01/horizontal-dolphin-menu-33.html" target="_blank">Οριζόντιο Μενού Νο 51</a><br /> <a href="http://loneeagle110.blogspot.com/2011/01/horizontal-pall-menu-52-3-colours-green.html" target="_blank">Οριζόντιο Μενού Νο 52</a><br /> <a href="http://loneeagle110.blogspot.com/2012/01/horizontal-jquery-sub-navigation-menu.html" target="_blank">Οριζόντιο Μενού Νο 53</a><br /> <br /> Για σχέδια σε Κάθετα μενού δείτε τα....<br /> <br /> <a href="http://loneeagle110.blogspot.com/2010/02/blog-vertical-menu-for-blogger.html" target="_blank">Κάθετο Μενού Νο 1</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/8-horizontal-vertical-menu-26-8-colours.html" target="_blank">Κάθετο Μενού Νο 2</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/vector-vertical-menu-for-blogger-3.html" target="_blank">Κάθετο Μενού Νο 3</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/sliding-side-menu-4.html" target="_blank">Κάθετο Μενού Νο 4</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/vertical-jazz-menu-no-5.html" target="_blank">Κάθετο Μενού Νο 5</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/vertical-dark-menu-no-6.html" target="_blank">Κάθετο Μενού Νο 6</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/red-velvet-vertical-menu-no-7.html" target="_blank">Κάθετο Μενού Νο 7</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/vertical-rainbow-menu-no-8.html" target="_blank">Κάθετο Μενού Νο 8</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/blackbunny-vertical-menu-no-9.html" target="_blank">Κάθετο Μενού Νο 9</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/vertical-blue-black-menu-no-11.html" target="_blank">Κάθετο Μενού Νο 11</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/light-blue-vertical-menu-no-12.html" target="_blank">Κάθετο Μενού Νο 12</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/glossy-black-vertical-menu-no-13.html" target="_blank">Κάθετο Μενού Νο 13</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/blue-vertical-menu-no-14.html" target="_blank">Κάθετο Μενού Νο 14</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/3d-state-vertical-menu-no-15.html" target="_blank">Κάθετο Μενού Νο 15</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/highlight-vertical-menu-no-16.html" target="_blank">Κάθετο Μενού Νο 16</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/vertical-green-blue-arrow-menu-no-17.html" target="_blank">Κάθετο Μενού Νο 17</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/vertical-urban-menu-no-18.html" target="_blank">Κάθετο Μενού Νο 18</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/vertical-glossyblue-menu-no-20.html" target="_blank">Κάθετο Μενού Νο 20</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/sliding-pink-vertical-menu-no-21.html" target="_blank">Κάθετο Μενού Νο 21</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/purple-button-vertical-menu-no-22.html" target="_blank">Κάθετο Μενού Νο 22</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/vertical-bevel-menu-no-23.html" target="_blank">Κάθετο Μενού Νο 23</a><br /> <a href="http://loneeagle110.blogspot.com/2010/05/pure-css-vertical-menu.html" target="_blank">Κάθετο Μενού No 26</a><br /> <a href="http://loneeagle110.blogspot.com/2010/06/blue-vertical-menu-no-30.html" target="_blank">Κάθετο Μενού Νο 30</a><br /> <a href="http://loneeagle110.blogspot.com/2011/11/slate-gray-vertical-menu-no-31-by.html" target="_blank">Κάθετο Μενού Νο 31</a><br /> <a href="http://loneeagle110.blogspot.com/2011/06/blog-slashdot-menu.html" target="_blank">Κάθετο Μενού Νο 32</a><br /> </center>

Blogger Help Blogger Tutorials JQuery Tutorials Vertical Menus Floating Vertical Menu (No 33).

Συνεχίζουμε να πλουτίζουμε την μεγάλη μας συλλογή στα μενού μ' ένα κινούμενο κάθετο, με τη χρήση jQuery για το blogger & όχι μόνο. ...

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

Featured Post Content Slider to Blogger.

</br><br /><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><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:'Apple Chancery',cursive;font-size:70px;line-height:50px;margin:5px 5px 0px 0px; position:relative;text-shadow:2px 2px 2px rgb(153, 102, 255);">Τ</span>ο παρακάτω σχέδιο "Slider", θα σας βοηθήσει να αναδείξετε τις αναρτήσεις που θέλετε ή απλά να ομορφύνετε το ιστολόγιό σας με αγαπημένες φωτογραφίες.<br /><br /><br /><br />Ποιος από εσάς δεν επιθυμεί κάτι τέτοιο;;; <br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><strong><em><span style="color:#cc0000;">0.</span></em></strong>Πριν την οποιαδήποτε αλλαγή κρατήστε BACKUP ΤΟ ΠΡΟΤΥΠΟ ΣΑΣ για να αποφύγετε δυσάρεστες καταστάσεις σε περίπτωση λάθους!!!!!!!<br /><br /><strong><em><span style="color:#cc0000;">1.</span></em></strong> Θα κάνετε Σύνδεση/Login στο blog σας & θα μπείτε στον Πίνακα Ελέγχου σας --> Σχεδίαση --> Επεξεργασία HTML <br /><br /><strong><em><span style="color:#cc0000;">2.</span></em></strong> Και θα κοιτάξετε να βρείτε τον παρακάτω κώδικα με Ctrl + F....<br /><br /><div class="code"><div class="code_content"><br /></head><br /></div></div><br /><br />Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το <strong><em><span style="color:#cc0000;"></head></span></em></strong><br />και θα προσθέσετε τον παρακάτω κώδικα.<br /><br /><div class="code"><div class="code_content"><br /><!--Featured-Slider-STARTS-http://loneeagle110.blogspot.com--><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function() {<br />slideshowle(5000); <span style="color:lime;"><b>// χρόνος εναλλαγής εικόνων</b></span><br />});<br />function slideshowle(speed) {<br />$('ul.slideshowle').append('<li id="slideshowle-caption" class="caption"><div class="slideshowle-caption-container"><h3></h3><p></p></div></li>');<br />$('ul.slideshowle li').css({opacity: 0.0});<br />$('ul.slideshowle li:first').css({opacity: 1.0});<br />$('#slideshowle-caption h3').html($('ul.slideshowle a:first').find('img').attr('title'));<br />$('#slideshowle-caption p').html($('ul.slideshowle a:first').find('img').attr('alt'));<br />$('#slideshowle-caption').css({opacity: 0.7, bottom:0});<br />var timer = setInterval('gallery()',speed);<br />$('ul.slideshowle').hover(<br />function () {<br />clearInterval(timer);<br />},<br />function () {<br />timer = setInterval('gallery()',speed);<br />}<br />);<br />}<br />function gallery() {<br />var current = ($('ul.slideshowle li.show')? $('ul.slideshowle li.show') : $('#ul.slideshowle li:first'));<br />var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshowle-caption')? $('ul.slideshowle li:first') :current.next()) : $('ul.slideshowle li:first'));<br />var title = next.find('img').attr('title');<br />var desc = next.find('img').attr('alt');<br />next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);<br />$('#slideshowle-caption').animate({bottom:-70}, 300, function () {<br />$('#slideshowle-caption h3').html(title);<br />$('#slideshowle-caption p').html(desc);<br />$('#slideshowle-caption').animate({bottom:0}, 500);<br />});<br />current.animate({opacity: 0.0}, 1000).removeClass('show');<br />}<br />//]]><br /></script><br /><br /><style type="text/css"><br />ul.slideshowle {<br />list-style:none;<br /><span style="color:green;"><b>width:600px; // πλάτος</b></span><br /><span style="color:green;"><b>height:250px; // ύψος </b></span><br />overflow:hidden;<br />position:relative;<br />margin:0;<br />padding:0;<br />font-family:Arial,Helvetica,Trebuchet MS,Verdana;}<br />ul.slideshowle li {<br />position:absolute;<br />left:0;<br />right:0;<br />}<br />ul.slideshowle li.show {<br />z-index:500;}<br />ul img {<br /><span style="color:green;"><b>width:600px; // πλάτος</b></span><br /><span style="color:green;"><b>height:250px; // ύψος </b></span><br />border:none;}<br />#slideshowle-caption {<br /><span style="color:green;"><b>width:600px; // πλάτος</b></span><br /><span style="color:green;"><b>height:70px; // το ύψος της διαφάνειας που θα εμφανίζεται το κείμενο</b></span><br />position:absolute;<br />bottom:0;<br />left:0;<br />color:#fff; // χρώμα κειμένου<br />background:#000; // χρώμα φόντου<br />z-index:500;}<br />#slideshowle-caption .slideshowle-caption-container {<br />padding:5px 10px;<br />z-index:1000;}<br />#slideshowle-caption h3 {<br />margin:0;<br />padding:0;<br />font-size:16px;}<br />#slideshowle-caption p {<br />margin:5px 0 0 0;<br />padding:0;}<br /></style><br /><!--Featured-Slider-STOPS-http://loneeagle110.blogspot.com--><br /></div></div><br /><br /><blockquote><br /><span style="color:#cc0000;"><b>Σημείωση!!!!</b></span><br /><br />Για τους φίλους που θέλουν να μεγαλώσουν ή να μικρύνουν το μέγεθος του Slider θα πρέπει να αλλάξουν τις τιμές που είναι με πράσινο χρώμα πλάτος/ύψος & στα 3 σημεία του css.<br /></blockquote><br /><br /><strong><em><span style="color:#cc0000;">3.</span></em></strong>Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση.<br /><br /><span style="color:#99A3FF;">Εισάγετε τον παρακάτω κώδικα με 2 τρόπους:</span><br /><br /><span style="color:#cc0000;">1ος.</span> Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript.<br /><br /><center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center><br /><br />θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα.<br /><br /><center><img src="http://i56.tinypic.com/24cegdl.jpg"></center><br /><br /><span style="color:#cc0000;">2ος.</span> Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <span style="color: lightblue;"><b><div id='content-wrapper'></b></span> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις.<br /><br /><div class="code"><div class="code_content"><br /><!--Featured-Slider-STARTS-http://loneeagle110.blogspot.com--><br /><ul class="slideshowle"><br /><li><a href="<span style="color:Maroon;"><b>...το url της ανάρτησης...</b></span>"><img src="<span style="color:orange;"><b>...Ο σύνδεσμος για την εικόνα ...</b></span>" title="<span style="color:lime;"><b>...ο τίτλος...</b></span>" alt="<span style="color:Turquoise;"><b>...το κείμενο που θα εμφανίζεται...</b></span>" /></a></li><br /><br /><li><a href="<span style="color:Maroon;"><b>...το url της ανάρτησης...</b></span>"><img src="<span style="color:orange;"><b>...Ο σύνδεσμος για την εικόνα...</b></span>" title="<span style="color:lime;"><b>...ο τίτλος...</b></span>" alt="<span style="color:Turquoise;"><b>...το κείμενο που θα εμφανίζεται...</b></span>" /></a></li><br /><br /><li><a href="<span style="color:Maroon;"><b>...το url της ανάρτησης...</b></span>"><img src="<span style="color:orange;"><b>...Ο σύνδεσμος για την εικόνα ...</b></span>" title="<span style="color:lime;"><b>...ο τίτλος...</b></span>" alt="<span style="color:Turquoise;"><b>...το κείμενο που θα εμφανίζεται...</b></span>" /></a></li><br /><br /><li><a href="<span style="color:Maroon;"><b>...το url της ανάρτησης...</b></span>"><img src="<span style="color:orange;"><b>...Ο σύνδεσμος για την εικόνα...</b></span>" title="<span style="color:lime;"><b>...ο τίτλος...</b></span>" alt="<span style="color:Turquoise;"><b>...το κείμενο που θα εμφανίζεται...</b></span>" /></a></li><br /><span style="color:red;"><b>// για επιπλέον παρουσιάσεις</b></span><br /></ul><br /><!--Featured-Slider-STOPS-http://loneeagle110.blogspot.com--><br /></div></div><br /><br /><blockquote>Για να προσθέσετε κι άλλες παρουσιάσεις θα προσθέσετε τον παρακάτω κώδικα όσες φορές χρειάζεται στο σημείο <span style="color:red;"><b>// για επιπλέον παρουσιάσεις</b></span><br /><br /><li><a href="<span style="color:Maroon;"><b>...το url της ανάρτησης...</b></span>"><img src="<span style="color:orange;"><b>...Ο σύνδεσμος για την εικόνα...</b></span>" title="<span style="color:lime;"><b>...ο τίτλος...</b></span>" alt="<span style="color:Turquoise;"><b>...το κείμενο που θα εμφανίζεται...</b></span>" /></a></li><br /><br /></blockquote><br /><br /><strong><em><span style="color:#cc0000;">4.</span></em></strong>Τέλος πατήστε Προεπισκόπηση & αν δεν σας βγάλει κάποιο λάθος, πατήστε ΑΠΟΘΗΚΕΥΣΗ. <br /><br />Και κάντε Ανανέωση την σελίδα σας. <br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

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

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

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

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

</br><br /><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><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:'Apple Chancery',cursive;font-size:70px;line-height:50px;margin:5px 5px 0px 0px; position:relative;text-shadow:2px 2px 2px rgb(153, 102, 255);">Σ</span>ε αυτή την ανάρτηση θα σας παρουσιάσουμε ακόμα ένα εντυπωσιακό "slider" πλουτίζοντας σιγά-σιγά κι αυτήν την κατηγορία του ιστολογίου μας. <br />Είναι ένα widget που θα σας βοηθήσει να αναδείξετε τις αναρτήσεις που θέλετε & παράλληλα να ομορφύνετε το ιστολόγιό σας. <br />Ένα υπάρχον σχέδιο το οποίο τροποποίησα σε 2 ακόμα χρώματα για να καλύψω τα γούστα σας.<br /><br /><center><img src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br />Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server ή ακόμα καλύτερα να τα φορτώσετε μέσα στο html σας.<br /><br /><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><br /><br /><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><br /><br /><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><br /><br />Δείτε σχετική ανάρτηση <a href="http://loneeagle110.blogspot.com/2010/02/online-storage-file.html" target="_blank">εδώ</a><br /><br />Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Και με το Ctrl + F θα κάνετε αναζήτηση για το....<br /><br /><div class="code"><div class="code_content"><br /></head><br /></div></div><br /><br />Μόλις το βρείτε, θα πάτε στην προυγούμενη γραμμή από το <strong><em><span style="color:#cc0000;"></head></span></em></strong><br />Θα προσθέσετε τα scripts του Slideshow αφού πρώτα έχετε προσθέσει τις διευθύνσεις των scripts στα σημεία "<span style="color: orange;"><b>...jquery-1.2.6.min.js...</b></span>" & "<span style="color: orange;"><b>...jcarousel.pack.js...</b></span>" & "<span style="color: orange;"><b>...personalized-1.5.2.packed.js...</b></span>".<br /><br /><div class="code"><div class="code_content"><br /><script src='<span style="color: orange;"><b>...jquery-1.2.6.min.js...</b></span>' type='text/javascript'></script><br /><script src='<span style="color: orange;"><b>...jcarousel.pack.js...</b></span>' type='text/javascript'></script><br /><script src='<span style="color: orange;"><b>...personalized-1.5.2.packed.js...</b></span>' type='text/javascript'></script><br /><br /><script type="text/javascript"><br />jQuery(document).ready(function() {<br />jQuery('#mycarousel').jcarousel({<br />wrap:"both",<br />scroll:2,<br />animation:"slow"<br />});<br />function mycarousel_initCallback(carousel) {<br />jQuery('#featured-next-button').bind('click', function() {<br />carousel.next();<br />return false;<br />});<br />jQuery('#featured-prev-button').bind('click', function() {<br />carousel.prev();<br />return false;<br />});<br />jQuery('.button-nav span').bind('click', function() {<br />carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));<br />return false;<br />});<br />};<br />jQuery('#feature-carousel').jcarousel({<br />wrap:"both",<br />scroll:1,<br />auto:10,<br />initCallback: mycarousel_initCallback,<br />buttonNextHTML: null,<br />buttonPrevHTML: null<br />});<br />});<br /></script><br /></div></div><br /><br />Ακριβώς από κάτω από τα scripts θα προσθέσετε το ανάλογο css για όποιο φόντο θέλετε.<br /><br /><center><span style="color:#99A3FF;">Tο css με Άσπρο φόντο.</span><br /><br /><img alt="Featured Slider with jQquery" src="http://i51.tinypic.com/jie6hd.jpg" width="500"></center><br /><br /><div class="code"><div class="code_content"><br /><style type="text/css"><br />.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}<br />.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}<br />.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}<br />.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}<br />.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}<br />.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}<br />.jcarousel-skin-tango .jcarousel-next-horizontal {<br />background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button.png) no-repeat scroll -46px 0;<br />cursor:pointer;<br />height:254px;<br />right:20px;<br />position:absolute;<br />top:0;<br />width:46px;<br />}<br />.jcarousel-skin-tango .jcarousel-prev-horizontal {<br />background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button.png) no-repeat scroll 0 0;<br />cursor:pointer;<br />height:254px;<br />left:20px;<br />position:absolute;<br />top:0;<br />width:46px;<br />}<br />.jcarousel-container {position: relative;}<br />.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}<br />.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}<br />.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}<br />.jcarousel-next {z-index: 3;display: none;}<br />.jcarousel-prev {z-index: 3;display: none;}<br />#news-slider{background-color:#ffffff;padding:20px 0;}<br />#news-slider img{border:none;height:254px;width:307px;}<br /></style><br /></div></div><br /><br /><center><span style="color:#99A3FF;">Δείτε το στην πράξη</span><br /><br /><object data="http://stales.ucoz.com/Featured_Slider_jQquery.swf" height="250" menu="false" type="" width="500" wmode="transparent"></object></center><br /><br /><center><span style="color:#99A3FF;">Tο css με Κόκκινο φόντο.</span><br /><br /><img alt="Featured Slider with jQquery" src="http://i52.tinypic.com/8z0fwg.jpg" width="500"></center><br /><br /><div class="code"><div class="code_content"><br /><style type='text/css'><br />.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}<br />.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}<br />.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}<br />.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}<br />.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}<br />.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}<br />.jcarousel-skin-tango .jcarousel-next-horizontal {<br />background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-red.png) no-repeat scroll -46px 0;<br />cursor:pointer;<br />height:254px;<br />right:20px;<br />position:absolute;<br />top:0;<br />width:46px;<br />}<br />.jcarousel-skin-tango .jcarousel-prev-horizontal {<br />background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-red.png) no-repeat scroll 0 0;<br />cursor:pointer;<br />height:254px;<br />left:20px;<br />position:absolute;<br />top:0;<br />width:46px;<br />}<br />.jcarousel-container {position: relative;}<br />.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}<br />.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}<br />.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}<br />.jcarousel-next {z-index: 3;display: none;}<br />.jcarousel-prev {z-index: 3;display: none;}<br />#news-slider{background-color:#990000;padding:20px 0;}<br />#news-slider img{border:none;height:254px;width:307px;}<br /></style><br /></div></div><br /><br /><center><span style="color:#99A3FF;">Tο css με Σκούρο Γκρι φόντο.</span><br /><br /><img alt="Featured Slider with jQquery" src="http://i51.tinypic.com/312ajxe.jpg" width="500"></center><br /><br /><div class="code"><div class="code_content"><br /><style type='text/css'><br />.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}<br />.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}<br />.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}<br />.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}<br />.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}<br />.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}<br />.jcarousel-skin-tango .jcarousel-next-horizontal {<br />background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-black.png) no-repeat scroll -46px 0;<br />cursor:pointer;<br />height:254px;<br />right:20px;<br />position:absolute;<br />top:0;<br />width:46px;<br />}<br />.jcarousel-skin-tango .jcarousel-prev-horizontal {<br />background:transparent url(http://scriptsrb.googlecode.com/files/image-slider-button-black.png) no-repeat scroll 0 0;<br />cursor:pointer;<br />height:254px;<br />left:20px;<br />position:absolute;<br />top:0;<br />width:46px;<br />}<br />.jcarousel-container {position: relative;}<br />.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}<br />.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}<br />.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}<br />.jcarousel-next {z-index: 3;display: none;}<br />.jcarousel-prev {z-index: 3;display: none;}<br />#news-slider{background-color:#333;padding:20px 0;}<br />#news-slider img{border:none;height:254px;width:307px;}<br /></style><br /></div></div><br /><br />Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση.<br /><br /><span style="color:#99A3FF;">Εισάγετε τον παρακάτω κώδικα με 2 τρόπους:</span><br /><br /><span style="color:#99A3FF;">1ος.</span> Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα, πατώντας προσθήκη gadget HTML/JavaScript.<br /><br /><center><img src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center><br /><br />θα το ανοίξετε & θα ρίξετε τον παρακάτω κώδικα.<br /><br /><center><img src="http://i56.tinypic.com/24cegdl.jpg"></center><br /><br /><span style="color:#99A3FF;">2ος.</span> Πίνακα ελέγχου σας >>> Σχεδίαση >>> Επεξεργασία HTML.<br /><br />Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα: <span style="color: lightblue;"><b><div id='content-wrapper'></b></span> και προσθέτουμε τον παρακάτω κώδικα ακριβώς από πάνω, αφού περάσετε εικόνες συνδέσμους και κείμενα για τις παρουσιάσεις.<br /><br /><div class="code"><div class="code_content"><br /><!--Featured-Slider-STARTS-http://loneeagle110.blogspot.com--><br /><div id='news-slider'><br /><ul class='jcarousel-skin-tango' id='mycarousel'><br /><li><a href='<span style="color:lightblue;"><b>...Ο σύνδεσμος της ανάρτησης για την εικόνα 1...</b></span>'><img src='<span style="color: orange;"><b>...direct link image 1.jpg...</b></span>'/></a></li><br /><li><a href='<span style="color:lightblue;"><b>...Ο σύνδεσμος της ανάρτησης για την εικόνα 2...</b></span>'><img src='<span style="color: orange;"><b>...direct link image 2.jpg...</b></span>'/></a></li><br /><li><a href='<span style="color:lightblue;"><b>...Ο σύνδεσμος της ανάρτησης για την εικόνα 3...</b></span>'><img src='<span style="color: orange;"><b>...direct link image 3.jpg...</b></span>'/></a></li><br /><li><a href='<span style="color:lightblue;"><b>...Ο σύνδεσμος της ανάρτησης για την εικόνα 4...</b></span>'><img src='<span style="color: orange;"><b>...direct link image 4.jpg...</b></span>'/></a></li><br /><li><a href='<span style="color:lightblue;"><b>...Ο σύνδεσμος της ανάρτησης για την εικόνα 5...</b></span>'><img src='<span style="color: orange;"><b>...direct link image 5.jpg...</b></span>'/></a></li><br /></ul><br /></div><br /><!--Featured-Slider-STOPS-http://loneeagle110.blogspot.com--><br /></div></div><br /><br />Αυτό ήταν, θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ.<br /><br />Τώρα θα πάτε στο Πίνακα ελέγχου σας & μέσα από την Σχεδίαση θα προσαρμόσετε το gadget στο σημείο που θέλετε να εμφανίζεται στη σελίδα σας, συνήθως πάνω από τις αναρτήσεις σας.<br /><blockquote><br /><strong><em><span style="color:#cc0000;">Σημείωση:</span></em></strong> <br /><br />Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider .<br /><br />Δηλαδή, αν το πλάτος του Slider είναι 410px και το ύψος 300px και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις<br /><br />Μπορείτε να δείτε <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 για να επεξεργαστείτε τις  φωτογραφίες σας.<br /></blockquote><br /><br /></span></h3><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

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

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

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