RSS

Category Archives: GADGET

ΠΡΟΣΘΗΚΗ HIT COUNTER ΓΙΑ ΑΝΑΡΤΗΣΕΙΣ

Καλησπέρα και καλό Σαββατοκύριακο. Σήμερα θα δούμε πως μπορούμε να βάλουμε έναν μετρητή αναγνώσεων ανάρτησης. Είναι πολύ εύκολο και το μόνο που χρειάζεται είναι μερικά λεπτά.
Μπαίνουμε στο λογαριασμό μας στο blogspot και από τον πανόπτη πάμε στη διάταξη και από εκεί στην επεξεργασία HTML. Πριν προχωρήσουμε παίρνουμε ένα αντίγραφο αφαλείας (back up) του κώδικα μας. Μετά πατάμε μέσα στο κουτάκι που βρίσκεται ακριβώς δίπλα στην επέκταση προτύπων γραφικών στοιχείων. Πατάμε control και F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος του φυλλομετρητή (browser).
Μέσα στο πλαίσιο στο ψαχτήρι πληκτρολογείστε <div class=’post-header-line-1’/> και θα σας εμφανιστεί τονισμένο με χρώμα μέσα στον κώδικα. Αν δεν το βρίσκετε δοκιμάστε να βρείτε το <data:post.body/> και μόλις το βρείτε αμέσως μετά από αυτό κάντε αντιγραφή – επικόλληση (copy – paste) τον παρακάτω κώδικα του widget:

<b:if cond=’data:blog.pageType == «item»‘><div align=’center’ style=’border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact’><img height=’16’ src=’http://forums.bit-tech.net/images-light/misc/stats.gif&#8217; width=’16’/> <a href=’http://locusblogus.blogspot.com’><b><font size=’2′><script src=’http://nirav07.ulmb.com/counter.php&#8217; type=’text/javascript’/> Views</font></b></a></div></b:if>

Πατήστε αποθήκευση (save) και είστε έτοιμοι. Για να δείτε το μετρητή το μόνο που έχετε να κάνετε είναι να μπείτε στο ιστολόγιο σας και να κάνετε κλικ πάνω στον τίτλο μιας ανάρτησης σας. Τότε θα το δείτε κάτω από τον τίτλο της ανάρτησης σας. Το συγκεκριμένο gadget έχει προστεθεί και στο Locus Blogus. Με ένα κλικ σε τίτλο μιας ανάρτησης θα το δείτε και αν σας αρέσει μπορείτε να προχωρήσετε στην προσθήκη αυτού στο δικό σας blog. Ο μετρητής μετράει την κάθε επίσκεψη σε κάθε ανάρτηση ακόμα και αν προέρχεται από την ίδια IP. Αυτό σημαίνει ότι όσες επισκέψεις κάνουν στις αναρτήσεις τους και οι ιδιοκτήτες των ιστολογίων αυτές θα καταγραφούνε. Άρα δε μιλάμε για κάτι αξιόπιστο εφόσον δε μετράει μοναδικούς επισκέπτες κάτι που κάνει το Google Analytics, το Extreme Tracking και άλλες διαδυκτιακές υπηρεσίες.
Ελπίζω να σας άρεσε αυτή η ανάρτηση. Καλή επιτυχία σε όλους και σε όλες.

Advertisements
 
19 Σχόλια

Posted by στο Απρίλιος 24, 2010 in COUNTER, GADGET, ΑΝΑΡΤΗΣΕΙΣ, POST, WIDGET

 

FLAGS TRANSLATOR

Ένας φίλος και αναγνώστης του Locus Blogus, ο Βασίλης, ζήτησε να μάθει πως γίνεται να βάλουμε μεταφραστή (translator) o οποίος να απεικονίζεται μόνο με σημαίες και να μην είναι όπως αυτός της Convey This που έχω και στην αριστερή στήλη του παρόντος ιστολογίου. Δεν είναι κάτι δύσκολο. Στην ουσία μιλάμε για ένα gadget το οποίο μπαίνει όπως και όλα τα υπόλοιπα σε ένα blog. Η διαδικασία είναι γνωστή: Μπαίνουμε στο blogspot λογαριασμό μας, από τον πανόπτη πάμε διάταξη, προσθήκη gadget και επιλέγουμε HTML/JavaScript. Εκεί κάνουμε αντιγραφή επικόλληση (copy – paste) τον παρακάτω κώδικα και πατάμε αποθήκευση (save). Ο μεταφραστής είανι ο translator της Google και στο ιστολόγιο μας θα φαίνεται όπως το παρακάτω screenshot. Καλή επιτυχία.

