HTML5 Audio player with playlist

HTML5 Audio player with playlist
 

HTML5 audio player. Many of you faced with the task of creating audio player at least once in your life. Quite often , you simply choose one of the available players, often it was the flash player. However, you may have already noticed, that these flash players do not work properly on mobile devices (iPhone / Android). Today I am going to tell you about how to create your own audio player (using HTML5 technology). This player consists of next elements: title, author, cover, basic controls (play / pause, rewind / forward) , two sliders (jQuery UI sliders): volume slider and and a song tracker, and even more: we will also have a playlist with a list of available songs.

Live Demo

Turn Off the Lights with jQuery

Turn Off the Lights with jQuery

Turn Off the Lights with jQuery

http://helplogger.blogspot.gr/2013/10/turn-off-the-lights-jquery-plugin-for-blogger.html

Tiny jQuery Circleslider for Blogger

Tiny jQuery Circleslider for Blogger

Tiny jQuery Circleslider for Blogger

http://helplogger.blogspot.gr/2013/10/how-to-add-tiny-jquery-circleslider-to.html

Add a Floating Sticky Footer Bar

How To Add a Floating Sticky Footer Bar in Blogger

How To Add a Floating Sticky Footer Bar in Blogger

http://helplogger.blogspot.gr/2014/02/how-to-add-floating-sticky-footer-bar.html

jQuery Expand/Collapse Sliding Panel

jQuery Expand/Collapse Sliding Panel

Ένα πολύ ωραίο μενού...

Creating CSS3 Slideout Menu

Creating CSS3 Slideout Menu #5

CSS3 slideout menu tutorial. This is our fifth CSS3 menu. This will nice slideout menu with fading images (animated with transition effects). Make attention, that all these new effects (transitions) will work only in most fresh browsers like FF, Chrome, Safary browsers (possible in Opera too). But not in IE (transitions still not available here). I just added few hacks for IE – so menu will work here too (but not so smooth). Anyway – lets test our new menu.

CSSDeck - Online HTML, CSS and JS Code Editor

Online HTML, CSS and JS Code Editor (Sandbox) | CSSDeck

Online HTML, CSS and JS Code Editor (Sandbox) | CSSDeck


http://cssdeck.com/

και κάποια Tabs http://cssdeck.com/labs/t3tjomem
 

Creating Style CSS3 Navigation Dropdown Menu

 Creating Style CSS3 Navigation Dropdown Menu

Ενδιαφέροντα Navigation Dropdown Menu

https://www.script-tutorials.com/tag/menu/page/2/ 

Lightshot — Screenshot tool for Mac & Win

Lightshot — screenshot tool for Mac & Win

http://app.prntscr.com/en/ 

Changing Background and Size

Changing Background and Size

Αλλάζουμε την εικόνα με μια δική μας.Εάν η εικόνα μας είναι μικρότερη από το μέγεθος της σελίδας μας, προσθέτουμε τον παρακάτω κώδικα CSS  και το επιλύουμε....

WIDGETS ΓΙΑ ΔΙΑΣΚΕΔΑΣΗ

WIDGETS ΓΙΑ ΔΙΑΣΚΕΔΑΣΗ

Παρακάτω έχω συγκεντρώσει 5 widgets για νυχτερινή διασκέδαση, κινηματογράφο και τηλεόραση που μπορείτε να ενσωματώσετε στο ιστολόγιό σας. Μπαίνουν απλά σαν gadgets σε όποια πλευρική μπάρα του ιστολογίου σας θέλετε ή ακόμα και μέσα στον κώδικα html της ανάρτησής σας. Μπορείτε να τα ρυθμίσετε στο πλάτος και στο ύψος αλλάζοντας τα γαλάζια νούμερα μετά το width και το height. Μπορείτε επίσης να τα ρυθμίσετε πιο εξατομικευμένα πηγαίνοντας στην διεύθυνση που αναφέρω για το κάθε ένα.

Christmas All

ΧΙΟΝΟΠΤΩΣΗ ΣΤΟ BLOG ΣΑΣ Νο 1

 

Με τον παρακάτω σύντομο κώδικα μπορείτε να έχετε χιονόπτωση στο blog σας. Ο κώδικας αυτός μπάινει μέσα στο πρότυπο σας πρίν την ετικέτα </head> ή πρίν την ετικέτα </body>.

Μπορείτε να ορίσετε το minimun και το maxmun μέγεθος των νιφάδων του χιονιού ρυθμίζοντας  τα minSize:10, και maxSize:50. Μπορείτε να αυξομοιώσετε την ταχύτητα που πέφτουν οι νιφάδες του χιονιού αλλάζοντας το newOn:400, και τέλος μπορείτε να αλλάξετε και το χρώμα των νιφάδων του χιονιού αλλάζοντας το '#FFFFFF'.

