Tetsi Tech

Κινούμενο Widget που δεν χάνεται ποτέ από τα μάτια σας!

2022-03-04T01:20:00.001+02:00

Κάντε το widget σας να μετακινείτε πάνω κάτω, έτσι ώστε να μη χάνεται ποτέ από τα μάτια σας.

Απενεργοποιείστε το δεξί κλικ στο blog σας

2022-03-03T22:57:00.000+02:00

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

Όμορφη ειδοποίηση του Blogger για τα Cookies

2022-03-03T02:20:00.000+02:00

Κάθε φορά που ένας επισκέπτης του blogger blog σας επισκέπτεται τη σελίδα σας για πρώτη φορά, βλέπει στο επάνω μέρος της σελίδας μια ειδοποίηση για τα Cookies.

Η ειδοποίηση λέει το εξής:

Αυτός ο ιστότοπος χρησιμοποιεί cookie από τη Google για την παροχή των υπηρεσιών του, για την εξατομίκευση διαφημίσεων και για την ανάλυση της επισκεψιμότητας. Η Google κοινοποιεί πληροφορίες σχετικά με την από μέρους σας χρήση αυτού του ιστότοπου. Με τη χρήση αυτού του ιστότοπου, αποδέχεστε τη χρήση των cookie.

Για να εξαφανιστεί η μπάρα ειδοποίησης, θα πρέπει ο αναγνώστης σας να πατήσει το κουμπάκι ΟΚ.

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

Υπάρχει τρόπος να αποκρύψετε τελείως την ειδοποίηση αυτή, με την προϋπόθεση ότι θα ενημερώνετε με κάποιο άλλο script τους αναγνώστες σας. Επειδή όμως είναι επικίνδυνο να τιμωρηθεί το blog σας από τον blogger, γι' αυτό και δε θα σας δείξω πως γίνεται.

Αντ' αυτού μπορείτε, χωρίς να παρανομείτε, να προσαρμόσετε την εμφάνιση της ειδοποίησης αυτής με τον παρακάτω τρόπο:

Πηγαίνετε στον blogger > Θέμα > Προσαρμογή και επιλέξτε Δημιουργία αντίγραφου ασφαλείας
Μετά επιλέξτε Προσαρμογή > Επεξεργασία HTML και κάντε κλικ σε κάποιο σημείο του κώδικά σας για να πάρει την εστίαση.
Πατήστε Ctrl + F και κάντε αναζήτηση του: ]]></b:skin>
Αμέσως κάτω από το ]]></b:skin> κάνουμε επικόλληση τον παρακάτω κώδικα:


<!--Custom EU Cookies Notice by TetsiTech.blogspot.com--> 
<script type="text/javascript"> 
  cookieOptions = { 
    msg: "Αυτός ο ιστότοπος χρησιμοποιεί cookie από τη Google για την παροχή των υπηρεσιών του, για την εξατομίκευση διαφημίσεων και για την ανάλυση της επισκεψιμότητας. Η Google κοινοποιεί πληροφορίες σχετικά με την από μέρους σας χρήση αυτού του ιστότοπου. Με τη χρήση αυτού του ιστότοπου, αποδέχεστε τη χρήση των cookie.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "ok!", 
    learn: "Περισσότερα..." }; 
</script>

Ακριβώς επάνω από το ]]></b:skin> κάνουμε επικόλληση έναν από τους δύο παρακάτω κώδικες, ανάλογα με την επιλογής σας:

1η περίπτωση (απλή μορφή)


