Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

21
Tgl. 17 April 2012

Cara Memasang Gadget Pada Template Blogspot Versi Seluler

Ilustrasi Widget Blogger Mobile
Ketika kita ingin menambahkan gadget tertentu untuk dipasang pada halaman blog versi web yang nantinya diletakkan dan ditampilkan di sidebar, area posting, maupun footer, bisa jadi tidaklah terlalu sulit, karena kita tinggal memanfaatkan fasilitas penambahan gadget yang disediakan oleh Blogger dalam menu ‘Tata Letak’ atau ‘Layout’. Dengan memanfaatkan fasilitas penambahan gadget yang terdapat pada menu ‘Tata Letak’, kita dapat memasang berbagai macam gadget yang telah disediakan oleh Blogger maupun gadget kita sendiri.

Namun satu hal yang perlu diingat adalah bahwa gadget yang kita pasang dengan memanfaatkan fasilitas tersebut sifatnya hanyalah gadget yang nantinya akan ditampilkan pada halaman blog versi web, dan gadget tersebut tidak akan ditampilkan bila halaman blog yang dimaksud dibuka dengan menggunakan perangkat seluler. Hal Ini disebabkan karena secara prinsip model tampilan blog versi web dengan model tampilan blog versi mobile sangatlah berbeda, sehingga tidak sedikit elemen atau gadget yang sebelumnya ditampilkan pada halaman blog versi web tidak dimunculkan agar tampilannya menjadi lebih ringkas dan proses penayangannya pun menjadi lebih ringan.

Lantas bagaimana caranya bila kita ingin memasang gadget tertentu yang nantinya akan ditampilkan di halaman blog versi seluler? Untuk memasang gadget tertentu pada blog versi seluler caranya memang tidaklah semudah memasang gadget pada tampilan blog versi web. Selain disebabkan karena Blogger sendiri tidak menyediakan fasilitas untuk keperluan ini, tutorial yang menerangkan cara pemasangan gadget untuk tampilan blog versi mobile pun masih sangat jarang dijumpai. Dan bahkan sampai ketika saya membuat beberapa artikel yang membahas dan menguraikan tentang kustomisasi template seluler blogspot, belum pernah sekalipun saya menemukan postingan yang membahas tentang masalah ini. Dan ini berbanding terbalik dengan tutorial yang menguraikan tentang pemasangan gadget tertentu atau kustomisasi template blog untuk tampilan web, yang dapat dengan mudah kita temukan bila dilakukan pencarian dengan menggunakan mesin telusur.

Oke, sekarang kita kembali pada pokok pembahasan utama kita yaitu tentang cara pemasangan gadget pada template Blogspot untuk tampilan seluler atau mobile. Secara prinsip gadget untuk tampilan blog versi seluler dapat diletakkan di tiga (tiga) bagian, yaitu di atas bidang posting, di dalam bidang posting, dan di bawah bidang posting. Sedangkan untuk pemasangannya karena Blogger tidak menyediakan fasilitas untuk keperluan ini, maka penambahan gadget untuk tampilan blog versi mobile hanya dapat dilakukan dengan melakukan kustomisasi atau menambahkan langsung script atau kode yang digunakan untuk gadget tersebut ke dalam template blog yang dimaksud.

Dalam hal memasang gadget untuk tampilan blog versi mobile, yang harus dilakukan pertama kali adalah menyesuaikan setelan untuk pilihan tampilan blog seluler yang akan digunakan. Dimana penyesuaian setelan dapat dilakukan dengan menggunakan menu ‘Template’ yang terdapat di ‘Dasbor Blogger’, kemudian ubahsesuaikan konfigurasi untuk template seluler yang akan digunakan dengan memilih tampilan seluler ‘Tersesuai’. Untuk lebih jelasnya tentang tata cara penyesuaian setelan blog tampilan seluler, silakan buka artikel yang berjudul “Optimasi Blog Dengan Memanfaatkan Fitur Mobile”.

