Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

0
Tgl. 04 Maret 2012

Menyembunyikan Menu Ikon Mengapung Pada Tampilan Seluler

Jika pada artikel sebelumnya yang berjudul, “ Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot ” telah diuraikan bagaimana ca...

Tampilan Menu Dengan Ikon Mengapung Pada Halaman Blog
Jika pada artikel sebelumnya yang berjudul, “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot” telah diuraikan bagaimana cara untuk membuat daftar artikel terkait pada template blogspot untuk tampilan seluler, maka sebenarnya bila teknik tersebut diterapkan dalam template blog yang mengandung atau menggunakan menu ikon mengapung (floating menu with icons), menu ikon mengapung tersebut pada akhirnya juga akan dimunculkan pada tampilan seluler blog tersebut. Sehingga dengan tetap dimunculkannya menu ikon mengapung pada halaman blog untuk tampilan seluler, bisa jadi malah akan mengganggu pengunjung blog dalam membaca konten artikel.

Ilustrasi Blog Dalam Tampilan Seluler

Gambar di atas menunjukkan menu ikon mengapung yang dimunculkan pada halaman blog untuk tampilan seluler. Dimana pada gambar di atas dapat dilihat bahwa menu ikon mengapung yang dimunculkan pada halaman blog tersebut malah menutupi sebagian konten artikel. Sehingga menu ikon mengapung tersebut perlu disembunyikan agar tidak dimunculkan pada tampilan seluler blogspot, yang nantinya diharapkan dapat mempermudah pengunjung blog dalam membaca artikel yang dibukanya. Dan berikut ini adalah uraian cara yang dapat digunakan untuk menyembunyikan menu ikon mengapung pada tampilan seluler blogspot.

Untuk menyembunyikan menu ikon mengapung agar tidak dimunculkan pada tampilan blog untuk tampilan seluler, adalah dengan menambahkan kode di bawah ini diantara kode yang digunakan dalam membuat menu ikon mengapung.
<b:if cond='data:blog.isMobile'>
     .............. kosong ..............
<b:else/>
     .............. script ..............
</b:if>

Sebagai contoh dari penerapan kode di atas adalah seperti dapat dilihat pada kode di bawah ini.
<b:if cond='data:blog.isMobile'>
      
<b:else/>
  <div id='socialLinks'> <a href='https://plus.google.com/110089867578853859469' target='_blank' title='Follow us on Google+'><img alt='Google+' src='https://lh3.googleusercontent.com/-huSvDo9NsyU/TyiryZoRDeI/AAAAAAAABVw/nJAGyOUeXjw/s800/Google%2520Plus.png'/></a><a href='http://www.twitter.com/semarbingung' target='_blank' title='Follow us on Twitter'><img alt='Twitter' src='https://lh6.googleusercontent.com/-BFJWfCvUjHU/Tvx4pt9PgLI/AAAAAAAABNs/Cp3crxCvCTE/s800/twittericon.png'/></a> <a href='http://www.facebook.com/pages/eltelublogspotcom/233620213358622' target='_blank' title='Follow us on Facebook'><img alt='Facebook' src='https://lh3.googleusercontent.com/-AxoB48FsPoo/Tvx3XcndowI/AAAAAAAABNc/h57ayCaeXIA/s800/facebookicon.png'/></a> <a href='/feeds/posts/default' target='_blank' title='Subscribe via RSS'><img alt='Atom' src='https://lh6.googleusercontent.com/-V4NP3bbpDe0/Tvx4pLyN5xI/AAAAAAAABNo/KQ1rvo8WtTA/s800/rssicon.png'/></a> </div>
</b:if>

Dengan menambahkan kode seperti pada contoh di atas, maka bila blog dibuka dengan menggunakan perangkat seluler, secara otomatis menu ikon mengapung tidak akan ditampilkan. Sehingga dengan demikian akan mempermudah dan menjadikan pengunjung lebih nyaman dalam membaca isi artikel yang dibukanya.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog