Mudah Belajar Membuat Gambar di Tengah HTML untuk Website – Halo Sahabat Softize, kali ini kita akan belajar tentang cara membuat gambar ditengah HTML. Kita pasti sering melihat gambar yang diletakkan di tengah sebuah halaman. Nah, bagaimana caranya? Yuk, simak penjelasannya!
Belajar Membuat Gambar Ditengah Html sangatlah mudah dan sederhana. Pertama, tentukan ukuran gambar yang ingin kita tampilkan. Kemudian, letakkan gambar di dalam tag <center> untuk meletakkan gambar di tengah halaman.
Target dari Belajar Membuat Gambar Ditengah Html adalah untuk menjadikan tampilan halaman web lebih menarik. Selain itu, dengan menempatkan gambar ditengah, maka kita dapat memperoleh perhatian lebih dan membuat website kita menjadi lebih profesional dan elegan.
Dalam artikel ini, kita telah membahas tentang cara membuat gambar ditengah HTML dengan meletakkan gambar di dalam tag <center>. Hal ini akan membantu meningkatkan tampilan halaman web kita. Simak lebih lanjut pada tutorial pemrograman web berikut.
Langkah-langkah Belajar Membuat Gambar Ditengah Html
Silahkan baca artikel dibawah ini untuk mempelajari cara membuat gambar ditengah pada website dengan menggunakan html.
Pengenalan Belajar Membuat Gambar Ditengah Html
Saat membuat website, kita sering menemukan kebutuhan untuk menyisipkan gambar. Salah satu hal yang penting untuk diperhatikan adalah posisi gambar tersebut. Apabila tidak ditempatkan di tempat yang tepat atau tidak proporsional, bisa membuat tampilan website jadi kacau dan tidak rapi.
Tujuan Belajar Membuat Gambar Ditengah Html
Tujuan dari pembelajaran membuat gambar ditengah pada html adalah memudahkan sisipkan gambar pada website dengan posisi yang teratur dan pas di atas konten sehingga lebih enak dilihat.
Logika Dasar dari Belajar Membuat Gambar Ditengah Html
Untuk membuat gambar tengah di html, kita harus menggunakan float dan margin. Berikut adalah kode css-nya:`img { display: block; margin-left: auto; margin-right: auto;}`Dan berikut adalah daftar coding untuk membuat gambar ditengah pada html:
| Kode CSS |
Penjelasan |
| display: block; |
Mengubah tampilan gambar menjadi block element agar bisa diberikan margin. |
| margin-left: auto; |
Memberikan margin kiri secara otomatis, sehingga gambar berada ditengah layar jika diukur dari sisi kanan. |
| margin-right: auto; |
Memberikan margin kanan secara otomatis, sehingga gambar berada ditengah layar jika diukur dari sisi kiri. |
Fungsi dan Prosedur Belajar Membuat Gambar Ditengah Html
Fungsi dari kode css tersebut adalah untuk membuat gambar terlihat rapi dan pas ditengah pada tampilan website. Sedangkan prosedurnya adalah sebagai berikut:1. Pertama, ubahlah tag img menjadi block element.2. Kemudian berikanlah margin kiri dan kanan secara otomatis.
Studi Kasus dari Belajar Membuat Gambar Ditengah Html
Sebagai contoh, dalam pembuatan website portfolio, kita memerlukan gambar yang bisa diberikan efek hover. Agar tampilan tetap terlihat rapi, kita bisa menggunakan kode css untuk membuat gambar tersebut ditengah.
Urutan tugas dalam Belajar Membuat Gambar Ditengah Html
Berikut adalah urutan tugas dalam pembelajaran membuat gambar ditengah pada html:1. Pertama, ambil sebuah gambar yang ingin disisipkan pada website.2. Ubahlah tag img menjadi block element dengan menambahkan property display: block.3. Aturlah margin kiri dan kanan secara otomatis agar gambar berada ditengah layar. Contohnya adalah sebagai berikut:
<img src=gambar.jpg alt=Gambar style=display: block; margin-left: auto; margin-right: auto;>
Contoh tugas dari Belajar Membuat Gambar Ditengah Html
Tugas yang dihadirkan adalah membuat sebuah website sederhana dengan gambar header ditengah. Berikut adalah contoh kodenya:
<html> <head> <title>Website Sederhana</title> <style> header { background-image: url('header.jpg'); height: 300px; background-size: cover; display: flex; justify-content: center; align-items: center; } img { display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <header> <img src=logo.png alt=Logo width=200 height=200> </header> <div class=main> <h1>Kita bawah ini!</h1> <p>Ini adalah website sederhana untuk kebutuhan belajar anda.</p> </div> </body></html>
Penjelasan code diatas:- Kode HTML diatas menghasilkan website sederhana dengan gambar header ditengah dan logo pada tengah header menggunakan html dan css.- Posisi gambar logo pada header ditengah dengan menambahkan kode CSS pada tag img seperti yang telah dijelaskan sebelumnya.- Gambar background pada header diatur menggunakan kode CSS background-image dan menambahkan property display ke flex, justify-content, dan alig-items agar content berada ditengah (omitted tags: <head>.
, <body>)</p>
<h2>Kesalahan Coding dalam Belajar Membuat Gambar Ditengah Html</h2>
<h3>1. Menggunakan Kode yang Salah</h3>
<p>Saat membuat gambar ditengah html, seringkali kode yang digunakan tidak sesuai dengan standar. Misalnya, menggunakan <img> tag tanpa menentukan ukuran gambar atau menggunakan style=text-align:center tanpa menentukan width pada gambar. Akibatnya, gambar tidak terletak di tengah halaman dengan rapi.</p>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://www.softize.net/html/belajar-membuat-html-online-tutorial-praktis-bagi-pemula/" target="_self" rel="nofollow" class="ue5411419afdf0a85aec1cca608bbd3f7"><!-- INLINE RELATED POSTS 2/3 //--><style> .ue5411419afdf0a85aec1cca608bbd3f7 , .ue5411419afdf0a85aec1cca608bbd3f7 .postImageUrl , .ue5411419afdf0a85aec1cca608bbd3f7 .centered-text-area { min-height: 80px; position: relative; } .ue5411419afdf0a85aec1cca608bbd3f7 , .ue5411419afdf0a85aec1cca608bbd3f7:hover , .ue5411419afdf0a85aec1cca608bbd3f7:visited , .ue5411419afdf0a85aec1cca608bbd3f7:active { border:0!important; } .ue5411419afdf0a85aec1cca608bbd3f7 .clearfix:after { content: ""; display: table; clear: both; } .ue5411419afdf0a85aec1cca608bbd3f7 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #FFFFFF; } .ue5411419afdf0a85aec1cca608bbd3f7:active , .ue5411419afdf0a85aec1cca608bbd3f7:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #FFFFFF; } .ue5411419afdf0a85aec1cca608bbd3f7 .centered-text-area { width: 100%; position: relative; } .ue5411419afdf0a85aec1cca608bbd3f7 .ctaText { border-bottom: 0 solid #fff; color: #141414; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .ue5411419afdf0a85aec1cca608bbd3f7 .postTitle { color: #16A085; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .ue5411419afdf0a85aec1cca608bbd3f7 .ctaButton { background-color: #eaeaea!important; color: #141414; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://www.softize.net/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .ue5411419afdf0a85aec1cca608bbd3f7:hover .ctaButton { background-color: #eaeaea!important; } .ue5411419afdf0a85aec1cca608bbd3f7 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .ue5411419afdf0a85aec1cca608bbd3f7 .ue5411419afdf0a85aec1cca608bbd3f7-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .ue5411419afdf0a85aec1cca608bbd3f7:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="ue5411419afdf0a85aec1cca608bbd3f7-content"><span class="ctaText">BACA:</span> <span class="postTitle">Belajar Membuat Html Online: Tutorial Praktis bagi Pemula</span></div></div></div><div class="ctaButton"></div></a></div><h3>2. Tidak Menggunakan CSS</h3>
<p>Beberapa developer masih menggunakan table untuk memposisikan gambar di tengah halaman. Padahal, seharusnya menggunakan CSS untuk mengatur posisi dan tampilan gambar secara lebih efektif. Memakai table hanya akan meningkatkan waktu load website dan membuat coding menjadi lebih rumit.</p>
<h2>Solusi Kesalahan Coding</h2>
<h3>1. Menggunakan Kode yang Benar</h3>
<p>Untuk membuat gambar ditengah halaman secara efektif, gunakan kode berikut:</p>
<p style=text-align:center;><img src=gambar.jpg style=width:50%;></p>
<p>Kode tersebut akan menempatkan gambar di tengah halaman dengan lebar 50%. Dengan cara ini, gambar akan terlihat lebih rapi dan mudah disesuaikan dengan ukuran layar yang berbeda.</p>
<h3>2. Menggunakan CSS</h3>
<p>Untuk membuat gambar ditengah halaman menggunakan CSS, gunakan kode berikut:</p>
<style>.center-img { display:block; margin:auto; width:50%;}</style>
<p><img src=gambar.jpg class=center-img></p>
<p>Dengan cara ini, gambar akan terletak di tengah halaman dan dapat diatur ukurannya dengan mudah melalui CSS. Jika masih bingung untuk membuat gambar ditengah html, berikut adalah tabel yang dapat membantu:</p>
<table class="table">
<tr>
<th>Kode</th>
<th>Deskripsi</th>
</tr>
<tr>
<td>
<p style=text-align:center;><img src=gambar.jpg style=width:50%;></p>
</td>
<td>Membuat gambar terletak di tengah halaman dengan lebar 50%</td>
</tr>
<tr>
<td>
<style>.center-img {display:block;margin:auto;width:50%;}</style>
<p><img src=gambar.jpg class=center-img></p>
</td>
<td>Membuat gambar terletak di tengah halaman dengan ukuran yang dapat diatur melalui CSS</td>
</tr>
</table>
<p>Dengan cara-cara di atas, developer dapat membuat gambar ditengah html dengan lebih efektif dan rapi. <table> </p>
<h2>Keuntungan dan Kekurangan Belajar Membuat Gambar Ditengah Html</h2>
<h3>Keuntungan</h3>
<p>Belajar membuat gambar ditengah html sangatlah berguna bagi para pembuat website. Dengan menguasai ini, pembuat website bisa memperindah tampilan website dan menampilkan gambar dengan lebih baik. Selain itu, membuat gambar ditengah html juga memungkinkan para pembuat website untuk memberikan sentuhan personal pada website yang mereka buat.</p>
<h3>Kekurangan</h3>
<p>Belajar membuat gambar ditengah html juga memiliki beberapa kekurangan. Pertama-tama, proses pembelajaran ini membutuhkan keterampilan teknis yang cukup, sehingga tidak semua orang bisa melakukannya. Selain itu, proses ini juga memakan waktu lebih lama daripada hanya memasukkan gambar langsung ke dalam website. Hal ini tentunya akan menghabiskan waktu dan tenaga yang lebih.</p>
<h2>Tips Belajar Membuat Gambar Ditengah Html secara Efektif</h2>
<h3>Mulailah Dengan Mengenal Tag HTML</h3>
<p>Pertama-tama, Anda perlu mengenal tag html untuk membuat gambar ditengah jika ingin mempelajari proses ini secara efektif. Tag HTML berfungsi untuk membuat halaman web menjadi interaktif dan dinamis. Pastikan Anda mengerti tag-tag html yang digunakan untuk menampilkan gambar seperti: <img> dan </p>
<div>.</p>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://www.softize.net/html/panduan-membuat-form-pemesanan-html-murah-dan-mudah/" target="_self" rel="nofollow" class="u460318b608c7ac3060a8484ba79df48a"><!-- INLINE RELATED POSTS 3/3 //--><style> .u460318b608c7ac3060a8484ba79df48a , .u460318b608c7ac3060a8484ba79df48a .postImageUrl , .u460318b608c7ac3060a8484ba79df48a .centered-text-area { min-height: 80px; position: relative; } .u460318b608c7ac3060a8484ba79df48a , .u460318b608c7ac3060a8484ba79df48a:hover , .u460318b608c7ac3060a8484ba79df48a:visited , .u460318b608c7ac3060a8484ba79df48a:active { border:0!important; } .u460318b608c7ac3060a8484ba79df48a .clearfix:after { content: ""; display: table; clear: both; } .u460318b608c7ac3060a8484ba79df48a { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #FFFFFF; } .u460318b608c7ac3060a8484ba79df48a:active , .u460318b608c7ac3060a8484ba79df48a:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #FFFFFF; } .u460318b608c7ac3060a8484ba79df48a .centered-text-area { width: 100%; position: relative; } .u460318b608c7ac3060a8484ba79df48a .ctaText { border-bottom: 0 solid #fff; color: #141414; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u460318b608c7ac3060a8484ba79df48a .postTitle { color: #16A085; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u460318b608c7ac3060a8484ba79df48a .ctaButton { background-color: #eaeaea!important; color: #141414; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://www.softize.net/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u460318b608c7ac3060a8484ba79df48a:hover .ctaButton { background-color: #eaeaea!important; } .u460318b608c7ac3060a8484ba79df48a .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u460318b608c7ac3060a8484ba79df48a .u460318b608c7ac3060a8484ba79df48a-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u460318b608c7ac3060a8484ba79df48a:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u460318b608c7ac3060a8484ba79df48a-content"><span class="ctaText">BACA:</span> <span class="postTitle">Panduan Membuat Form Pemesanan Html Murah dan Mudah</span></div></div></div><div class="ctaButton"></div></a></div><h3>Pahami CSS</h3>
<p>CSS atau Cascading Style Sheet adalah bahasa stylesheet yang umum digunakan untuk mengatur tampilan pada website. Sebagai contoh, jika kita ingin membuat gambar ditengah, maka kita perlu mendefinisikan CSS yang berkaitan dengan pemosisian.</p>
<h3>Mulai Membuat Gambar Ditengah</h3>
<p>Setelah paham dan menguasai tag HTML dan CSS, Anda bisa mulai belajar gambar ditengah. Pertama-tama, buatlah sebuah div dan masukan gambar di dalamnya. Kemudian, gunakan CSS untuk memposition div tersebut menjadi ditengah halaman web. Dengan mengikuti tips tersebut, pembelajaran membuat gambar ditengah html akan terasa lebih mudah dan efektif. Selain itu, Anda juga bisa menjadikan proses belajar ini sebagai pengalaman yang bermanfaat. Baca tulisan sampai akhir agar tips ini bermanfaat bagi Anda semua!</p>
<h2>Q&A: Mudah Belajar Membuat Gambar di Tengah HTML untuk Website</h2>
<table class="table">
<tr>
<th>Pertanyaan</th>
<th>Jawaban</th>
</tr>
<tr>
<td>1. Apa itu HTML?</td>
<td>HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa pemrograman yang digunakan untuk membuat halaman web.</td>
</tr>
<tr>
<td>2. Bagaimana cara menempatkan gambar di tengah halaman HTML?</td>
<td>Kita bisa menggunakan CSS untuk mengatur posisi gambar. Salah satu cara yang bisa digunakan adalah dengan menggunakan property ‘display’ dan ‘margin’ pada tag <img>.</td>
</tr>
<tr>
<td>3. Apa saja format gambar yang bisa digunakan di HTML?</td>
<td>Berbagai format gambar yang bisa digunakan di HTML antara lain JPEG, PNG, GIF, dan SVG.</td>
</tr>
<tr>
<td>4. Apa manfaat belajar membuat gambar di tengah HTML?</td>
<td>Dengan mampu menempatkan gambar di tengah HTML, kita bisa membuat tampilan halaman web menjadi lebih menarik dan profesional.</td>
</tr>
</table>
<h2>Kesimpulan dari Belajar Membuat Gambar Ditengah Html</h2>
<p>Belajar membuat gambar ditengah HTML merupakan salah satu keterampilan penting dalam pengembangan website. Dengan menguasai teknik ini, kita bisa memberikan sentuhan estetika yang menarik pada halaman web yang kita buat. Selain itu, selalu gunakan format gambar yang sesuai dengan kebutuhan dan pastikan gambar yang digunakan memiliki kualitas yang baik agar menghasilkan tampilan yang maksimal.</p>
<!-- RatingBintangAjaib --> </div>
<footer class="entry-meta" aria-label="Meta postingan">
<nav id="nav-below" class="post-navigation" aria-label="Posts">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://www.softize.net/html/belajar-membuat-coding-html-untuk-pemula-dengan-mudah/" rel="prev">Belajar Membuat Coding HTML untuk Pemula dengan Mudah</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://www.softize.net/html/tutorial-praktis-membuat-marquee-html-untuk-desain-website/" rel="next">Tutorial Praktis Membuat Marquee HTML untuk Desain Website</a></span></div> </nav>
</footer>
</div>
</article>
<div class="comments-area">
<div id="comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Tinggalkan komentar <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/mudah-belajar-membuat-gambar-di-tengah-html-untuk-website/#respond" style="display:none;">Batalkan balasan</a></small></h3><p class="must-log-in">Anda harus <a href="https://www.softize.net/wp-login.php?redirect_to=https%3A%2F%2Fwww.softize.net%2Fhtml%2Fmudah-belajar-membuat-gambar-di-tengah-html-untuk-website%2F">masuk</a> untuk berkomentar.</p> </div><!-- #respond -->
</div><!-- #comments -->
</div>
</main>
</div>
</div>
</div>
<div class="site-footer footer-bar-active footer-bar-align-center">
<footer class="site-info" aria-label="Situs" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info">
<div class="footer-bar">
<aside id="block-9" class="widget inner-padding widget_block widget_text">
<p><strong>Disclaimer:</strong> Web Softize merupakan platform yang membahas tentang aplikasi, software, dan coding. Konten yang kami sajikan bertujuan untuk memberikan informasi dan panduan kepada para pembaca. Kami berusaha untuk menyajikan informasi yang akurat dan up-to-date, namun kami tidak menjamin bahwa setiap informasi yang diberikan adalah benar dan tepat. Kami juga tidak bertanggung jawab atas kerugian yang mungkin timbul dari penggunaan informasi yang diberikan. Setiap pembaca harus bertanggung jawab untuk melakukan verifikasi dan pengecekan ulang sebelum mengambil tindakan berdasarkan informasi yang diterima dari Web Softize. Kami sangat menghargai kepercayaan Anda dan berusaha untuk memastikan bahwa setiap informasi yang kami sajikan bermanfaat dan berguna bagi para pembaca.</p>
</aside> </div>
<div class="copyright-bar">
©SoftizeNews Copyright 2023 </div>
</div>
</footer>
</div>
<a title="Gulirkan kembali ke puncak laman" aria-label="Gulirkan kembali ke puncak laman" rel="nofollow" href="#" class="generate-back-to-top" data-scroll-speed="400" data-start-scroll="300">
<span class="gp-icon icon-arrow-up"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M305.863 314.916c0 2.266-1.133 4.815-2.832 6.514l-14.157 14.163c-1.699 1.7-3.964 2.832-6.513 2.832-2.265 0-4.813-1.133-6.512-2.832L164.572 224.276 53.295 335.593c-1.699 1.7-4.247 2.832-6.512 2.832-2.265 0-4.814-1.133-6.513-2.832L26.113 321.43c-1.699-1.7-2.831-4.248-2.831-6.514s1.132-4.816 2.831-6.515L158.06 176.408c1.699-1.7 4.247-2.833 6.512-2.833 2.265 0 4.814 1.133 6.513 2.833L303.03 308.4c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span>
</a><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script> <div class="gp-modal gp-search-modal" id="gp-search">
<div class="gp-modal__overlay" tabindex="-1" data-gpmodal-close>
<div class="gp-modal__container">
<form role="search" method="get" class="search-modal-form" action="https://www.softize.net/">
<label class="screen-reader-text">Cari untuk:</label>
<div class="search-modal-fields">
<input type="search" class="search-field" placeholder="Cari …" value="" name="s" />
<button aria-label="Cari"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" /></svg></span></button>
</div>
</form>
</div>
</div>
</div>
<!--[if lte IE 11]>
<script src='https://www.softize.net/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.3.1' id='generate-classlist-js'></script>
<![endif]-->
<script id='generate-menu-js-extra'>
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Buka Submenu","closeSubMenuLabel":"Tutup submenu"};
</script>
<script src='https://www.softize.net/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.3.1' id='generate-menu-js'></script>
<script src='https://www.softize.net/wp-content/themes/generatepress/assets/dist/modal.js?ver=3.3.1' id='generate-modal-js' defer></script>
<script id='generate-back-to-top-js-extra'>
var generatepressBackToTop = {"smooth":"1"};
</script>
<script src='https://www.softize.net/wp-content/themes/generatepress/assets/js/back-to-top.min.js?ver=3.3.1' id='generate-back-to-top-js'></script>
<script src='https://www.softize.net/wp-includes/js/comment-reply.min.js?ver=c6d4f54ff5f7e221a70cdd46daa396b3' id='comment-reply-js' defer></script>
<script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://www.softize.net/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>
</body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me --> 
