Δημιουργήστε μια Πλήρης Σελίδα Εμφάνιση Ειδήσεων Ειδήσεων με Widgets CSS & RSS

Διαφήμιση

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

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

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

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

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

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

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

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

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

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

Συνήθως μπορείτε να βρείτε τις ενότητες της σελίδας αναζητώντας το

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

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

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

Τώρα για το διασκεδαστικό μέρος. Μόλις έχετε τη σωστή μορφοποίηση, μπορείτε να ξεκινήσετε την ενσωμάτωση ροών ροής στη σελίδα σας. Το πρώτο πράγμα που θέλω να κάνω είναι να ενσωματώσω το στοιχείο YouTube από [ΟΧΙ ΜΕΓΑΛΕΣ ΕΡΓΑΣΙΕΣ] Στοιχεία Ιστού Google.

Απλώς επιλέγετε την πηγή ειδήσεων που θέλετε και, στη συνέχεια, αντιγράψτε και επικολλήστε τον κώδικα. Στην πραγματικότητα, θα μπορούσατε να δημιουργήσετε ολόκληρη τη σελίδα ειδήσεων ροής μόνο με τα Στοιχεία Ιστού Google χρησιμοποιώντας το στοιχείο Αναγνώστη Google. Ωστόσο, θέλω να δείξω πόσες πηγές είναι διαθέσιμες για ενημερώσεις σε πραγματικό χρόνο. Πριν προχωρήσετε, βεβαιωθείτε ότι έχετε πάρει το Στοιχείο Ειδήσεων Google και αντιγράψτε και επικολλήστε αυτόν τον κώδικα στη σελίδα σας.

Ένας άλλος μεγάλος πόρος για τη λήψη ειδήσεων μέσω RSS είναι FeedWind Feed Wind: Δημιουργία ενσωματωμένου Widget από RSS Feeds Διαβάστε περισσότερα . Μου αρέσει πολύ επειδή απλώς επικολλάτε τη ροή που θέλετε, προσαρμόζετε και σας δίνει ένα ωραίο, καθαρό widget που μπορείτε να ενσωματώσετε απευθείας στη σελίδα σας.

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

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

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

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

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

Πιστωτική εικόνα: ShutterStock