ΒΗΜΑ 2: ΘΕΜΑ ΓΙΑ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ

Επιλογή template ιστοσελίδας από τον παρακάτω σύνδεσμο

ΚΛΙΚ ΕΔΩ -> https://gooyaabitemplates.com/free-blogger-templates/

+++https://btemplates.com/

Eξαγωγή αρχείου πρότυπου που έχει ληφθεί

Η μορφή αρχείου που έχετε λάβει είναι μια μορφή αρχείου .ZIP. Πρέπει λοιπόν να εξαχθεί. Εξαγάγετε / αποσυμπιέστε.

Aνοίξτε το αρχείο που έχει κατάληξη .xml με το πρόγραμμα επεξεργασίας κειμένου = Σημειωματάριο (notepad)

Ανοίξτε το αρχείο .xml χρησιμοποιώντας πρόγραμμα επεξεργασίας κειμένου όπως το σημειωματάριο, το πληκτρολόγιο, το σημειωματάριο ++ ή κάτι παρόμοιο κάνοντας δεξί κλικ πάνω στο αρχείο και επιλέγοντας "Άνοιγμα με.." Σημειωματάριο

Αντιγράψτε τον κώδικα html 

Στο σημειωματάριο, πατήστε ctrl + a ή δεξί κλικ "Επιλογή όλων" και στη συνέχεια ctrl + c ή δεξί κλικ και αντιγραφή για να αντιγράψετε την επιλεγμένη κωδικοποίηση.

Αλλαγή θέματος στο blogger

Επιλέξτε (Εάν έχετε πολλά ιστολόγια) το ιστολόγιό σας στον Πίνακα ελέγχου που θέλετε να αλλάξετε πρότυπο και κάντε κλικ στο "Θέμα" στον πίνακα επιλογών στα αριστερά.

Ανοίξτε τον επεξεργαστή html στο blogger

Επιλέγω το βελάκι δίπλα από την προσαρμογή και στη συνέχεια επιλέγω το κουμπί "Επεξεργασία HTML".

Επικόλληση κώδικα στον html editor

Κάντε κλικ οπουδήποτε στο HTML Editor. Τώρα πατήστε ctrl + a και στη συνέχεια ctrl + v (ctrl + a για να επιλέξετε όλη την κωδικοποίηση, ctrl + v για να αντικαταστήσετε την επιλεγμένη κωδικοποίηση με αντιγραμμένη κωδικοποίηση προτύπου). Τέλος, κάντε κλικ στο κουμπί " Αποθήκευση θέματος" .

ΒΗΜΑ 3: ΛΟΓΟΤΥΠΟ (LOGO) ΓΙΑ ΤΗΝ ΙΣΤΟΣΕΛΙΔΑ

CANVA.COM (εγγραφή με τον λογαριασμό google που χρησιμοποιούμε για την ιστοσελίδα)

Μετατροπή mp4 σε gif για να μπορεί μια κινούμενη εικόνα να μπει ως λογότυπο στην ιστοσελίδα. Klik σε έναν από τους παρακάτω συνδέσμους για να κάνεις την μετατροπή. 

https://www.onlineconverter.com/mp4-to-gif

https://cloudconvert.com/mp4-to-gif

https://mp4-2-gif.com/

Μετατροπή youtube, facebook, tik tok, vimeo βίντεο σε gif

https://gifrun.com/

ΒΗΜΑ 5: ΑΝΑΡΤΗΣΕΙΣ

Προσοχή να υπάρχει ομοιομορφία:

- Χρήση ίδιας γραμματοσειράς σε όλες τις αναρτήσεις

- http://wordonline.info/

1. ΜΕΤΑΦΡΑΣΗ

ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT

BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ

<div class='widget-content'>
<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_HI0tGfufXd7AOTSswfHBmkAJJ2Xlj12_7JcBYvz8ET55XTZWYvRwkj9KnBFOAtUXwnY8VSwFxQdWJMw_ATxcgUvXaeA7Y-w6H5VxLm-4qISfszZMjc6vO9oqXleHOvPOBEjapipcc4/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuZDFxVQk6fzFsdOGWbXdTONIfSEfcn5Nbsg47g_nqdCKtI5TnbhQIbt4OGkX_nKFpk3ufNkv6LGi7p1BtNp15if5EmSzQZlpMFHO85C0QrhXfgNt4uHhNGlUZ3pKi_V_bBEvrp64R-M/s200/France.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7zT4QSylm3ujonobgN7PPkNiwPGTp2QQTpwBBENvdU08b0EVGbMZa4ciMzLoVSva80AZEvhDsQ_ZFOx0MJZbfDdEgB79PLlRW92pnecdV53148SIVXipseRim2Ug2XrHaIYFdIYEYJGM/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLBdelJxvwLR9fUIjm8QulvoOITT73b1ZsvwLrd8WnuE4mdQZ-bDaD5KIxVFZWAn-oebD2YeisTHY8S4VLWmE_J_ewC9hqLv3XWmx_8z8aQFuq-UjkWP5132a_B8cw0i2AK68T5MOFQJA/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_EOl0mzufkIw1FYR5ga-gC8vbXfyTjHQneOmkjeZhQOl1f_0AQz6S8uTPyugr6KaK5WnkV_4e2OhClkveOoW2AAUQnmaxYqUoC63a1Dg-Z68H9LaVe-WhmSqZWF0mTZVPpj2rr-3pRXw/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIVQevX1j7B9A1yEH0_Sa5fFXn0izbAOjxvTSN_nJIO27Z5NYS_VqCVx5LgksrCshsfv1yq6jBmMr3bf6ElhIFHtDKAedige-OQxKvCXID_wUv18h-NBZGy7G3P0MtFgvavWp10I1nv5o/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJcC7_uN6LQEJCR_7wcaCjGQXBQJj19SaHjQpGKIvAAq9PdfY8Z6eX8ZLdnDgT0km1N1ipiZRnymD6OIO2C6J_ySTIBs_-P71FXHpVbsD4aVj0HjT8akmnZ9Zi9yDfmC1VT7OIyyFPqVw/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN90nWSc3r8_qfBKDHSzeFjT9C1d0a5x1hAG4rWAxBvXO6kFMw63ePyndMcxffbMnPmDclZVIHiAu07SOt64HZUsBrjRblSt84N4XepXakOfowdCckBLEVujCVeUOSRmWiR1a8sQzlv5o/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTIjB21RlQUZqzwptg0aQZHI2uzRoPunm7CxgpJjij5a789PmiYtkjTyw0ml_HMJtnRe5WktZg1Kj1KfnP7TOKUzaZn-_nr5FcPqY0oPAD0VycHSIHBa282mt4Komk-6KFnyrIn6moig/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVvSO6C7pApigPnkClDLk_8swnZMrumC9H8Les-LO0q8M5AQOq5PiMmL60Y1yqaKXJKAJdY6DYCDd9INmWMdmLT0TC94qP9-3oNQC8mZ5rqJqrKOpdX5uViQn6YIu45XgxjkXRxRtFqz8/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2x0jRNgBzxGM5GQWrH5cLtSm5FYFV3_BgEV-EIS3iZWSyzkUl6vz3CU5yvuDNTMRBGGrOVIgZRK-JbtNas4W0IiDlkwFwBgWVzlsmXKvDhsFhEwrLLgH5RBJcXHYyIIWYAEh8cOwKYQ/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Romanian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cro&hl=en'); return false;"><img alt="Romanian" border="0" align="absbottom" title="Romanian" height="24" src="https://cdn.countryflags.com/thumbs/romania/flag-400.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Bulgarian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cbg&hl=en'); return false;"><img alt="Bulgarian" border="0" align="absbottom" title="Bulgarian" height="24" src="https://cdn.countryflags.com/thumbs/bulgaria/flag-400.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Croatia" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Chr&hl=en'); return false;"><img alt="Croatia" border="0" align="absbottom" title="Croatia" height="24" src="https://cdn.webshopapp.com/shops/94414/files/53815818/croatia-flag-icon-free-download.jpg" style="cursor: pointer;margin-right:8px" width="24" /></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Albanian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Csq&hl=en'); return false;"><img alt="Albanian" border="0" align="absbottom" title="Albanian" height="24" src="https://cdn.webshopapp.com/shops/94414/files/53429170/albania-flag-icon-free-download.jpg" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Finnish" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfi&hl=en'); return false;"><img alt="Finnish" border="0" align="absbottom" title="Finnish" height="24" src="https://www.worldatlas.com/webimage/flags/countrys/zzzflags/filarge.gif" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Swedish" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Csv&hl=en'); return false;"><img alt="Swedish" border="0" align="absbottom" title="Swedish" height="24" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/4c/Flag_of_Sweden.svg/220px-Flag_of_Sweden.svg.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%el&tl=ro'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmPk3hs_4t3ctd8to2RX_dKCFXwk2eOzyt0XprSpdYVuVfX2sleYTbtdBcO_o8M5VidxCVgRcpnHTBzn1-jYmKnYneOwI72fGXunqAwILJu2x3lvJXdwsTmxjq3g0g6FWksJcjOJLKtc/s200/China.png" style="cursor: pointer;margin-right:8px" width="24" /></a> </div>
<div 0px 0pxa?? style="a??font-size:10px;margin:8px" 3px></div>
</div>

➤ ΕΠΙΣΤΡΟΦΗ

2. FACEBOOK PAGE

ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT

BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ

<center><div class="fb-page" data-href="https://www.facebook.com/soratemplates" data-width="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div></center>

➤ΕΠΙΣΤΡΟΦΗ

3. ΑΠΕΝΕΡΓΟΠΟΙΗΣΕ ΤΟ ΔΕΞΙ ΚΛΙΚ ΑΠΟ ΤΗΝ ΣΕΛΙΔΑ

ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML

BHMA 2: ΚΛΙΚ ΣΤΟΝ ΚΩΔΙΚΑ ΟΠΟΥΔΗΠΟΤΕ ΚΑΙ ΣΤΗ ΣΥΝΕΧΕΙΑ ΑΠΟ ΤΟ ΠΛΗΚΤΡΟΛΟΓΙΟ CTRL+F ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΑΝΑΖΗΤΗΣΗ (SEARCH ΠΑΝΩ ΑΡΙΣΤΕΡΑ). ΚΑΝΩ ΑΝΑΖΗΤΗΣΗ ΓΙΑ </head>.

BHMA 3: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΗΝ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ </head>.

<script>
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>

➤ΕΠΙΣΤΡΟΦΗ

4. ΕΙΚΟΝΑ ΜΕ ΣΥΝΔΕΣΜΟ ΣΤΟ ΔΕΞΙ ΒΟΗΘΗΤΙΚΟ ΜΕΝΟΥ

ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT

BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ

<a href="ΕΔΩ ΒΑΖΕΙΣ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΑΝΑΚΑΤΕΥΘΥΝΣΗΣ"><img src="ΕΔΩ ΒΑΖΕΙΣ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ" height="150" width="300"/></a>

➤ΕΠΙΣΤΡΟΦΗ
5. ΑΠΕΝΕΡΓΟΠΟΙΗΣΗ ΤΟΥ ΜΗΝΥΜΑΤΟΣ ΤΗΣ GOOGLE ΓΙΑ ΤΑ COOKIES ΣΤΗΝ ΑΡΧΗ ΤΗΣ ΦΟΡΤΩΣΗΣ ΤΗΣ ΣΕΛΙΔΑΣ
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML
BHMA 2: ΚΛΙΚ ΣΤΟΝ ΚΩΔΙΚΑ ΟΠΟΥΔΗΠΟΤΕ ΚΑΙ ΣΤΗ ΣΥΝΕΧΕΙΑ ΑΠΟ ΤΟ ΠΛΗΚΤΡΟΛΟΓΙΟ CTRL+F ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΑΝΑΖΗΤΗΣΗ (SEARCH ΠΑΝΩ ΑΡΙΣΤΕΡΑ). ΚΑΝΩ ΑΝΑΖΗΤΗΣΗ ΓΙΑ </head>.
BHMA 3: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΗΝ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ </head>.
<script type="text/javascript">cookieChoices = {};</script>

➤ΕΠΙΣΤΡΟΦΗ

6. ΚΥΛΙΟΜΕΝΟ ΜΗΝΥΜΑ

ΒΗΜΑ 1: ΘΕΜΑ - ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ANΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<marquee bgcolor="#347656">EΔΩ ΓΡΑΦΕΙΣ ΤΟ ΚΕΙΜΕΝΟ ΠΟΥ ΘΕΛΕΙΣ ΝΑ ΕΜΦΑΝΙΣΤΕΙ</marquee>
➤ΕΠΙΣΤΡΟΦΗ

7. YOUTUBE BINTEO
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<iframe width="300" height="125" src="https://www.youtube.com/embed/W26y7xrQ0bk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
➤ΕΠΙΣΤΡΟΦΗ
7.1 YOUTUBE BINTΕΟ (ΛΕΠΤΟΜΕΡΙΕΣ)
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="https://www.youtube.com/embed/gYa29rTnF28" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
➤ΕΠΙΣΤΡΟΦΗ
8. GALLERY SLIDESHOW
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div class="slideshow-container">
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaGFknj-_m7IKniTxPIrUGD7EU2-zuokdLT_mULFwxgCW_brXnrG7fdB0JLAomJQyeKMa0F9JsF50Hwjm-KXFdgsGprAwYtYVBsSzZxvW7yChaUbj3nFFa79AU0Mf0FBfAiyxaDO8G8PCE/s1600/407390.jpg" style="width:100%" />
  <div class="text">ΚΕΙΜΕΝΟ ΠΟΥ ΠΕΡΙΓΡΑΦΕΙ ΤΗΝ ΕΙΚΟΝΑ 1</div></div>
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6itZgLEeg5bHmdphHHDuoc9Fxoq-l88K8jghhAfzxReYL_vLr14kbJ8BYQiRZ4rWJFglNjWIDeWbfGLl_OQhDW_iVwkd9sEWmrWrFPM-D2-LadM6_4EO54YBQ9bQ90W8Rp-9Lmoii1vF1/s1600/abstract-wallpapers-1080p-hd.jpg" style="width:100%" />
  <div class="text">ΚΕΙΜΕΝΟ ΠΟΥ ΠΕΡΙΓΡΑΦΕΙ ΤΗΝ ΕΙΚΟΝΑ 2</div>
</div>
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXs8rYWfOlVDwHJxKeoDJLiKcuxDIzVH0VYC36TnLh-trSwYc3lwjS5FwGmjNmsGqXEe_AmvY-_l7pCtGR7FUthNxoziP0T_HcCMGiw4YbPpd5jwhIndQWhQd3uZs4vf62Y0fXnj01esJ/s1600/fire-abstract-HD-wallpaper.jpg" style="width:100%" />
  <div class="text">ΚΕΙΜΕΝΟ ΠΟΥ ΠΕΡΙΓΡΑΦΕΙ ΤΗΝ ΕΙΚΟΝΑ 3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br />
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex); 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
function currentSlide(n) {
  showSlides(slideIndex = n); 
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length} ;
  for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].classList.remove("active");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active");
}
</script>
BHMA 3: ΜΙΚΡΟΡΥΘΜΙΣΕΙΣ - ΑΛΛΑΖΩ ΤΙΣ ΔΙΕΥΘΥΝΣΕΙΣ ΤΩΝ ΕΙΚΟΝΩΝ ΜΕ ΚΙΤΡΙΝΟ ΧΡΩΜΑ ΚΑΙ ΑΝΑΛΟΓΑ ΜΕ ΤΟΝ ΑΡΙΘΜΟ ΤΩΝ ΕΙΚΟΝΩΝ ΠΟΥ ΒΑΛΩ ΑΛΛΑΖΩ ΚΑΙ ΤΟ ΚΕΙΜΕΝΟ ΜΕ ΤΗΝ ΑΡΙΘΜΙΣΗ ΜΕ ΡΟΖ ΧΡΩΜΑ
ΜΠΟΡΩ ΝΑ ΠΡΟΣΘΕΣΩ ΟΣΕΣ ΕΙΚΟΝΕΣ ΕΠΙΘΥΜΩ ΣΤΗΝ GALLERY ΜΕ ΑΝΤΙΓΡΑΦΗ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΑΚΡΙΒΩΣ ΠΑΝΩ ΑΠΟ ΤΗΝ ΓΡΑΜΜΗ 
<a class="prev" onclick="plusSlides(-1)">❮</a> ΚΩΔΙΚΑΣ ΠΡΟΣ ΑΝΤΙΓΡΑΦΗ
<div class="mySlides fade">
  <div class="numbertext">4 / 4</div>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6itZgLEeg5bHmdphHHDuoc9Fxoq-l88K8jghhAfzxReYL_vLr14kbJ8BYQiRZ4rWJFglNjWIDeWbfGLl_OQhDW_iVwkd9sEWmrWrFPM-D2-LadM6_4EO54YBQ9bQ90W8Rp-9Lmoii1vF1/s1600/abstract-wallpapers-1080p-hd.jpg" style="width:100%" />
  <div class="text">ΚΕΙΜΕΝΟ ΠΟΥ ΠΕΡΙΓΡΑΦΕΙ ΤΗΝ ΕΙΚΟΝΑ </div>
