Cara membuat demo tampilan mobile live di dalam artikel tanpa tombol DEMO dan link eksternal

Ceritaya apabila kita ingin membuat demo selalu menggunakan gambar, atau membuat memasang tombol 'DEMO' setelah memperagakan sebuah template melalui gambar dan meletakan tombol tersebut di bawahnya.

web mobile demo
image sourch:ICBM mobile&web solutions

Dan pembaca harus mengklik tombol tersebut untuk melihat contoh template yang mau di demokan. Akan tetapi sekarang kami sedang mulai usaha menemukan cara mendemokan halaman mobile secara live langsung di dalam artikel.

Contoh demo halaman mobile template editblogtema yang sekarang.
  1. Silahkan klik menu hamburger garis susun dua („Éč) ia akan menjadi tanda silang (x)
  2. Klik menu 'Template' untuk melihat menu dropdown.

Ini berlaku jika kalian sedang membuka halaman blog melalui laptop, namun ingin melihat contoh tampilan mobilenya ya itu dia. Perhatikan bagaimana navigasi menu laptop berbeda dengan tampilan mobilenya ketika di tampilkan pada ukuran layar yang berbeda beda. 

Tampilan ini sebenarnya saya pinjam dan saya modifikasi dari kode embed iframe Youtube ketika akan di tampilkan ke halaman web biasa. Untuk sementara PR saya adalah:
  • Mencoba memperbaiki parameter tampilan preview yang error jika itu bisa
  • Memperbaiki 3 breadcrumb kloning error di webmaster yang di akibatkan oleh pemasangan kode iframe ini. (Namun error breadcrumb hanya pada satu konten yang memuat kode iframe ini saja).
  • Mengalihkan tampilan demo untuk halaman yang berbeda alih alih hanya menampilkan halaman blog sendiri.
Namun secara keseluruhan ia dapat menjadi alternatif untuk demo yang impressif.

Cara pemasangan:

Pada saat membuat konten masuk ke mode HTML view (alih alih compose view) dan letakan kode berikut di tempat yang kalian inginkan:
<div><div style="text-align: center;"><div dir="ltr" style="text-align: center;" trbidi="on"><iframe allowfullscreen="" class="editblogtema-iframe-blog" data-thumbnail-src="https://i.ytimg.com/vi/LxlhjyxKlFI/0.jpg" frameborder="4" height="666" src="?feature=player_embedded" width="320"></iframe></div><div style="text-align: center;"><br /></div><div style="text-align: left;">
Peringatan: sumber kode masih dalam pengembangan dalam projek kami, jika telah sempurna akan kami posting kembali. Bagi siapa saja yang bisa memperbaikinya dipersilahkan melakukannya. Tolong share kembali.

Dampak:

View kunjungan akan tampak berlipat lipat dari biasanya terhadap konten yang memasang kode iframe ini. Hal ini terjadi karena iframe aktif dari iframe pertama dilanjut iframe kedua, ketiga dan seterusnya sampai view yang paling kecil, seperti bilangan bayangan refleksi pada cermin yang berhadapan. 

Jadi ini memang bisa di jadikan trik untuk meningkatkan viewing, jadikan saja artikelnya menjadi featured post, satu orang pengunjung akan tampak menjadi berpuluh puluh dan mungkin ratusan terutama ketika ia juga mengaktifkan semua iframe DEMO live tadi. Saya tidak merekomendasikan bagi yang pasang adsense.

Demikian solusi membuat demo halaman mobile secara live di halaman webblog. 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Komentar

Postingan populer dari blog ini

2 CARA MEMATIKAN PERANGKAT TABLET TAB S7/S8 SAMSUNG

CARA MENAMPILKAN JUMLAH KOMENTAR DI SEBELAH KANAN ATAS POSTINGAN

Apakah cinta itu? Begini pengertian eros, philia dan agape