ΧΡΙΣΤΟΥΓΕΝΙΑΤΙΚΑ ΤΡΑΓΟΥΔΙΑ ΓΙΑ ΤΟ BLOG ΣΑΣ

ΧΡΙΣΤΟΥΓΕΝΙΑΤΙΚΑ ΤΡΑΓΟΥΔΙΑ ΓΙΑ ΤΟ BLOG ΣΑΣ

 

Παρακάτω υπάρχουν τρείς κώδικες με χριστουγεννιάτικα τραγούδια για το blog σας. Μπορείτε να τους βάλετε σαν gadget σε όποια πλευρική μπάρα του ιστολογίου σας θέλετε ή στο υποσέλιδο ή ακόμα και εντός της ανάρτησης έτσι ώστε να μην παίξουν πάντα σε όλο το blog αλλά μόνο όταν ανοίξει κανείς να διαβάσει την συγκεκριμένη ανάρτηση που θα επιλέξετε να τοποθετήσετε τον κώδικα. Αν δεν θέλετε να ξεκινάνε αυτόματα κάντε το autostart ή το autoplay από true ► false.

ΕΜΦΑΝΙΣΗ ΑΝΑΡΤΗΣΕΩΝ ΣΕ GALLERY STYLE

ΠΩΣ ΝΑ ΕΜΦΑΝΙΖΟΝΤΑΙ ΟΙ ΑΝΑΡΤΗΣΕΙΣ ΤΟΥ BLOGGER ΣΕ GALLERY STYLE

Με την προσθήκη του παρακάτω κώδικα μπορείτε να αλλάξετε το στυλ εμφάνισης των αναρτήσεων του blogger από list view σε grid view ή αλλιώς σε gallery style. Ο κώδικας αυτός μπαίνει μέσα στο πρότυπο πρίν την ετικέτα </head> Ρυθμίστε το πλάτος width:300px; ανάλογα με το πόσο είναι το συνολικό πλάτος ανάρτησης που διαθέτετε και το πόσες αναρτήσεις θέλετε να εμφανίζονται ανα σειρά. Μπορούν να εμφανίζονται από 2 μέχρι 5 ανάλογα πάντα με το πλάτος που διαθέτετε. 

ΠΩΣ ΚΑΝΩ ΤΟ BLOG ΜΟΥ ΗΜΙΔΙΑΦΑΝΟ

ΠΩΣ ΚΑΝΩ ΤΟ BLOG ΜΟΥ ΗΜΙΔΙΑΦΑΝΟ.

Μπορείτε αν θέλετε να κάνετε το blog σας ημιδιάφανο και στα 4 τμήματά του (ανάρτηση, υποσέλιδο, πλευρικές μπάρες και κεφαλίδα) ή να αφήσετε μονομερώς σε κάποια από αυτά κάποιο χρώμα ή εικόνα φόντου. Οι παρακάτω οδηγίες είναι εφαρμόσιμες πλήρως στο πρότυπο που χρησιμοποιώ δηλαδή αυτό εδώ. Σε μερικά πρότυπα δεν υπάρχει η δυνατότητα για αλλαγή χρώματος ή εικόνας backround μονομερώς για την ανάρτηση, το υποσέλιδο τις πλευρικές μπάρες και την κεφαλίδα και σας επιτρέπουν να επιλέξετε ένα χρώμα ή μία εικόνα φόντου για την ανάρτηση π.χ. ενώ για το υποσέλιδο δεν υπάρχει αυτή η δυνατότητα.

Καλό θα ήταν να αλλάξετε πρότυπο αν θέλετε να αποφύγετε αυτούς τους περιορισμούς. Το πρότυπο που χρησιμοποιώ δέχεται τις περισσότερες δυνατές αλλαγές από κάθε άλλο πρότυπο του blogger και το επέλεξα για την δυνατότητα που δίνει για ημιδιάφανες πλευρικές μπάρες, ημιδιάφανη κεφαλίδα, ημιδιάφανο υποσέλιδο και στρογγυλεμένες άκρες αναρτήσεων και gadgets. Όσο για το ημιδιάφανο φόντο ανάρτησης που μας ενδιαφέρει περισότερο αυτό επιτυνχάνεται με την αντικατάσταση μιάς γραμμής κώδικα μέσα στο πρότυπο. Ξεκινάμε από αυτό λοιπόν.

BACKGROUND SLIDER FOR BLOGGER

BACKGROUND SLIDER FOR BLOGGER