</div>
ΕΠΙΣΗΣ ΜΠΟΡΕΙΣ ΝΑ ΧΡΗΣΙΜΟΠΟΙΗΣΕΙΣ ΤΗΝ ΠΑΡΑΚΑΤΩ ΔΙΕΥΘΥΝΣΗ:
https://codegena.com/generator/Youtube-Embed-Code-Generator/ 
➤ΕΠΙΣΤΡΟΦΗ
9. ΚΟΥΜΠΙ BACK TO TOP ΚΑΤΩ ΔΕΞΙΑ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<a href='#' style='display:scroll;position:fixed;bottom:30px;right:5px;' title='Back to Top'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIVWoESifL7TqJ_JgzzTBj4bn7cbTjD5sJe3gca2k9Qrsymea-TtiX2DzDBNJATrsnwnsTH1zk5hJ7ArSrfb5eLQjZD_lnRKsJpEKzeiHpMOxywkpb2YkIzUKEA8R7Z7g0jr9QkhnHbDU/s1600/belaki.png" style='border:0;'/></a>
ΜΙΚΡΟΡΥΘΜΙΣΕΙΣ - ΑΛΛΑΖΩ AN ΕΠΙΘΥΜΩ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΝ ΕΙΚΟΝΑΣ ΑΠΟ ΤΟ ΒΕΛΑΚΙ ΜΕ ΚΙΤΡΙΝΟ ΧΡΩΜΑ
➤ΕΠΙΣΤΡΟΦΗ
10. ΡΟΛΟΙ ΚΑΙ ΗΜΕΡΟΜΗΝΙΑ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<!-- clock widget start - ΑΥΤΟ ΕΙΝΑΙ ΕΝΑ ΣΧΟΛΙΟ-->
<!--Dayspedia.com widget--><div class="DPDC" cityid="6238" lang="en" id="dayspedia_widget_25780cf8b8bd4b63" host="https://dayspedia.com" ampm="false" nightsign="true" sun="true" style="background-image: url(&quot;https://cdn.dayspedia.com/img/widgets/bg-0.png&quot;);">

	<style media="screen" id="dayspedia_widget_25780cf8b8bd4b63_style">
				/*COMMON*/
		.DPDC{display:table;position:relative;box-sizing:border-box;font-size:100.01%;font-style:normal;font-family:Arial;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;overflow:hidden;user-select:none}
		.DPDCh,.DPDCd{width:fit-content;line-height:1.4}
		.DPDCh{margin-bottom:1em}
		.DPDCd{margin-top:.24em}
		.DPDCt{line-height:1}
		.DPDCth,.DPDCtm,.DPDCts{display:inline-block;vertical-align:text-top;white-space:nowrap}
		.DPDCth{min-width:1.15em}
		.DPDCtm,.DPDCts{min-width:1.44em}
		.DPDCtm::before,.DPDCts::before{display:inline-block;content:':';vertical-align:middle;margin:-.34em 0 0 -.07em;width:.32em;text-align:center;opacity:.72;filter:alpha(opacity=72)}
		.DPDCt12{display:inline-block;vertical-align:text-top;font-size:40%}
		.DPDCdm::after{content:' '}
		.DPDCda::after{content:', '}
		.DPDCdt{margin-right:.48em}
		.DPDCtn{display:inline-block;position:relative;width:13px;height:13px;border:2px solid;border-radius:50%;overflow:hidden}
		.DPDCtn>i{display:block;content:'';position:absolute;right:33%;top:-5%;width:85%;height:85%;border-radius:50%}
		.DPDCs{margin:.96em 0 0 -3px;font-size:90%;line-height:1;white-space:nowrap}
		.DPDCs sup{padding-left:.24em;font-size:65%}
		.DPDCsl::before,.DPDCsl::after{display:inline-block;opacity:.4}
		.DPDCsl::before{content:'~';margin:0 .12em}
		.DPDCsl::after{content:'~';margin:0 .24em}
		.DPDCs svg{display:inline-block;vertical-align:bottom;width:1.2em;height:1.2em;opacity:.48}
		/*CUSTOM*/
		
		.DPDC{width:auto;padding:24px;background-color:#ffffff;border:1px solid #343434;border-radius:8px} /* widget width, padding, background, border, rounded corners */
		.DPDCh{color:#007DBF;font-weight:normal} /* headline color, font-weight*/
		.DPDCt,.DPDCd{color:#343434;font-weight:bold} /* time & date color, font-weight */
		.DPDCtn{border-color:#343434} /* night-sign color = time & date color */
		.DPDCtn>i{background-color:#343434} /* night-sign color = time & date color */
		.DPDCt{font-size:48px} /* time font-size */
		.DPDCh,.DPDCd{font-size:16px} /* headline & date font-size */
	</style>

	<a class="DPl" href="https://dayspedia.com/time/gr/Larissa/" target="_blank" style="display:block!important;text-decoration:none!important;border:none!important;cursor:pointer!important;background:transparent!important;line-height:0!important;text-shadow:none!important;position:absolute;z-index:1;top:0;right:0;bottom:0;left:0">
		<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" style="position:absolute;right:8px;bottom:0;width:16px;height:16px">
			<path style="fill:/*defined*/#007DBF" d="M0,0v16h1.7c-0.1-0.2-0.1-0.3-0.1-0.5c0-0.9,0.8-1.6,1.6-1.6c0.9,0,1.6,0.8,1.6,1.6c0,0.2,0,0.3-0.1,0.5h1.8 c-0.1-0.2-0.1-0.3-0.1-0.5c0-0.9,0.8-1.6,1.6-1.6s1.6,0.8,1.6,1.6c0,0.2,0,0.3-0.1,0.5h1.8c-0.1-0.2-0.1-0.3-0.1-0.5 c0-0.9,0.8-1.6,1.6-1.6c0.9,0,1.6,0.8,1.6,1.6c0,0.2,0,0.3-0.1,0.5H16V0H0z M4.2,8H2V2h2.2c2.1,0,3.3,1.3,3.3,3S6.3,8,4.2,8z M11.4,6.3h-0.8V8H9V2h2.5c1.4,0,2.4,0.8,2.4,2.1C13.9,5.6,12.9,6.3,11.4,6.3z M4.4,3.5H3.7v3h0.7C5.4,6.5,6,6,6,5 C6,4.1,5.4,3.5,4.4,3.5z M11.3,3.4h-0.8V5h0.8c0.6,0,0.9-0.3,0.9-0.8C12.2,3.7,11.9,3.4,11.3,3.4z">
			</path>
		</svg>
		<span title="DaysPedia.com" style="position:absolute;right:28px;bottom:6px;height:10px;width:60px;overflow:hidden;text-align:right;font:normal 10px/10px Arial,sans-serif!important;color:/*defined*/#007DBF">Powered&nbsp;by DaysPedia.com</span>
	</a>
	<div class="DPDCh" style="display: none;">Current Time in Larissa</div>
	<div class="DPDCt">
		<span class="DPDCth">17</span><span class="DPDCtm">24</span><span class="DPDCts">47</span><span class="DPDCt12" style="display: none;"></span>
	</div>
	<div class="DPDCd">
		<span class="DPDCdt">Mon, April 5</span><span class="DPDCtn" style="display: none;"><i></i></span>
	</div>
	
	<div class="DPDCs" style="display: block;">
		<span class="DPDCsr">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12,4L7.8,8.2l1.4,1.4c0,0,0.9-0.9,1.8-1.8V14h2c0,0,0-3.3,0-6.2l1.8,1.8l1.4-1.4L12,4z"></path><path d="M6.8,15.3L5,13.5l-1.4,1.4l1.8,1.8L6.8,15.3z M4,21H1v2h3V21z M20.5,14.9L19,13.5l-1.8,1.8l1.4,1.4L20.5,14.9z M20,21v2h3 v-2H20z M6.1,23C6,22.7,6,22.3,6,22c0-3.3,2.7-6,6-6s6,2.7,6,6c0,0.3,0,0.7-0.1,1H6.1z"></path></svg>07:08<sup style="display: none;">am</sup>
		</span>
		<span class="DPDCsl">12:50</span>
		<span class="DPDCss">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M12,14L7.8,9.8l1.4-1.4c0,0,0.9,0.9,1.8,1.8V4h2c0,0,0,3.3,0,6.2l1.8-1.8l1.4,1.4L12,14z"></path><path d="M6.8,15.3L5,13.5l-1.4,1.4l1.8,1.8L6.8,15.3z M4,21H1v2h3V21z M20.5,14.9L19,13.5l-1.8,1.8l1.4,1.4L20.5,14.9z M20,21v2h3 v-2H20z M6.1,23C6,22.7,6,22.3,6,22c0-3.3,2.7-6,6-6s6,2.7,6,6c0,0.3,0,0.7-0.1,1H6.1z"></path></svg>19:57<sup style="display: none;">pm</sup>
		</span>
	</div>
	<script>
		var s, t; s = document.createElement("script"); s.type = "text/javascript";
		s.src = "//cdn.dayspedia.com/js/dwidget.min.v7c6abcf8.js";
		t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
		s.onload = function() {
			window.dwidget = new window.DigitClock();
			window.dwidget.init("dayspedia_widget_25780cf8b8bd4b63");
		};
	</script>
	<!--/DPDC-->
	</div>
<!-- clock widget end -->
ΠΕΡΙΣΣΟΤΕΡΑ ΘΕΜΑΤΑ ΜΠΟΡΕΙΣ ΝΑ ΔΕΙΣ ΣΤΗ ΣΕΛΙΔΑ https://dayspedia.com/

➤ΕΠΙΣΤΡΟΦΗ

11. ΡΑΔΙΟΦΩΝΙΚΟΣ ΣΤΑΘΜΟΣ ΜΕ ΛΙΣΤΑ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<!--OnlineRadioBox Player widget-->
<div class="orbP" id="orb_player_672cfc2c223312cc">
<style media="screen">
    /* General */
  .orbP{position:relative;box-sizing:border-box;overflow:hidden;font-weight:normal;border:1px solid transparent;user-select:none;text-align:left}.orbP br,.orbP>br{display:none!important;}.orbP p,.orbP>p{margin:0!important;padding:0!important;line-height:normal!important;font-size:inherit!important}.orbPh{display:block;position:absolute;z-index:100;top:50%;margin-top:-12px!important;right:10px;width:21px!important;text-decoration:none!important;cursor:pointer}.orbPh>img{margin:0!important;border:none;height:24px!important;-webkit-filter:drop-shadow(2px 2px 0 rgba(47,99,160,.2));filter:drop-shadow(2px 2px 0 rgba(47,99,160,.2))}.orbPt{text-decoration:none!important}.orbPti{float:left;margin:0 10px 0 0!important;vertical-align:top!important;height:48px!important;width:89px!important;border:none!important;border-radius:2px!important;opacity:1!important}.orbPtn{display:block;margin-right:52px;line-height:24px!important;font-size:17px!important;font-weight:bold!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.orbPtt{display:block;margin-right:52px;text-decoration:none!important;line-height:24px!important;font-size:12px!important;opacity:.85;transition:opacity .2s;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.orbPtt:hover{opacity:1}.orbPp,.orbPs{float:left!important;margin:0 10px 0 0!important;padding:0!important;height:48px!important;width:48px!important;line-height:48px!important;border-radius:2px!important;border:none!important;text-align:center!important;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none!important;}.orbPp::before,.orbPs::before{display:inline-block;vertical-align:middle;content:'';width:0;height:0;border-style:solid}.orbPp::before{border-width:16px 0 16px 26px}.orbPs::before{border-width:16px}.orbPp:focus,.orbPs:focus{outline-style:solid;outline-width:thin}.orbPp:hover,.orbPs:hover{-webkit-transform:scale(1.087);transform:scale(1.087)}.orbPhc{position:relative!important;box-sizing:border-box!important;padding:10px!important;overflow:hidden}
    /* Playlist */
  .orbPpl{position:relative;overflow:auto;overflow-x:hidden;overflow-y:auto;margin:0!important;padding:0!important;list-style:none!important}.orbPpli{box-sizing:border-box;margin:0!important;padding:0 10px!important;list-style:none!important;background-image:none;float:none!important;height: auto!important}.orbPpli>a,.orbPpli>span{display:block!important;padding:0!important;margin:0!important;height:auto!important;font-weight:normal!important;text-decoration:none!important;line-height:32px!important;font-size:14px!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:color .125s;border:none !important}.orbPpli>a:hover,.orbPpli>span:hover{background:transparent!important}.orbPpli>a>time,.orbPpli>span>time{display:inline-block;font-size:12px!important;width:3em!important}.orbPpli+li{border-style:solid!important;border-width:1px 0 0!important}
    /* Volume */
    .orbV{position:absolute;z-index:1!important;width:24px!important;right:48px!important;top:0!important;bottom:0!important;line-height:1!important;overflow:hidden!important;transition:width .3s}.orbV:hover{width:160px!important}.orbVC{position:absolute!important;height:18px!important;left:24px!important;top:50%!important;margin:-9px 0 0 11px!important}.orbVC::after{display:block;content:'';margin-top:4px;width:0;height:0;border-style:solid;border-width:4px 100px 4px 0;opacity:.33}.orbVCs{position:absolute!important;z-index:2!important;top:0!important;width:18px!important;height:18px!important;border-radius:50%!important;cursor:ew-resize!important;box-shadow:0 6px 8px -2px rgba(0,9,18,0.36)}.orbVb{position:absolute!important;width:24px!important;height:24px!important;top:50%!important;left:0!important;margin-top:-12px;white-space:nowrap!important;cursor:pointer;transition:opacity .3s}.orbVb::before{display:inline-block;content:'';vertical-align:middle;width:7px;height:12px}.orbVb::after{display:inline-block;content:'';vertical-align:middle;border-width:12px 12px 12px 0;border-style:solid;height:0;width:0;margin-left:-6px}.orbV:hover .orbVb{opacity:.33!important;cursor:default}.orbVb>._m{display: block!important;width:7px!important;height:18px!important;position:absolute!important;top:50%;margin-top:-9px!important;right:0; overflow: hidden!important;}.orbVb>._m::before{display:block;content:'';position:absolute;right:0;top:50%;width:28px;height:24px;margin-top:-12px;border:1px solid;border-radius:50%}.orbVb>._m::after{display:block;content:'';position:absolute;right:4px;top:50%;width:14px;height:14px;margin-top:-7px;border:1px solid;border-radius:50%}
    /* Flags*/
  .orbF{padding:0 0 10px 10px!important;border-top:1px solid;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-flow:row nowrap!important;flex-flow:row nowrap!important}
  .orbFl{margin:0!important;padding:0!important;list-style:none!important}
  .orbFli,.orbFh{display:inline-block!important;vertical-align:top!important;line-height:18px!important;white-space:nowrap!important;margin:10px 7px 0 0!important;padding:0 6px 0 0!important;text-indent:0!important;list-style:none!important;font-size:11px!important;text-align:right}
  .orbFlif{float:left!important;width:27px!important;height:18px!important;margin-right:5px!important}
  .orbFhi{position:relative!important;display:inline-block!important;vertical-align:baseline!important;width:8px!important;height:9px!important;margin:0 8px 0 5px!important;border-style:solid!important;border-width:2px 1px 0 1px!important;border-radius:5px 5px 0 0!important;opacity:.5}
  .orbFhi::before,.orbFhi::after{display:block;content:'';position:absolute;bottom:-2px;width:0;height:3px;border-style:solid;border-width:2px;border-radius:3px}
  .orbFhi::before{left:-4px}.orbFhi::after{right:-4px}
    /* Multiselect */
  .orbPm{margin:0!important;padding:0!important;list-style:none!important}
  .orbPmi{position:relative;margin:0!important;padding:10px!important;list-style:none!important;border:dotted rgba(204,204,204,0.5);border-width:1px 0 0;font-size:12px!important;overflow:hidden;white-space:nowrap;line-height:1!important;cursor:pointer}
  .orbPmi::before{display:block;content:'';position:absolute;z-index:1;top:50%;right:10px;margin-top:-8px;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;opacity:.5;filter:alpha(opacity=50);transition:opacity .2s;}
  .orbPmi:hover::before{opacity:1;filter:alpha(opacity=100)}
  .orbPmi::after{display:block;content:'';position:absolute;top:0;bottom:0;right:0;width:36px}
  .orbPmii{display:inline-block;vertical-align:middle;margin-right:10px;width:30px;height:16px;border:none!important;border-radius:2px!important}
  .orbPmin{display:inline-block;vertical-align:middle;}

    /* Compact General */
  .cmpct .orbPti{height:24px!important;width:44px!important}
  .cmpct .orbPtn{line-height:12px!important;font-size:12px!important}
  .cmpct .orbPtt{line-height:12px!important;font-size:10px!important}
  .cmpct .orbPp,.cmpct .orbPs{height:24px!important;width:24px!important;line-height:24px!important}
  .cmpct .orbPp::before{border-width:8px 0 8px 13px !important}
  .cmpct .orbPs::before{border-width:8px !important}
    /* Compact w/Playlist */
  .cmpct .orbPpli>a,.cmpct .orbPpli>span{line-height:24px!important;font-size:12px!important}
  .cmpct .orbPpli>a>time,.cmpct .orbPpli>span>time{font-size:11px!important}

</style>
<style media="screen" id="orb_player_672cfc2c223312cc_settings">.orbP{background-color:#2f63a0 !important;}/*common player background*/.orbP{border-style: solid; border-color:#2f63a0 !important;border-radius:5px;}/*common player container border, radius, width*/.orbPp,.orbPs{background:#7094bf !important}/*buttons play/stop bg*/.orbPp::before{border-color:transparent transparent transparent #ffffff !important} /* play button color */.orbPp:focus,.orbPs:focus{outline-color:#ffffff}.orbPs::before{border-color:#ffffff !important} /* stop button color */.orbPtn,.orbPtt,.orbPtt:hover{color:#ffffff !important;}/*station name & track link color*/.orbPpl{height:185px;background:#ffffff !important;}/*playlist height, playlist bg */.orbPpli>a,.orbPpli>a:visited,.orbPpli>span,.orbPpli>a:hover>time,.orbPpli.a>a>time,.orbPpli.a>span>time{color:#333333 !important;} /* playlist items color */.orbPpli>a:hover,.orbPpli.a>a,.orbPpli.a>span{color:#f07700 !important;} /* active-item color */.orbPpli>a>time,.orbPpli>span>time{color:#aeaeae !important;} /* item time color */.orbPpli.a{background:#f3f3f3 !important;} /* active-item bg */.orbPpli+li{border-color:#eeeeee !important;} /* item border color */.orbV{background-color:#2f63a0 !important;box-shadow:0 0 32px 32px #2f63a0 !important}/*volume control color */.orbVC::after,.orbVb::after{border-color:transparent #ffffff transparent transparent !important}.orbVb::before,.orbVCs{background:#ffffff !important} /* volume bg color */.orbVb>._m::before,.orbVb>._m::after{border-color:#ffffff !important}.orbF{background:#ffffff !important;color:#444444 !important;border-color:#2f63a0 !important}/* geo background & text color  */.orbFli,.orbFlif{box-shadow:0 0 1px 0 #444 inset !important}.orbFhi,.orbFhi::before,.orbFhi::after{border-color:#444 !important}</style>
<div class="orbPhc">
  <a class="orbPh" href="https://onlineradiobox.com/gr/" title="Listen on Online Radio Box!" target="_blank"><img src="//ecdn.onlineradiobox.com/img/wl.svg" alt="Listen on Online Radio Box!"></a>
<audio id="orb_player_672cfc2c223312cc_p" crossorigin="true" style="width:1px;height:1px;overflow:hidden;position:absolute;"></audio>

  <button class="orbPp" title="Live" country="gr" alias="enlefko877" stream="1"></button>
  <a class="orbPt" href="https://onlineradiobox.com/gr/enlefko877/" target="_blank">
    <img class="orbPti" src="//cdn.onlineradiobox.com/img/l/7/15367.v8.png" alt="En Lefko 87.7">
    <span class="orbPtn">En Lefko 87.7</span>
  </a>
  <span class="orbPtt" loading="loading" playing="παίζει" error="Σφάλμα αναπαραγωγής" not_supported="this browser can't play it" external="Ακούστε τώρα (ανοίγει το πρόγραμμα αναπαραγωγής μουσικής)"></span>
  <div class="orbV"><div class="orbVb"><i class="_m"></i></div><div class="orbVC"><div class="orbVCs" style="left: 80%;"></div></div></div>
</div>
<ul class="orbPpl"></ul>
<div class="orbF" style="display:none"></div>
<script>
  var orbp_w = orbp_w || { lang: "el-gr" };
  orbp_w.cmd = orbp_w.cmd || [];
  orbp_w.apiUrl = "https://onlineradiobox.com";
  orbp_w.cmd.push(function() {
    orbp_w.init("orb_player_672cfc2c223312cc");
  });
  var s, t; s = document.createElement('script'); s.type = 'text/javascript';
s.src = "//ecdn.onlineradiobox.com/js/pwidget2.min.235ca64e.js";
  t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
</script>
</div>
<!--OnlineRadioBox Player widget-->
ΑΛΛΑΞΤΕ ΣΤΑΘΜΟ ΑΛΛΑΖΟΝΤΑΣ ΤΑ ΚΙΤΡΙΝΑ ΣΤΟΝ ΚΩΔΙΚΑ. 
ΠΕΡΙΣΣΟΤΕΡΟΙ ΣΤΑΘΜΟΙ ΣΤΗ ΣΕΛΙΔΑ https://onlineradiobox.com/

➤ΕΠΙΣΤΡΟΦΗ

12. ΑΦΑΙΡΕΣΗ ΤΟΥ SIDE BAR ΑΠΟ ΤΗΝ ΣΕΛΙΔΑ ή ΤΗΝ ΑΝΑΡΤΗΣΗ
ΒΗΜΑ 1: Προσθέτω στο τέλος της ανάρτησης ή της σελίδας τον παρακάτω κώδικα (Προβολή HTML)
<style>
#rsidebar-wrapper { display: none; }
#main-wrapper { width: 1000px!important; }
</style>
➤ΕΠΙΣΤΡΟΦΗ

13. ΔΗΜΙΟΥΡΓΙΑ SLIDESHOW ΚΑΡΟΥΖΕΛ ΜΕ ΕΙΚΟΝΕΣ
ΒΗΜΑ 1: Προσθέτω τον παρακάτω κώδικα (Προβολή HTML) 
<section class="row">
<div class="nine columns">
<div class="coverflow top10 bot10">
<a class="prev-arrow"></a>
<a href=""><img src="http://i.imgur.com/I9SFA0sl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/gCr4ycDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/XMS6PHsl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/w9qsfyQl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/xHwALvDl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/3sNGgkul.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/Pq9Dexal.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/R29XOCZl.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/9GqSG9al.jpg" class="coverflow__image" /></a>
<a href=""><img src="http://i.imgur.com/KwuI9Z2l.jpg" class="coverflow__image" /></a>
<a class="next-arrow"></a>
</div></div>
</section>

<script src="https://dl.dropboxusercontent.com/s/z79ujjdn83bf9i0/3D-SLIDER.JS"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/wruobu28zjqagce/3D-SLIDER.CSS">

<style>
.coverflow {position:relative;height:440px;padding:10px;overflow: hidden; -webkit-perspective: 1000px;perspective: 1000px;}
.coverflow__image {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select:none;width:500px;height:350px;-webkit-transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);transition: all 350ms cubic-bezier(0.215, 0.61, 0.355, 1);}
.coverflow__image[data-coverflow-index] {position: absolute;left: 41%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
.coverflow__image[data-coverflow-index]:before {content: " ";z-index: 1;position: absolute;top:440px;width:100%;height: 10%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);}
</style>
➤ΕΠΙΣΤΡΟΦΗ

14. ΑΛΛΑΓΗ ΧΡΩΜΑΤΩΝ ΣΤΟ SCROLL ΤΟΥ ΦΥΛΛΟΜΕΤΡΗΤΗ ΔΕΞΙΑ
ΒΗΜΑ 1: Προσθέτω στο τέλος της ανάρτησης ή της σελίδας τον παρακάτω κώδικα (Προβολή HTML)
<style>
body::-webkit-scrollbar {width:15px;height:15px;}
body::-webkit-scrollbar-track {background:#CCD5DD;}
body::-webkit-scrollbar-thumb {background:#A11111;}
body::-webkit-scrollbar-thumb:hover {background:#115599;}
body::-webkit-scrollbar-thumb:active {background:#105105;}
</style>
Αν θέλω να ισχύει η αλλαγή για όλη τη σελίδα τότε 
ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - ΕΠΕΞΕΡΓΑΣΙΑ HTML 
ΚΛΙΚ ΣΤΟΝ ΚΩΔΙΚΑ ΟΠΟΥΔΗΠΟΤΕ ΚΑΙ ΣΤΗ ΣΥΝΕΧΕΙΑ ΑΠΟ ΤΟ ΠΛΗΚΤΡΟΛΟΓΙΟ CTRL+F ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΑΝΑΖΗΤΗΣΗ (SEARCH ΠΑΝΩ ΑΡΙΣΤΕΡΑ). ΚΑΝΩ ΑΝΑΖΗΤΗΣΗ ΓΙΑ ]]></b:skin>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΣΤΗΝ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ  ]]></b:skin>
<style>
body::-webkit-scrollbar {width:15px;height:15px;}
body::-webkit-scrollbar-track {background:#CCD5DD;}
body::-webkit-scrollbar-thumb {background:#A11111;}
body::-webkit-scrollbar-thumb:hover {background:#115599;}
body::-webkit-scrollbar-thumb:active {background:#105105;}
</style>
ΑΛΛΑΞΕ ΧΡΩΜΑΤΑ (ΚΕΙΜΕΝΟ ΜΕ ΚΙΤΡΙΝΟ) ΜΕ ΤΗ ΒΟΗΘΕΙΑ ΤΟΥ GOOGLE COLORPICKER

➤ΕΠΙΣΤΡΟΦΗ

15. ΔΗΜΙΟΥΡΓΙΑ TEXT BOX ΜΕ ΕΦΕ ΓΡΑΦΟΜΗΧΑΝΗΣ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<style>
textarea {background:#4c86b0;color:#FFFFFF;font:13px arial;border:0px solid #00CC00; width:300px}
</style>
<form name="news">
<textarea name="mynews" cols=30 rows=10 wrap=virtual></textarea>
</form>
<script>
var newsText = new Array();
newsText[0] = "ΣΥΜΒΟΥΛΕΣ ΓΙΑ ΕΝΑ ΕΜΦΑΝΙΣΙΜΟ, ΛΕΙΤΟΥΡΓΙΚΟ BLOG ΜΕ ΚΑΛΟ SEO.";
newsText[1] = "ΣΥΜΒΟΥΛΗ 1. Επιλέξτε ένα σύντομο url / domain name.";
newsText[2] = "ΣΥΜΒΟΥΛΗ 2. Βάλτε λέξεις κλειδιά μέσα στο url / domain name.";
newsText[3] = "ΣΥΜΒΟΥΛΗ 3. Βάλτε λέξεις κλειδιά μέσα στον Τίτλο.";
newsText[4] = "ΣΥΜΒΟΥΛΗ 4. Βάλτε λέξεις κλειδιά μέσα στον υπότιτλο.";
newsText[5] = "ΣΥΜΒΟΥΛΗ 5. Βάλτε όλα τα keywords στην πρώτη παράγραφο."
var ttloop = 1;   
var tspeed = 100;  
var tdelay = 1000;
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
  mxText = newsText.length - 1;
  dwAText = newsText[cnews];
  setTimeout("addChar()",1000)}
function addNews() {
  cnews += 1;
  if (cnews <= mxText) {
    dwAText = newsText[cnews];
    if (dwAText.length != 0) {
      document.news.mynews.value = "";
      eline = 0;
      setTimeout("addChar()",tspeed)}}}
function addChar() {
  if (eline!=1) {
    if (cchar != dwAText.length) {
      nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
      document.news.mynews.value = nmttxt;
      cchar += 1;
      if (cchar != dwAText.length) document.news.mynews.value += " >";
    } else {
      cchar = 0;
      eline = 1;}
    if (mxText==cnews && eline!=0 && ttloop!=0) {
      cnews = 0; setTimeout("addNews()",tdelay);
    } else setTimeout("addChar()",tspeed);
  } else {setTimeout("addNews()",tdelay)}}
doNews()
</script>
➤ΕΠΙΣΤΡΟΦΗ

16. ΑΛΛΑΓΗ ΚΕΡΣΟΡΑ ΠΟΝΤΙΚΙΟΥ
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML
BHMA 2: ΚΛΙΚ ΣΤΟΝ ΚΩΔΙΚΑ ΟΠΟΥΔΗΠΟΤΕ ΚΑΙ ΣΤΗ ΣΥΝΕΧΕΙΑ ΑΠΟ ΤΟ ΠΛΗΚΤΡΟΛΟΓΙΟ CTRL+F ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΑΝΑΖΗΤΗΣΗ (SEARCH ΠΑΝΩ ΑΡΙΣΤΕΡΑ). ΚΑΝΩ ΑΝΑΖΗΤΗΣΗ ΓΙΑ ]]></b:skin>
BHMA 3: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΗΝ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ ]]></b:skin>
body{cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRwwpf-Ht_HrhevT800O-xumjNIhNsNsYQdjSHB91ZaBY3Kwi2cR_ygo4iNRBN4932qsnynYKiUwKVBcHi598Tulcm-34rgbgJ1cHmp-6z1LgYy_ztzw-33Xy2aY0iXFKXPY8pmlkji43/s35-no/green-coursor.gif'), auto;}
Αλλαγή του κέρσορα γίνεται με αλλαγή της διεύθυνσης της εικόνας του κέρσορα. 
ΣΕΛΙΔΑ ΜΕ ΚΕΡΣΟΡΑ: http://www.rw-designer.com/
 
➤ΕΠΙΣΤΡΟΦΗ

17. ΜΕΤΡΗΤΗΣ ΕΠΙΣΚΕΨΕΩΝ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<!-- hitwebcounter Code START -->
ΜΕΤΡΗΤΗΣ: <img src="https://hitwebcounter.com/counter/counter.php?page=7792326&style=0032&nbdigits=6&type=page&initCount=2544" border="0" /></a>}
Περισσότερα είδη μετρητών-counters στην παρακάτω σελίδα: https://www.hitwebcounter.com/➤ΕΠΙΣΤΡΟΦΗ

18. ΤΗΛΕΟΠΤΙΚΟΣ ΟΔΗΓΟΣ

ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT

BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ

<div style="width:300px;text-align:left;line-height:11px;font-size:14px"> <iframe src="//programmatileorasis.gr/ticker_vscroll_show.php?speed=1500&width=300&height=320&font=12" width="300" height="320" scrolling=no marginwidth=0 marginheight=0 frameborder=0 border=0 style="border:0;margin:0;padding:0;"></iframe><br /> <div style="font-size:10px;background-color:#9b58b5;"><a style="font-size:10px;color:#75b85b;text-decoration:none;" href="https://programmatileorasis.gr" target="_blank">Πρόγραμμα Τηλεόρασης</a></div> </div>

➤ΕΠΙΣΤΡΟΦΗ

19. ΕΠΙΛΟΓΕΣ ΣΙΝΕΜΑ

ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<iframe allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="300" height="295" title="Monopoli Widget" src="https://www.monopoli.gr/widget/"> </iframe>
➤ΕΠΙΣΤΡΟΦΗ

20. FLOATING SOCIAL BUTTONS (ΠΑΝΩ ΔΕΞΙΑ)
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<style>
#floatbuttons .btn1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2UHIoTNuBSF3s4-h5vmynRskIlq1sNp1oMnp9ipKxVK9fdameDAE_CjZ6EH9pW7LOWXkSxHhoF6vT1lje3B3PuHJn4Nl9JdtWcmRBpBAYMiB7qNoTj7o3NL_KVLvwmIsvSAOfcv3sW53d/s40-no/facebook-40.jpg) no-repeat; height:40px; width:40px; ;  top:0px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn1:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvhIcNGDL6tQWmC7zRAHXer64t1PGC12lmlOSX2A8rCRz7vFOSwd597jp26uf4IusxFJLMEbCnRdvOr0Ro3uSZrXoCmyjha98WjQG4rxjaPBhVcGT3lsL8xrkqf0MD_Un8-76F6DstPY4_/w120-h40-no/fb-like-120X40.jpg) no-repeat; height:40px; width:120px; ;  top:0px;right:0px; position:fixed;z-index:999;}
#floatbuttons .btn2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgsl9SCKmE6JUnoxJBeIXlqwnKcDNZEp7jf1TL9iM4qhkNxV3LoeS6D0utofXFr5sdqiGa23FVDnposN2v6d3eCCUAWfV1EbifclK5pT1A-MzPJjrrfG0FiYgJoGQ0q0AtrPhrxcobhMjq/s40-no/twitter-40.jpg) no-repeat; height:40px; width:40px; ;  top:40px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn2:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqtmEEP49LJl81EGrNoxH9Ez-UouwxCa5qtk8Zus2R_lIqAHIu5QS0ybPCDlhi9aKB8A512ztQIQJtmOXY8rCkzVHdl2nnZwdsmnLsGJLQt1gIWybLSbxeiScncet0AxNv0uagetAv0eLk/w120-h40-no/f-twitter-120X40.jpg) no-repeat; height:40px; width:120px; ;  top:40px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDeueslmnBQe49vbifgY137GkG3Q78o5-S5XznwWB9MK-yv4PTWy48u5qQQD5vNrOlUzXlNzoudeja_OXT9wtJwVhxpA7tKTqBlOJQnB6ux6G7cKv1tuVqay7beSXLXo334J1X403yvF0B/s40-no/pinterest-40.jpg) no-repeat; height:40px; width:40px; top:120px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn3:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNU3b7CSn0pnmRETFk-4KhoTnIge9VPvEZc0pnDpC3wy-FS_X9pcUN2UJ37lLI6E5DqvzVX29otqlqAk7pemWkhRsHxsJtqq4OUAwNH4Kjp5_m4za9C07pcqHCN59B5iM4bCrZofpQ_R7/w120-h40-no/Pinterest-120X40.jpg) no-repeat; height:40px; width:120px; top:120px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJeMMj4rN8AhdH6uoT-XOQ_GGu-yBta9C49SVnO4U7cjxi8Jeerh6M0s-JEZt68z0IFVEjC7F8jtlxNkwnYtXnhY5bgwrmw6iIrHCuE1Ctk5uM7U0mn0wG1z6zfjLTvIQHGWqq-hTr6KVv/s40-no/youtube-40.jpg) no-repeat; height:40px; width:40px; top:160px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn4:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB54XaxP-ZiwofYhK6gMy7yU9yAcNDXdp5g2GHWrlzsmZXIj1pbYMRdn3suqIUb843GK2X-ZGCktxp4Fbzlhyphenhyphenjr6IGuw-u8H174ib8_-dqp4k099y1eSiMvYHfDvHOORs8MTb5P0LwQIRI/w120-h40-no/Youtube-120X40.jpg) no-repeat; height:40px; width:120px; top:160px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn5 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyUmuxS39qmmMsvQIKSazux6YGVIuw126XZsxw0kSc33Lzf9d5sihpfmZj9ZiYV2w3HxqFVR_PBGZ-5q30OqyWuoJgLq05UrgYZy0DCJ6rjgNUMaPuAcVBj2wCki-nvJMKwp7aFNtEPwM/s40-no/rss-40.jpg) no-repeat; height:40px; width:40px; top:200px;right:0px;position:fixed;z-index:999;}
#floatbuttons .btn5:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClk-p-X9REy-6O06TwmbSEIwGNBSPReGup3P_Lnm95HWdhWVf2Bioq5JOZZinkelvyr1-OZAGeen-PEHw3JDjnFbHQhAG50FBMgyF8A3xEvpGCe5TRBAT6FMgrFGgvJXkAYGUqUosWNLm/w120-h40-no/rss-120X40.jpg) no-repeat; height:40px; width:120px; ; top:200px;right:0px;position:fixed;z-index:999;}
</style>

<ul id="floatbuttons">
<li><a class="btn1" href="https://www.facebook.com/"></a></li>
<li><a class="btn2" href="https://twitter.com"></a></li>
<li><a class="btn3" href="https://www.pinterest.com/"></a></li>
<li><a class="btn4" href="https://www.youtube.com/user/WIDGETSFORBLOGS"></a></li>
<li><a class="btn5" href="http://feeds.feedburner.com/"></a></li>
</ul>
➤ΕΠΙΣΤΡΟΦΗ

21. ΜΕΤΡΗΤΗΣ POST ΚΑΙ ΣΧΟΛΙΩΝ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<style>
.totalposts{background:#173374;color:#FFFF00;padding:5px;display:inline-block;text-align:center;}
.totalposts .totalnumber{font:700 18px Arial;display:block;}
.totalposts .totallabel{display:block;font:700 12px Arial;color:#FFFFFF;}
</style>
<script type='text/javascript'>
//<![CDATA[
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;
document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Posts</span></div>');}
//]]></script>
<script src="https://tesetsetsteset.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getposts"></script>

<style>
.totalcomments{background:#661111;color:#FFFF00;padding:5px;display:inline-block;text-align:center;}
.totalcomments .totalnumber{font:700 18px Arial;display:block;}
.totalcomments .totallabel{display:block;font:700 12px Arial;color:#FFFFFF;}
</style>
<script type='text/javascript'>
//<![CDATA[
function getcomments(json){var totalcomments=json.feed.openSearch$totalResults.$t;
document.write('<div class="totalcomments"><span class="totalnumber">'+totalcomments+'</span><span class="totallabel"> Comments</span></div>');}
//]]></script>
<script src="https://tesetsetsteset.blogspot.com/feeds/comments/default?alt=json-in-script&callback=getcomments"></script>
ΑΛΛΑΖΩ ΤΗΝ ΔΙΕΥΘΥΝΣΗ (ΚΙΤΡΙΝΑ ΓΡΑΜΜΑΤΑ) ΜΕ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΟΥ.
➤ΕΠΙΣΤΡΟΦΗ
22. LIVE SCORE ΑΘΛΗΤΙΚΑ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="width:300px;text-align:right;line-height:11px;">
        <iframe src="https://ticker.agones.gr/ticker2_vscroll_show.php?speed=1500&color=000000&color2=00aa00&bgcolor=363942&bgcolor2=ffffff&bgcolor1=efefef&font=11&width=300&height=350"
         width="300" height="350" scrolling=no marginwidth=0 marginheight=0 frameborder=0 border=0 style="border:0;margin:0;padding:0;"></iframe><br /><div style="font-family: Verdana, Tahoma, Arial, sans-serif;font-size:10px;background-color:#363942;color:#C9C6BD;">powered by <a style="font-size:10px;color:#C9C6BD;text-decoration:none;" href="https://agones.gr" target="_blank" rel="nofollow">Agones.gr</a> - <a href="https://agones.gr" style="font-size:10px;color:#C9C6BD;text-decoration:none;" target="_blank" rel="nofollow">livescore</a></div></div>
Περισσότερες ρυθμίσεις στην σελίδα: https://agones.gr/ticker

➤ΕΠΙΣΤΡΟΦΗ

23. LIVE SCORE ΣΤΟΙΧΗΜΑ
ΒΗΜΑ 1: ΣΕΛΙΔΑ - ΝΕΑ ΣΕΛΙΔΑ - ΠΡΟΒΟΛΗ HTML
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<iframe src="https://ticker.agones.gr/ticker1_minisite_show.php?navigation=yes"
         width="600" height="600" scrolling=auto marginwidth=0 marginheight=0 frameborder=0 border=0
         style="border:0;margin:0;padding:0;"></iframe>
➤ΕΠΙΣΤΡΟΦΗ

24. ΑΘΛΗΤΙΚΗ ΕΝΗΜΕΡΩΣΗ ONSPORTS
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div id='news-root' style='width:300px;height:450px;' class='t7'></div><script>(function(){var es = document.createElement('script'); es.async = true;es.src = 'https://www.onsports.gr/services/js/news.js?vs=7';document.getElementById('news-root').appendChild(es);}());</script>
➤ΕΠΙΣΤΡΟΦΗ

25. ΠΡΩΤΟΣΕΛΙΔΑ ΑΘΛΗΤΙΚΩΝ ΚΑΙ ΑΛΛΩΝ ΕΦΗΜΕΡΙΔΩΝ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="width:300px;text-align:center;"><iframe src="https://www.frontpages.gr/ticker.php?category=2&c=F2F2F2&w=300&h=390&t=1&e=0" width="300" height="390" scrolling=no marginwidth=0 marginheight=0 frameborder=0 border=0 style="border:0;margin:0;padding:0;"></iframe><br /><div style="font-size:10px;color:#000;">Τα <a href="https://www.frontpages.gr" target="_blank" style="font-size:10px;color:#000;text-decoration:none;">Πρωτοσέλιδα </a>των <a href="https://www.frontpages.gr" target="_blank" style="font-size:10px;color:#000;text-decoration:none;">εφημερίδων </a></d></div>
Περισσότερες ρυθμίσεις στην σελίδα: https://www.frontpages.gr/get_widget.php

➤ΕΠΙΣΤΡΟΦΗ

26. ΣΥΝΤΑΓΕΣ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="display:inline-block;line-height:9px;width:300px"> <iframe src="//cooktime.gr/widget_show.php?width=300" width="300" height="300" frameborder="0"></iframe> <div style="text-align:center;background-color:#fdf7ed;padding-bottom:5px;font:12px 'Open Sans', sans-serif;color:#8d6e69"><a href="//cooktime.gr" style="color:#8d6e69;text-decoration:none" target="_blank">Συνταγές</a><a href="//cooktime.gr" style="color:#8d6e69;text-decoration:none" target="_blank">CookTime.gr</a></div> </div>
➤ΕΠΙΣΤΡΟΦΗ

27. ΚΑΙΡΟΣ ΑΠΟ ΔΙΑΦΟΡΕΤΙΚΕΣ ΠΕΡΙΟΧΕΣ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="position:relative;width:300px"> <iframe src="//kairos123.gr/widget7_show.php?areas=12,1,10,32,23&width=300&color=green" width="300" height="440" border="0" frameborder="0" style="border:0;padding:0;margin:0"></iframe> <div style="position:absolute;bottom:15px;width:100%;text-align:center;font-size:12px;font-weight:bold;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5c5c5c;"> <a href="//kairos123.gr" target="_blank" style="font:inherit;color:inherit;text-decoration:inherit">Καιρός</a> από το <a href="//kairos123.gr" target="_blank" style="font:inherit;color:inherit;text-decoration:inherit">kairos123.gr</a> </div></div>
Περισσότερες ρυθμίσεις στην σελίδα: https://sitewidgets.gr

➤ΕΠΙΣΤΡΟΦΗ

28. ΔΗΜΙΟΥΡΓΙΑ ΠΙΝΑΚΑ
BHMA 1: ΑΝΑΡΤΗΣΗ - ΝΕΑ ΑΝΑΡΤΗΣΗ - ΠΡΟΒΟΛΗ HTML
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<style type="text/css">
.mytable {width:960px;background-color:#173374;color:#FFFFFF;font-size:13px;border-collapse:collapse;}
.mytable th {background-color:#207907;color:white;}
.mytable td, .mytable th {padding:5px;border:0; }
.mytable td {font-family:Arial; border:1px solid #FBBB22;height:20px;}
</style>
<table class="mytable">
<tr>
<th>LABEL A</th>
<th>LABEL B</th>
<th>LABEL C</th>
<th>LABEL D</th>
<th>LABEL E</th>
<th>LABEL F</th>
<th>LABEL G</th>
<th>LABEL I</th>
<th>LABEL J</th>
<th>LABEL K</th>
</tr>
<tr>
<td>CELL A1</td>
<td>CELL A2</td>
<td>CELL A3</td>
<td>CELL A4</td>
<td>CELL A5</td>
<td>CELL A6</td>
<td>CELL A7</td>
<td>CELL A8</td>
<td>CELL A9</td>
<td>CELL A10</td>
</tr>
<tr>
<td>CELL B1</td>
<td>CELL B2</td>
<td>CELL B3</td>
<td>CELL B4</td>
<td>CELL B5</td>
<td>CELL B6</td>
<td>CELL B7</td>
<td>CELL B8</td>
<td>CELL B9</td>
<td>CELL B10</td>
</tr>
<tr>
<td>CELL C1</td>
<td>CELL C2</td>
<td>CELL C3</td>
<td>CELL C4</td>
<td>CELL C5</td>
<td>CELL C6</td>
<td>CELL C7</td>
<td>CELL C8</td>
<td>CELL C9</td>
<td>CELL C10</td>
</tr>
<tr>
<td>CELL D1</td>
<td>CELL D2</td>
<td>CELL D3</td>
<td>CELL D4</td>
<td>CELL D5</td>
<td>CELL D6</td>
<td>CELL D7</td>
<td>CELL D8</td>
<td>CELL D9</td>
<td>CELL D10</td>
</tr>
<tr>
<td>CELL E1</td>
<td>CELL E2</td>
<td>CELL E3</td>
<td>CELL E4</td>
<td>CELL E5</td>
<td>CELL E6</td>
<td>CELL E7</td>
<td>CELL E8</td>
<td>CELL E9</td>
<td>CELL E10</td>
</tr>
</table>
Περισσότερες ρυθμίσεις στην σελίδα: https://the-best-widgets.blogspot.com/

➤ΕΠΙΣΤΡΟΦΗ

29. ΔΙΑΙΡΩ ΤΗΝ ΑΝΑΡΤΗΣΗ ΣΕ 2 - 3 ΣΤΗΛΕΣ
BHMA 1: ΑΝΑΡΤΗΣΗ - ΝΕΑ ΑΝΑΡΤΗΣΗ - ΠΡΟΒΟΛΗ HTML
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
ΓΙΑ 2 ΣΤΗΛΕΣ
<div style="width: 960px;">
<div style="float: left; padding: 4px;
background-color : #173374; width: 472px;">A►</div>
<div style="float: left; padding: 4px;
background-color : #255720; width: 471px;">B►</div>
<br style="clear: left;"/>
</div>
ΓΙΑ 3 ΣΤΗΛΕΣ
<div style="width: 960px;">
 <div style="float: left; padding: 4px;
background-color : #173374; width: 312px;">A►</div>
 <div style="float: left; padding: 4px;
background-color : #255720; width: 312px;">B►</div>
 <div style="float: left; padding: 4px;
background-color : #661111; width: 311px;">C►</div>
 <br style="clear: left;"/></div>
➤ΕΠΙΣΤΡΟΦΗ

30. ΗΜΕΡΟΛΟΓΙΟ
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<script>
setCal()
function getTime() {
var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""
if (hour >= 12) {
hour -= 12
ampm = "pm"
} else
ampm = "am"
hour = (hour == 0) ? 12 : hour
if (minute < 10)
minute = "0" + minute
return hour + ":" + minute + " " + ampm}
function leapYear(year) {
if (year % 4 == 0)
return true
return false}
function getDays(month, year) {
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December
return ar[month]}
function getMonthName(month) {
var ar = new Array(12)
ar[0] = "January"
ar[1] = "February"
ar[2] = "March"
ar[3] = "April"
ar[4] = "May"
ar[5] = "June"
ar[6] = "July"
ar[7] = "August"
ar[8] = "September"
ar[9] = "October"
ar[10] = "November"
ar[11] = "December"
return ar[month]}
function setCal() {
var now = new Date()
var year = now.getYear()
if (year < 1000)
year+=1900
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
var days = getDays(month, year)
drawCal(firstDay + 1, days, date, monthName, year)}
function drawCal(firstDay, lastDate, date, monthName, year) {
var headerHeight = 40 // υψος κελιού επικεφαλίδας
var border = 2 // 3D ύψος του περιγράματος του πίνακα
var cellspacing = 4 // πλάτος του περιγράματος του πίνακα
var headerColor = "#F11111" // χρώμα κειμένου επικεφαλίδας
var headerSize = "+2" // μέγεθος κειμένου επικεφαλίδας
var colWidth = 30 // πλάτος στηλών πίνακα
var cellHeight = 30 // ύψος γραμμών πίνακα
var dayCellHeight = 20 // ύψος κελιών των ημερών της εβδομάδας
var dayColor = "#173377" // χρώμα κειμένου των ημερών της εβδομάδας
var todayColor = "#F11111" // χρώμα τρέχουσας ημέρας
var timeColor = "#105105" // χρώμα τωρινής ώρας
var text = ""
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'
text += monthName + ' ' + year
text += '</FONT>'
text += '</TH>'
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'
var weekDay = new Array(7)
weekDay[0] = "Sun"
weekDay[1] = "Mon"
weekDay[2] = "Tues"
weekDay[3] = "Wed"
weekDay[4] = "Thu"
weekDay[5] = "Fri"
weekDay[6] = "Sat"
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol}
text += '</TR>'
var digit = 1
var curCell = 1
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) { // current cell represent today's date
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
text += '<CENTER>' + getTime() + '</CENTER>'
text += '</FONT>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++}}
text += '</TR>'}
text += '</TABLE>'
text += '</CENTER>'
document.write(text)}
</script>
➤ΕΠΙΣΤΡΟΦΗ

31. PLAYLIST MP3
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<audio controls=""><source src="https://dl.dropboxusercontent.com/s/nfn75vhfn28kero/YPOMONH.mp3" type="audio/mp3"></source></audio>ΥΠΟΜΟΝΗ (Ξαρχάκος)</a>
➤ΕΠΙΣΤΡΟΦΗ

32. ΠΟΛΛΑΠΛΕΣ GALLERY ΓΙΑ ΣΕΛΙΔΑ ή ΑΝΑΡΤΗΣΗ
BHMA 1: ΑΝΑΡΤΗΣΗ - ΝΕΑ ΑΝΑΡΤΗΣΗ - ΠΡΟΒΟΛΗ HTML
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">
<a href="http://i.imgbox.com/vUYYuGhI" target="_blank"><img src="http://i.imgur.com/c9oYxTHt.jpg"/>▲ ΑΙΓΙΝΑ</a>
<a href="http://i.imgbox.com/uSg2JzVi" target="_blank"><img src="http://i.imgur.com/h6tthMot.jpg"/>▲ ΑΝΑΦΗ</a>
<a href="http://i.imgbox.com/kuNHeoxC" target="_blank"><img src="http://i.imgur.com/R29XOCZt.jpg"/>▲ ΠΟΡΟΣ</a>
<a href="http://i.imgbox.com/V6XAirZ2" target="_blank"><img src="http://i.imgur.com/n5IesXRt.jpg"/>▲ ΠΟΡΟΣ</a>
<a href="http://i.imgbox.com/Rct5R9mV" target="_blank"><img src="http://i.imgur.com/SE7KOHst.jpg"/>▲ ΣΑΝΤΟΡΙΝΗ</a>
<a href="http://i.imgbox.com/oAmPVZ8O" target="_blank"><img src="http://i.imgur.com/KwuI9Z2t.jpg"/>▲ ΣΑΝΤΟΡΙΝΗ</a>
<a href="http://i.imgbox.com/SrKdznto" target="_blank"><img src="http://i.imgur.com/AunBy7at.jpg"/>▲ ΣΑΝΤΟΡΙΝΗ</a>
</div>

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">
<a href="http://i.imgbox.com/x4YtqHsG" target="_blank"><img src="http://i.imgur.com/Pq9Dexat.jpg"/>▲ KERKYRA</a>
<a href="http://i.imgbox.com/7qUpZcPW" target="_blank"><img src="http://i.imgur.com/uAMMFyit.jpg"/>▲ KRITI</a>
<a href="http://i.imgbox.com/dyM6m3zW" target="_blank"><img src="http://i.imgur.com/RyX6tl4t.jpg"/>▲ KRITI</a>
<a href="http://i.imgbox.com/R6GYEpSU" target="_blank"><img src="http://i.imgur.com/qMMDdhYt.jpg"/>▲ KARPATHOS</a>
<a href="http://i.imgbox.com/LUt5RX51" target="_blank"><img src="http://i.imgur.com/3sNGgkut.jpg"/>▲ SYROS</a>
<a href="http://i.imgbox.com/JwHSht5d" target="_blank"><img src="http://i.imgur.com/C83SL17t.jpg"/>▲ MYKONOS</a>
<a href="http://i.imgbox.com/HwIiXvNX.jpg" target="_blank"><img src="http://i.imgur.com/I9SFA0st.jpg"/>▲ ZAKYNTHOS</a>
</div>

<div style="float: left; height:360px;width:190px;margin-top:2px;margin-right:2px;overflow:auto;">
<a href="http://i.imgbox.com/4jvkDVTA" target="_blank"><img src="http://i.imgur.com/XMS6PHst.jpg"/>▲ KEFALONIA</a>
<a href="http://i.imgbox.com/efSM91gc" target="_blank"><img src="http://i.imgur.com/zcIUR7Lt.jpg"/>▲ KEFALONIA</a>
<a href="http://i.imgbox.com/InTTRRkC" target="_blank"><img src="http://i.imgur.com/loTsDgRt.jpg"/>▲ MONEMVASIA</a>
<a href="http://i.imgbox.com/6CibblTz" target="_blank"><img src="http://i.imgur.com/w9qsfyQt.jpg"/>▲ MILOS</a>
<a href="http://i.imgbox.com/rMcsofyY" target="_blank"><img src="http://i.imgur.com/xHwALvDt.jpg"/>▲ RODOS</a>
<a href="http://i.imgbox.com/IogT1Dv6" target="_blank"><img src="http://i.imgur.com/ADKyUh1t.jpg"/>▲ SANTORINI</a>
<a href="http://i.imgbox.com/0Bkv5X68" target="_blank"><img src="http://i.imgur.com/uFoNudkt.jpg"/>▲ SIVOTA</a>
</div></div>
➤ΕΠΙΣΤΡΟΦΗ

33. CHAT ΑΠΟ ΕΞΩΤΕΡΙΚΟ ΣΥΝΔΕΣΜΟ
BHMA 1: ΣΕΛΙΔΑ- ΝΕΑ ΣΕΛΙΔΑ- ΠΡΟΒΟΛΗ HTML
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<iframe width="700" height="400" width="90%" frameBorder="0" src="https://hack.chat/?mysite"></iframe>
ΑΛΛΑΞΤΕ ΤΟ ΟΝΟΜΑ ΠΟΥ ΕΠΙΘΥΜΕΙΣ ΝΑ ΕΧΕΙ ΤΟ CHAT ROOM ?MYCHATROOM

➤ΕΠΙΣΤΡΟΦΗ

34. GADGETS ΓΥΜΝΑΣΤΙΚΗΣ-ΥΠΟΛΟΓΙΣΜΟΣ ΜΕΤΑΒΟΛΙΚΟΥ ΡΥΘΜΟΥ BMR
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<iframe id="bmrCal" style="width:300px; height:517px; border:0; overflow: 0;" frameborder="0" draggable="false" scrolling="no" src="https://www.bodyengine.com/app/bmr/bmr.html?w=true&v=1"></iframe> 
<p style="font-family: verdana; font-size: 11px;">Powered by <a href="https://www.bodyengine.com/bmr-calculator.html">BMR Calculator</a></p>
➤ΕΠΙΣΤΡΟΦΗ

35. ΖΩΔΙΑ - ΜΕ ΒΑΘΜΟΛΟΓΙΑ
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="width:300px;text-align:right;line-height:11px;">
<div style="font-size:12px;background-color:#363942;color:#dad7ce;padding:2px;" align="center">Πόσο τυχεροί είστε σήμερα:</div>
        <iframe src="https://zodia123.gr/widget2_show.php?speed=2000&width=300&height=250&sr="
         width="300" height="250" scrolling=no marginwidth=0 marginheight=0 frameborder=0 border=0 style="border:0;margin:0;padding:0;"></iframe>
	<br><div style="font-size:10px;background-color:#363942;"><a style="font-size:10px;color:#dad7ce;text-decoration:none;" href="https://zodia123.gr" target="_blank">ZΩΔΙΑ</a></div></div>
➤ΕΠΙΣΤΡΟΦΗ

36. ΖΩΔΙΑ - ΠΡΟΒΛΕΨΕΙΣ
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<div style="width:300px;text-align:right;line-height:11px;">
        <iframe src="https://zodia123.gr/widget1_show.php?speed=2000&width=300&height=350&sr=&font=10"
         width="300" height="350" scrolling=no marginwidth=0 marginheight=0 frameborder=0 border=0 style="border:0;margin:0;padding:0;"></iframe>
	<br><div style="font-size:10px;background-color:#656565;"><a style="font-size:10px;color:#ababab;text-decoration:none;" href="https://zodia123.gr" target="_blank">ΖΩΔΙΑ</a></div></div>
➤ΕΠΙΣΤΡΟΦΗ

37. ΑΦΑΙΡΕΣΗ ΤΟΥ ΠΛΑΙΝΟΥ SIDEBAR
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - ΕΠΕΞΕΡΓΑΣΙΑ HTML
BHMA 2: ΚΛΙΚ ΣΤΟΝ ΚΩΔΙΚΑ ΟΠΟΥΔΗΠΟΤΕ ΚΑΙ ΣΤΗ ΣΥΝΕΧΕΙΑ ΑΠΟ ΤΟ ΠΛΗΚΤΡΟΛΟΓΙΟ CTRL+F ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΑΝΑΖΗΤΗΣΗ (SEARCH ΠΑΝΩ ΑΡΙΣΤΕΡΑ). ΚΑΝΩ ΑΝΑΖΗΤΗΣΗ ΓΙΑ .sidebar
BHMA 3: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΔΕΞΙΑ ΑΠΟ ΤΟ .sidebar ΚΑΙ ΠΡΙΝ ΑΠΟ ΤΟ ΣΥΜΒΟΛΟ {
{display:none;}
➤ΕΠΙΣΤΡΟΦΗ

38. ΚΥΛΙΟΜΕΝΟ ΚΕΙΜΕΝΟ ΣΤΟΝ ΤΙΤΛΟ ΤΗΣ ΚΑΡΤΕΛΑΣ
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - ΕΠΕΞΕΡΓΑΣΙΑ HTML
BHMA 2: ΚΛΙΚ ΣΤΟΝ ΚΩΔΙΚΑ ΟΠΟΥΔΗΠΟΤΕ ΚΑΙ ΣΤΗ ΣΥΝΕΧΕΙΑ ΑΠΟ ΤΟ ΠΛΗΚΤΡΟΛΟΓΙΟ CTRL+F ΓΙΑ ΝΑ ΕΜΦΑΝΙΣΤΕΙ Η ΑΝΑΖΗΤΗΣΗ (SEARCH ΠΑΝΩ ΑΡΙΣΤΕΡΑ). ΚΑΝΩ ΑΝΑΖΗΤΗΣΗ ΓΙΑ <head>
BHMA 3: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΗΝ ΠΑΝΩ ΣΕΙΡΑ ΑΠΟ ΤΟ <head> 
<script>
//<![CDATA[
msg = "ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ ΚΥΛΙΟΜΕΝΟ ΚΕΙΜΕΝΟ";
msg = " ...... " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);}
scrollMSG();
//]]>
</script>
➤ΕΠΙΣΤΡΟΦΗ

39. ΑΛΛΑΓΗ ΕΙΚΟΝΙΔΙΟΥ FAVICON ΠΑΝΩ ΣΤΟΝ ΤΙΤΛΟ ΤΗΣ ΚΑΡΤΕΛΑΣ
ΒΗΜΑ 1: ΡΥΘΜΙΣΕΙΣ - FAVICON
BHMA 2: ΕΠΙΛΟΓΗ ΑΡΧΕΙΟΥ
BHMA 3: ΑΠΟΘΗΚΕΥΣΗ
ΣΕΛΙΔΑ ΚΑΤΑΣΚΕΥΗΣ ICONS ONLINE: http://www.xiconeditor.com/
➤ΕΠΙΣΤΡΟΦΗ

40. ΑΡΧΙΚΗ ΣΕΛΙΔΑ - ΑΛΛΑΓΗ
ΒΗΜΑ 1: ΣΕΛΙΔΕΣ - ΝΕΑ ΣΕΛΙΔΑ
ΒΗΜΑ 2: ΟΝΟΜΑΣΙΑ ΤΙΤΛΟΥ ΣΕΛΙΔΑΣ "home"
ΒΗΜΑ 3: ΚΑΤΑΣΚΕΥΗ ΣΕΛΙΔΑΣ ΚΑΙ ΔΗΜΟΣΙΕΥΣΗ
BHMA 4: ΡΥΘΜΙΣΕΙΣ - ΣΦΑΛΜΑΤΑ & ΑΝΑΚΑΤΕΥΘΥΝΣΕΙΣ - ΠΡΟΣΑΡΜΟΣΜΕΝΕΣ ΑΝΑΚΑΤΕΥΘΥΝΣΕΙΣ
BHMA 5: ΠΡΟΣΘΗΚΗ
BHMA 6: ΤΟ ΠΡΩΤΟ ΚΟΥΤΙ ΤΟ ΑΦΗΝΩ ΩΣ ΕΧΕΙ ΚΑΙ ΣΤΟ ΔΕΥΤΕΡΟ ΒΑΖΩ ΤΗΝ ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΣΕΛΙΔΑΣ ΠΟΥ ΕΧΩ ΦΤΙΑΞΕΙ ΟΠΩΣ ΦΑΙΝΕΤΑΙ ΣΤΗΝ ΠΑΡΑΚΑΤΩ ΕΙΚΟΝΑ. ΚΛΙΚ ΟΚ ΣΤΗ ΣΥΥΝΕΧΕΙΑ.

➤ΕΠΙΣΤΡΟΦΗ
41. ΕΓΓΡΑΦΕΣ ΣΤΗΝ ΣΕΛΙΔΑ
ΒΗΜΑ 1: ΔΙΑΤΑΞΗ - ΠΡΟΣΘΗΚΗ GADGET - ΔΙΑΜΟΡΦΩΣΗ ΠΑΡΑΚΟΛΟΥΘΗΣΗΣ ΜΕΣΩ ΗΛΕΚΤΡΟΝΙΚΟΥ ΤΑΧΥΔΡΟΜΕΙΟΥ
BHMA 2: ΑΛΛΑΓΗ ΤΙΤΛΟΥ ΣΕ "ΕΓΓΡΑΦΗ"
BHMA 3: URL FEEDBURNER = http://feeds.feedburner.com/Ssadada
BHMA 4: ΑΠΟΘΗΚΕΥΣΗ
BHMA 5: ΔΙΑΧΕΙΡΙΣΗ ΕΓΓΡΑΦΩΝ ΜΕΣΩ FEEDBRUNER 
https://feedburner.google.com/fb/a/myfeeds
BHMA 6: ΒΑΛΕ ΤΗ ΔΙΕΘΥΝΣΗ ΤΗΣ ΣΕΛΙΔΑΣ ΣΟΥ ΣΤΟ ΛΕΥΚΟ ΚΟΥΤΑΚΙ πχ. https://ltpliroforiki.blogspot.com/ KAI KΛΙΚ "Next"
➤ΕΠΙΣΤΡΟΦΗ

42. SLIDESHOW ΑΝΑΡΤΗΣΕΩΝ (ΜΙΚΡΟΓΡΑΦΙΕΣ ΕΙΚΟΝΩΝ)
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5gNr7MsEwpdlF9Cu7aUQnrHIFEDyPhnuxGuMyGZikBuWC-IfizAu0bG3hc31-GuI8OVwIegIyPjYbfbuttv0R_lo03D21HzRCdCwNCGdAWRmcruCzPx5ne099S_c5MeRDVQWmVf9c164/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΙΣΤΟΣΕΛΙΔΑΣ ΣΟΥ",
featuredNum:9,
listbyLabel:false, 
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1LQH1rkXUR0OTpeXjqkrsXO7QVkl-rL2pwpounRhWQom3BJVGP0qoqQ9PQk4F3J7qCoyCLkOJ-o-UaPGR6DX5aGaIgL54InzStCdnOsG_CkqHvOXbvg-rQRKGb_3uDO1iKFB1RU44rGU/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
BHMA 3: ΜΙΚΡΟΡΥΘΜΙΣΕΙΣ
ΑΛΛΑΓΗ ΤΗΣ ΔΙΕΥΘΥΝΗΣ ΜΕ ΤΟ ΚΙΤΡΙΝΟ ΧΡΩΜΑ 
listURL:"ΕΔΩ ΜΠΑΙΝΕΙ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΙΣΤΟΣΕΛΙΔΑΣ ΜΟΥ",
ΑΛΛΑΓΗ ΤΟΥ ΑΡΙΘΜΟΥ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΠΟΥ ΘΕΛΩ ΝΑ ΕΜΦΑΝΙΖΟΝΤΑΙ
featuredNum:9,
ΕΜΦΑΝΙΣΗ ΑΝΑΡΤΗΣΕΩΝ ΑΝΑΛΟΓΑ ΜΕ ΤΙΣ ΕΤΙΚΕΤΕΣ ΤΟΥΣΘΗΚΕΥΣΗ
listbyLabel:false, 
listbyLabel:"ΝΕΑ", 
➤ΕΠΙΣΤΡΟΦΗ

43. ΑΥΞΗΣΗ ΑΝΑΛΥΣΗΣ ΕΙΚΟΝΑΣ
ΒΗΜΑ 1: ΣΤΗΝ ΠΡΟΒΟΛΗ HTML ΠΡΟΣΘΕΤΩ ΣΤΟ LINK ΤΗΣ ΕΙΚΟΝΑΣ ΣΤΟ ΤΕΛΟΣ ΤΟΝ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ
?imgmax=1600 
ΠΑΡΑΔΕΙΓΜΑ
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEt2IB_uLf4r4PK4a7jXNSef3UnfFGNvGXuZi05dDfR8-pQZU5CqR6PsT_OPZ-r1g09GkqhT9tlwdJbnKSUW_L4E37ZaMgtBZCX3hWdD8aMpoczkC1KmPjLX6pU4hbFoAdS9yABRWaqcc/s640/Sawdust-is-my-glitter-filled-ornament-.jpg?imgmax=1600"
➤ΕΠΙΣΤΡΟΦΗ

44. ΣΠΑΩ ΜΙΑ ΑΝΑΡΤΗΣΗ ΣΕ ΠΟΛΛΕΣ ΣΕΛΙΔΕΣ (ΣΕΛΙΔΟΠΟΙΗΣΗ ΑΝΑΡΤΗΣΗΣ)
ΒΗΜΑ 1: ΑΝΑΡΤΗΣΕΙΣ - ΝΕΑ ΑΝΑΡΤΗΣΗ - ΠΡΟΒΟΛΗ HTML
ΒΗΜΑ 2: ΣΤΗΝ ΠΡΟΒΟΛΗ HTML ΠΡΟΣΘΕΤΩ ΣΤΟ ΤΟΝ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ
<span  class = "content1" >

**** Προσθέστε το περιεχόμενο της πρώτης σελίδας σας εδώ ****

</span>

<span  class = "content2"  style = "display: none" >

**** Προσθέστε το περιεχόμενο της 2ης σελίδας σας εδώ ****

</span>

<span  class = "content3"  style = "display: none" >

**** Προσθέστε το περιεχόμενο της τρίτης σελίδας σας εδώ ****

</span>

<span  class = "content4"  style = "display: none" >

**** Προσθέστε το περιεχόμενο της 4ης σελίδας σας εδώ ****

</span>

<p> <b> Σελίδες: <span  style = "color: #3d85c6;" >
<a  href= "#"  class= "page1"> 1 </a>
<a  href= "#"  class= "page2"> 2 </a>
<a  href= "#"  class= "page3"> 3 </a>
<a  href= "#"  class= "page4"> 4 </a> </ span> </ b> </ p>

<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > </script>

<script>

jQuery ( έγγραφο ). ήδη ( συνάρτηση () {
jQuery ( '.page1' ) .click ( συνάρτηση () {
jQuery ( 'html, body' ) .animate ({scrollTop :  0 }, 0 );
jQuery ( '.content1' ). εμφάνιση ();
jQuery ( '.content2' ). απόκρυψη ();
jQuery ( '.content3' ). απόκρυψη ();
jQuery ( '.content4' ). απόκρυψη ();
επιστροφή  ψευδής ?

});

jQuery ( '.page2' ) .click ( συνάρτηση () {
jQuery ( 'html, body' ) .animate ({scrollTop :  0 }, 0 );
jQuery ( '.content1' ). απόκρυψη ();
jQuery ( '.content2' ). εμφάνιση ();
jQuery ( '.content3' ). απόκρυψη ();
jQuery ( '.content4' ). απόκρυψη ();
επιστροφή  ψευδής ?

});

jQuery ( '.page3' ) .click ( συνάρτηση () {
jQuery ( 'html, body' ) .animate ({scrollTop :  0 }, 0 );
jQuery ( '.content1' ). απόκρυψη ();
jQuery ( '.content2' ). απόκρυψη ();
jQuery ( '.content3' ). εμφάνιση ();
jQuery ( '.content4' ). απόκρυψη ();
επιστροφή  ψευδής ?

});

jQuery ( '.page4' ) .click ( συνάρτηση () {
jQuery ( 'html, body' ) .animate ({scrollTop :  0 }, 0 );
jQuery ( '.content1' ). απόκρυψη ();
jQuery ( '.content2' ). απόκρυψη ();
jQuery ( '.content3' ). απόκρυψη ();
jQuery ( '.content4' ). εμφάνιση ();
επιστροφή  ψευδής ?

});

});

</script>
➤ΕΠΙΣΤΡΟΦΗ

45. MP3 ΛΙΣΤΑ SOUNDCLOUD
ΒΗΜΑ 1: ΑΝΑΖΗΤΗΣΗ ΓΙΑ ΛΙΣΤΑ ΤΡΑΓΟΥΔΙΩΝ ΑΠΟ ΤΟ https://soundcloud.com/
ΒΗΜΑ 2: SHARE - EMBED - CODE
ΠΑΡΑΔΕΙΓΜΑ ΚΩΔΙΚΑ (CODE) ΑΠΟ ΤΟ SOUNDCLOUD KAI EINAI MIA PLAYLIST RAMONES
<iframe width="300px" height="300" scrolling="yes" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1210320796&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/afterr-mathh" title="bonez" target="_blank" style="color: #cccccc; text-decoration: none;">bonez</a> · <a href="https://soundcloud.com/afterr-mathh/sets/ramones" title="Ramones" target="_blank" style="color: #cccccc; text-decoration: none;">Ramones</a></div>
ΒΗΜΑ 3: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
BHMA 4: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑPΑNΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
➤ΕΠΙΣΤΡΟΦΗ

46. ΑΥΤΟΜΑΤΗ ΠΡΟΣΑΡΜΟΓΗ ΜΕΓΕΘΟΥΣ ΕΙΚΟΝΑΣ
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML 
ΒΗΜΑ 2: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) ]]><b:skin>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ ]]><b:skin>
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}
ΒΗΜΑ 3: ΑΝΑΡΤΗΣΕΙΣ - ΝΕΑ ΑΝΑΡΤΗΣΗ
BHMA 4: ΓΙΑ ΚΑΘΕ ΦΩΤΟΓΡΑΦΙΑ ΠΟΥ ΕΙΣΑΓΩ ΣΤΗΝ ΑΝΑΡΤΗΣΗ ΜΟΥ ΕΧΩ ΕΠΙΛΕΓΜΕΝΟ ΤΟ ΑΡΧΙΚΟ ΜΕΓΕΘΟΣ ΤΗΣ
➤ΕΠΙΣΤΡΟΦΗ

47. ΒΙΝΤΕΟ BACKGROUND ΣΤΗΝ ΣΕΛΙΔΑ
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML 
ΒΗΜΑ 2: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) <body>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΚΑΤΩ ΑΠΟ ΤΟ <body>
<video autoplay='true' id='bgvid' loop='true' muted='true' playsinline='true' poster='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg'>
    <source src='https://i.imgur.com/DVqrO3U.mp4' type='video/mp4'/></video>
ΒΗΜΑ 3: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) ]]><b:skin>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ ]]><b:skin>
body {
  margin: 0;
  background: #000; 
}
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url(&#39;//demosthenes.info/assets/images/polina.jpg&#39;) no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

#polina { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#polina button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover { 
   background: rgba(0,0,0,0.5);
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
    
    var vid = document.getElementById(&quot;bgvid&quot;);
var pauseButton = document.querySelector(&quot;#polina button&quot;);

if (window.matchMedia(&#39;(prefers-reduced-motion)&#39;).matches) {
    vid.removeAttribute(&quot;autoplay&quot;);
    vid.pause();
    pauseButton.innerHTML = &quot;Paused&quot;;
}

function vidFade() {
  vid.classList.add(&quot;stopfade&quot;);
}

vid.addEventListener(&#39;ended&#39;, function()
{
// only functional if &quot;loop&quot; is removed 
vid.pause();
// to capture IE10
vidFade();
}); 


pauseButton.addEventListener(&quot;click&quot;, function() {
  vid.classList.toggle(&quot;stopfade&quot;);
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = &quot;Pause&quot;;
  } else {
    vid.pause();
    pauseButton.innerHTML = &quot;Paused&quot;;
  }
}) 
➤ΕΠΙΣΤΡΟΦΗ

48. ΟΡΙΖΟΝΤΙΟ ΚΕΝΤΡΙΚΟ ΜΕΝΟΥ ΜΕ DROP DOWN MENU (ΜΕ 2 ΣΤΗΛΕΣ)
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML 
ΒΗΜΑ 2: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) ]]><b:skin>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ ]]><b:skin>
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0RpM4Fv5CLqUmO-8zAOA4djD5iEKJIPAiZQywVp7ezddvKM9gZKrr1qtICKflzBGGtrDuE7tStnnApYts_GXId1U6V8DA92EA9B9Ikd6R5w85_VSLunlVVL7OnrYPJzPh5_WPAxLenQA/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}
ΒΗΜΑ 3:  ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) /* Tabs
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΚΑΝΩ ΑΠΟ ΤΟ
/* Tabs
----------------------------------------------- */ 
ΚΑΙ ΜΕΧΡΙ 
/* Columns
----------------------------------------------- */
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}
BHMA 4: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) <head>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΚΑΤΩ ΑΠΟ ΤΟ <head> ή ΣΕ ΚΑΠΟΙΟ GADGET ΟΡΙΖΟΝΤΙΟ
<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>
➤ΕΠΙΣΤΡΟΦΗ

