Senin, 23 Mei 2011

Cara Menampilkan HMTL Script Pada Artikel Blogger

Pada artikel kali ini saya akan coba membahas bagaimana menampilkan script HTML pada artikel blogger. Cara ini sangat bermanfaat jika rekan-rekan membuat artikel yang menyertakan script-script HTML. Bagi rekan-rekan blogger yang belum mengetahui, jika rekan-rekan memasukkan kode HTML pada postingan reakan-rekan, maka script tersebut tidak bisa tampil sama sekali.
Berikut adalah 2  langkah untuk bisa menampilkan script HTML pada postingan sobat di blogger.

Langkah 1

Login terlebih dahulu, Backup template, buka menu Dashboard + Design +Edit Html dan centang pilihan '
Temukan kode
]]></b:skin>
Gunakan menu Find agar lebih cepat menemukan kode tersebut tekan Ctrl + F lalu masukkan kode yang ingin di cari dan tekan enter.
Sekarang copy code di bawah lalu letakkan di atas kode ]]></b:skin>
pre

{

background:#efefef;

border:1px solid #A6B0BF;

font-size:120%;

line-height:100%;

overflow:auto;

padding:10px;

color:#000000 }

pre:hover {

border:1px solid #efefef;

}

code {

font-size:120%;

text-align:left;

margin:0;padding:0;

color: #000000;}

.clear { clear:both;

overflow:hidden;

}

Jika tidak ada masalah lanjutkan dengan Save template untuk menyimpan perubahan.


Langkah 2

Lakukan convert terhadap code yang HTML yang ingin di tampilkan di dalam Postingan blogger rekan-rekan. Caranya gampang, ikuti link simplebits dan masukkan kode ke dalam kolom yang sudah di siapkan dan tekan tombol proses, maka kita akan di berikan hasil kode HTML yang sudah di convert. Hasil konvert tersebut selanjutnya yang akan kita copy ke dalam artikel blogger kita. Tag
<code></code>
pada kode hasil konvert bisa kita ganti dengan  <pre> </pre> bedanya rekan-rekan bisa lihat pada artikel yang sedang di baca ini, tag <code></code> saya gunakan untuk menampilkan kode-kode yang tidak terlalu panjang, contohnya kode ]]></b:skin>, dan untuk tag
<pre> </pre>
untuk kode seperti script panjang yan anda tambahkan template blogger rekan-rekan di atas. Tapi ini bukan suatu keharusan, karna tergantung dari code CSS yang rekan-rekan tambhakn tadi, dan jika kurang srek dengan settingan kode CSS tersebut bisa di rubah sesuai selera.

Pada gambar di samping terlihat, saya mengconvert kode ]]></b:skin>
dan hasilnya terlihat di kolom bawah. Setiap kali anda ingin menampilkan kode HTML ke dalam artikel blogger rekan-rekan, maka cara ini harus dilakukan. Selama melakukan editing artikel, kode tersebut memang masih terlihat berantakan, tapi setelah kita publish maka kode tersebut akan terlihat normal seperti kode HTML layaknya.
Jika ada yang kurang jelas, mari kita diskusikan.






Sekian semoga tulisan bisa bermanfaat bagi merak yang membutuhkan.
Wasslamualaikum wr. wb

Tidak ada komentar:

Posting Komentar