Ο κώδικας είναι ο εξής:

<style> .google_translate img { filter:alphaundefinedopacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alphaundefinedopacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alphaundefinedopacity=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.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cen&hl=en’); return false;»><img alt=»English» border=»0″ align=»absbottom» title=»English» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/unitedkingdomundefinedgreatbritain.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»French» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cfr&hl=en’); return false;»><img alt=»French» border=»0″ align=»absbottom» title=»French» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/france.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»German» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cde&hl=en’); return false;»><img alt=»German» border=»0″ align=»absbottom» title=»German» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/germany.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Spain» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Ces&hl=en’); return false;»><img alt=»Spain» border=»0″ align=»absbottom» title=»Spain» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/spain.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Italian» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cit&hl=en’); return false;»><img alt=»Italian» border=»0″ align=»absbottom» title=»Italian» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/italy.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Dutch» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cnl&hl=en’); return false;»><img alt=»Dutch» border=»0″ align=»absbottom» title=»Dutch» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/netherlands.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Russian» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cru&hl=en’); return false;»><img alt=»Russian» border=»0″ align=»absbottom» title=»Russian» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/russianfederation.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Portuguese» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cpt&hl=en’); return false;»><img alt=»Portuguese» border=»0″ align=»absbottom» title=»Portuguese» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/brazil.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Japanese» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cja&hl=en’); return false;»><img alt=»Japanese» border=»0″ align=»absbottom» title=»Japanese» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/japan.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Korean» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Cko&hl=en’); return false;»><img alt=»Korean» border=»0″ align=»absbottom» title=»Korean» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/southkorea.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Arabic» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Car&hl=en’); return false;»><img alt=»Arabic» border=»0″ align=»absbottom» title=»Arabic» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/saudiarabia.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a> <a class=»google_translate» href=»#» target=»_blank» rel=»nofollow» title=»Chinese Simplified» onclick=»window.openundefined’http://translate.google.com/translate?u=’+encodeURIComponentundefinedlocation.href)+’&langpair=auto%7Czh-CN&hl=en’); return false;»><img alt=»Chinese Simplified» border=»0″ align=»absbottom» title=»Chinese Simplified» height=»24″ src=»https://hacktest1.files.wordpress.com/2010/03/china.png?w=32″ style=»cursor: pointer;margin-right:8px» width=»24″ /></a></div>
 
18 Σχόλια

Posted by στο Μαρτίου 30, 2010 in BLOG, GADGET, ΜΕΤΑΦΡΑΣΤΗΣ, TRANSLATOR, WIDGET

 

ΠΡΟΣΘΗΚΗ ΚΟΥΜΠΙΟΥ BACK TO TOP

Πολλές φορές τυχαίνει να επισκεπτόμαστε ένα blog ή ένα website και για να το εξερευνήσουμε κατεβαίνουμε και κατεβαίνουμε πολύ κάτω. Για να ανεβούμε στην κορυφή της σελίδας πρέπει να χρησιμοποιήσουμε το ποντίκι και αυτό ίσως να μας πάρει μερικά δευτερόλεπτα. Η αλήθεια είναι ότι στο διαδύκτιο όλοι βιαζόμαστε και θέλουμε να εξοικονομούμε όσο περισσότερο χρόνο γίνεται γιατί το να κάθεσε σε μια οθόνη περιμένοντας να περάσει κάποιο χρονικό διάστημα έτσι ώστε να διεκπεραιωθεί κάποια εργασία είναι εκνευριστικό. Ευτυχώς μπορούμε να αποφύγουμε τον εκνευρισμό των αναγνωστών μας με ένα κουμπί. Με ένα κλικ σε αυτό το κουμπί μεταφερόμαστε αυτομάτως στην κορυφή της σελίδας μας. Κακά τα ψέμματα αλλά το τελευταίο που θέλουμε είναι να εκνευρίζουμε τους αναγνώστες μας. Πάμε να δούμε πως θα κάνουμε την προσθήκη αυτού του button.
Για αρχή μπάινουμε στο λογαριασμό που έχουμε στο blogspot και από τον πανόπτη πηγαίνουμε στη διάταξη και από εκεί στην επεξεργασία HTML. Πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template. Μετά πατάμε το Control και το F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος του browser. Πληκτρολογούμε:

]]></b:skin>

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

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Μετά πάμε και πάλι στο χαστήρι στο κάτω μέρος του browser και βάζουμε το:

</body>

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

<a href=»#» id=»backtotop»><img src=»Image-Url» alt=»back to top» /></a>

Στο Image-Url μπορείται να βάλετε διάφορες διευθύνσεις εικονιδίων. Μπορείτε να δημιουργήσετε δικά σας ή να βρείτε έτοιμα στο internet. Αν κάνετε δικάσας σηκώστε τα στο Photo Bucket ή στο Image Shack .
Μερικές διευθύνσεις για εικονίδια είναι οι παρακάτω:

http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI
/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I
/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI
/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI
/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II
/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI
/AAAAAAAAAQo/lzY3WpZpwPA/s40
http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI
/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI
/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI
/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI
/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI
/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I
/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

Πειραματιστείτε για να βρείτε το εικονίδιο της αρεσκείας
σας. Για τις ανάγκες της ανάρτησης επιλέξαμε μια 
διεύθυνση εικονιδίο και ο κώδικας έγινε ως εξής:
 
<a href=»#» id=»backtotop»><img src=
«http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA
/oEpqkKnL0Jw/s400/bttp-10.png» alt=»back to top» /></a>

Τέλος πάμε ξανά στο ψαχτήρι μας και πληκτρολογούμε το:

<head>

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

&lt;script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js&#8217;
type=’text/javascript’&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$(‘#backtotop’).click(function(e){
e.preventDefault();
$(‘html, body’).animate({scrollTop:0}, ‘slow’);
});
});
&lt;/script&gt;

Στη συνέχεια πατάμε αποθήκευση (save) και είμαστε έτοιμοι. Για να δείτε πως θα φαίνεται
μπορείτε να δείτε εδώ . Ελπίζω να το βρείτε χρήσιμο. Καλή επιτυχία.

 
18 Σχόλια

Posted by στο Μαρτίου 23, 2010 in BLOG, BLOGSPOT, BUTTONS, GADGET, TOP, WIDGET

 

ΓΝΩΡΙΣΤΕ ΤΟ APTURE

Καλημέρα. Καιρό έχουμε να πούμε κάτι σχετικά για τα ιστολόγια. Σήμερα θα σας αποζημιώσω προτείνοντας σας το Apture. Τι είναι αυτό; Είναι μια δωρεάν υπηρεσία της οποία την εγκαθιστάτε αρχικά ως plugin στο browser, κάνετε επανεκκίνηση τον browser και κατόπιν μπαίνετε στο λογαριασμό του ιστολογίου σας και το εγκαθιστάτε ως gadget. Εφόσον δηλώσετε username και password στο προγραμματάκι θα σας σταλεί ένα email για να επικυρώσετε τη διεύθυνση σας. Η εγκατάσταση του κρατάει το πολύ ένα λεπτό με τρία βήματα και είναι παιχνιδάκι. ΠΡΟΣΟΧΗ: Όσο πιο κάτω τοποθετήσετε το gadget τόσο το καλύτερο.
Τι κάνει λοιπόν το Apture; Μας επιτρέπει να βάλουμε ένα σύνδεσμο (link), ένα video, φωτογραφία, χάρτη, ήχο και άλλα και οι αναγνώστες μπορούνε να δούνε και να ακούσουνε αυτά που προτείνουμε χωρίς να απομακρυνθούνε από το blog μας. Δείτε αυτό το παράδειγμα.
Ένα από τα συν του Apture είναι ότι υποστηρίζει πολλές πλατφόρμες (Blogspot, WordPress, TypePad, Ning, Drupal {v5 και v6+} και άλλες). Προσωπικά πιστεύω ότι είναι ένα πάρα πολύ καλό gadget και κάνει ένα ιστολόγιο να μη φαίνεται πολύ στατικό. Το κυριότερο είναι ότι είναι δωρεάν για ιστολόγια που έχουν κάτω από πέντε εκατομύρια επισκέψεις το μήνα.
Ελπίζω να σας αρέσει και να το βρείτε χρήσιμο.

 
10 Σχόλια