Selanjutnya bila Anda sudah menyesuaikan konfigurasi untuk tampilan blog versi seluler yang akan digunakan, maka langkah berikutnya adalah membuka  template untuk menyisipkan script atau kode yang akan digunakan untuk menampilkan gadget tertentu pada tampilan blog versi mobile. Dalam hal ini adalah dengan menggunakan menu ‘Template’, klik tombol ‘Edit HTML’, klik ‘Lanjutkan’, dan kemudian centang pilihan ‘Expand Template Widget’. Dan seperti yang telah saya sampaikan sebelumnya bahwa gadget untuk tampilan blog versi seluler dapat diletakkan di tiga (tiga) bagian, yaitu di atas bidang posting, di dalam bidang posting, dan di bawah bidang posting, yang mana uraian untuk masing-masing adalah sebagaimana di bawah ini.


Pertama, memasang gadget di atas bidang posting.

Untuk memasang gadget agar dimunculkan untuk ditampilkan di atas bidang posting dapat dilakukan dengan menyisipkan script atau kode utama yang dimanfaatkan untuk menampilkan gadget yang dimaksud tepat di bawah kode <div class='blog-posts hfeed'> yang terletak di bawah kode <b:includable id='mobile-main' var='top'>. Yang mana sebagai contoh penerapannya dapat Anda lihat dengan membuka artikel yang berjudul “Memasang Tombol Like Untuk Facebook Fan Page Pada Blog Seluler” dan “Cara Memasang Tombol Follow Twitter Pada Blog Versi Seluler”.


Kedua, memasang gadget di dalam bidang posting.

Dalam hal pemasangan gadget di dalam bidang posting blog tampilan seluler, dapat dilakukan dengan cara menyisipkan kode utama untuk gadget yang akan ditampilkan, di atas atau di bawah kode <data:post.body/> yang terletak di antara kode <b:includable id='mobile-post' var='post'> dan </b:includable>. Dan sebagai contoh untuk penerapan teknik ini dapat Anda lihat dengan membuka artikel yang berjudul “Memasang Tombol Like Untuk Halaman Konten Tampilan Seluler” dan “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot”.


Ketiga, memasang gadget di bawah bidang posting.

Gadget untuk halaman blog versi seluler dapat ditampilkan di bawah bidang posting dengan cara menempatkan script atau kode utama untuk gadget yang dimaksud tepat di atas kode </div> yang terletak diantara kode <b:includable id='mobile-main' var='top'> dan </b:includable>. Dimana sebagai contohnya dapat Anda lihat dengan membuka artikel yang berjudul “Cara Memasang Kotak Penggemar (Like Box) Pada Blog Seluler”.


Satu lagi, selain dapat dilakukan pemasangan gadget untuk tampilan blog versi mobile dengan memanfaatkan pilihan template seluler ‘Tersesuai’, dengan menggunakan pilihan ini kita pun juga dapat melakukan kustomisasi pada tema tampilan blog versi seluler yang kita kelola. Sehingga kita dapat mengubah warna masing-masing bagian blog untuk tampilan seluler sesuai dengan warna yang kita inginkan. Dengan demikian maka tampilan blog versi seluler yang kita kelola pun akan terkesan lebih profesional.


Katagori: ,
Terdapat 21 komentar pada artikel ini ▶

pertama kali berkunjung ke blog ini lewat hape langsung kaget ada artikel terkait di versi hp :D

thanks udah berbagi. ane save dulu ya :)

salam kenal, mohon follow nya, pasti saya follow back

17/04/12, 23.09 O

makasih ya atas infonya , bermanfaat sekali...
join y di blog q

23/04/12, 23.15 O

saya rasa anda telah memberikan tutorial dengan sebaik-baiknya.

24/04/12, 12.33 O

follow balik gan,,thanks,,semoga bisa saling share hal yg bermanfaat...

09/05/12, 09.30 O