/* TetsiTech.blogspot.com */
.cookie-choices-info {z-index:999999!important;top: initial!important;bottom: 0!important;background-color:#333333!important;border-top: 1px solid #6FC415;box-shadow: 1px -2px 4px #707070!important; padding:3px 0px!important;}
.cookie-choices-text{font-size:14px !important; color:#dddddd!important;}
.cookie-choices-button{background-color: #6FC416!important;border-radius: 1px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}

Εάν θέλετε, μπορείτε να κάνετε τις ακόλουθες αλλαγές:

Αλλάξτε το χρώμα φόντου της μπάρας με αλλαγή του #333333
Αλλάξτε το πράσινο περιθώριο που εμφανίζεται στο κάτω μέρος της μπάρας με αλλαγή του #6FC415
Αλλάξτε το χρώμα της γραμματοσειράς με αλλαγή του #dddddd
Αλλάξετε το χρώμα του φόντου των κουμπιών με αλλαγή του #6FC416

2η περίπτωση (όμορφη σχεδίαση)


/* TetsiTech.blogspot.com */
.cookie-choices-inner:before {
        content: url(URL_ΕΙΚΟΝΑΣ)!important;
        display: flex!important;justify-content: center!important;}
  
.cookie-choices-info {right: 1em!important;left: auto!important;z-index:999!important;background-color:#333333!important;opacity: 0.9;border-bottom: 1px solid #6FC415;box-shadow: 1px 2px 2px #000!important;padding:3px 0px!important;position: fixed;border: 3px solid #8AC007;top: initial!important;bottom: 1.5em!important;width: 25em!important;border-radius: 22px 22px 22px 22px;}
  
.cookie-choices-info .cookie-choices-text{font-size:14px !important;color:#dddddd!important;}
  
.cookie-choices-text{text-align: justify!important;}
  
.cookie-choices-info .cookie-choices-button{background-color: #6FC415!important;border-radius: 6px!important;box-shadow: 2px 3px 2px #000!important;padding:6px 12px!important;text-transform: none!important;font-weight: normal!important;color: #000!important;}
  
.cookie-choices-buttons {margin: 10px 10px!important;}
@media screen and (max-width: 576px) {.cookie-choices-info {width: 300px!important;left: 50%!important;margin-left: -150px!important;font-size: 12px!important;}}

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

Εάν θέλετε το πλαίσιο να εμφανίζεται αριστερά της οθόνης, αλλάξτε το:
right: 1em!important;left: auto!important; με το:
right: auto!important;left: 1em!important;

Αλλάξτε τη λέξη URL_ΕΙΚΟΝΑΣ με το URL κάποιας εικόνας της επιλογής σας, είτε από αυτές που σας παραθέτω παρακάτω, είτε από τις δωρεάν που υπάρχουν στο iconfinder.com

https://blogger.googleusercontent.com/img/a/AVvXsEi9RUPC6OiZlytm_ob_hamMu17ujxi_vJfYYy1IW7DY6v_SH9-GQPauaFm1PH0bTDeD4rjmdZzTgQHpkzTROM2AuUgA1eL-mOBR4qbKhDz58Uo4mkP4Iq7rOJHImVh3osg7S6-a_ILYJYA9QMEZ647a0_HlrXnZok8X2Ls2VyqJ6zyQGVAuBE_9BHV-=s100

https://blogger.googleusercontent.com/img/a/AVvXsEhm79ZbY14Y0Gc-LsJDlZg80DleyG_iIPQtx1nuRkcEe_h1aKEAaC7KXxmODRb03c9QQVsALk8pWpR2aVIxNi4Y6W6-VXF7jq5MaQ9E6xifop-54t0U8E_coWszoJntE7jmga7nEBrWkalQcYy5Goro_ovOiMCdSfqLNuDPJO6z2i5Y77ozdSLrdhvQEA

https://blogger.googleusercontent.com/img/a/AVvXsEhijA0rc5QGYW1AeV1gB8UU7WagUkpdvJWqX3uvandNcOnigjVgzDcSfaF3Rdxq5R14IlU9wnqV97aRhOfuTVkuCm6Dsiu-kv8dlqJZ96tv6ECA43UC-q_wkSnuTfZUH-ezhQuAIcT2zbrcz41-rW1LuRp8dn5o2v1_My1e5_xFXgs2w6aJUmhCdRpCvg=s128

https://blogger.googleusercontent.com/img/a/AVvXsEi6tu37RmNt6KnZhoVUnvkG8l9v64PGFe8UsCQw5aU2gvQ2-009YhFT9V0uPGupuDFnDqfDIz7T2ljQRK_mFPCVv1YjJXlS27rZdcQvmbga5E3l8pkduLTRWmF_VwJwtsjIQN_H5yljko7rXDZYfqN5ihEzESii08te67oQqxdvz04ij8QS-DCuFcoEXQ

https://blogger.googleusercontent.com/img/a/AVvXsEg3RVUBHQ1K53BHPXxJ4O68142HYke-6wb79ElL4un17vwxKA1JH9895PdCEDJuQKUmxJOC2mznnSQhyRQIq27xEi7iR4KpWcg8sVxZIb2z-NX108Y3_Sl14H1MmSjo86R64vMweSeRx9HhlpWa73bfoENpWkE_hwl3xn_4VObOFUblVRIVqWlkEmDjow

Αποθηκεύστε το πρότυπό σας και θεωρητικά τελειώσατε!

Ναι αλλά πως θα δοκιμάσετε την ειδοποίηση εφόσον δε μπορείτε να τη δείτε;

Θα πρέπει να διαγράψετε τα cookies του blog σας.
Αυτό γίνεται σε όλους τους Browsers με παρόμοιο τρόπο. Εγώ θα σας δείξω τη διαδικασία στον Google Chrome αλλά περίπου με την ίδια διαδικασία, εάν ψάξετε τον Browser σας, θα βρείτε τη λύση.

Πάμε λοιπόν στις Ρυθμίσεις του Chrome και στην αναζήτηση γράφουμε τη λέξη cookie.
Επιλέγουμε Εμφάνιση cookie και άλλων δεδομένων ιστότοπου και στη νέα καρτέλα που θα ανοίξει επιλέγουμε Εμφάνιση όλων των δεδομένων και των αδειών ιστοτόπου.
Στην τελευταία καρτέλα υπάρχει ένα νέο πεδίο αναζήτησης και εκεί ψάχνουμε το όνομα του blog μας.
Όταν το βρούμε πατάμε το εικονίδιο με τον κάδο που υπάρχει δίπλα του και επιβεβαιώνουμε τη διαγραφή.
Τώρα εάν κάνουμε ανανέωση το blog μας θα εμφανιστεί η ειδοποίηση των Cookies έτσι όπως την έχουμε διαμορφώσει.

that's all no more
Thank you!

Βάλτε κινούμενα σύννεφα στο Header σας

2022-03-02T01:45:00.000+02:00

Βάλτε με πολύ εύκολο τρόπο, στην Κεφαλίδα (Header) του blog σας, κινούμενα σύννεφα ή μία δικιά σας εικόνα η οποία θα κινείτε προς τα επάνω.

Πώς να χωρίσετε το περιεχόμενο του άρθρου σε στήλες στον Blogger;

2022-02-26T00:52:00.004+02:00

Πώς να χωρίσετε το περιεχόμενο του άρθρου σε δύο και τρεις στήλες στον Blogger; Read more »

Preloader για γρήγορη φόρτωση του blog σας

2022-02-25T20:49:00.002+02:00

Ένα όμορφο κολπάκι, όπου δείχνει στον αναγνώστης σας ότι το blog φορτώνει. Μετράει από το 1% έως το 100% και εμφανίζει το blog σας έτοιμο για ανάγνωση χωρίς να πρέπει να περιμένουμε πότε θα εμφανιστούν οι φωτογραφίες και τα widget σας.

Blogger Gadget κοινωνικής δικτύωσης με κινούμενα φορτηγάκια!!! (Πολύ καλό)

2022-02-22T23:31:00.000+02:00

Ένα πολύ όμορφο widget με κινούμενα σχέδια στο κάτω μέρος του blog σας θα περνάνε αυτά τα τρία φορτηγά και αν κάποιος κάνει κλικ επάνω τους, μεταβαίνει στην τοποθεσία που έχουμε ορίσει. Είναι πολύ εύκολο στη χρήση και κάνει πολύ καλή εντύπωση στον επισκέπτη του blog σας.

Read more »

Χρωματίστε τους κώδικές σας με το Prettify

2022-02-22T01:16:00.000+02:00

Όσοι blogger θέλετε να δείξετε ένα τμήμα κώδικα μέσα σε κάποιο άρθρο σας, μπορείτε να το κάνετε με το Google Code Prettify. Μπορεί να αναγνωρίσει από μόνο του πολλούς κώδικες όπως HTML, CSS, JavaScript, Python κλπ. και να τους χρωματίζει με πολύ ωραίο τρόπο. Είναι εύκολο στη χρήση και δεν καθυστερεί το blog σας.
Read more »

css3 Webkit Scrollbars - Αλλάξτε την πλευρική μπάρα

2013-08-08T03:27:00.001+03:00

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

Auto Scroll Widget στο blog σας

2013-08-06T22:37:00.004+03:00

Η κύρια ιδέα του widget είναι πολύ απλή. Η σελίδα αρχίζει να κινείται μόνη της, όταν πατηθεί το κουμπί play και η κύλιση σταματά όταν πατηθεί το κουμπί pause.

Πανέμορφη φόρμα επικοινωνίας για τον Blogger

2013-08-06T04:28:00.000+03:00

Βάλτε στο blog σας αυτή την κομψή φόρμα επικοινωνίας έτσι ώστε να μπορεί κάποιος να σας στέλνει μήνυμα από ένα πολύ όμορφο περιβάλλον.

Πώς να Προσαρμόσετε το Lightbox του Blogger

2013-07-02T04:01:00.000+03:00

Όσοι έχετε επιλέξει να χρησιμοποιείτε την προβολή Lightbox του Blogger για να εμφανίσετε τις εικόνες σας, έχετε τώρα τη δυνατότητα να αλλάξετε το στυλ της σε ένα τελείως διαφορετικό. Μπορείτε να προσαρμόσετε το Lightbox εξ ολοκλήρου στο γούστο σας.

Φτιάξτε δικό σας διαφημιστικό banner με κινούμενα γράμματα!

2013-06-19T01:25:00.001+03:00

Ένα πολύ όμορφο banner με κινούμενα γράμματα που μπορείτε να βάλετε στο blog σας, για να τονίσετε κάποια φράση.

Διαφημιστικά μπανεράκια 125x125 στο blog σας

2013-06-17T22:41:00.000+03:00

Τοποθετήστε στην πλαϊνή μπάρα του blog σας, ένα widget με τέσσερα διαφημιστικά banner.
Μπορείτε να βάλετε δικές σας διαφημίσεις ή να επιλέξετε κάποιες έτοιμες από εδώ

Πρόβλημα: Δύο φορές το Meta Tag Description

2013-05-30T02:00:00.003+03:00

Υπάρχει μεγάλη πιθανότητα το template του blog σας να έχει ένα μικρό σφάλμα που επηρεάζει το SEO και πρέπει να διορθώσετε. Είτε στην αρχική σελίδα του blog σας, είτε σε κάποια ανάρτησή σας, μπορεί να είναι τοποθετημένη δύο φορές η ετικέτα Meta Description.

Βελτιστοποίηση του τίτλου για καλύτερο SEO

2013-05-29T20:26:00.000+03:00

Η ετικέτα τίτλου υποδεικνύει στους χρήστες και στις μηχανές αναζήτησης το θέμα της συγκεκριμένης σελίδας.

Για τις μηχανές αναζήτησης, όπως η Google, ο τίτλος είναι το πιο κρίσιμο κομμάτι των πληροφοριών, προκειμένου να καθορίσουν το περιεχόμενο της ιστοσελίδας.

Αλλάξτε το scrollbar στο blog ή το site σας (webkit-scrollbar)

2013-05-25T19:02:00.001+03:00

Πολλοί ιστότοποι θα δείτε ότι δεν έχουν τα συνηθισμένα scrollbar (μπάρες δεξιά και κάτω στον browser) όπως για παράδειγμα το Gmail όταν συνδεόμαστε μέσω Google Chrome. Αυτό γίνετε με έναν μικρό κώδικα CSS που δεν επιβαρύνει τη ταχύτητα του blog σας. Δείτε τα παραδείγματα, για να το κάνετε και εσείς.

Πως σκανάρουμε το blog μας για κακόβουλο (Malware) κώδικα.

2013-04-30T17:34:00.004+03:00

Με την επιλογή ενός δωρεάν προτύπου για το Blog μας, παίρνουμε συχνά το ρίσκο να περιέχει κρυμμένο μέσα στον κώδικά του ένα κακόβουλο (Malware) script. O ιδανικός τρόπος για την αντιμετώπιση αυτών των περιπτώσεων είναι να κάνουμε έναν έλεγχο-σάρωσης του προτύπου μας, με τη βοήθεια κάποιων online εργαλείων που διατίθενται στο διαδίκτυο. Δείτε μερικά τέτοια προγράμματα παρακάτω...

Πώς αφαιρούμε μια προειδοποίηση για κακόβουλο λογισμικό (Malware) από το Blog μας.

2013-04-30T16:30:00.000+03:00

Μήπως blog σας έχει μολυνθεί από κάποιο είδος κακόβουλου κώδικα; Μήπως λαμβάνετε μία περίεργη ειδοποίηση, όπως "Danger Malware ahead" κάθε φορά που προσπαθείτε να αποκτήσετε πρόσβαση στο blog σας;

Κείμενο σε κορδέλα

2013-04-21T05:06:00.001+03:00

Τονίστε ένα κείμενο μέσα σε μια όμορφη κορδέλα, με χρήση CSS.

Χρωματιστό περιστρεφόμενο Menu

2013-04-21T04:37:00.001+03:00

Ένα όμορφο και "παιχνιδιάρικο" menu όπου τα χρωματιστά του φύλλα περιστρέφονται όταν το ποντίκι περνάει από πάνω τους.

Σκιά στην κορυφή του blog σας

2013-04-21T03:38:00.001+03:00

Με τη χρήση CSS και μόνο, μπορούμε να βάλουμε σκιά στο επάνω μέρος του blog ή site μας. Δείτε πως θα το κάνετε με πολύ εύκολο τρόπο...

Μαθήματα HTML

2013-04-20T00:12:00.000+03:00

Μάθετε τα πάντα για την HTML.

Εδώ θα βρείτε συγκεντρωμένα τα καλύτερα ξένα και Ελληνικά μαθήματα, έτσι ώστε να μάθετε να γράφετε κώδικα HTML ή για να ανατρέξετε στο μέλλον και να θυμηθείτε κάποια ετικέτα που έχετε ξεχάσει.

Περιστρεφόμενο Social Share Widget

2013-04-17T00:24:00.003+03:00

Ένα πολύ όμορφο Social Share Widget που όταν μεταβείτε επάνω του περιστρέφεται έως ότου εμφανιστούν όλα τα εικονίδιά του.

Εκπληκτικό zoom στις εικόνες σας

2013-04-09T01:30:00.113+03:00

Ένα υπέροχο εφέ για να βάλετε στις εικόνες σας, έτσι ώστε όταν περνάει το ποντίκι από πάνω τους, να μεγενθύνεται η εικόνα.