Jumat, 27 Mei 2016
Advertisement
Advertisement
Widget merupakan sebuah item yang ada di sebuah platform yang bertujuan sebagai penunjuk atau sebuah ruang space yang dapat digunakan dengan berbagai macam kebutuhan seperti penempatan space iklan, banner penjualan berupa gambar ataupun untuk menampilkan daftar judul postingan yang telah dipublish sebelumnya, jadi kita bisa mempergunakanya sesuai apa yang dibutuhkan kita . Sangat cocok sekali jika digunakan sebagai penampil sebuah produk atau jaringan iklan yang sudah didaftarkan.
Sebagai contoh dengan platform blogspot yang telah menyediakan sebuah widget otomatis, tepatnya di menu Tata Letak dan kita bisa menyesuaikan sesuai kebutuhan kita.
Cara memasangnya pun juga cukup mudah, kita tinggal ke Menu Dashboard -> Tata Letak dan kita bisa menambahkan widget apa yang kita perlukan dan tidak kalah juga platform blogspot juga telah membuatkan banyak widget yang mungkin dapat kita coba, jadi kita bisa menambahkanya secara otomatis.
Sebagai contoh jika kita ingin menambahkan Sebuah Translate otomatis di blogspot cukup cari saja Widget Google Translate disana lalu install .
Baca : Menambahkan Widget Translate Otomatis ( Tanpa Load Halaman )
Setelah kita sudah menginstall sebuah widget di sebuah blog yang telah kita buat tetapi kita menginginkan agar hanya bisa/tidak tampil di tampilan mobile.
Tetapi, mungkin kita bertanya bagaimana caranya ? itu sangat mudah sekali, tetapi sebelum kita menuju ke pembahasan inti kita bahas terlebih dahulu kesalahan fatal yang mungkin pernah anda lakukan sewaktu menyembunyikan sebuah widget pada saat tampilan mobile.
Seperti apakah kesalahan tersebut ?
Kita menyembunyikan widget dengan cara hidden css
Hal ini sangatlah akan membuat loading halaman blog kita menjadi sangat berat dikarenakan masih ada request di dalam widget tersebut.
Jika anda menambahkan widget bersamaan dengan javascript atau image ketika anda hidden dengan css display:none justru masih menimbulkan request pada saat loading dan akan memperberat kecepatan blog anda, sebaiknya jauhi penggunaan seperti ini .
Biasanya kode untuk menonaktifkan tampilan mobile dari css seperti ini: #HTML1 {display:none}
Biasanya dapat kita temui pada sebuah blog yang memasang sebuah kode ads seperti adsense .
Baca juga : Trik Loading Blog ringan dari Iklan Adsense
Cara mengatasi hal itu lantas bagaimana ? bloghafid telah mencoba sebuah script yang dimana dapat menghandle request dan juga pada saat menampilkan/menyembunyikan widget dapat terhandle dengan sempurna tanpa ada request dari file gambar ataupun javascript, bagaimana kodenya ? berikut bloghafid telah meringkasnya :
1. Login ke Blogger.
2. Masuk ke Dashboard -> Template .
3. Masukkan kode berikut setelah kode <b:includable id='main'> dan sebelum itu silahkan cari kode widget id yang akan kita hidden pada tampilan mobile .
Kode seperti berikut :
<b:if cond='data:blog.isMobileRequest == "false"'>
</b:if>
Contoh :
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- 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:includable>
Penjelasan :
Kata false digunakan untuk menyembunyikan semua elemen pada widget tersebut tanpa adanya request apapun pada saat tampilan mobile. Bisa diganti dengan value true untuk menampilkan semua elemen widget tersebut hanya untuk mobile tidak untuk desktop .
4. Kemudian Simpan Template .
Sekarang kita tidak usah menggunakan property css display:none pada blog untuk menyembunyikan sebuah widget tetapi kita pergunakan sebuah fitur yang memang sudah di sediakan oleh platform blogspot tanpa adanya request dari file gambar ataupun async javascript .
 |
| Logo Blogger |
Cara memasangnya pun juga cukup mudah, kita tinggal ke Menu Dashboard -> Tata Letak dan kita bisa menambahkan widget apa yang kita perlukan dan tidak kalah juga platform blogspot juga telah membuatkan banyak widget yang mungkin dapat kita coba, jadi kita bisa menambahkanya secara otomatis.
Sebagai contoh jika kita ingin menambahkan Sebuah Translate otomatis di blogspot cukup cari saja Widget Google Translate disana lalu install .
Baca : Menambahkan Widget Translate Otomatis ( Tanpa Load Halaman )
Setelah kita sudah menginstall sebuah widget di sebuah blog yang telah kita buat tetapi kita menginginkan agar hanya bisa/tidak tampil di tampilan mobile.
Tetapi, mungkin kita bertanya bagaimana caranya ? itu sangat mudah sekali, tetapi sebelum kita menuju ke pembahasan inti kita bahas terlebih dahulu kesalahan fatal yang mungkin pernah anda lakukan sewaktu menyembunyikan sebuah widget pada saat tampilan mobile.
Seperti apakah kesalahan tersebut ?
Kita menyembunyikan widget dengan cara hidden css
Hal ini sangatlah akan membuat loading halaman blog kita menjadi sangat berat dikarenakan masih ada request di dalam widget tersebut.
Jika anda menambahkan widget bersamaan dengan javascript atau image ketika anda hidden dengan css display:none justru masih menimbulkan request pada saat loading dan akan memperberat kecepatan blog anda, sebaiknya jauhi penggunaan seperti ini .
Biasanya kode untuk menonaktifkan tampilan mobile dari css seperti ini: #HTML1 {display:none}
Biasanya dapat kita temui pada sebuah blog yang memasang sebuah kode ads seperti adsense .
Baca juga : Trik Loading Blog ringan dari Iklan Adsense
Cara mengatasi hal itu lantas bagaimana ? bloghafid telah mencoba sebuah script yang dimana dapat menghandle request dan juga pada saat menampilkan/menyembunyikan widget dapat terhandle dengan sempurna tanpa ada request dari file gambar ataupun javascript, bagaimana kodenya ? berikut bloghafid telah meringkasnya :
1. Login ke Blogger.
2. Masuk ke Dashboard -> Template .
3. Masukkan kode berikut setelah kode <b:includable id='main'> dan sebelum itu silahkan cari kode widget id yang akan kita hidden pada tampilan mobile .
 |
| Show Hide Mobile |
<b:if cond='data:blog.isMobileRequest == "false"'>
</b:if>
Contoh :
<b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- 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:includable>
Penjelasan :
Kata false digunakan untuk menyembunyikan semua elemen pada widget tersebut tanpa adanya request apapun pada saat tampilan mobile. Bisa diganti dengan value true untuk menampilkan semua elemen widget tersebut hanya untuk mobile tidak untuk desktop .
4. Kemudian Simpan Template .
Sekarang kita tidak usah menggunakan property css display:none pada blog untuk menyembunyikan sebuah widget tetapi kita pergunakan sebuah fitur yang memang sudah di sediakan oleh platform blogspot tanpa adanya request dari file gambar ataupun async javascript .
Advertisement
Advertisement