Πως να κάνετε τον κώδικα HTML ορατό στα posts - html to javascript widget - blogger

Το ''html to javascript converter'' είναι ένα widget που θα σας βοηθήσει να κάνετε ορατό στους αναγνώστες του Blog σας, ένα κώδικα που θέλετε να δημοσιεύσετε και να μοιραστείτε μαζί τους.

Σίγουρα όλοι σπαζοκεφαλιάσατε όταν δοκιμάσατε να postάρετε για πρώτη φορά κάποιον και διαπιστώσατε ότι υπάρχουν όλα τ' άλλα εκτός απ' τον κώδικα, στην ανάρτηση...

Δύο τρόπους θα σας δείξω παρακάτω για να διαλέξετε όποιον θέλετε...

Ο πρώτος και πιο εύκολος είναι να επισκεφθείτε κάποια σελίδα που φιλοξενεί τον μετατροπέα όπως π.χ. αυτή:  web2generators.com

και ν' ακολουθήσετε τα βήματα:

Επικόλληση του κώδικα που θέλουμε να postάρουμε στο πεδίο (1)

Κλικ στο Encode text (2)

Αντιγραφή του τροποποιημένου κώδικα απ' το πεδίο (2).
Κατόπιν πάμε στο Blog μας:


Πίνακας ελέγχου  --  Νέα ανάρτηση  --  ΗΤΜL  (δίπλα απ' τη Σύνθεση)  --  επικόλληση του τροποποιημένου κώδικα  --  Σύνθεση.

Το αποτέλεσμα θα πρέπει να είναι κάτι σαν αυτό:

Προσθέτουμε Τίτλο, σχόλια, ετικέτες κ.λ.π. και πατάμε Δημοσίευση.

Ο δεύτερος τρόπος είναι να το έχουμε σαν gadget σ' ένα βοηθητικό Blog (αν δεν έχετε καλό θα είναι να δημιουργήσετε ένα) για μη μας ''χαλνάει τη μόστρα'', ακολουθώντας την εξής διαδικασία: 

Πίνακας ελέγχου  --  Διάταξη  --  Προσθήκη gadget  --  HTML/JavaScript  --  επικόλληση  τον παρακάτω κώδικα  --  Αποθήκευση.  

<script language="javascript" type="text/javascript">
/* <![CDATA[ */
function converttext(){
 inputtext = document.getElementById('codeconverter').inputtext.value;
    out = inputtext.replace(/\&/g, '&amp;')
    out = out.replace(/\</g, '&lt;')
    out = out.replace(/\>/g, '&gt;')
    out = out.replace(/\"/g, '&quot;')
    out = out.replace(/\'/g, '&#39;')
    out = out.replace(/\|/g, '&#124;')
    out = '<div style="BORDER: #cccccc 1px dashed; PADDING: 5px; WIDTH: 95%; BACKGROUND: #f0f0f0; COLOR: #000000; FONT-SIZE: 12px; OVERFLOW: auto; height:auto"><pre>' + out + '</pre></div>'
 document.getElementById('codeconverter').outputtext.value = out;
}
/* ]]> */
</script>
<form id="codeconverter">
Input Text:<br />
<textarea name="inputtext" cols=80 rows=20></textarea><br />
<input onclick="javascript:converttext();" style="margin-top: 5px;" type="button" value="Convert" /><br />
Output Text:<br />
<textarea name="outputtext" cols=80 rows=20></textarea><br />
</form>

Στη συνέχεια η διαδικασία είναι η ίδια:

Επικολλούμε τον κώδικα στο πεδίο   Input Text:  κάνουμε κλικ στο  Convert 

και αντιγραφή του τροποποιημένου κώδικα απ' το πεδίο Output Text:... ΤΕΛΟΣ

Αφήστε σχόλια αν θέλετε κάποια διευκρίνηση, βοήθεια κ.λ.π...