Δημιουργία προβολής πλήκτρων πλήρους σελίδας με CSS & RSS Widgets

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

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

news ticker Όταν είστε blogger, είναι πραγματικά σημαντικό να παραμείνετε μέχρι την ταχύτητα με τα τελευταία νέα μέσα στην ιδιαίτερη θέση σας. Οι άνθρωποι σας παίρνουν πιο σοβαρά όταν είστε ένας από τους πρώτους που καλύπτουν ένα σημαντικό γεγονός - ακόμα περισσότερο αν το καλύψετε πριν τα μεγάλα mainstream μέσα μασκαρίσουν ακόμη και τον άνεμο.

Εάν είστε δημοσιογράφος ειδήσεων, η σημασία της ενημέρωσης σχετικά με τη διακοπή ειδήσεων είναι ακόμη πιο κρίσιμη. Από τότε που άρχισα να καλύπτω περισσότερα γεγονότα που σχετίζονται με ειδήσεις στο blog μου, συνειδητοποίησα πόσο σημαντικό ήταν να παρακολουθώ συνεχώς τα νέα σε πραγματικό χρόνο. Δεδομένου ότι χρησιμοποιώ δύο οθόνες με το φορητό υπολογιστή μου, συνειδητοποίησα ότι θα μπορούσα να δημιουργήσω μια οθόνη για να είναι αποκλειστικά για streaming εισερχόμενων news tickers.

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

Δημιουργία της δικής σας πλήρους σελίδας εμφάνισης ειδήσεων σε πραγματικό χρόνο

Για να λύσω αυτό το πρόβλημα, συνειδητοποίησα ότι θα έπρεπε να κάνω κάτι μόνος μου. Δεδομένου ότι πραγματικά δεν ήθελα να αφιερώσω χρόνο για να γράψω μια ολόκληρη αίτηση, αποφάσισα να δημιουργήσω μια ιστοσελίδα με τα ενσωματωμένα ρεύματα RSS. Θα μπορούσα να προβάλω τη σελίδα ανοίγοντας το πρόγραμμα περιήγησης σε λειτουργία πλήρους οθόνης.

Τα εργαλεία που χρησιμοποίησα για τη δημιουργία αυτής της σελίδας και το μόνο που χρειάζεστε για να δημιουργήσετε τη δική σας είναι ένα δωρεάν πρότυπο ιστοσελίδας με βάση το CSS (επέλεξα το δωρεάν πρότυπο επιχειρήσεων που δημιουργήθηκε από το SliceJack) και έναν Λογαριασμό Google για πρόσβαση στα Στοιχεία Google Web και Ειδοποιήσεις Google.

Ακολουθεί το πρότυπο επιχειρηματικού προτύπου από το SliceJack που μοιάζει με πριν πριν αρχίσω να χτυπάω τον κώδικα υποβάθρου.

news ticker

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

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

free ticker ειδήσεων

Όταν κάνετε λήψη του προτύπου στον δικό σας υπολογιστή, θα βρείτε το αρχείο index.html στον κύριο φάκελο, αλλά στη συνέχεια τα αρχεία .css σε ένα φάκελο μορφοτύπων. Προβολή του αρχείου index.html, είναι συνήθως αρκετά εύκολο να βρείτε τις ενότητες που θέλετε να τροποποιήσετε. Σε αυτή την περίπτωση, επεξεργάζομαι την κορυφαία γραμμή για να εμφανίσετε τα " My News " και να αλλάξετε τις συνδέσεις μενού σε διαφορετικές κατηγορίες για τις οποίες πρόκειται να δημιουργήσω επιπλέον σελίδες ειδήσεων.

free ticker ειδήσεων

Μπορείτε συνήθως να βρείτε τα τμήματα της σελίδας αναζητώντας τις ετικέτες. Η παράμετρος "id =" σας λέει ποιο στοιχείο CSS χρησιμοποιείται για τον ορισμό της μορφοποίησης. Ωστόσο, σε αυτή την περίπτωση είμαι απλά να σβήσω ολόκληρη την ενότητα που ορίζεται από ". Είναι πραγματικά τόσο εύκολο όσο απλά να διαγράψετε το τμήμα από τη σελίδα.

