Parse HTML | Tool Untuk Memparsing Kode HTML

Parser & HTML Encoder

Sebenarnya apa itu Parse HTML dan Fungsinya. Mungkin masih banyak para blogger pemula seperti saya yang belum mengetahui apa itu parse html dan apa kegunaannya. Nah, kali ini saya ingin berbagi sedikit pengetahuan yang saya ketahui dari artikel blog lain mengenai kegunaan mem-parse kode html.

Kata parse dalam bahasa Inggris berarti mengurai. Namun, secara definisi banyak para blogger berpendapat bahwa Parse HTML adalah mengubah kode-kode atau tanda-tanda tertentu menjadi kode entitas (kode unik). Kode-kode yang biasanya diubah yaitu tanda lebih kecil (<), petik dua ("), ampersand (&), petik satu ('), tanda lebih besar (>). Kode-kode tersebut akan diubah menjadi kode-kode yang unik (kode entitas) seperti berikut ini :

• < akan diubah menjadi &lt;
• " akan diubah menjadi &quot;
• & akan diubah menjadi &amp;
• ' akan diubah menjadi &#039;
• > akan diubah menjadi &gt;

Mengapa kode html harus diparse terlebih dahulu ? Dengan melakukan parse HTML, maka akan mencegah terjadi tampilan error di blog ketika dibuka di suatu web browser. Hal ini biasa terjadi pada browser versi lama. Selain itu, mem-parse html dapat membuat kode html yang diparse menjadi lebih seo friendly dan valid html5 jika dibanding dengan yang belum diparse.

Untuk memparse Kode HTML, silahkan copy dan paste kode HTML lain ke dalam kotak parser di bawah. Kegunaan Alat ini akan mengconvert kode anda hingga sesuai dengan XML Blogger. Perubahan yang muncul karena parsing ini tidak akan mengubah apapun kecuali tag HTML, perubahan ini difungsikan agar sesuai dengan format Blogger. Alat ini mampu mengconvert HTML, XHTML, maupun JAVASCRIPT (Code).

Demikian, sedikit pengetahuan tentang apa itu parse HTML dan apa kegunaannya yang bisa saya bagi terutama untuk para blogger pemula agar lebih bermanfaat.

Read More

Hex Color Chart Generator | Tool Kode Warna HTML

Hex Color Chart Generator.
Untuk mencari kode warna HTML/CSS, Anda bisa menggunakan tool Generator Kode Warna Hex di bawah ini. Klik salah satu bagian pada sisi warna untuk mengetahui kode html-nya dan 4 variasi gradasi serta komposisinya.

Dengan Generator warna ini, sangat berguna sekali bagi Anda untuk mempercantik design blog/website dengan tema dan komposisi warna tertentu sesuai pilihan. Untuk mengetahui warna dari suatu kode hex yang belum diketahui, masukkan kode (tanpa #) ke dalam form dan klik update. Silahkan Mencoba...!!!

Read More

Cara Membuat Menu Navigasi Dropdown Simple Tanpa Edit Html

Cara Buat Menu Navigasi Dropdown Tanpa Edit Html - Menu navigasi mempunyai peran penting sebagai alat untuk mempermudah bagi pengunjung website/blog mengakses halaman-halaman penting dan informasi-informasi penting yang tidak semuanya bisa ditampilkan pada halaman depan website/blog.

Kali ini saya ingin berbagi cara membuat menu navigasi dropdown simple. Script ini saya dapatkan dari sumber tutorial w3schools.com. Sebelum saya share di sini, saya telah berusaha memahami script ini secara otodidak. Karena memang saya tidak mempunyai basic pendidikan formal yang terkait.

Contoh tampilan menu navigasi dropdown :

Langsung saja, berikut script Menu Navigasi Dropdown Simple tanpa edit Html :

<style>

.navbar {
    overflow: hidden;
    background-color: #f1f1f1;
    font-family: Arial;
}

.navbar a {
    float: left;
    font-size: 14px;
    color: #555;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 14px;   
    border: none;
    outline: none;
    color: #555;
    padding: 11px 16px;
    background-color: inherit;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: green;color:white;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: green;
}

.dropdown:hover .dropdown-content {
    display: block;
}

</style>

<div class="navbar">
<a href="">Home</a>
<a href="">Menu 1</a>
<a href="">Menu 2</a>

<div class="dropdown">
     <button class="dropbtn" >Menu 3
          <i class="fa fa-caret-down"></i>
     </button>
         <div class="dropdown-content">
               <a href="">SubMenu 3-1</a>
               <a href="">SubMenu 3-2</a>
               <a href="">SubMenu 3-3</a>
        </div>
</div>
</div>


Source : 
https://www.w3schools.com/
 

Demikian artikel mengenai Cara Membuat Menu Navigasi Dropdown Simple tanpa edit Html yang bisa saya bagikan kepada sobat blogger yang mungkin masih ada yang membutuhkan. "Semoga bermanfaat"

Read More

Cara Mudah Buat Menu Tabview Tanpa Edit Html

Cara Buat TabView Tanpa Edit Html - Sebagai cara untuk menghemat space blog, biasanya para blogger menggunakan berbagai cara tampilan menu, seperti menu dropdown, menu sliding, menu horisontal, atau banyak juga yang menggunakan tabview pada sidebar blog. 

Tampilan menu tabview sangat efisien untuk di pasang pada sidebar blog, karena ukuran yang relatif kecil tetapi memuat banyak space. Tampilan sidebar menu tabview bisa sobat lihat pada gambar di bawah ini.

Bagi sobat yang ingin membuat menu tabview untuk dipasang pada sidebar blog, sebagai blogger pemula, saya ingin berbagi sedikit pengetahuan kepada sobat blogger pemula yang mungkin masih belum tahu cara membuat menu tabview.

Berikut script menu tabview tanpa edit html :

<style type="text/css">

body {font-family: "Lato", sans-serif;}

/* Ukuran Tab */ 

div.tab {width:100%; /* Lebar tabview */
    overflow: hidden;
    border: 1px solid #ccc; /*warna garis pinggir tab */
    background-color: #f1f1f1;
}

/* Style tombol Tab */
div.tab button {width:50%;height:100%; /*Lebar dan Tinggi Tombol Tab Tabview */
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 16px;
    transition: 0.3s;
    font-size: 14px; /*Font menu Tab */

    border: 1px solid #ccc;
}

/* Ganti warna Tab ketika ditunjuk kursor */
div.tab button:hover {
    background-color: #888;
}

/* Tab aktif */
div.tab button.active {
    background-color: #0084ce;
}

/* Style isi tab */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

</style>


<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'TAB1')" id="defaultOpen">TAB1</button>
<button class="tablinks" onclick="openCity(event, 'TAB2')">TAB2</button>
</div>


<div id="TAB1" class="tabcontent">

Isi dengan script Tab1

</div>

<div id="TAB2" class="tabcontent">

Isi dengan script Tab2

</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>


Source : 
https://www.w3schools.com/

Langkah membuat Menu TabView :

1. Login ke blogger.com
2. Pilih dan klik "Tata Letak"

3. Kemudian klik "Tambah Widget" pada sidebar.

4. Setelah itu, pilih Html/Javascript

5. Lalu, Copy dan Pastekan script tabview di atas pada kolom konten.

6. Terakhir klik "Simpan/Save"

Demikian cara membuat menu TabView tanpa Html yang bisa saya bagikan pada sobat blogger pemula yang sekiranya membutuhkan.  "Semoga Bermanfaat"

Read More