cara membuat tool parse kode html diblog

Tool parse kode html atau aplikasi konversi kode html adalah suatu sistem konversi atau penggantian kode html tertentu yang tidak dapat dipublish oleh aplikasi tag tag html pada halaman blog atau situs web. Kegunaan konveksi kode html ini sering dipergunakan kebanyakan untuk berkomentar dengan memuat tag tag html yang dalam devaultnya tag html tersebut tidak dapat dipublish pada kotak komentar halaman blog. Pada halaman blog yang membidangi tutorial hal ini sangat perlu dimiliki, dengan alasan apabila seorang komentator mau memuat suatu code tag html pada komentar untuk mengkomentari tutorial yang diposting maka sang komentator akan memerlukan suatu aplikasi untuk mengkonversi code tag html tersebut untuk dapat dipublish pada form komentar. Ada juga yang mempergunakan aplikasi konversi tag html ini untuk berbagai keperluan untuk mengganti semua kode tag yang memang pada dasarnya kode tag html tersebut tidak diterima oleh beberapa aplikasi halaman blog.
Pada tutorial kali ini saya akan membantu anda untuk mengantisipasi hal tersebut. Aplikasi ini saya buat menggunakan software Macromadia Dreamweaver 8 dan memiliki script yang ringan serta Valid HTML 5 dan CSS 3 jadi sangat cocok untuk template yang berbasih HTML 5, Script ini juga SEO Friendly dengan menganut pengcodean script yang mempunyai standart SEO. Aplikasi Konveksi HTML ini saya berinama " Black Parse HTML ". Buat para teman teman bloger menginstalasi script ini tergolong mudah pada halaman blog kesayangan anda.

Kode standart yang dapat dikonversi