49. ΚΥΚΛΙΚΟ SLIDESHOW GALLERY ΕΙΚΟΝΩΝ
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML 
ΒΗΜΑ 2: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) </head>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*! Tiny Circleslider - v2.0.8 - 2015-08-08
 * http://www.baijs.com/tinycircleslider
 *
 * Copyright (c) 2015 Maarten Baijs <wieringen@gmail.com>;
 * Licensed under the MIT license */

!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return k(),w.append(x.first().clone()).css("width",B.width*(x.length+1)),g(),r(0),v.move(v.options.start,v.options.interval),v}function g(){G&&(b[0].ontouchstart=u,b[0].ontouchmove=q,b[0].ontouchend=s),y.bind("mousedown",u);var c=function(b){return b.preventDefault(),b.stopImmediatePropagation(),v.stop(),v.move(a(this).attr("data-slide-index")),!1};G&&b.delegate(".dot","touchstart",c),b.delegate(".dot","mousedown",c)}function h(a){E=setTimeout(function(){v.move(v.slideCurrent+1,!0)},a?50:v.options.intervalTime)}function i(a){return a*(Math.PI/180)}function j(a){return 180*a/Math.PI}function k(){var c=document.createDocumentFragment();z.remove(),x.each(function(b,d){var e=null,f=parseInt(a(d).attr("data-degrees"),10)||360*b/v.slidesTotal,g={top:-Math.cos(i(f))*v.options.radius+A.height/2-D.height/2,left:Math.sin(i(f))*v.options.radius+A.width/2-D.width/2};z.length>0&&(e=z.clone(),e.addClass(a(d).attr("data-classname")).css(g),c.appendChild(e[0])),v.dots.push({angle:f,slide:d,dot:e})}),v.dots.sort(function(a,b){return a.angle-b.angle}),a.each(v.dots,function(b,c){a(c.dot).length>0&&a(c.dot).addClass("dot-"+(b+1)).attr("data-slide-index",b).html("<span>"+(b+1)+"</span>")}),b.append(c),z=b.find(".dot")}function l(a,b){var c,d,e;return a>b?(c=a-b,d=-(b+360-a)):(c=a+360-b,d=-(b-a)),e=c<Math.abs(d)?c:d,[e,d,c]}function m(b){var c=9999,d=9999,e=9999,f=0,g=0,h=0;return a.each(v.dots,function(a,i){var j=l(i.angle,b);Math.abs(j[0])<Math.abs(e)&&(e=j[0],h=a),Math.abs(j[1])<Math.abs(c)&&(c=j[1],f=a),Math.abs(j[2])<Math.abs(d)&&(d=j[2],g=a)}),[[h,f,g],[e,c,d]]}function n(a){return 0>a?360+a%-360:a%360}function o(a,b,c){var d=a,e=!1;Math.abs(a)>Math.abs(b)?(d=-b,e=!0):I?requestAnimationFrame(function(){o(d,b+a)}):F=setTimeout(function(){o(d,b+a,.9*c)},c),v.angleCurrent=n(v.angleCurrent-d),r(v.angleCurrent,e)}function p(a){return{x:H?a.targetTouches[0].pageX:a.pageX||a.clientX,y:H?a.targetTouches[0].pageY:a.pageY||a.clientY}}function q(a){var c=b.offset(),d={left:p(a).x-c.left-A.width/2,top:p(a).y-c.top-A.height/2};return v.angleCurrent=n(j(Math.atan2(d.left,-d.top))),I||r(v.angleCurrent),!1}function r(a,c){closestSlidesAndAngles=m(a),closestSlides=closestSlidesAndAngles[0],closestAngles=closestSlidesAndAngles[1],w.css("left",-(closestSlides[1]*B.width+Math.abs(closestAngles[1])*B.width/(Math.abs(closestAngles[1])+Math.abs(closestAngles[2])))),y.css({top:-Math.cos(i(a))*v.options.radius+(A.height/2-C.height/2),left:Math.sin(i(a))*v.options.radius+(A.width/2-C.width/2)}),c&&b.trigger("move",[x[v.slideCurrent],v.slideCurrent])}function s(b){return a(b.target).hasClass("dot")?!1:(v.dragging=!1,b.preventDefault(),a(document).unbind("mousemove mouseup"),y.unbind("mouseup"),v.options.dotsHide&&z.stop(!0,!0).fadeOut("slow"),v.options.dotsSnap&&v.move(m(v.angleCurrent)[0][0]),void 0)}function t(){v.dragging&&(r(v.angleCurrent),requestAnimationFrame(function(){t()}))}function u(b){return b.preventDefault(),H="touchstart"==b.type,v.dragging=!0,a(b.target).hasClass("dot")?!1:(v.stop(),a(document).mousemove(q),a(document).mouseup(s),y.mouseup(s),v.options.dotsHide&&z.stop(!0,!0).fadeIn("slow"),I&&t(),void 0)}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var v=this,w=(b.find(".viewport"),b.find(".overview")),x=w.children(),y=b.find(".thumb"),z=b.find(".dot"),A=(x.find("a"),{width:b.outerWidth(!0),height:b.outerHeight(!0)}),B={width:x.first().outerWidth(!0),height:x.first().outerHeight(!0)},C={width:y.outerWidth(!0),height:y.outerHeight(!0)},D={width:z.outerWidth(),height:z.outerHeight()},E=null,F=null,G="ontouchstart"in window,H=!1,I="requestAnimationFrame"in window;return this.dots=[],this.slideCurrent=0,this.angleCurrent=0,this.slidesTotal=x.length,this.intervalActive=!1,this.start=function(a){return v.options.interval&&(v.intervalActive=!0,h(a)),v},this.stop=function(){return v.intervalActive=!1,clearTimeout(E),v},this.move=function(a){var b=Math.max(0,isNaN(a)?v.slideCurrent:a);b>=v.slidesTotal&&(b=0);var c=v.dots[b]&&v.dots[b].angle,d=l(c,v.angleCurrent)[0],e=d>0?-2:2;return v.slideCurrent=b,o(e,d,50),v.start(),v},f()}var c="tinycircleslider",d={interval:!1,intervalTime:3500,dotsSnap:!1,dotsHide:!0,radius:140,start:0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}});
//]]>
</script>