Wah manteb sob. Saya baru tahu di template mobila bisa pasang gadget lain.

13/06/12, 13.31 O

keren banget gan infonya, aku cari cari ktmu disini, thx yia

Anonim
18/06/12, 02.23 O

pengen bisa tpi msih binun nih, prlu bnyk bljar dri blog ini

Anonim
18/06/12, 13.31 O

@All: Saya hanya dapat menyampaikan terimakasih atas apresiasi yang Sobat berikan.

25/07/12, 17.25 O

Gan,, cara supaya sidebar blog pada template seluler "Tersesuai" dibuang terus semua widget seluler di pindahkan ke bawah posting, agar tampilan blog tidak memiliki scroll horizontal, seperti blog agan ini bagaimana ya..??

Anonim
28/07/12, 22.50 O

@Miko Satria D'KamikazeSobat, mohon maaf apabila saya baru membalas pertanyaan yang Sobat ajukan.

Perlu saya sampaikan bahwa, terkait dengan pertanyaan Sobat tersebut, sepertinya Sobat perlu melihat artikel yang diterbitkan oleh Mas Sugeng jika Sobat ingin menampilkan widget di bawah artikel untuk tampilan versi seluler.

Karena kebetulan template yang Sobat gunakan adalah template kustom yang didesain oleh Mas Sugeng, sementara panduan yang saya terbitkan khusus diperuntukkan pada template standar Blogger.

Sehingga, ada baiknya bila Sobat buka URL artikel Mas Sugeng, sesuai dengan yang saya sebutkan dalam komentar di blog Sobat.

Sekian dan semoga dapat membantu. :)

12/10/12, 11.42 O

Akhirnya nemu juga postingan yang ngebahas gadget blog versi seluler. Membantu banget nih. Terimakasih. :-D

12/10/12, 14.50 O

mau nanya, kalo masang widget dibawah postingan ko ga sesuai sama tata letak edit html di blog ane? dihtml ane gaada kode diantara kode dan . mohon penjelasannya gan. soalnya ane butuh banget nih??

12/10/12, 23.06 O

@Rijal seventhSama-sama. :)

12/10/12, 23.23 O

@Rijal seventhTentu saja bagian yang Sobat maksud tidak ada, karena setelah saya lihat template yang Sobat gunakan adalah kustom template (dari pihak ketiga). Sedangkan tutorial yang diuraikan dalam artikel ini memang dikhususkan untuk diterapkan pada template standar yang telah disediakan Blogger. :)

21/10/12, 01.14 O

waduh, berarti kudu ganti template dari bloggernya. hmm.. makasih dah ngasih tau letak masalahnya ni. hehe :)

21/10/12, 01.17 O

waduh, berarti kudu ganti template. hmm.. thx dah ngasih tau letak masalahnya. maklum masih baru ni hehe :)

21/10/12, 02.12 O

@Rijal seventhSama-sama dan terimakasih balik Sobat.

29/10/12, 13.49 O

Ko tetep ga muncul juga ya?

30/10/12, 09.03 O

@Rijal seventhSobat, agar lebih mudah dalam mengimplementasikan teknik yang saya uraikan dalam artikel ini, maka silakan buka beberapa contoh artikel yang saya sebutkan.

Karena apabila diterapkan sesuai dengan petunjung pemasangan untuk masing-masing widget, maka saya dapat memastikan bahwa hasil yang didapatkan adalah sesuai dengan yang diharapkan.

Dan untuk memastikan bahwa teknik tersebut benar-benar dapat digunakan, Sobat dapat melakukan pengecekan dengan membuka blog ini memakai perangkat seluler (misal: dengan menggunakan Opera Mini).

Sekian. :)

23/12/12, 12.56 O

makasih ya infonya
salam bloggerindonesia
kunjung balikyoo... :)

24/12/12, 15.57 O

@kartika tri dewiOke. Terimakasih dan salam balik untuk Sobat. :)