Blogspot: Cara Menampilkan/Menyembunyikan Konten SItus/Blog Pada Perangkat Seluler (Mobile)

Tomata LikuangTomata Likuang November 08, 2018

Bagaimana Menampilkan Atau Menyembunyikan Konten Blog Pada Perangkat Seluler?

Blogger.com-Jika Anda ingin beberapa konten situs web hanya ditampilkan di perangkat seluler atau tidak ditampilkan di perangkat seluler, baca terus. Kita bisa melakukan ini menggunakan CSS. Ini memungkinkan pengembang web untuk dengan mudah mengontrol jenis konten apa yang akan muncul di perangkat seluler dan apa yang akan ditampilkan di desktop. Hal ini juga berguna untuk Google Adsense penerbit sebagai Google secara default memungkinkan hanya tiga iklan pada halaman tertentu dan jika Anda ingin mengontrol posisi Google Ads secara terpisah untuk desktop dan perangkat seluler, maka metode ini dapat digunakan untuk mengelola tampilan sesuai perangkat.
https://blogpress-id.blogspot.com/

Misalkan, memiliki blok kode untuk yang menampilkan teks atau gambar di situs web, lalu lampirkan kode itu dalam DIV dengan kelas.

<div class = "mobileContent">
<h2> ANDA MELIHAT DI MOBILE </ h2>
</ div>

Misalkan kita ingin konten di atas hanya pada perangkat seluler, kemudian tambahkan kode berikut pada HEAD dari halaman HTML.
<style type="text/css">

 .mobileContent{ display: none;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .mobileContent{ display: inline;}}

</style>

Apa yang dilakukan kode CSS di atas adalah menonaktifkan tampilan secara default, tetapi menampilkan konten hanya jika dilihat di perangkat seluler. Ini dicapai dengan menggunakan aturan @media CSS yang ditentukan oleh resolusi. Karena, kode CSS di atas hanya ditambahkan ke halaman HTML, itu hanya berlaku untuk halaman tertentu. Jika Anda ingin melakukan hal yang sama untuk seluruh situs, maka kode CSS harus ditambahkan ke file CSS utama situs seperti di bawah ini.

Di main.css (atau apa pun file CSS utama situs Anda), tambahkan baris berikut:
 .mobileContent{ display: none;}
Baris di atas menonaktifkan blok DIV "mobileContent" secara default. Jadi itu tidak dimuat.

Di halaman HTML, tambahkan kode berikut dalam bagian HEAD:
<style type="text/css">

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .mobileContent{ display: inline;}}

</style>
Kode di atas memungkinkan "konten seluler" di perangkat seluler. Tetapi kode tersebut hanya diterapkan pada halaman HTML, jadi itu hanya berlaku pada halaman tertentu. Jadi, untuk menerapkan pada setiap halaman, Anda perlu menerapkan kode pada semua halaman HTML. Cara yang lebih baik adalah memiliki template master HTML umum atau jika itu adalah situs php, Anda dapat menambahkannya ke file "header.php" di bawah bagian <HEAD>.

Bagaimana cara beralih konten situs web tergantung pada apakah ditampilkan di ponsel atau desktop?

Misalkan Anda harus menampilkan satu konten di perangkat seluler saja dan konten lain di situs web saja. Tetapi keduanya tidak dapat ditampilkan pada saat yang bersamaan.
<div class="mobileContent">

<h2>YOU ARE VIEWING ON MOBILE</h2>

</div>

<div class="desktopContent">

<h2>YOU ARE VIEWING ON DESKTOP</h2>

</div>
Dalam contoh kode HTML di atas, blok 'mobileContent' hanya ditampilkan di perangkat seluler dan "desktopContent" hanya ditampilkan di desktop tetapi tidak pernah keduanya. Untuk mencapai hal itu, lakukan hal berikut.

Di file CSS utama, tambahkan kode berikut.
 .mobileContent{ display: none;}
Seperti yang Anda lihat, di main.css kami hanya menambahkan kode "mobileContent" dan layar yang dinonaktifkan. Jadi, "desktopContent" diaktifkan secara default.

Di bagian HEAD dari halaman HTML atau header.php (jika situs php dengan file header terpisah), tambahkan kode berikut di bagian HEAD.
<style type="text/css">

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .desktopContent{ display: none;}}

  
@media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .mobileContent{ display: inline;}} 

</style>
Apa yang dilakukan kode CSS di atas adalah menonaktifkan "desktopContent" di perangkat seluler dan mengaktifkan "mobileContent" di seluler. Saat melihat situs di desktop, "desktopContent" ditampilkan secara default sebagaimana diaktifkan di file main.css.

Sekarang uji situs Anda di desktop dan dengan akses di perangkat seluler.
Tags