<style>
  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px;
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLReFfmKRztklBBhv9MTGW3IL2vWTQukGGa5MgrbWhssRDp1aIPS-lQV2ue3Efb95v9QEWPepmPM20tawdU00jXstVP3vP5KnwLYKGO7JbLY3QnXWfqPdXsriHei3DB_UTjILFY1V2hfl/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNka6Ug0XjbB7W9I0lF_N_rF_rWfrzsfR-M5tI4zduTKd0ubjgnEEUH8wG2jsXMl_UjxXtG9auy9XPJppv_uS2m8pebMlLTzXdLRuT5nZHQeGNSH3DFjqWy5GHul8-fnI-OvxEzmwRp7C4/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGgSe2pBIjMuk0CD99pVuB0fAvuIfRu1DjQC1l-dviUrSJ1FEuQT3GjEzrQq0k7e19TwIJIqSSpGwpE4m0VBTV9VOOLFDp3_pk3BdcdhcpE68En13brVnECOuGyaY1ePEpNSIK7hcuCt1i/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
 #rotatescroll .viewport ul.overview li img {
   width: 300px;
   min-height: 300px;
   object-fit: cover;
   padding:0;
   border:0;
 }
</style>
ΒΗΜΑ 3: ΑΝΤΙΓΡΑΦΗ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΜΕΣΑ ΣΕ ΜΙΑ ΑΝΑΡΤΗΣΗ ή ΣΕ ΜΙΑ ΣΕΛΙΔΑ (ΠΡΟΒΟΛΗ HTML)
<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({
interval: true,
snaptodots: true
});
});
</script>
➤ΕΠΙΣΤΡΟΦΗ
50. ΕΜΦΑΝΙΣΗ ΑΝΑΡΤΗΕΩΝ ΣΕ ΜΟΡΦΗ GRID
ΒΗΜΑ 1: ΘΕΜΑ - ΠΡΟΣΑΡΜΟΓΗ - HTML 
ΒΗΜΑ 2: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) </head>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ </head>
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf(" ",b)!=-1;)b++;return a=a.substring(0,b-1),a+"..."}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBm_o5-tlyuzWf5qBzLJK2mKZbHEey07IK0STDZ4BBv287FPT9LbVvTtapguAF7_covQFKdMpJf2G2l0LSYLf9y20n_jKTKczGUIxzL9YEfRl3RwxqfQ52S3xpgVONKWtR9lr1idy01ae/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}
//]]>
</script>
ΒΗΜΑ 3: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) <data:post.body/>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΚΑΤΩ ΑΠΟ ΤΟ <data:post.body/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>
ΒΗΜΑ 4: ΚΛΙΚ ΚΑΠΟΥ ΣΤΟΝ ΚΩΔΙΚΑ ΚΑΙ ΚΑΝΕ ΑΝΑΖΗΤΗΣΗ (CTRL + F) </head>
ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ, ΜΙΑ ΣΕΙΡΑ ΠΑΝΩ ΑΠΟ ΤΟ </head>
ΕΠΙΛΟΓΗ 1
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}
</style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
ΕΠΙΛΟΓΗ 2
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3CCTYPnIdOoPabhL31CyfbMHO13Vel_eXipXm0lo_qnFHXd1NMZ4c0o0A-FtlQrBrfMokQW6f1B5WP_IpbGwjOrUWPcQGYyvFFhUNgMEBheRm3T8e-v1kyjIdHjPPVe2psSV0pZLKL8N/s1600/blueprint.png);font:100% &#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% &#39;Pacifico&#39;,cursive;}a.comment-bubble:before{content:&quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZ-I5205Nqrn_Q3WrqVdGMCxCQON3ksBatnVmFilME_Q65Btk1jfDoyF0dc6v6Xq-HgjNMkeJEBmla8rMOGqYzgk6mL3mScGIUgggoyyJIGLgQlNdjniMbmlVDtV1bSMiQfJcX4T3N4F3/s1600/heart-active.png);}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
ΕΠΙΛΟΓΗ 3
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% &#39;Open Sans Condensed&#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% &#39;Pacifico&#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:&quot;Comments: &quot;}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
➤ΕΠΙΣΤΡΟΦΗ

