Tag: CSS

wpJakarta – Mengatasi Masalah Mobile Friendly Karena Element PRE HTML. Element <pre> pada HTML merepresentasikan sebagai preformatted text. Bahasa sininya text yang sebelum diformat atau teks pra format, atau teks yang ditampilkan sebagaimana aslinya. Yah pokoknya maksudnya itulah. Jelasnya coba aja google “preformatted text”.

Umumnya Tag <Pre> dipakai misalnya saat memberikan tutorial yang isinya kode-kode atau bahasa pemrograman komputer. Meskipun tujuannya tag <pre> pastinya lebih luas bukan sekedar buat nampilin kode-kode pada blog tutorial saja. Kalaupun mau nampilin skrip kode menggunakan tag <pre>, maka biasanya diikuti oleh tag <code>, Misalnya : <pre><code> skrip kode yang ingin ditampilkan </code></pre>. Maka seluruh skrip/kode yang di ketikan akan di tampilkan semuanya oleh browser seperti text biasa. Seperti contohnya pada kode di bawah maka simbol tag seperti < atau > p “style”, color, href, dan semua element HTML lainnya akan di tampilkan.

  /* Script atau kode yang ditulis di dalam tag <pre> */

  <p style="color: green;"><a href="https://wpjakarta.com/">wpJakarta.Com {</a></p>
  <p style="color: red;">URL: <code>https://wpjakarta.com/</code>;</p>
  <p style="color: brown;">} //a Text Based WP Site!</p>

Sedangkan jika tiga baris di atas di tulis bukan di dalam tag <pre>, maka hasilnya akan ditampilkan oleh browser sebagai berikut :

Masalah yang muncul ketika menggunakan tag <pre>

Blog-blog tutorial yang memberikan kode akan menggunakan tag <pre> dan <code> untuk kode-kode yang ingin disharing. Secara default tanpa memberikan “style” pada tag <pre> maka masalah “mobile friendly” muncul pada artikel dimana tag <pre> di gunakan.

Pada gambar disamping, dimana artikel tentang skrip kode yang ditulis di dalam tag <pre> secara default. Hasilnya menimbulkan masalah “mobile freindly” karena baris kode yang terlalu panjang tetap di tampilkan memanjang hingga melebihi screen handphone atau tablet bahkan layar PC.

Untuk Mengatasi Masalah Element PRE HTML, maka dapat ditambahkan “stylesheet” css dengan selector “pre”. Yaitu dengan style overflow atau wrap-text, dengan masing masing fungsinya sebagai berikut.

Mengatasi masalah element pre HTML dengan “overflow”

Dengan overflow maka akan memunculkan “scrollbar” pada bagian bawah apabila sebuah teks diketikan terlalu panjang. Ketikan css berikut pada kustom css editor :

 pre {
     overflow: auto;
 }

Namun hal tersebut juga “kurang disukai” sebagian orang. Karena jika kodenya memang panjang maka orang harus sedikit mengeluarkan “usaha” untuk menggerakan mousenya untuk menscroll ke kanan. Dan saat di scroll ke kanan tentu saja menutupi atau menyembunyikan teks atau kode yang di tulis dibagian kiri. Artinya jika ada orang yang ingin memahami kode yang di buat, maka harus scroll ke kanan, kiri, balik lagi ke kanan atau kekiri lagi.

Mengatasi masalah element pre HTML dengan Wrap-text

Maka selain cara “overflow” diatas. Pre juga bisa ditambahkan style css “wrap-text”, dengan kode css sebagai berikut :

 pre {
     white-space: pre-wrap;
 }

Dengan begitu kode yang panjang ke kanan saat menyentuh batas akan otomatis pindah baris kebawah. Dan pengunjung tidak perlu menscroll ke kanan karena seluruh kode akan di tampilkan didepannya secara utuh.

 pre {
     white-space: pre-wrap;
 }
 
 <p style="color: red;">URL: <code>https://wpjakarta.com/</code>;</p> /* Kode ini 
 memiliki komentar yang begitu panjang, bahkan lebih panjang dari kodenya sendiri, tapi 
 dengan style "white-space: pre-wrap" maka kode yang panjang ini akan tetap didisplay 
 secara utuh dan tidak membuat google "marah" karena halaman yang tidak mobile friendly. 
 */  /* akhir dari komentar */