Posted by στο Μαρτίου 17, 2010 in APTURE, GADGET, WIDGET

 

ΠΡΟΣΘΗΚΗ ΣΤΟΙΧΕΙΟΥ GADGET ΠΑΝΩ ΑΠΟ ΤΗΝ ΑΝΑΡΤΗΣΗ

Καλησπέρα σε όλους και όλες. Σήμερα θα δούμε πως μπορούμε να βάλουμε ένα στοιχείο προσθήκης gadget πάνω από την ανάρτηση σας. Μόλις γίνει αυτό θα μπορούμε να βάλουμε φωτογραφίες, κώδικα, διαφημιστικά banners, κείμενο κλπ. Η διαδικασία είναι πολύ απλή. Πρώτα απ’ όλα πρέπει να πάρουμε back up του template μας για να είμαστε ασφαλείς.
Μπαίνουμε στο λογαριασμό που έχουμε του blogspot και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πατάμε control και F (Ctrl+F) για να ανοίξει στο κάτω μέρος της οθόνης μας το ψαχτήρι και πληκτρολογούμε:
<div id=’main-wrapper’>
και αυτόματα θα το δούμε τονισμένο με χρώμα στον κώδικα μας. Ακριβώς από κάτω έχει μια σειρά κώδικα που είναι ως εξής:
<b:section class=’main’ id=’main’ showaddelement=’no‘>
Το σημείο του κώδικα που είναι με κόκκινο χρώμα το αλλάζετε από no σε yes. Μετά πατάτε αποθήκευση (save) και τελειώσατε. Αν πάτε στη διάταξη θα δείτε ότι πάνω από το πλαίσιο ανναρτήσεις ιστολογίου μπορείτε να προσθέσετε ότι θέλετε ως gadget. Για να καταλάβετε τι εννοώ δείτε τα παρακάτω screenshots. Το πρώτο είναι πριν πειράξουμε τον κώδικα και το δεύτερο είναι το τελικό αποτέλεσμα. Ελπίζω να σας αρέσει και να το βρείτε χρήσιμο. Καλή επιτυχία.



 
17 Σχόλια

Posted by στο Ιανουαρίου 27, 2010 in GADGET, HTML, TUTORIAL, WIDGET

 

WIDGET SNOWFLAKES

Καλημέρα και καλή εβδομάδα. Λόγω των εορτών που πλησιάζουν όλοι θέλουμε να στολίσουμε τα blogs μας. Σήμερα θα δούμε πως μπορούμε να βάλουμε στα ιστολόγια μας χιόνι που πέφτει. Η διαδικασία είναι πολύ απλή. Μπαίνουμε στο λογαριασμό του blogspot και από τον πανόπτη πάμε διάταξη, προσθήκη gadget, επιλέγουμε HTML/JavaScript και κάνουμε αντιγραφή-επικόλληση (copy-paste) τον παρακάτω κώδικα:


<script src=»http://snow-effect.googlecode.com/files/snow.js» type=»text/javascript»>
</script>