51. SLIDESHOW GALLERY ΜΕ ΕΙΚΟΝΕΣ
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT
ΒΗΜΑ 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ
<!---------------------------------------------
    Blogger Slideshow Widget org. alongside seoclive.com
----------------------------------------------->
<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds betwixt the terminate of the sliding lawsuit in addition to the start of the nex one
        transPeriod: 1200, // length of the sliding lawsuit inward milliseconds
        thumbnails: false, // thumnails & tooltip is controlled past times it
        pagination: true, // exclusively when "pagination" is laid to "false" thumbnails volition live visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow tiptop (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<div class="fluid_container">
    <!-- camera_slideshow camera_wrap-->
    <div class="camera_wrap" id="camera_wrap_1">
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
            <div class="camera_caption fadeFromBottom">
                It uses a calorie-free version of jQuery mobile, <em>navigate the slides past times swiping alongside your fingers</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>It's completely free</em> (even though a donation is appreciated)
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera slideshow provides many options <em>to customize your project</em> every bit to a greater extent than every bit possible
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
            <div class="camera_caption fadeFromBottom">
                It supports captions, HTML elements in addition to videos.
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->
ΑΛΛΑΖΩ ΤΙΣ ΔΙΕΥΘΥΝΣΕΙΣ ΤΩΝ ΜΙΚΡΟΓΡΑΦΙΩΝ (THUMBS) ΚΑΙ ΤΩΝ ΕΙΚΟΝΩΝ (ΚΙΤΡΙΝΑ ΓΡΑΜΜΑΤΑ). ΕΠΙΣΗΣ ΤΟ ΚΕΙΜΕΝΟ ΚΑΘΕ ΕΙΚΟΝΑΣ (ΜΟΒ ΓΡΑΜΜΑΤΑ). 
ΑΝ ΘΕΛΩ ΝΑ ΠΡΟΣΘΕΣΩ ΕΙΚΟΝΑ ΚΑΝΩ ΑΝΤΙΓΡΑΦΗ ΕΠΙΚΟΛΛΗΣΗ ΤΟΝ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΚΑΝΟΝΤΑΣ ΤΙΣ ΑΠΑΡΑΙΤΗΤΕΣ ΑΛΛΑΓΕΣ ΣΕ ΑΥΤΟΝ (ΚΙΤΡΙΝΑ ΚΑΙ MΟΒ ΓΡΑΜΜΑΤΑ)