Menambahkan element stylesheet lainnya pada <pre> dan <code>

Karena tag HTML <pre> dapat ditambahkan element stylesheet, dan biasanya juga digunakan untuk sharing tutorial kode, maka element <pre> dapat di berikan element stylesheet lainnya agar skrip atau kode yang di sharing jadi tambah “ganteng”. Misalnya :

  pre {
      white-space: pre-wrap;
      background: #222;
      border: 1px solid #000;
      font-size: 12px;
  }
  code {
      color: orangered;
  }

---

100% website WordPress transparan dan “ecofriendly”, tidak ada data pengunjung yang kami kumpulkan dan tidak ada tracking data apapun terhadap data-data pengunjung”.​ Selengkapnya kunjungi halaman tentang kami.

wpJakarta

Blog “native” yang fokus pada usaha online berbasis WordPress & WooCommerce. Lihat penawaran terbaik untuk merchandise WordPress (Kaos, Hoodie, Topi, Tas dll).

Selengkapnya, klik : https://wpjakarta.com/shop/

Fresh (+62)

e-Commerce produk fresh online. Order secara online sayur, daging, buah dan bumbu rempah atau kirim list pesanan untuk pemenuhan usaha makanan dan restoran.

Selengkapnya, klik : https://freshplus62.com/about/

wpJakarta – Membuat Kotak Pencarian WordPress Dengan HTML & CSS. Di artikel sebelumnya kami telah membuat dua kolom layout halaman atau post WordPress. https://wpjakarta.com/blog/membuat-dua-kolom-layout-halaman-wordpress/. Seperti hasilnya pada halaman homepage wpJakarta.com (jika belum diganti.

Kini kami membuat artikel dimana kolom kiri adalah teks dengan animasi mengetik. Dan kolom kanan adalah kotak pencarian, seperti pada halaman homepage kami.

Membuat kotak pencarian WordPress dengan plugin atau blok editor

Untuk membuat kotak pencarian atau search box pada halaman tersebut bisa dilakukan dengan mudah menggunakan plugin page builder atau blok editor gutenberg. Selain itu membuat dua kolom layout dengan masing-masing element pada kolom tersebut juga sangat mudah dilakukan dengan HTML dan CSS.

Baca Juga :

• https://wpjakarta.com/blog/membuat-dua-kolom-layout-halaman-wordpress/
• https://wpjakarta.com/blog/membuat-artikel-menggunakan-gutenberg-blok-editor-wordpress/
• https://wpjakarta.com/blog/fitur-fitur-gutenberg-block-editor/

Membuat kotak pencarian WordPress dengan HTML dan CSS

Untuk membuat tersebut, maka perlu dibuat dua kolom dengan lebar yang berbeda lebarnya antara kolom sisi kiri dan sisi kanan. Untuk membuat layout dua kolom pada halaman wordpress lihat artikel kami sebelumnya, https://wpjakarta.com/blog/membuat-dua-kolom-layout-halaman-wordpress/.

Isi masing-masing kolom dengan element (HTML)

Kolom sebelah kanan di isi dengan teks “Site information” dengan animasi mengetik :

 <ul style="text-align: left; list-style: none; margin: 0; padding: 0;">
   	 <li style="list-style-type: none;"><i class="fa fa-info-circle" aria-hidden="true"><strong> Site Information :</strong></i></li>
 	 <li></li>
 </ul>
 <div class="row">
   <div class="homepg-typing">
     <p style="color: green;"><a href="https://wpjakarta.com/">wpJakarta.Com {</a></p>
     <p style="color: red;">URL: <code>https://wpjakarta.com/</code>;</p>
     <p style="color: brown;">} //a Text Based WP Site!</p>
   </div>

Kolom sebelah kanan di isi dengan element search box atau kotak pencarian plus tombol yang sejajar :

 <div class="kolom-cari">
   <ul style="text-align: left; list-style: none; margin: 0; padding: 0;">
    <li style="list-style-type: none;"><i class="fa fa-search"></i><strong> Cari artikel :</strong></li>
   </ul>
 <form class="form-cari"><input name="s" type="text" placeholder="Cari artikel...">
 <button type="submit"><i class="fa fa-search"></i></button>
 </form>
 </div>

