28 Agustus 2012
Widget, inilah elemen halaman yang dapat disebut sebagai bagian tak terpisahkan dalam suatu blog. Setelah membuat sebuah blog, dapat dipastikan bahwa salah satu hal yang dilakukan adalah memasang atau menambahkan widget tertentu pada blog yang dimaksud dengan tujuan untuk ‘mempercantik’ atau mempermudah dalam melakukan navigasi. Namun seperti yang kita tahu bahwasanya setelah melakukan penambahan widget tertentu, maka widget tersebut (secara default) hanya ditampilkan pada halaman blog versi web saja.
Merujuk panduan kustomisasi template seluler Blogger (dalam hal ini dapat dibuka pada URL http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html), bahwasanya untuk beberapa jenis widget tertentu, yaitu header, blog, profile, pagelist, AdSense, dan attribution, selain ditampilkan pada halaman versi web, maka (secara default) juga akan ditampilkan dalam halaman versi seluler.
Walau widget yang dapat ditampilkan pada kedua versi blog hanya beberapa buah, bukan berarti kita tidak dapat menampilkan widget yang lainnya pada tampilan versi seluler maupun versi web. Karena sebenarnya kita dapat menambahkan atribut tertentu pada widget yang dimaksud agar dapat ditampilkan pula pada blog versi seluler (mobile=’yes’), tidak ditampilkan pada halaman versi seluler (mobile=’no’), atau hanya ditampilkan pada versi seluler saja (mobile=’only’).
Dengan demikian apabila kita menambahkan atribut tersebut pada widget yang dikehendaki, maka akhirnya widget yang dimaksud akan dimunculkan pula dalam tampilan versi seluler (sebagai contoh misalnya widget artikel populer, artikel terbaru, kategori artikel, kotak penelusuran, dan lain sebagainya). Akan tetapi perlu diingat bahwa agar beberapa atribut ini dapat bekerja atau berfungsi, maka pilihan template seluler yang digunakan haruslah ‘Tersesuai (Custom)’.
Nah, sekaligus menanggapi pertanyaan Sobat Blogger dalam artikel tanya jawab mengenai bagaimana cara membuat kotak pencarian pada tampilan seluler, maka artikel ini merupakan uraian jawaban atas pertanyaan tersebut. Lantas bagaimana cara mengimplementasikannya? Caranya adalah serupa dengan teknik menyembunyikan widget pada tampilan blog versi mobile, seperti yang saya uraikan dalam artikel sebelumnya. Dimana untuk melakukannya Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.
Kedua, cari widget yang akan ditampilkan pula pada tampilan versi mobile. Untuk mempermudah dalam menemukannya, lakukan pencarian sesuai dengan judul yang dipakai pada widget yang dimaksud.
Ketiga, apabila widget yang dimaksud sudah ketemu, maka tambahkan kode mobile='yes' dalam rangkaian kode widget yang dimaksud. Sebagai contoh misalnya seperti yang tampak pada rangkaian kode di bawah ini.
<b:widget id='Profile1' locked='false' mobile='yes' title='About Me' type='Profile'> <b:includable id='main'> ----- rangkaian kode ----- </b:includable> </b:widget>
Keempat, simpan template.
Namun demikian perlu diingat pula bahwa, selain pilihan template seluler yang digunakan haruslah ‘Tersesuai (Custom)’, bahwasanya tampilan widget versi seluler yang dihasilkan dari penggunaan teknik ini adalah di area footer atau di bawah tombol navigasi (seperti yang tampak pada gambar di atas). Dan dengan adanya baris tombol navigasi di atas widget, bisa jadi tampilan akan terkesan kurang menarik. Sehingga agar tampilannya menjadi lebih menarik, maka tidak ada salahnya apabila baris tombol navigasi dihilangkan atau disembunyikan. Dimana apabila Anda ingin menyembunyikan tombol navigasi untuk tampilan versi seluler, maka tutorialnya dapat Anda lihat dalam artikel yang berjudul “Cara Menghilangkan Baris Tombol Navigasi Pada Tampilan Blog Versi Mobile”.
Semoga berguna dan bermanfaat.
Salam.
Terdapat 41 komentar pada artikel ini ▶
Saya Coba dulu ya, kalau sukses saya infokan. Trima kasih sobat
@Kraeng FranciscoSilakan Sobat.
sob supaya tampilnya dibawah bagaimana. saya coba berhasil cuma malah di atas.. bagaimana caranya kalau dibawah.
@Ghilank ArjunaUntuk menjawab pertanyaan tersebut, tentu saja saya harus melakukan uji coba terlebih dulu.
Namun sayangnya saya kurang paham dengan yang dimaksud "tampilannya malah di atas" tersebut yang bagaimana. Apakah di atas header, di atas bidang posting, atau dalam bentuk yang lainnya?
Sehingga mohon maaf apabila saya belum bisa memberikan uraian penjelasan atas pertanyaan ini, karena saya belum mengetahui masalah (kasusnya) secara lebih rinci.
jadi begini! saya menampilkan widget dengan cara diatas, tetapi letaknya dibawah menu mendatar rata tengah, namun saya mau widget yang saya tampilkan berada di daerah footer, tolong pencerahannya
kunjungan dari YA!
krn aku pakai operamini 6.0,aku suka buka blog pakai versi pc aja. cuma sayang posting dari operamini gk bisa lagi seperti yg dulu.
gan..trik ganti deskripsi yg kita buat sendiri gmn ya..?
aku sdh buat sendiri deskripsi dan logo blog pakai potosop, cuma aku blum tau cara masangnya..thx
salam kenal
@Libra BloggerKalau yang Sobat maksud logo blog adalah untuk favicon, maka pemasangannya dapat dilakukan melalui menu 'Tata letak (Layout)'. Sedangkan untuk deskripsi blog, menurut sepengetahuan saya dapat dimasukkan melalui menu 'Setelan'.
Sekian dan semoga dapat membantu.
CMIIW
ohh begitu toh mas caranya makasih ya mas :D
@Limit PostYap, begitulah Sob. Dan terimakasih balik atas berkenannya memberikan komentar pada artikel ini. :)
udah di coba dan sukses gan, saya coba hanya menampilkan widget laman hanya di mobile saja, tetapi ada sedikit masalah saat masuk tata letak, setiap kita memodifikasi tata letak selalu gagal menyimpan. kenapa ya gan?
@rachmadshareWahhh, kalau terjadi hal yang seperti itu untuk sementar ini saya belum mengetahui penyebab dan solusinya, Sob. Sebab selama ini saya belum pernah mengalami kasus atau masalah yang demikian.
Dan uraian dalam artikel ini sendiri sebenarnya kan merujuk pada panduan yang diterbitkan oleh Blogger.
Sehingga bila terjadi masalah saat melakukan penyimpanan setelah memodifikasi tata letak, bisa jadi disebabkan karena faktor template, koneksi internet, atau faktor yang lainnya (In My Opinion).
Ikut belajar gan!
@Naam78Silakan Sob. :)
saya coba dulu gan,
@Ahmad SofihudinSemoga uji coba yang dilakukan berhasil, Sob.
sudah saya coba, mas. Berhasil. makasih banyak ya, mas..
Tp tampilan custom mobile blog saya gak sempurna mas.. Blog saya tetep melebar ketika di akses lewat hp. Tolong bantu saya mas menyempurnakan nya.. Sekali lagi saya ucapkan terima kasih banyak.
Ini blog saya, mas bisa lihat dulu..
Oh ya.. sekalian izin follow ya mas..
@Akang KreditSama-sama dan terimakasih balik, Sob.
Terkait dengan tampilan mobile yang tak sempurna, bisa jadi disebabkan karena ada bagian yang lebarnya tidak menyesuaikan dengan ukuran lebar device (HP.
Dan sepintas menurut analisa saya, sepertinya salah satu penyebabnya adalah HTML3 Widget yang terpasang pada sidebar. Daam hal ini adalah FB Like widget bagian bawah yang memiliki ukuan lebar 450px.
Semoga dapat membantu.
CMIIW.
Coba ah...
@Adi PradanaSilakan Sob.
wah, keren artikelnya gan
Jangan lupa komen backnya di http://adeputra-pkp.blogspot.com
Salam Blogger
@adeputraOke. Terimakasih Sobat.
sangat bermanfaat sekali
@ANDIK WINSyukurlah bila dapat diambil guna manfaatnya, Sob. :)
Untuk menampilkan artikel terkait pada tampilan mobile bagaimana Bapak e Mela?? Seperti random post dibawah postingan...
@topkoplo.comUntuk keperluan tersebut, Sobat dapat menemukan uraiannya dalam artikel ini.
Sementara itu untuk update dan lain sebagainya, Sobat dapat menemukannya di sini.
Saya Udah coba beberapa kli,dan hasilnya nihil,jika boleh repot-repot bolehkah Template Saya Agan modifikasi Khusus Template Selulernya?
alamat email saya cob.cilitonga@gmail.com
Trimakasih jika sudah merespon
@lintasmotor.comWahhh, kok tidak bisa ya Sob. Kalau semestinuntuk ya sih bisa. Sebab menurut panduan yang diberikan oleh Blogger sendiri juga seperti itu.
Oh ya, kemudian terkait dengan modifikasi template, sepertinya saya tidak dapat mengerjakannya karena terkendala dengan kesibukan pekerjaan sehari-hari saya.
Jadi saya mohon maaf apabila tidak dapat memenuhi permintaan Sobat di atas.
Sekian dan semoga dapat dimaklumi.
Mohon bantuannya mas, sy pengen buat random post di bawah post ( menggantikan related post), tapi kok gagal terus. Mungkin mas bisa bantu solusinya? Terima kasih n semoga sukses
@Infoku7Sobat dapat mencoba mengerjakannya dengan cara melakukan langkah-langkah di bawah ini.
Pertama, edit HTML template kemudian letakkan script berikut ini di atas </head>
<script type='text/javascript'>
//<![CDATA[
var randarray = new Array();
var l=0;var flag;
var numofpost=8;
function wpostinganacak(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){
flag=0; randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){flag=1;}
}
if(flag==0&&l!=0){randarray[i++]=l;}
}
document.write('<ul>');
for(n in randarray){
var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){
if(entry.link[k].rel=='alternate'){
var item = '<li>' + '<a rel="alternate" href=' + entry.link[k].href + '>' + entry.title.$t + '</a></li>';
document.write(item);
}
}
}
document.write('</ul>');
}
//]]>
</script>
Kedua, letakkan script berikut ini pada bagian yang akan digunakan untuk menampilkan random post.
<script src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=200&callback=wpostinganacak' type='text/javascript'/>
Semoga dapat membantu.
Maaf mas..kode kedua diletakan dimana ya..apakah diatas head juga????..terima kasih atas pencerahannya
@Infoku7Tentu saja di bawah post seperti yang Sobat maksud. :)
sudah ane coba dan berhasil.. silahkan cek dimari..
@infokmu.comIya Sob sudah saya cek kok tadi. Dan sepertinya memang keren. :)
ko' punya saya ga' bisa ya gan.
cek sini gan http://fahrur100392.blogspot.com/?m=1
@Aloonks Aja Hal tersebut disebabkan karena Sobat belum mengaktifkan setelan template untuk tampilan versi seluler.
@AYAHE MELA apakah trik ini bisa di terapkan pada template mobile simple?
@Muhammad Suhaimi As-Sasaki Teknik tersebut dapat diterapkan pada semua jenis template blogger, Sob.
@Ghilank Arjuna saya juga penasaran dengan maksud pertanyaan ini. kebetulan saya juga pingin mebuat khusu untuk widget artikel terbaru di atas posting, tepat nya di bawah header blog sebelum judul artikel saat di akses melalui mobile, kira2 ada penjelasan tentang kasus ini ngak agan eltelu... khusus untuk satu widged aja...
@Fadil aceh Sobat bisa saja melakukannya dengan menggunakan Feed Widget seperti yang saya gunakan pada blog ini. Dalam hal ini tepatnya adalah seperti widget artikel terbaru yang terletak di atas postingan ini.
Dapat Sobat lihat bahwa widget artikel terbaru tersebut selain ditampilkan pada tayangan versi web juga ditayangkan pada tampilan versi mobile.
Untuk melihat perbedaannya coba saja Sobat buka artikel ini dalam tayangan versi web ( http://eltelu.blogspot.co.id/2012/08/cara-menampilkan-widget-pada-blog-versi.html ) serta tayangan versi seluler ( http://eltelu.blogspot.co.id/2012/08/cara-menampilkan-widget-pada-blog-versi.html/?m=1 )
Terimakasih atas tutorial customisasi templatenya gan.. Sangat terbantu dgn postingan di atas. Widgetnya bisa muncul di versi mobile. Terutama konten berisi ads. Salam
@Cepi Ali Anwari Okay... Namun begitu mohon maaf bila ada keterlambatan saya dalam menanggapi komentar yang Sobat poskan... :)