<div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
            <div class="camera_caption fadeFromBottom">
                It supports captions, HTML elements in addition to videos.
            </div>
        </div>
➤ΕΠΙΣΤΡΟΦΗ

52. ΧΡΟΝΟΓΡΑΜΜΗ - TIMELINE HTML
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT (ή ΕΙΣΟΔΟ ΣΕ ΣΕΛΙΔΑ ΣΕ HΤML ΜΟΡΦΗ)
ΒΗΜΑ 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. ΜΠΟΡΕΙΣ ΝΑ ΠΡΟΣΘΕΣΕΙΣ ΟΣΑ ΓΕΓΟΝΟΤΑ ΘΕΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΩΝΤΑΣ ΤΟΝ ΚΙΤΡΙΝΟ ΚΩΔΙΚΑ. ΑΛΛΑΓΕΣ ΚΑΝΕΙΣ ΣΤΑ ΚΟΚΚΙΝΑ ΓΡΑΜΜΑ ΟΠΩΣ ΒΛΕΠΕΙΣ ΣΤΟ ΠΑΡΑΚΑΤΩ ΠΑΡΑΔΕΙΓΜΑ. ΤΑ ΠΡΑΣΙΝΑ ΚΑΘΟΡΙΖΟΥΝ ΤΟ ΜΕΓΕΘΟΣ ΤΗΣ ΧΡΟΝΟΓΡΑΜΜΗΣ (ΔΙΑΣΤΑΣΕΙΣ).
<!DOCTYPE html>
<html>
<head>
<style>
.timeline {
  position: relative;
  max-width: 100%;
  height: 400px;
  margin: 50px auto;
  overflow-x: scroll;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  top: 50%;
  left: 0;
  z-index: -1;
}