Berikan masing-masing element dengan style CSS (CSS)

 /* Homepage 2 kolom */
 .homepg-typing {
   float:left;
   width: 40%;padding:10px;
 }
.kolom-cari {
   float:left;
   width:60%;
   padding:10px;
 }

 /* Clear floats kedua kolom */
 .row:after {
   content:"";
   display:table;
   clear:both;
 }

 /* Layout Responsif */
 @media screen and (max-width: 600px) {
  .css-typing, .cari {
    width:100%;
   }
  }

 /* Kotak search */
 form-cari 
   input[type=text] {
   height:40px;
   padding:10px;
   font-size:16px;
   border: 1px solid grey;
   float:left;
   width:80%;
   background: #f9f9f9;}

 /* tombol search */
 form-cari button {
   float:left;
   width:20%;
   padding:10px;
   background:dodgerblue;
   color:white;
   font-size:17px;
   border:1.5px solid dodgerblue;
   border-left:none;
   cursor:pointer;
 }

 /* tombol search hover*/
 form-cari button:hover {
   background: #0b7dda;
  }

 /* Kotak search after */
 form-cari::after {
   content: "";
   clear: both;
   display:table;
 }

 /* kotak tombol sejajar */
 .form-cari {
   display:flex;
   flex-flow: row wrap;
   align-items: center;
 }

 /* Layout Responsif */
 @media screen and (max-width:600px) {
.form-cari {
   width:100%;
   }
 }

Prinsipnya search box tersebut bisa ditempatkan dimana saja. Pada artikel ini kami menempatkannya di halaman homepage karena ingin desain yang simple dan minimal tapi bisa memudahkan pengunjung untuk mencari artikel atau post.

Sedangkan untuk kode CSS untuk membuat animasi mengetik seperti pada kolom sebelah kiri kami buat kan tutorial terpisah. Silahkan lihat artikel berikut.

wpJakarta Tips Trik WordPress

WpJakarta Resources Tips Trik WordPress. Website dengan penerbitan-penerbitan artikel ringan tentang WordPress (Tutorial, Tips Trik, Plugin Dan Themes WordPress) dan Teknologi Informasi secara umum. Sesekali juga berbicara tentang apapun dan hal yang umum (Blogging, Tekno, Bisnis, Sosial, Budaya, Politik, Urusan Negara hingga urusan Akhirat). Serta informasi & penawaran produk digital dan non digital.

---

100% website WordPress transparan dan “ecofriendly”, tidak ada data pengunjung yang kami kumpulkan dan tidak ada tracking data apapun terhadap data-data pengunjung”.​ Selengkapnya kunjungi halaman tentang kami.

wpJakarta

Blog “native” yang fokus pada usaha online berbasis WordPress & WooCommerce. Lihat penawaran terbaik untuk merchandise WordPress (Kaos, Hoodie, Topi, Tas dll).

Selengkapnya, klik : https://wpjakarta.com/shop/

Fresh (+62)

e-Commerce produk fresh online. Order secara online sayur, daging, buah dan bumbu rempah atau kirim list pesanan untuk pemenuhan usaha makanan dan restoran.

Selengkapnya, klik : https://freshplus62.com/about/

wpJakarta – Membuat Dua Kolom Layout Pada Halaman Atau Post WordPress. Website wpJakarta.com dibuat menggunakan tema website WordPress yang sudah jadi. Atau bukan dari kertas kosong (bahasa kerennya “scratch”). Lalu dilakukan sedikit modifikasi dan kustomisasi.

Tapi dalam membuat desain sebuah halaman atau post, wpjakarta tidak menggunakan plugin “page builder”. Melainkan lebih menekankan dengan menambahkan kode html dan css pada halaman atau post tersebut. Setiap kustomisasi yang dilakukan pada website ini selalu diusahakan dilakukan tanpa plugin. Dan hasilnya dituangkan dalam artikel-artikel yang ada di website ini.

Baca Juga :

• Menggunakan Fitur Fitur Gutenberg Block Editor
• Membuat Artikel Menggunakan Gutenberg (Blok Editor) WordPress
• Cara Merubah Prefix Nama Database WordPress

Membuat dua kolom layout pada halaman atau post WordPress dengan HTML dan CSS

Kali ini kami membuat dua kolom lay-out yang kami aplikasikan pada halaman homepage kami yang jadul dan benar-benar tidak menarik. Kolom sebelah kiri kami isi dengan paragraf “site information” dengan animasi mengetik. Sedangkan kolom kedua diisi dengan “kotak pencarian”.

Tapi sebelum kami memberikan tutorial membuat teks mengetik dan kotak pencarian, kami buatkan dulu tutorial dalam membuat dua kolom layout. Untuk membuat dua kolom layout tentu anda dapat dengan mudah menggunakan plugin page builder ataupun blok editor.

Tapi pada tutorial ini kami tidak menggunakan plugin. Melainkan dengan kode HTML dan CSS untuk membuat dua kolom layout halaman atau post WordPress dan memberikan element pada kedua kolomnya.

“Membelah” satu halaman kedalam dua kolom

Ketikan kode HTML dan CSS berikut pada halaman dimana kolom akan dibuat. Kolom kiri dan kanan dengan div yang sama yaitu “kolom” karena porsi lebarnya yang sama, yaitu 50% lebar masing-masing :

 <div class="row">
   <div class="kolom" style="background-color:#3369ff">
     <h2>Kolom 1 sebelah kiri</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
   <div class="kolom" style="background-color:#4fbba9">
     <h2>Kolom 2 sebelah kanan</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
 </div>

Lalu pada kotak kustom css editor ketikan kode css berikut untuk membuat style pada dua kolom float dengan lebar sama / @ 50%.

 .kolom {
   float: left;
   width: 50%;
   padding: 10px;
   height: 300px;
 }
 .row:after {
   content: "";
   display: table;
   clear: both;
 }

Membuat Layout Responsif / kolom akan menumpuk atas dan bawah pada screen dengan resolusi kurang dari 600px. Tambahkan kode berikut dibawah kode css yang sudah dibuat diatas.

 @media screen and (max-width: 600px) {
   .column {
   width: 100%;
   }
 }

Secara lengkap kodenya akan sebagai berikut :

 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 * {
    box-sizing: border-box;
 }
  .kolom {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
 }
  .row:after {
    content: "";
    display: table;
    clear: both;
 }
 @media screen and (max-width: 600px) {
   .column {
     width: 100%;
   }
 }
 </style>
 </head>
 <body>
  <div class="row">
   <div class="kolom" style="background-color:#3369ff">
     <h2>Kolom 1 sebelah kiri</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
   <div class="kolom" style="background-color:#4fbba9">
     <h2>Kolom 2 sebelah kanan</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
 </div>
 </body>
 </html>

Membuat dua element yang berbeda di setiap kolom

Pada tutorial diatas kami hanya membagi halaman menjadi dua kolom dan memberikan element teks paragraf baik pada kolom kiri dan kanan. Sedangkan seperti pada terlihat halaman homepage kami (jika belum kami rubah), dimana sebelah kiri adalah teks paragraph dengan animasi mengetik. Sedangkan sebelah kanan adalah kotak pencarian. Selengkapnya bagaimana kami membuat halaman homepage tersebut. Kami tuangkan dalam artikel berikut : Membuat kotak pencarian wordpress (searh box).

---

100% website WordPress transparan dan “ecofriendly”, tidak ada data pengunjung yang kami kumpulkan dan tidak ada tracking data apapun terhadap data-data pengunjung”.​ Selengkapnya kunjungi halaman tentang kami.

wpJakarta

Blog “native” yang fokus pada usaha online berbasis WordPress & WooCommerce. Lihat penawaran terbaik untuk merchandise WordPress (Kaos, Hoodie, Topi, Tas dll).

Selengkapnya, klik : https://wpjakarta.com/shop/

Fresh (+62)

e-Commerce produk fresh online. Order secara online sayur, daging, buah dan bumbu rempah atau kirim list pesanan untuk pemenuhan usaha makanan dan restoran.

Selengkapnya, klik : https://freshplus62.com/about/