Το επόμενο πράγμα που θέλω να κάνω στο πρότυπο είναι να αλλάξω τη στήλη της δεξιάς πλευρικής στήλης σε μια ροή ειδήσεων συνεχούς ροής από το YouTube. Πρώτα, προσδιορίστε ξανά την ενότητα που θέλετε να αντικαταστήσετε με τις ετικέτες. Βρήκα το δεξί τμήμα της γραμμής πλευρικής γραμμής μέσα στην ετικέτα div "sidebar".

free ticker ειδήσεων

Δεν μου αρέσει το χρώμα αυτού του τμήματος (είναι γκρίζο και θα φαίνεται ανόητο με ένα λευκό βίντεο μέσα σε αυτό), οπότε πρέπει να το αλλάξω σε λευκό. Βρείτε το κύριο αρχείο css και αναζητήστε το αναγνωριστικό. Βρήκα "sidebar" μέσα στο main.css και το φόντο έχει οριστεί σε #FFF. Για να αλλάξω στο λευκό, έκανα αυτό το # 000.

επιτραπέζιο news ticker

Ενσωματώστε τα γραφικά στοιχεία στην προσαρμοσμένη σελίδα σας

Τώρα για το διασκεδαστικό μέρος. Μόλις έχετε τη σωστή μορφοποίηση, μπορείτε να ξεκινήσετε την ενσωμάτωση ροών ροής στη σελίδα σας. Το πρώτο πράγμα που θέλω να κάνω είναι να ενσωματώσετε το στοιχείο YouTube από το στοιχείο [NO LONGER WORKS] Google Web Elements.

επιτραπέζιο news ticker

Μπορείτε να επιλέξετε την πηγή ειδήσεων που θέλετε και στη συνέχεια να αντιγράψετε και να επικολλήσετε τον κώδικα. Στην πραγματικότητα, θα μπορούσατε να δημιουργήσετε ολόκληρη τη σελίδα ειδήσεων συνεχούς ροής με μόνο τα στοιχεία Google Web Elements χρησιμοποιώντας το στοιχείο Google Reader. Ωστόσο, θέλω να δείξω πόσες πηγές είναι διαθέσιμες για ενημερώσεις σε πραγματικό χρόνο. Πριν συνεχίσετε, σίγουρα φροντίστε να τραβήξετε το Google News Element και αντιγράψτε και επικολλήστε αυτόν τον κώδικα στη σελίδα σας επίσης.

επιτραπέζιο news ticker

Ένας άλλος μεγάλος πόρος για να αποκτήσετε ειδήσεις μέσω RSS είναι το FeedWind. Μου αρέσει πραγματικά επειδή απλά επικολλάτε την τροφή που θέλετε, προσαρμόστε και σας δίνει ένα ωραίο, καθαρό widget που μπορείτε να ενσωματώσετε στη σελίδα σας.

Δημιουργία προβολής πλήρους σελίδας ειδήσεων σελίδας με CSS & RSS widgets newsticker9

Επίσης, εάν πρόκειται να παρακολουθείτε τις ειδήσεις μέσα σε μια συγκεκριμένη θέση, δεν μπορείτε να ξεχάσετε να παρακολουθείτε την αναζήτηση Google μέσα σε αυτή την εξειδικευμένη θέση. Στο Google Alerts, απλά επιλέξτε "Feed" στο πεδίο "Deliver to".

Δημιουργία προβολής πλήρους σελίδας με πλήρεις σελίδες με CSS & RSS Widgets newsticker10

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτήν τη διεύθυνση URL ροής στο FeedWind για να δημιουργήσετε το γραφικό στοιχείο των αποτελεσμάτων αναζήτησης Google. Τώρα που όλες αυτές οι διαφορετικές πηγές ειδήσεων είναι ενσωματωμένες στη σελίδα - η οθόνη ειδήσεων συνεχούς ροής σε πραγματικό χρόνο ολοκληρώθηκε τελικά. Το επάνω μενού σας επιτρέπει να δημιουργήσετε πολλαπλές σελίδες όπως αυτό, με widgets που φέρνουν στοχοθετημένες πηγές ειδήσεων.

news ticker

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

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

Δημιουργήσατε τη δική σας σελίδα μαζί με αυτό το άρθρο; Κλείσατε οπουδήποτε, ή να ανακαλύψετε άλλες δροσερές πηγές για widget ειδήσεων σε πραγματικό χρόνο; Μοιραστείτε τις ιδέες σας στην παρακάτω ενότητα σχολίων.

Πίστωση εικόνας: ShutterStock

In this article