.timeline-content {
  position: relative;
  padding: 20px;
  background-color: #f1f1f1;
  border-radius: 5px;
  margin-bottom: 20px;
  width: fit-content;
}

.timeline-year {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.timeline-event {
  margin-bottom: 10px;
}

.timeline-event p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.timeline-event span {
  font-weight: bold;
}

</style>
</head>
<body>
<div class="timeline">
  <div class="timeline-content">
    <div class="timeline-year">1941</div>
      <div class="timeline-event"><span>Ιανουάριος</span>: Ο Κονράντ Τζούζεφ Ζούζεφ Γκάρντνερ παρουσιάζει τη μηχανή Ζ1, η οποία ήταν μία από τις πρώτες μηχανές υπολογιστών που δημιουργήθηκαν.</div>
    </div>
    <div class="timeline-content">
      <div class="timeline-year">1943</div>
        <div class="timeline-event"><span>ΙΑΝ-ΔΕΚ</span>: Ο Χάουαρντ Άικεν και ο Γκλεν Βίλιαμς δημιουργούν τον πρώτο ηλεκτρονικό υπολογιστή, τον ENIAC.</div>
    </div>
    <div class="timeline-content">
      <div class="timeline-year">1947</div>
        <div class="timeline-event"><span>23 Δεκεμβρίου</span>: Ενισχυτής τρανζίστορ - Τρεις επιστήμονες στα Bell Telephone Laboratories, οι William Shockley, Walter Brattain και John Bardeen επιδεικνύουν τη νέα τους εφεύρεση του ενισχυτή τρανζίστορ σημείου επαφής. Το όνομα τρανζίστορ είναι συντομογραφία για "αντίσταση μεταφοράς". (Η σμίκρυνση ηλεκτρονικών κυκλωμάτων μέσω του τρανζίστορ είναι μια βασική εξέλιξη που καθιστά τους προσωπικούς επιτραπέζιους υπολογιστές μικρούς, αξιόπιστους και προσιτούς).</div>
     </div>
  
  <!-- Add more timeline events here -->
      
</div>
</body>
</html>

➤ΕΠΙΣΤΡΟΦΗ

53. ΚΟΥΙΖ HTML
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT (ή ΕΙΣΟΔΟ ΣΕ ΣΕΛΙΔΑ ΣΕ HΤML ΜΟΡΦΗ)
ΒΗΜΑ 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. ΜΠΟΡΕΙΣ ΝΑ ΠΡΟΣΘΕΣΕΙΣ ΟΣΕΣ ΕΡΩΤΗΣΕΙΣ ΘΕΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΩΝΤΑΣ ΤΟΝ ΚΙΤΡΙΝΟ ΚΩΔΙΚΑ. ΑΛΛΑΓΕΣ ΚΑΝΕΙΣ ΣΤΑ ΚΟΚΚΙΝΑ ΓΡΑΜΜΑΤΑ ΟΠΩΣ ΒΛΕΠΕΙΣ ΣΤΟ ΠΑΡΑΚΑΤΩ ΠΑΡΑΔΕΙΓΜΑ. ΤΑ ΠΡΑΣΙΝΑ ΚΑΘΟΡΙΖΟΥΝ ΤΟ ΜΕΓΕΘΟΣ ΤΟΥ ΚΟΥΙΖ (ΔΙΑΣΤΑΣΕΙΣ).
<!DOCTYPE html>
<html>
<head>
  <title>Κουίζ Μαθηματικών - Παράγωγοι Εξισώσεων</title>
  <style>
    .quiz-container {
      max-width: 500px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
    }
    .question {
      margin-bottom: 10px;
    }
    .options {
      margin-bottom: 20px;
    }
    .submit-btn {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    .result-message {
      text-align: center;
      margin-top: 20px;
      font-weight: bold;
    }
    .restart-btn {
      display: block;
      margin: 0 auto;
      text-align: center;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <h1>Κουίζ Μαθηματικών - Παράγωγοι Εξισώσεων</h1>
    <form id="quiz-form">
      <div class="question">
        <p>1. Ποιά είναι η παράγωγος της συνάρτησης f(x) = 3x^2 + 2x - 5 στο σημείο x = 2;</p>
        <div class="options">
          <label><input type="radio" name="q1" value="a"> α) 16</label><br>
          <label><input type="radio" name="q1" value="b"> β) 14</label><br>
          <label><input type="radio" name="q1" value="c"> γ) 10</label><br>
          <label><input type="radio" name="q1" value="d"> δ) 8</label>
        </div>
      </div>
      <div class="question">
        <p>2. Ποιά είναι η παράγωγος της συνάρτησης g(x) = sin(x) + cos(x) στο σημείο x = π/4;</p>
        <div class="options">
          <label><input type="radio" name="q2" value="a"> α) 1</label><br>
          <label><input type="radio" name="q2" value="b"> β) ?2</label><br>
          <label><input type="radio" name="q2" value="c"> γ) 0</label><br>
          <label><input type="radio" name="q2" value="d"> δ) -?2</label>
        </div>
      </div>
      <div class="question">
        <p>3. Ποιά είναι η παράγωγος της συνάρτησης h(x) = ln(x^2) στο σημείο x = 1;</p>
        <div class="options">
          <label><input type="radio" name="q3" value="a"> α) 0</label><br>
          <label><input type="radio" name="q3" value="b"> β) 1</label><br>
          <label><input type="radio" name="q3" value="c"> γ) 2</label><br>
          <label><input type="radio" name="q3" value="d"> δ) -1</label>
        </div>
      </div>
      
      <div class="submit-btn">
        <button type="submit">Υποβολή</button>
      </div>
    </form>
    <div id="result"></div>
    <div id="restart" style="display: none;">
      <button class="restart-btn"    onclick="restartQuiz()">Επανάληψη</button>
    </div>
  </div>

  <script>
    const quizForm = document.getElementById('quiz-form');
    const resultDiv = document.getElementById('result');
    const restartDiv = document.getElementById('restart');
    
    quizForm.addEventListener('submit', calculateScore);
    
    function calculateScore(event) {
      event.preventDefault();
    
      const answers = ['b', 'b', 'c', 'a', 'c'];
      let score = 0;
    
      for (let i = 1; i <= 5; i++) {
        const selectedOption = document.querySelector(`input[name=q${i}]:checked`);
        if (selectedOption && selectedOption.value === answers[i - 1]) {
          score += 10;
          selectedOption.parentElement.style.color = 'green';
        } else if (selectedOption) {
          selectedOption.parentElement.style.color = 'red';
        }
      }
    
      const percentage = (score / 30) * 100;
    
      resultDiv.textContent = `Η βαθμολογία σου: ${score} / 30 πόντους`;
    
      if (percentage > 70) {
        resultDiv.textContent += ' - Τα κατάφερες!';
      } else {
        resultDiv.textContent += ' - Πάμε ακόμα μία! Το χεις.';
      }
    
      restartDiv.style.display = 'block';
    }
    
    function restartQuiz() {
      const options = document.querySelectorAll('input[type="radio"]');
    
      options.forEach(option => {
        option.checked = false;
        option.parentElement.style.color = '';
      });
    
      resultDiv.textContent = '';
      restartDiv.style.display = 'none';
    }
  </script>
</body>
</html>

➤ΕΠΙΣΤΡΟΦΗ

54. HTML FLASHING PHOTO
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT (ή ΕΙΣΟΔΟ ΣΕ ΣΕΛΙΔΑ ΣΕ HΤML ΜΟΡΦΗ)
ΒΗΜΑ 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. ΜΠΟΡΕΙΣ ΝΑ ΠΡΟΣΘΕΣΕΙΣ ΟΣΕΣ EIKOΝΕΣ ΘΕΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΩΝΤΑΣ ΤΟΝ ΚΙΤΡΙΝΟ ΚΩΔΙΚΑ. ΑΛΛΑΓΕΣ ΚΑΝΕΙΣ ΣΤΑ ΚΟΚΚΙΝΑ ΓΡΑΜΜΑΤΑ ΟΠΩΣ ΒΛΕΠΕΙΣ ΣΤΟ ΠΑΡΑΚΑΤΩ ΠΑΡΑΔΕΙΓΜΑ. ΤΑ ΠΡΑΣΙΝΑ ΚΑΘΟΡΙΖΟΥΝ ΤΟ ΜΕΓΕΘΟΣ ΤΗΣ ΕΙΚΟΝΑΣ (ΔΙΑΣΤΑΣΕΙΣ).
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.slideshow-container img {
  width: 100%;
  height: auto;
}

.fade {
  -webkit-animation: fade 2s ease-in-out infinite;
  animation: fade 2s ease-in-out infinite;
}

@-webkit-keyframes fade {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}

@keyframes fade {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}
</style>
</head>
<body>

<div class="slideshow-container">
  <img class="fade" src="https://s3.amazonaws.com/libapps/accounts/44312/images/visiblebodybanner-2.jpg">
  <img class="fade" src="https://play-lh.googleusercontent.com/Kn2xG2VdUInOKtyXMfq9sEAnAhRI0y1FGU-llhFRwb1c1usz59N3eDUwSQ2u6mlswpuO"> // Διεύθυνση εικόνας
  <img class="fade" src="https://www.visiblebody.com/hubfs/www/apps/visible-body-courseware-main.jpg">
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("fade");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.opacity = "0";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].style.opacity = "1";
  setTimeout(showSlides, 2000); // Αλλαγή εικόνας κάθε 2 δευτερόλεπτα
}
</script>

</body>
</html>
</div>

➤ΕΠΙΣΤΡΟΦΗ

