Cara Menyembunyikan dan Menampilkan Widget di halaman Tertentu
 |
| Cara Menyembunyikan dan Menampilkan Widget di halaman Tertentu |
Kita juga dapat menyembunyikan widget yang tidak perlu tampil pada sebagian halaman tapi masih bisa ditampilkan di halaman tertentu. Kita bisa menggunakan tag kondisional untuk menyembunyikan widget pada halaman tertentu. Dengan cara membungkus widget tertentu dengan tag kondisional.
Berikut beberapa contoh tag kondisonal yang digunakan untuk menyembunyikan atau menampilkan widget pada halaman terentu.
1. Menampilkan Wiidget Hanya pada halaman Awal
<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>
2. Menampilkan Widget di Semua Halaman Kecuali Halaman Awal
<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>
3. Menampilkan Widget Hanya di Halaman Archive
<b:if cond='data:blog.pageType == "archive"'>
......................................................
</b:if>
4. Menampilkan Widget di Semua Halaman Kecuali Halaman Archive
<b:if cond='data:blog.pageType != "archive"'>
.....................................................
</b:if>
5. Menampilkan Widget Hanya di Halaman Postingan
<b:if cond='data:blog.pageType == "item"'>
......................................................
</b:if>
6. Menampilkan Widget di Semua Halaman Kecuali Halaman Postingan
<b:if cond='data:blog.pageType != "item"'>
......................................................
</b:if>
7. Menampilkan Widget Hanya di Postingan Tertentu
<b:if cond='data:blog.pageType == "alamat-postingan"'>
......................................................
</b:if>
8. Menampilkan Widget Selain di Halaman Tertentu
<b:if cond='data:blog.pageType != "alamat-postingan"'>
......................................................
</b:if>
9. Menampilkan Widget Hanya di Halaman Static Page
<b:if cond='data:blog.pageType == "static_page"'>
......................................................
</b:if>
10. Menampilkan Widget di Semua Halaman Kecuali Halaman Static Page
<b:if cond='data:blog.pageType != "static_page"'>
......................................................
</b:if>
Untuk cara pemakaian dan penempatatan tag kondisinal di atas silahkan ikuti langkah langkah berikut
Langkah Pertama
Masuk Blogger, buka template pilih edit html
Langkah Kedua
Cari script widget yang hendak anda bunggkus dengan tag kondisional. Contoh saya akan menyembunyikan widget Artikel Terbaru dari halaman awal, maka anda tinggal mencari script widget Artikel Terbaru secara manual atau dengan mencari ID Widgetnya.
Langkah Ketiga
Setelah anda temukan kode script widgetnya, sekarang anda tinggal memberikan tag kondisional di atas pada script widget tersebut. Contoh saya akan menyembunyikan widget Recent Post di hlaman awal, maka hasilnya sebagai berikut
<b:widget id='HTML1' locked='false' title='Artikel Terbaru' type='HTML' version='1' visible='true'><b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:widget>
Ini merupakan contoh dari pembungkusan script widget oleh tag kondisional, dimana kode yang berwarna biru adalah tag kondisional yang membungkus. Perlu diingat penyimpanan tag kondisional tersebut haruslah benar dan tepat. Apabila salah sedikit saja dalam penempatannya maka tidak akan berfungsiLangkah Keempat
Apabila selesai, simpan perubahan template
Nah sampai sini untuk Cara Menyembunyikan dan Menampilkan Widget dihalaman Tertentu. Semoga artikel ini bisa bermanfaat bagi teman-teman semua, apabila ada yang ingin ditanyakan silahkan berkoentar di bawah.
Cara Menyembunyikan dan Menampilkan Widget di halaman Tertentu
Anda dapat menggunakan CSS dan JavaScript untuk menyembunyikan dan menampilkan widget di halaman tertentu. Berikut adalah cara untuk melakukannya:
Baca Juga : Cara Mengetahui Jumlah Postingan Blog Punya Orang Lain
Menyembunyikan Widget dengan CSS: Anda dapat menggunakan CSS untuk menyembunyikan widget dari halaman tertentu. Anda dapat memberikan widget tersebut suatu kelas atau ID, dan kemudian menggunakan CSS untuk menyembunyikannya.
Contoh:
html<div id="widget">Konten Widget</div>CSS:
css#widget { display: none; }Jika Anda ingin menampilkan kembali widget tersebut di halaman lain, cukup gunakan CSS untuk mengatur properti
displaymenjadiblockatauinline.Menyembunyikan dan Menampilkan Widget dengan JavaScript: Anda juga dapat menggunakan JavaScript untuk mengontrol kapan widget tersebut ditampilkan atau disembunyikan. Berikut adalah contoh menggunakan JavaScript untuk menyembunyikan dan menampilkan widget:
Contoh HTML:
html<div id="widget">Konten Widget</div>JavaScript:
javascript// Untuk menyembunyikan widget document.getElementById('widget').style.display = 'none'; // Untuk menampilkan widget document.getElementById('widget').style.display = 'block'; // atau 'inline'Anda dapat menempatkan skrip JavaScript ini di bagian
<head>atau<body>halaman web Anda. Pastikan bahwa skrip JavaScript ini dieksekusi setelah elemen widget dimuat.Menyembunyikan dan Menampilkan Widget Berdasarkan Halaman atau URL: Jika Anda ingin menyembunyikan atau menampilkan widget berdasarkan halaman atau URL tertentu, Anda dapat menggunakan JavaScript untuk mendeteksi URL dan kemudian menyembunyikan atau menampilkan widget berdasarkan URL tersebut. Ini memerlukan penggunaan JavaScript yang lebih canggih, mungkin dengan menggunakan beberapa jenis logika atau kondisional.
Contoh:
javascript// Mendapatkan URL halaman var currentURL = window.location.href; // Jika URL sesuai, maka tampilkan widget if (currentURL === 'https://contoh.com/halaman-tertentu') { document.getElementById('widget').style.display = 'block'; } else { // Jika tidak, maka sembunyikan widget document.getElementById('widget').style.display = 'none'; }
Pastikan untuk menggantikan 'widget' dengan ID atau kelas sesuai dengan widget yang ingin Anda sembunyikan atau tampilkan. Juga, pastikan untuk menyesuaikan kondisi atau URL yang digunakan dalam skrip JavaScript sesuai dengan kebutuhan Anda.