Με τον παρακάτω κώδικα μπορείτε να προβάλετε όσες εικόνες θέλετε να εναλλάσονται σαν slides στη θέση του background του ιστολογίου σας. Την ταχύτητα εναλλαγής μπορείτε να την ρυθμίσετε αλλάζοντας το {speed: 400} ενώ το χρόνο που θα παραμένει κάθε φωτογραφία μπορείτε να τον ρυθμίσετε αλλάζοντας το [index]);}, 4000); Μπορείτε να αντικαταστήσετε τα πορτοκαλί links των εικόνων με τα δικά σας link εικόνων,

τα οποία καλό είναι να έχετε ανεβάσει στο Google+ για να έχετε την δυνατότητα να αλλάξετε τις διαστάσεις τους μέσα από τα link τους όπως έχω κάνει εγώ στα παρακάτω links εικόνων και τις έχω βάλει όλες σε μία μέση διάσταση 1600pxΧ1000px. Ο κώδικας πρέπει να μπεί μέσα στο πρότυπο πρίν την ετικέτα </head>.

ΔΕΙΤΕ ΤΟ BACKGROUND SLIDER ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG

CLICKABLE ΠΕΡΙΟΧΕΣ ΣΤΟ BACKGROUND ΓΙΑ ΔΙΑΦΗΜΙΣΕΙΣ

CLICKABLE ΠΕΡΙΟΧΕΣ ΣΤΟ BACKGROUND ΓΙΑ ΔΙΑΦΗΜΙΣΕΙΣ

Με τον παρακάτω κώδικα μπορούμε να ορίσουμε clickable περιοχες αριστερά και δεξιά από το ιστολόγιό μας στις οποίες θα υπάρχουν σχετικές διαφημιστικές εικόνες κολλημένες στην βασική εικόνα του background μας. Βασική προϋπόθεση είναι το ιστολόγιό μας να μην έχει συνολικό πλάτος κάτω από 1100px και να είναι κεντραρισμένο ώστε να περισεύουν αριστερά και δεξιά από 100 ως 200 px. Με ένα συνολικό πλάτος 1100px οι διαφημίσεις μας θα είναι ορατές ακόμα και σε ένα laptop με 15 ίντσες οθόνη και ανάλυση 1368Χ768. Δηλαδή 1100+120+120=1340 px.

Ο κώδικας αυτὀς μπαίνει απλά σαν gadget σε οποιοδήποτε σημείο του blog θέλετε.

ΕΙΚΟΝΑ BACKGROUND ΣΤΟ BLOG ΜΟΥ ΠΑΝΩ ΑΠΟ 300KB

ΠΩΣ ΒΑΖΩ ΕΙΚΟΝΑ BACKGROUND ΣΤΟ BLOG ΜΟΥ ΠΑΝΩ ΑΠΟ 300KB

Για να βάλουμε μία εικόνα για background στο blog μας η οποία να είναι πάνω από το όριο των 300KB που βάζει ο blogger πρέπει να πάμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκτρων Ctrl+F το body.background το οποίο βρίσκεται στην ενότητα /* Variable definitions και μεταξύ των γραμμών 140-160. Ο κώδικας σε εκείνο το σημείο θα εμφανίζεται κάπως έτσι.

Πως Αλλάζουμε Αυτόματα BACKGROUND στο Blog

ΠΩΣ ΝΑ ΑΛΛΑΖΕΙ ΤΟ BLOG ΣΑΣ ΑΥΤΟΜΑΤΑ BACKROUND ΚΑΘΕ 1 ΛΕΠΤΟ

Με τον παρακάτω κώδικα το blog σας θα αλλάζει αυτόματα backround κάθε 1 λεπτό. Δεν υπάρχει ο περιορισμός του blogger για εικόνες μέχρι 300 Kb. Μπορείτε να βάλετε 60 διαφορετικά backround 1 για κάθε λεπτό. Μπορείτε να βάλετε βέβαια και οσα λιγότερα θέλετε αλλάζοντας τα πράσινα νούμερα που αντιστοιχούν στα λεπτά της τρέχουσας ώρας. Αν θέλετε να εμφανίζονται 4 backround την ώρα θα κρατήσετε 4 γραμμές κώδικα και θα αλλάξετε τα λεπτά που θα εμφανίζονται οι εικόνες· π.χ. if(x>=0 && x<15), if(x>=15 && x<30), if(x>=30 && x<45) και if(x>=45 && x<0). Για την ευθυγράμμιση της εικόνας και την επαναληψή της θα ισχύσουν οι ρυθμίσεις που έχετε κάνει μέσα από την προσαρμογή του προτύπου. Ο κώδικας μπαίνει απλά σαν gadget.