Advertisement
Advertisement
Cara Menampilkan Widget di Template Blogspot Versi Mobile Saja | Di template landing page blogspot versi dua yang diberikan oleh owner. semua widget utama bisa ditampilkan menggunakan desktop atau mobile.
Hal ini berbeda dengan template landing page blogspot pada versi satu yang memberikan fasilitas widget yang hanya tampil di mobile atau hp aja. Dan juga widget yang tidak akan muncul di hp.
Nah, berhubung pada template yang pertama tidak tersedia fitur untuk menambah postingan, maka Armaila mencoba mengotak atik template versi dua yang sudah tersedia fitur postingannnya. Namun fitur widget hanya tampil di mobile tidak disertakan.
Setelah googling akhirnya nemu juga panduan bagaimana "Cara Menampilkan Widget di Template Blogspot Versi Mobile" saja yang akan admin terapkan di Blogspot Landing Page ku.
Menampilkan Widget di Template Blogspot Versi Mobile
hal pertama yang perlu diperhatikan adalah memastikan widget yang mana yang tidak ditampilkan di desktop dan hanya muncul di mobile saja.
Dalam kasus Armaila. Widget yang akan disetting muncul di hp saja adalah widget dengan id HTML55
Dan berikut ini kode yang perlu ditambah
<b:widget cond='data:blog.isMobileRequest' id='HTML55' locked='true' title='Hanya Tampil di HP' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><a href="https://shopee.co.id/umahopat" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmd-X-1h_T4w8HSkpPz5subCjcSVvWFrF0PdLi_BBLkXlB4jiA9n8eo3h4zI38nw7etY15YKygvg8hNuUwMKUWYGISpYqZu4JrLMxLW7tyOqrZ7KVCxBtlIEIzx_mzbQIyYWnX7jQlrh4/s1600/Cara+Menambah+Link+Pada+Gambar+HTML+armaila+akhir+mali.png" title="Beli Via Shopee" alt="Beli Via Shopee" />
</a></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- 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:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget-settings>
<b:widget-setting name='content'><a href="https://shopee.co.id/umahopat" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmd-X-1h_T4w8HSkpPz5subCjcSVvWFrF0PdLi_BBLkXlB4jiA9n8eo3h4zI38nw7etY15YKygvg8hNuUwMKUWYGISpYqZu4JrLMxLW7tyOqrZ7KVCxBtlIEIzx_mzbQIyYWnX7jQlrh4/s1600/Cara+Menambah+Link+Pada+Gambar+HTML+armaila+akhir+mali.png" title="Beli Via Shopee" alt="Beli Via Shopee" />
</a></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- 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:include name='quickedit'/>
</b:includable>
</b:widget>
Jika diringkas akan menjadi seperti berikut ini
True: untuk memunculkan di mobile saja. Jika ingin menyembunyikan di mobile maka ganti jadi "false"
HTML55: sesuaikan dengan id widget yang akan ditampilkan di mobile saja
NB:
Mohon maaf jika penjelasannya belepotan karena ini hanya sekedar dokumentasi pribadi yang berhasil dipraktekkan dari beberapa tutorial yang beredar di google. Dengan harapan bisa merujuk kembali kesini jika terjadi permasalahan yang sama di kemudian hari.
<b:widget cond='data:blog.isMobileRequest' id='HTML55' locked='true' title='Hanya Tampil di HP' type='HTML' version='1'>
<!-- KODE WIDGET-->
</b:widget>
<!-- KODE WIDGET-->
</b:widget>
True: untuk memunculkan di mobile saja. Jika ingin menyembunyikan di mobile maka ganti jadi "false"
HTML55: sesuaikan dengan id widget yang akan ditampilkan di mobile saja
NB:
Mohon maaf jika penjelasannya belepotan karena ini hanya sekedar dokumentasi pribadi yang berhasil dipraktekkan dari beberapa tutorial yang beredar di google. Dengan harapan bisa merujuk kembali kesini jika terjadi permasalahan yang sama di kemudian hari.
Advertisement