Στην ουσία δηλαδή μιλάμε για ένα widget. Υπάρχει περίπτωση μερικές φορές να φαίνεται το παραπάνω εφέ απενεργοποιημένο και να μη βλέπετε τις νιφάδες. Μην ανησυχείτε. Μετά από κάποια ώρα με ένα refresh (F5) θα επανέλθουν. Αυτό μπορεί να συμβαίνει για διάφορους λόγους και αιτίες που λαμβάνουν χώρα στην τοποθεσία όπου φιλοξενείται το αρχείο js (javascript). Αν θέλετε μπορείτε να κατεβάσετε το αρχείο js από εδώ και μετά να το ανεβάσετε σε ένα web site της αρεσκείας σας και να αντικαταστήσετε την τοποθεσία που είναι με κόκκινο χρώμα στον παραπάνω κώδικα με τη διεύθυνση όπου αποθηκεύσατε το αρχείο (αν και δεν είναι απαραίτητο να γίνει αυτό). Βασική προϋπόθεση για να έχετε ορατά αποτελέσματα είναι το φόντο του ιστολογίου σας να μην είναι λευκό ή ανοιχτόχρωμο.
  Αν θέλετε να δείτε πως δουλεύει το παραπάνω widget μπορείτε να κάνετε κλικ εδώ. Ελπίζω να σας άρεσε το σημερινό widget. Για τυχόν απορίες μη διστάσετε να αφήσετε σχόλιο ή να στείλετε email.

 
2 Σχόλια

Posted by στο Δεκέμβριος 14, 2009 in GADGET, SNOW, SNOWFLAKES, WIDGET

 

HACK THE WEB RADIO