1. Code [ & ]   menjadi   [ & ]
2. Code [ < ]    menjadi   [ &lt; ]
3. Code [ > ]    menjadi   [ &gt; ]
4. Code [ " ]     menjadi   [ &quot; ]
5. Code [ ± ]    menjadi   [ &plusmn; ]
6. Code [ © ]   menjadi   [ &copy; ]
7. Code [ ® ]   menjadi   [ &reg; ]
   

Untuk melihat DEMO silahkan kunjungi link halaman dibawah ini :
http://rivai-silaban.blogspot.com/p/k-onversi-kode-html-adalah-suatu-sistem.html

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.boxarea_BD { background-color:#F2F2F2; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;} .boxarea_BD:hover { background-color:#FFFFFF; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;} .BD_tombol {color:#FFFFFF;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #c4c4c4;cursor: pointer;border-radius: 4px; background: #fbfbfb;background-color: #000000;} .BD_tombol:hover{color:#FFFFFF;font-weight:bold;text-decoration:none;background-color: #313333;}

Install Program Tag HTML

Untuk menempatkan script dan kode tag ini ada baiknya anda tempatkan pada satu halaman blog anda, atau bisa saja pada widget, tergantung selera anda.

Tutorial pemasangan pada halaman blog

1. Setelah anda login ke dasbor blog anda silahkan pilih " LAMAN "
2. Kemudian klik " LAMAN BARU "
3. Pilih " LAMAN KOSONG "
4. Setelah berada pada halaman kosong pilih " HTML " bukan " COMPOSE "
5. Copy script dibawah lalu pastekan pada halaman kosong " HTML "
6. Kemudian buat judul halaman dan simpan halaman anda.

Tutorial pemasangan pada widget blog

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code script/html dibawah ini, paste pada gadget anda.
• Untuk memaksimalkan ukuran sesuai dengan halaman anda silahkan edit code [ cols="50" rows="15" ] sesuai dengan ukuran widget pada halaman anda.

<textarea cols="50" rows="15" wrap="virtual" class="boxarea_BD" id="bdkode" placeholder="1. Ketikkan kode html anda disini, 2. Kemudian klik Konversi , 3. Untuk membersihkan klik &quot;Bersihkan&quot; 4. Jenis Kode : &lt; &quot; &amp; &quot; &gt; &amp; &plusmn; &reg; &#169; " spellcheck="false"></textarea> <br /><span> <button class="BD_tombol" id="bdclear" onClick="convert();this.disabled = true;" title='Konversi'>KONVERSIKAN</button> <button class="BD_tombol" onClick="cdClear();" title='Bersihkan'>BERSIHKAN</button> </span><script type="text/javascript"> function cdClear() { var wtarea = document.getElementById('bdkode'); wtarea.value = ''; wtarea.focus(); document.getElementById('bdclear').disabled = false; }function convert(){var ele1 = document.getElementById("bdkode");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;} </script> <div style="clear: both;">

Pengoperasian Aplikasi

 

• Ketikkan atau pastekan kode html anda pada form textarea
• Kemudian Klik " KONVERSIKAN "
• Copy code anda yang sudah Di Konversi.
• Bila anda merasa belum sempurna silahkan ulagi dan klik " BERSIHKAN " untuk membersihkan textarea bekas kode yang telah dibuat.

Kesimpulan Aplikasi konversi kode html ini dapat anda pergunakan untuk berbagai keperluan dalam hal menangani konversi kode html. Script yang dimiliki aplikasi ini ringan dan SEO friendly serta Valid HTML 5 dan CSS 3.

Read more »

Cara membuat feedcount feedburner di blog

Setelah anda sudah mempunyai akun di feedburner saatnya anda untuk lebih memahami dan menggunakan fasilitas fasilitas yang disediakan feedburner.com secara geratisan. Dalam postingan saya kali ini saya akan menjelaskan 'Cara membuat feedcount feedburner di blog' yang telah disediakan situs feedburner secara geratis. Feedcount yang telah disediakan oleh feedburner sangat membantu kita untuk mengetahui jumlah pembaca dan jumlah subcribe dari artikel yang telah kita posting di halaman blog kita. memang banyak penyedia feedcount seperti ini tapi pada postingan kali ini saya memakai jasa feedburner yang memang sudah terbukti dari dulu dengan efektif memberikan kepada kita segala inpormasi tentang seputar RSS.

 

fungsi

 

Feedcount yang telah disediakan oleh feedburner dengan geratisan ini sangat membantu kita untuk lebih mengetahui informasi pembaca artikel yang telah kita posting dihalaman blog kita, disamping itu kita juga dapat melihat berbagai informasi kegiatan blog kita khususnya mengenai artikel yang kita posting diblog kita secara gampang mengetahui jumlah subcribe dari artikel kita. Dengan memasang code yang telah disediakan dan dapat kita edit di halaman blog kita akan mempermudah kita untuk melihat aktivitas berapa banyak pembaca dari artikel kita.

 

Tutorial instalasi feedcount Feedburner

 

NB : Bila anda belum mempunyai akun di feedburner silahkan lihat tutorial ' cara mendaftar di feedburner dibawah postingan ini ' Jika sudah mempunyai akun silahkan simak tutorial yang ada dibawah ini.

• Kunjungi www.feedburner.com/‎
• msukkan email dan pass akun anda. anda akan dibawa kehalaman utama akun feedburner anda.
• Klik angka jumlah feed anda
• Lihat gambar dibawah ini.

Keterangan gambar
Setelah anda masuk dengan akun anda silahkan klik 'Publicize' seperti pada gambar diatas. Setelah anda klik sekarang anda berada dalam halaman seperti gambar dibawah ini.

Keterangan gambar
Halaman seperti gambar diatas adalah halaman setelah anda klik 'Publicize' atau no 1 pada gambar diatas.

Seperti gambar dengan code no 2 diatas silahkan klik feedcount untuk mengedit tampilan feedcount dan melihat codenya. untuk dapat dicopy ke halaman blog anda.
Silahkan edit dan sesuaikan dengan selera blog anda.

Chiklet Style : Ini adalah tampilan yang akan terlihat dalam halaman blog anda, silahkan pilih 'Static' bila tidak menginginkan animasi, dan bila menginginkan feedcountnya animasi silahankan pilih 'Animate'

Color Scheme : Digunakan untuk memilih warna text dan background feedcount anda agar tampilannya sesuai dengan warna halaman blog anda. Lihat kolom disamping
'Body" adalah warna body feedcount yang akan tampil pada halaman blog anda.
'Text' Adalah warna huruf dalam feedcount yg akan ditampilkan.

Setelah anda sudah merasa cocok dengan tampilan yang telah anda edit sendiri dan sudah sesuai dengan warna dari template anda untuk selanjutnya silahkan klik 'Aktivate' seperti code no 3 yang ada seperti pada gambar diatas.

Setelah anda sudah mengaktivkan feedcount feedburner anda sekarang anda akan berada pada halaman seperti gambar dibawah ini.

Keterangan gambar
Silahkan edit dan sesuaikan dengan selera blog anda.

Your Chiklet : Adalah tampilan feedcount pada halaman blog anda.

Copy this HTML : Code html feedcount anda yang telah anda edit dan nantinya anda pastekan pada halaman blog anda.

Use as a widget in : Pilih blog yang akan anda masukkan data code sebagai widget, dalam tutorial kali ini saya merekomendasikan pada blogger ( Blogspot )

Color Scheme : Digunakan untuk memilih warna text dan background feedcount anda agar tampilannya sesuai dengan warna halaman blog anda. Lihat kolom disamping
'Body" adalah warna body feedcount yang akan tampil pada halaman blog anda.
'Text' Adalah warna huruf dalam feedcount yg akan ditampilkan.

Setelah semuanya sudah anda edit dan tampilannya sudah menarik sesuai dengan keperluan blog anda silahkan klik 'save' untuk menyimpan editan agar suatu waktu kita lebih mudah untuk mengedit lagi.

Sekarang anda telah dapat memahami tentang cara memasang feedcount di halaman blog anda dengan fasilitas feedburner, semoga sobat bloger dapat lebih cepat memahaminya dan lebig kreatif, bila ada kesalahan penulisan ataupun kekurangannya saya mohon maaf dan bila ingin bertanya silahkan kontak saya melalui form komentar dibawah.

Read more »

cara membuat spoiler di blog valid html5

Membuat spoiler di halaman blog sangat berguna untuk berbagai artikel postingan, disamping spoiler ini valid html 5 dan CSS 3 tampilannya juga menarik. Fungsi dari pada spoiler itu bervariasi tergantung kebutuhan sipemakai. Buat saya dan blog ini spoler membantu saya untuk memperringkas tampilan berbagai tutorial yang telah saya posting di halaman blog ini. Buat teman teman yang sering berkunjung ke blog yang sederhana ini spoiler bukanlah hal yang lain sebab saya memakainya hampir disemua tutorial yang ada dihalamanblog ini. Spoiler dapat meringkas atau meminimalkan pemakaian halaman blog sehingga lebih rapi kelihatannya disamping itu juga menurut pengalaman saya pribadi, spoler ternyata mampu untuk mengurangi berat loading blog saya ini. Postingan saya kali ini terinspirasi dari beberapa teman dan sahabat saya, setelah berbagai email , chat dan komentar yang disampaikan kepada saya tentang bagaimanan membuat tombol kode pada halaman blog ini, dan saya dengan senang hati saya membuat postingan ini.Oke langsung saja saya harap teman teman bloger sudah paham hal ini untuk DEMOnya saya harap anda juga sudah tau cara pemakaian dan fungsinya. lihat saja tombol tulisan KODE CSS yang ada dibawah itulah yang dinamakan dengan spoiler. tapi yang ini lebih unik dan menarik. Oke langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi 

.BD_spoler{ background:#09f; border: 2px solid rgb(9, 149, 223); border-radius: 3px 3px 3px 3px; box-shadow: 2px 4px 4px rgb(113, 112, 112); color:#FFFF00; cursor:pointer; font-family:verdana; font-weight:700; padding:20px; text-shadow:1px 1px 0 rgba(0,0,0,.4); text-transform:uppercase; width:100%; background-color: #0099FF; border-color: #00FFFF; } .BD_spoler:hover,.BD_spoler:focus{ background-color: #0066CC; color: #FFFFFF; border-color: #00CCFF; }

Install dihalaman postingan

• Untuk pemasangan code tag spoiler valid html 5 ini tergantung dengan kebutuhan halaman blog anda, anda dapat memasangnya dimana saja,
• Untuk memasang dihalaman postingan artikel , anda hanya memasukkan code tag html dibawah ini pada artikel yang anda posting.
• Masuk ke " Post "
• Kemudian buat " Entri baru "
• Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna merah pada kode dibawah dengan tulisan anda, kode anda, dll.
• Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
• Setelah benar benar sudah sempurna silahkan klik " publikasikan " 

"

<br/><div><div style="margin: 2px;text-align:center" >
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input type="button" class="BD_spoler" style="margin: 0px; padding: 0px; width: 320px; font-size: large; text-align: center;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'CODE CSS'; }" value="CODE CSS"/>
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 4px; background-color: #EBEBEB; font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
<div style="display: none">
<p align="left" >

GANTIKAN TULISAN INI DENGAN TEXT, CODE, DLL
( INI ADALAH ISI SPOLER )

</p></div></div></div></div><br/>

Keterangan Code

• Tulisan kode warna MERAH adalah isi dari spoiler, baik itu text, code html , script , css dll. Hanya tulisan warna merah yang dapat anda gantikan dengan berbagai keperluan anda.
• Tulisan warna BIRU adalah tulisan yang ada pada tombol spoiler, tulisan awal dan setelah diklik, ganti tulisan tersebut sesuai dengan selera anda.
• Tulisan code warna HIJAU adalah warna latar belakan didalam spoiler, silahkan anda ganti sesuai dengan selera anda.
• Untuk Code CSSnya silahkan anda edit ( code yang ada pada spoiler atas dengan tulisan CSS )
• Untuk kode tag htmlnya, buat yang belum paham kode html jangan pernah merubahnya agar tidak mempengaruhi cara kerjanya.

Kesimpulan
Tag html spoiler ini dapat anda pasang pada template blog HTML 5 dan CSS 3. Penempatan spoiler ini tergantung dari kebutuhan anda, dapat anda pasang pada halaman, header, sidebar dan footer halaman anda bahkan di window pop Up juga dapat anda pasang.

Read more »