55. HTML GALLERY SLIDESHOW PHOTO
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT (ή ΕΙΣΟΔΟ ΣΕ ΣΕΛΙΔΑ ΣΕ HΤML ΜΟΡΦΗ)
ΒΗΜΑ 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. ΜΠΟΡΕΙΣ ΝΑ ΠΡΟΣΘΕΣΕΙΣ ΟΣΕΣ EIKOΝΕΣ ΘΕΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΩΝΤΑΣ ΤΟΝ ΚΙΤΡΙΝΟ ΚΩΔΙΚΑ. ΑΛΛΑΓΕΣ ΚΑΝΕΙΣ ΣΤΑ ΚΟΚΚΙΝΑ ΓΡΑΜΜΑΤΑ ΟΠΩΣ ΒΛΕΠΕΙΣ ΣΤΟ ΠΑΡΑΚΑΤΩ ΠΑΡΑΔΕΙΓΜΑ. ΤΑ ΠΡΑΣΙΝΑ ΚΑΘΟΡΙΖΟΥΝ ΤΟ ΜΕΓΕΘΟΣ ΤOY PLAYER (ΔΙΑΣΤΑΣΕΙΣ).
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
}

.slideshow-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  touch-action: none;
}

.slideshow-container img.active {
  opacity: 1;
  z-index: 1;
}

.slideshow-controls {
  text-align: center;
  margin-top: 10px;
  touch-action: none;
}

.slideshow-controls button {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border: none;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
  touch-action: none;
}

.slideshow-controls button.active {
  background-color: #555;
}

</style>
</head>
<body>

<div class="slideshow-container">
<img class="slide active" src="https://www.visiblebody.com/hubfs/www/apps/visible-body-courseware-main.jpg" alt="Image 1">
  <img class="slide" src="https://ae01.alicdn.com/kf/HTB1OhipHVXXXXbVXXXXq6xXFXXXT/Visible-Body-Anatomy-and-Physiology-v1-5-04-anatomy.jpg" alt="Image 2">
  <img class="slide" src="https://www.samk.fi/wp-content/uploads/2019/09/capture20190913151857869.png" alt="Image 3">
</div>

<div class="slideshow-controls">
  <button class="control" data-slide-index="0"></button>
  <button class="control" data-slide-index="1"></button>
  <button class="control" data-slide-index="2"></button>
</div>

<script>
var slideIndex = 0;
var slides = document.getElementsByClassName("slide");
var controls = document.getElementsByClassName("control");

showSlide(slideIndex); // Εμφάνιση της πρώτης εικόνας

// Επιλογή εικόνας με το κλικ στα κουμπιά
for (var i = 0; i < controls.length; i++) {
  controls[i].onclick = function() {
    slideIndex = parseInt(this.getAttribute("data-slide-index"));
    showSlide(slideIndex);
  };
}

// Εναλλαγή εικόνας κάθε 5 δευτερόλεπτα
var slideInterval = setInterval(nextSlide, 5000);

function nextSlide() {
  slideIndex++;
  if (slideIndex >= slides.length) {
    slideIndex = 0;
  }
  showSlide(slideIndex);
}

function showSlide(index) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
    controls[i].classList.remove("active");
  }
  slides[index].classList.add("active");
  controls[index].classList.add("active");
}

// Παύση της αυτόματης εναλλαγής εικόνων όταν ο χρήστης κάνει hover στον Player
var slideshowContainer = document.getElementsByClassName("slideshow-container")[0];

slideshowContainer.addEventListener("mouseover", function() {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener("mouseout", function() {
  slideInterval = setInterval(nextSlide, 5000);
});

// Ενεργοποίηση της δυνατότητας να σέρνεις τις εικόνες
var touchStartX = 0;
var touchEndX = 0;

slideshowContainer.addEventListener("touchstart", function(event) {
  touchStartX = event.touches[0].clientX;
});

slideshowContainer.addEventListener("touchend", function(event) {
  touchEndX = event.changedTouches[0].clientX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX) {
    nextSlide();
  } else if (touchEndX > touchStartX) {
    prevSlide();
  }
}

function prevSlide() {
  slideIndex--;
  if (slideIndex < 0) {
    slideIndex = slides.length - 1;
  }
  showSlide(slideIndex);
}

</script>

</body>
</html>

➤ΕΠΙΣΤΡΟΦΗ
56. ΤΕΣΤ ΜΕ ΧΡΟΝΟΜΕΤΡΟ ΚΑΙ ΥΠΟΛΟΓΙΣΜΟ ΒΑΘΜΟΥ
BHMA 1: ΔΙΑΤΑΞΗ - SIDE BAR - ADD GADGET - HTML/JAVA SCRIPT (ή ΕΙΣΟΔΟ ΣΕ ΣΕΛΙΔΑ ΣΕ HΤML ΜΟΡΦΗ)
ΒΗΜΑ 2: ΑΝΤΙΓΡΑΦΗ ΚΑΙ ΕΠΙΚΟΛΛΗΣΗ ΤΟΥ ΠΑΡΑΚΑΤΩ ΚΩΔΙΚΑ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. ΜΠΟΡΕΙΣ ΝΑ ΠΡΟΣΘΕΣΕΙΣ ΟΣΕΣ ΕΡΩΤΗΣΕΙΣ ΘΕΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΩΝΤΑΣ ΤΟΝ ΚΙΤΡΙΝΟ ΚΩΔΙΚΑ. ΑΛΛΑΓΕΣ ΚΑΝΕΙΣ ΣΤΑ ΚΟΚΚΙΝΑ ΓΡΑΜΜΑΤΑ ΟΠΩΣ ΒΛΕΠΕΙΣ ΣΤΟ ΠΑΡΑΚΑΤΩ ΠΑΡΑΔΕΙΓΜΑ. ΤΑ ΠΡΑΣΙΝΑ ΚΑΘΟΡΙΖΟΥΝ ΤΟ ΜΕΓΕΘΟΣ ΤOY ΤΕΣΤ (ΔΙΑΣΤΑΣΕΙΣ). ΤΑ ΠΟΡΤΟΚΑΛΙ ΕΙΝΑΙ ΓΙΑ ΤΙΣ ΣΩΣΤΕΣ ΑΠΑΝΤΗΣΕΙΣ. Π.Χ. ΑΝ ΣΤΗΝ ΠΡΩΤΗ ΕΡΩΤΗΣΗ Η ΣΩΣΤΗ ΑΠΑΝΤΗΣΗ ΕΙΝΑΙ ΤΟ 1 ΤΟΤΕ ΒΑΖΩ ΤΗΝ ΤΙΜΗ 1.
<!DOCTYPE html>
<html>
<head>
  <title>Τεστ</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }

    .container {
      max-width: 100%;
      margin: 0 auto;
    }

    h1 {
      color: #333;
      text-align: center;
      font-size: 20px;
    }

    .timer-bar {
      height: 20px;
      background-color: #ccc;
      margin-bottom: 20px;
    }

    .progress-bar {
      height: 100%;
      background-color: #4caf50;
      width: 100%;
      transition: width 1s linear;
    }

    .question {
      background-color: #d4eefc;
      padding: 10px;
      margin-bottom: 20px;
    }

    .answer {
      background-color: #eaf4ff;
      padding: 10px;
      margin-bottom: 10px;
    }

    .correct-answer {
      background-color: #c8e6c9;
    }

    .submit-button {
      display: block;
      margin: 0 auto;
      padding: 10px 20px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    .result-message {
      font-weight: bold;
      text-align: center;
      margin-top: 20px;
    }
 .result-message2 {
      font-weight: bold;
      text-align: center;
      margin-top: 20px;
    }

    .score {
      text-align: center;
      margin-top: 10px;
    }
    
    .score2 {
      text-align: center;
      margin-top: 10px;
    }
  </style>
  <script>
    var timeLimit = 5 * 60;
    var timerInterval;
    var correctAnswers = [1, 1, 1, 1];
    var userAnswers = [];

    function startTimer() {
      document.getElementById("startButton").disabled = true;
      document.getElementById("startButton").textContent = "Σε εξέλιξη...";
      timerInterval = setInterval(updateTimer, 1000);
    }

    function updateTimer() {
      timeLimit--;
      var seconds = timeLimit % 60;
      var progressBarWidth = (timeLimit / (5 * 60)) * 100;
      document.getElementById("timer").textContent = formatTime(timeLimit);
      document.getElementById("progressBar").style.width = progressBarWidth + "%";

      if (timeLimit <= 0) {
        clearInterval(timerInterval);
        document.getElementById("timer").textContent = "Τέλειωσε ο χρόνος σου!";
        document.getElementById("submitButton").disabled = true;
        submitAnswers();
      } else if (timeLimit === 60) {
        document.getElementById("timer").textContent = "Τελευταίο λεπτό";
        setTimeout(function() {
          document.getElementById("timer").textContent = formatTime(timeLimit);
        }, 5000);
      } else if (timeLimit <= 30) {
        document.getElementById("timer").textContent = "Έχεις ακόμα 30 δευτερόλεπτα";
            setTimeout(function() {
          document.getElementById("timer").textContent = formatTime(timeLimit);
        }, 5000);
      }
    }

    function formatTime(seconds) {
      var minutes = Math.floor(seconds / 60);
      seconds = seconds % 60;
      return minutes.toString().padStart(2, "0") + ":" + seconds.toString().padStart(2, "0");
    }

    function saveAnswer(questionNumber, answer) {
      userAnswers[questionNumber] = answer;
      document.getElementById("answerButton_" + questionNumber).disabled = true;
      checkAllAnswers();
    }

   function checkAllAnswers() {
    var answerButtons = document.getElementsByClassName("answer-button");
    var allAnswered = true;

    for (var i = 0; i < answerButtons.length; i++) {
      if (!answerButtons[i].disabled) {
        allAnswered = false;
        break;
      }
    }

    if (allAnswered) {
      document.getElementById("submitButton").disabled = false;
    } else {
      document.getElementById("submitButton").disabled = true;
    }
  }

    function saveAnswer(questionNumber, answer) {
    userAnswers[questionNumber] = answer;
    document.getElementById("answerButton_" + questionNumber).disabled = true;
    checkAllAnswers();
  }

    function submitAnswers() {
      clearInterval(timerInterval);

      var correctCount = 0;
      for (var i = 0; i < correctAnswers.length; i++) {
        var userAnswer = userAnswers[i];
        var correctAnswer = correctAnswers[i];
        var answerElement = document.getElementById("answer_" + i);

        if (userAnswer === correctAnswer) {
          answerElement.classList.add("correct-answer");
          correctCount++;
        }
      }

      var percentage = (correctCount / correctAnswers.length) * 100;
      var resultMessage;
      if (percentage > 80) {
        resultMessage = "Μπράβο, τα κατάφερες!";
      } else if (percentage >= 60 && percentage <= 79) {
        resultMessage = "Μπράβο!";
      } else {
        resultMessage = "Ήθελες λίγο ακόμα. Πολύ καλή προσπάθεια!";
      }
showResults();
      document.getElementById("resultMessage").textContent = resultMessage;
      document.getElementById("score").textContent = "Βαθμολογία: " + percentage.toFixed(2) + "%";
      document.getElementById("submitButton").style.display = "none";

      var completionTime = 5 * 60 - timeLimit;
      document.getElementById("completionTime").textContent = "Χρόνος Ολοκλήρωσης: " + completionTime + " δευτερόλεπτα";

      document.getElementById("testContainer").style.display = "none";
      document.getElementById("resultsContainer").style.display = "block";
    }
    function showResults() {
  clearInterval(timerInterval);

  var correctCount = 0;
  for (var i = 0; i < correctAnswers.length; i++) {
    var userAnswer = userAnswers[i];
    var correctAnswer = correctAnswers[i];
    var answerElement = document.getElementById("answer_" + i);

    if (userAnswer === correctAnswer) {
      answerElement.classList.add("correct-answer");
      correctCount++;
    }
  }

  var percentage = (correctCount / correctAnswers.length) * 100;
  var grade;
  var gradeMessage;
  var resultMessage;

  if (percentage >= 0 && percentage <= 39) {
    grade = 7;
    resultMessage = "Ήθελες λίγο ακόμα. Καλή προσπάθεια!";
  } else if (percentage >= 40 && percentage <= 59) {
    grade = 8;
    resultMessage = "Πολύ καλή προσπάθεια!";
  } else if (percentage >= 60 && percentage <= 79) {
    grade = 9;
    resultMessage = "Μπράβο!";
  } else if (percentage >= 80 && percentage <= 100) {
    grade = 10;
    resultMessage = "Μπράβο, τα κατάφερες!";
  }

  gradeMessage = "Βαθμός = " + grade;

  document.getElementById("resultMessage2").textContent = resultMessage;
  document.getElementById("score2").textContent = "Βαθμολογία: " + percentage.toFixed(2) + "% " + gradeMessage;

  var completionTime = 5 * 60 - timeLimit;
  document.getElementById("completionTime").textContent = "Χρόνος Ολοκλήρωσης: " + completionTime + " δευτερόλεπτα";

  document.getElementById("submitButton").style.display = "none";
  document.getElementById("testContainer").style.display = "none";
  document.getElementById("resultsContainer").style.display = "block";
}

  </script>
</head>
<body>
  <div id="testContainer" class="test-container">
    <h1>Τεστ HTML</h1>
    <p>Καλή επιτυχία στο τεστ!</p>
    <button id="startButton" onclick="startTimer()">Έναρξη</button>
    <div class="timer-bar">
      <div id="progressBar" class="progress-bar"></div>
    </div>
    <div id="timer">Χρόνος: 05:00</div>
    <br>
    <div class="question">
      <p>Ερώτηση 1: Ποια είναι η πρωτεύουσα της Ελλάδας;</p>
      <div class="answer" id="answer_0">
        <input type="radio" name="answer_1" value="1"> Αθήνα
      </div>
      <div class="answer" id="answer_1">
        <input type="radio" name="answer_1" value="2"> Θεσσαλονίκη
      </div>
      <div class="answer" id="answer_2">
        <input type="radio" name="answer_1" value="3"> Πάτρα
      </div>
      <button id="answerButton_0" onclick="saveAnswer(0, parseInt(document.querySelector('input[name=answer_1]:checked').value)); checkAllAnswers();" class="answer-button">Κλειδώνω απάντηση</button>
    </div>

    <div class="question">
      <p>Ερώτηση 2: Ποια είναι η μεγαλύτερη ήπειρος στον κόσμο;</p>
      <div class="answer" id="answer_3">
        <input type="radio" name="answer_2" value="1"> Αφρική
      </div>
      <div class="answer" id="answer_4">
        <input type="radio" name="answer_2" value="2"> Ασία
      </div>
      <div class="answer" id="answer_5">
        <input type="radio" name="answer_2" value="3"> Ευρώπη
      </div>
      <button id="answerButton_1" onclick="saveAnswer(1, parseInt(document.querySelector('input[name=answer_2]:checked').value)); checkAllAnswers();" class="answer-button">Κλειδώνω απάντηση</button>
    </div>

    <div class="question">
      <p>Ερώτηση 3: Ποια είναι η πρωτεύουσα της Γερμανίας;</p>
      <div class="answer" id="answer_6">
        <input type="radio" name="answer_3" value="1"> Βερολίνο
      </div>
      <div class="answer" id="answer_7">
        <input type="radio" name="answer_3" value="2"> Μόναχο
      </div>
      <div class="answer" id="answer_8">
        <input type="radio" name="answer_3" value="3"> Φρανκφούρτη
      </div>
     <button id="answerButton_2" onclick="saveAnswer(2, parseInt(document.querySelector('input[name=answer_3]:checked').value)); checkAllAnswers();" class="answer-button">Κλειδώνω απάντηση</button>
    </div>
 <div class="question">
      <p>Ερώτηση 4: Ποια είναι η πρωτεύουσα της Iταλίας;</p>
      <div class="answer" id="answer_9">
        <input type="radio" name="answer_4" value="1"> Ρώμη
      </div>
      <div class="answer" id="answer_10">
        <input type="radio" name="answer_4" value="2"> Νάπολη
      </div>
      <div class="answer" id="answer_11">
        <input type="radio" name="answer_4" value="3"> Σε
      </div>
     <button id="answerButton_3" onclick="saveAnswer(3, parseInt(document.querySelector('input[name=answer_4]:checked').value)); checkAllAnswers();" class="answer-button">Κλειδώνω απάντηση</button>
    </div>
    <button id="submitButton" onclick="submitAnswers()" disabled>Υποβολή</button>
  </div>

  <div id="resultsContainer" class="test-container" style="display: none;">
    <div class="result-message" id="resultMessage2"></div>
    <div class="score" id="score2"></div>
    <div class="score" id="completionTime"></div>
  </div>
</body>
</html>

➤ΕΠΙΣΤΡΟΦΗ