Καλησπέρα. Σήμερα θα δούμε κάτι αρκετά ενδιαφέρον. Αφορμή στάθηκε ένα email που έλαβα από έναν blogger. Ο συγκεκριμένος blogger ήθελε να βάλει στο blog του τον αγαπημένο του ραδιοφωνικό σταθμό ο οποίος εκπέμπει και διαδυκτιακά. Μιλάμε για τον Absolute Radio, έναν αγγλικό σταθμό. Ωραία ως εδώ αλλά υπήρχε ένα εμπόδιο. Ο σταθμός δε δίνει τη δυνατότητα embed έτσι ώστε όποιος θέλει να το βάλει στο ιστολόγιο του ή στην ιστοσελίδα του (αυτό δεν το καταλαβαίνω γιατί ο σταθμός έτσι χάνει, προβολή, δωρεάν διαφήμιση και ακροαματικότητα).
   Η αλήθεια είναι ότι παιδεύτηκα για πολλές ώρες αλλά μετά από αρκετούς πειραματισμούς κατάφερα και έκανα εφικτή την προσθήκη του σταθμού σαν gadget στο blog. Υπάρχουν και άλλοι σταθμοί που δεν επιτρέπουν την προσθήκη τους με τη μη χορήγηση ενός κώδικα embed. Πάμε να δούμε πως μπορούμε να τα καταφέρουμε.
   Προσωπικά χρησιμοποιώ τον Mozilla Firefox. Στη συνέχεια ο συγκεκριμένος browser θα μας φανεί χρήσιμος. Θα ασχοληθούμε με τον σταθμό που προανέφερα. Κάνοντας κλικ εδώ μεταφερόμαστε στον player του σταθμού απ’ όπου ακούμε live το πρόγραμμα του. Θα χρειαστεί να βρούμε εκείνο το λιnk όπου γίνεται το streaming. Αν πάμε στην πάνω μπάρα του Mozilla θα επιλέξουμε εργαλεία και διαλέξουμε πληροφορίες σελίδας τότε θα ανοίξει ένα παράθυρο το οποίο έχει τέσσερις επιλογές στο πάνω μέρος του: Γενικά, Πολυμέσα, Δικαιώματα και Ασφάλεια. Κάνουμε κλικ στο δεύτερο (πολυμέσα) και βλέπουμε ότι μας παρουσιάζει κάποια links (διευθύνσεις). Ψάχνουμε να βρούμε αυτό που μέσα του περιέχει τις λέξεις flash/player. Βλέπουμε ότι είναι το τρίτο από το τέλος (http://player.absoluteradio.co.uk/core/player/_flash/player.swf?service=abr&v=1.0.1.25).

Κάνουμε αυτό το link αντιγραφή – επικόληση σε ένα νέο παράθυρο ή καρτέλα και βλέπουμε τον βασικό player και ακούμε την εκπομπή.

 Τώρα θα ανατρέξουμε σε μια παλιότερη ανάρτηση όπου λέω πως γίνεται η προσθήκη ενός audio player.

  Παίρνουμε τον κώδικα της συγκεκριμένης ανάρτησης που είναι με μαύρο χρώμα:

<img style=»visibility:hidden;width:0px;height:0px;» border=0 width=0 height=0 src=»http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNTMxMjE4MDIzNTkmcHQ9MTI1MzEyMTgxODI2NSZwPTE4MDMxJmQ9Jmc9MSZvPTYzYzQ4MzA*YTNlNDQ2N2VhNThkNzA1ZTBlZjVhYjZh.gif» /><center><p style=»visibility:visible;»><object type=»application/x-shockwave-flash» data=»http://assets.myflashfetish.com/swf/mp3/mff-pill.swf» height=»110″ width=»265″ style=»width:265px;height:110px»><param name=»movie» value=»http://assets.myflashfetish.com/swf/mp3/mff-pill.swf» /><param name=»quality» value=»high» /><param name=»scale» value=»noscale» /><param name=»salign» value=»TL» /><param name=»wmode» value=»transparent»/><param name=»flashvars» value=»myid=29801243&path=2009/09/16&mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false&ow=265&oh=110″/></object></p></center>

   Το κομμάτι του κώδικα που είναι τονισμένο με κόκκινο χρώμα το αντικαθιστούμε με το link (http://player.absoluteradio.co.uk/core/player/_flash/player.swf?service=abr&v=1.0.1.25) του streaming του σταθμού που βρήκαμε προηγουμένως με τη βοήθεια του Mozilla. Οι τιμές του ύψους και πλάτους (height, width) του gadget είναι τονισμένες με μπλε χρώμα και αν τις αλλάξουμε θα αλλάξουμε και τις διαστάσεις αυτού. ΠΡΟΣΟΧΗ: Αλλάζουμε τις τιμές και στα δύο height και width. Ο κώδικα που θα έχουμε στο τέλος είναι ο παρακάτω:


<img style=»visibility:hidden;width:0px;height:0px;» border=0 width=0 height=0 src=»http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNTMxMjE4MDIzNTkmcHQ9MTI1MzEyMTgxODI2NSZwPTE4MDMxJmQ9Jmc9MSZvPTYzYzQ4MzA*YTNlNDQ2N2VhNThkNzA1ZTBlZjVhYjZh.gif» /><center><p style=»visibility:visible;»><object type=»application/x-shockwave-flash» data=»http://player.absoluteradio.co.uk/core/player/_flash/player.swf?service=abr&v=1.0.1.25″ height=»110″ width=»265″ style=»width:265px;height:110px»><param name=»movie» value=»http://player.absoluteradio.co.uk/core/player/_flash/player.swf?service=abr&v=1.0.1.25″ /><param name=»quality» value=»high» /><param name=»scale» value=»noscale» /><param name=»salign» value=»TL» /><param name=»wmode» value=»transparent»/><param name=»flashvars» value=»myid=29801243&path=2009/09/16&mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false&ow=265&oh=110″/></object></p></center>

   Στη ουσία πήραμε τον κώδικα ενός player και αντί να δηλώσουμε τη διεύθυνση ενός τραγουδιού που αποθηκεύσαμε στο internet και θέλουμε να παίξει, δηλώσαμε τη διεύθυνση του streaming. Το gadget είναι έτοιμο και πορούμε να το προσθέσουμε στο blog μας όπως κάθε άλλο gadget (πανόπτης, διάταξη, προσθήκη gadget, HTML/JavaScript). Είναι ένας απλός player αλλά τη δουλειά του την κάνει. Έχει ένα κουμπί play/stop, μια μπάρα buffer/streaming και ένα κουμπί αυξομείωσης της έντασης του ήχου.
   Τον παραπάνω πειραματισμό τον έκανα και με άλλους ραδιοφωνικούς σταθμούς που δεν παρέχουν τη δυνατότητα του embed κώδικα και δούλεψε επιτυχώς. Ελπίζω να σας άρεσε και εύχομαι καλή επιτυχία σε όσους το επιχειρήσουν. Σύντομα θα ασχοληθώ και με τη live αναμετάδοση εικόνας. Ελπίζω να πετύχει.

 
58 Σχόλια

Posted by στο Νοέμβριος 26, 2009 in GADGET, HACK, WEB RADIO, WIDGET