• Home
  • Versi Mobile
  • About
  • Sitemap
  • Privacy Policy
  • Disclaimer
  • Contact
  • Tukar Link
  • Pasang Iklan

Blog Mas Sugeng

Blog Personal Mas Sugeng

  • Sepakbola
    • Liga Inggris
    • Liga Spanyol
    • Liga Italia
    • Liga Indonesia
  • Tekno
    • Gadget
    • Internet
  • Entertainment
  • Trik dan Tips
  • Unik dan Menarik
  • Blogging
  • Blogger Template
Home » Blog Design » Blogging » Menampilkan Widget di Template Seluler Blogspot

Menampilkan Widget di Template Seluler Blogspot

Menampilkan Widget di Template Seluler Blogspot - Setelah sebelumnya sudah mengaktifkan fitur custom mobile template dan mengedit CSS tampilan versi seluler, sekarang tinggal bagaimana menambahkan atau menampilkan widtget baru di template versi seluler.

Dalam keadaan default widget yang ditampilkan di template atau tampilan versi seluler adalah:

  1. Header
  2. Blog
  3. Profil
  4. PageList
  5. AdSense
  6. Atribusi

Nah, mungkin sobat ingin menampilkan beberapa widget baru di template versi seluler. Caranya sangat mudah sekali, yaitu cukup menambahkan Property baru di dalam tag <b:widget/>

Sebagai contah, jika sobat ingin menampilkan widget Popular Post di template seluler, maka pertama tentunya sobat harus menambahkan widget tersebut melalui menu edit tata letak.

Kurang lebih kode widget Popular Post di dalam template sobat adalah seperti ini:

<b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>

Untuk menampilkannya di template seluler, sobat perlu menambahkan property baru pada tag widget tersebut, yaitu mobile. Property mobile ini sendiri memiliki tiga nilai, yaitu Yes, No, dan Only. Dan seperti inilah penerapannya:

<b:widget id='PopularPosts3' mobile='yes' locked='false' title='Entri Populer' type='PopularPosts'> 

Kode di atas adalah contoh untuk menampilkan widget popular post di template seluler dan juga tampil di tampilan versi desktop. Dan jika ingin membuat widget popular post hanya tampil di template versi seluler, maka kodenya adalah seperti ini:

<b:widget id='PopularPosts3' mobile='only' locked='false' title='Entri Populer' type='PopularPosts'>

Atau ingin menyembunyikan widget pada tamplate versi seluler, maka kodenya adalah seperti ini:

<b:widget id='PopularPosts3' mobile='no' locked='false' title='Entri Populer' type='PopularPosts'>

Selain dengan cara di atas, kita juga bisa menampilkan widget atau elemen khusus pada template versi seluler dengan menggunakan tag condition. Tag condition tersebut adalah seperti ini:

<b:if cond='data:blog.isMobile'>
Elemen yang akan tampil di template seluler
</b:if>

Tag tersebut akan menampilkan sebuah elemen hanya pada template seluler.

Posted by Sugeng Riyadi on 17 Juli 2012 - Rating: 4.5
Title : Menampilkan Widget di Template Seluler Blogspot
Description : Menampilkan Widget di Template Seluler Blogspot - Setelah sebelumnya sudah mengaktifkan fitur custom mobile template dan mengedit CSS tamp...

Share to

Facebook Google+ Twitter

49 Responses to "Menampilkan Widget di Template Seluler Blogspot"

  1. sundulSelasa, 17 Juli, 2012

    tampilan mobile punyaku malah setanfar habis gan.

    BalasHapus
  2. RiyonoSelasa, 17 Juli, 2012

    jossss

    BalasHapus
  3. irawanRabu, 18 Juli, 2012

    punyaku kok mobilenya ga muncul mas ya?

    BalasHapus
  4. BOLAJOSS.comSabtu, 21 Juli, 2012

    masih pusing ngedit css mobilenya mas,, gak cocok2,, ehhehe, :D

    BalasHapus
  5. Game PoztSabtu, 21 Juli, 2012

    Weh, langsung dicoba

    BalasHapus
  6. Haloho [therzone]Minggu, 22 Juli, 2012

    kang sugeng, cara merubah tampilan posting title d beranda biar nggak full gmn kang

    BalasHapus
    Balasan
    1. Mas SugengMinggu, 22 Juli, 2012

      Gak full gimana ya maksudnya? Aku gak mudeng..

      Hapus
    2. Balas
  7. Ilham AgungSabtu, 28 Juli, 2012

    Mantap mas, berhasil, kalau supaya cuma judul entri yg terklik di home gmn ya mas? Soalnya diblogku judul entri n summary textnya juga ikut terlink.. Mhon dbantu y mas... :-)

    BalasHapus
    Balasan
    1. Mas SugengSenin, 30 Juli, 2012

      Cari Kode Ini: <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
      <h3 class='mobile-index-title entry-title' itemprop='name'>
      <data:post.title/>
      </h3>

      <div class='mobile-index-arrow'>&amp;rsaquo;</div>

      <div class='mobile-index-contents'>
      <b:if cond='data:post.thumbnailUrl'>
      <div class='mobile-index-thumbnail'>
      <div class='Image'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
      </div>
      </b:if>

      <div class='post-body'>
      <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
      </div>
      </div>

      <div style='clear: both;'/>
      </a>

      Hapus dan ganti dengan yg ini: <div class='mobile-post-outer'>
      <a expr:href='data:post.url'>
      <h3 class='mobile-index-title entry-title' itemprop='name'>
      <data:post.title/>
      </h3></a>

      <div class='mobile-index-contents'>
      <b:if cond='data:post.thumbnailUrl'>
      <div class='mobile-index-thumbnail'>
      <div class='Image'>
      <img expr:src='data:post.thumbnailUrl'/>
      </div>
      </div>
      </b:if>

      <div class='post-body'>
      <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
      </div>
      </div>

      <div style='clear: both;'/>

      Hapus
    2. Balas
  8. Ilham AgungJumat, 03 Agustus, 2012

    MAKASIH MAS,, UDH BERHASIL LG NIH.... HEHEHE

    BalasHapus
    Balasan
    1. Mas SugengJumat, 03 Agustus, 2012

      Iya sama-sama sob, tapi saya minta maaf ya karena kodenya gak pake textarea :D.

      Itu tinggal diatur lagi margin sama padding-nya biar rapi..

      Hapus
    2. Balas
  9. EL MahbubJumat, 03 Agustus, 2012

    ane mau nanya mas,, tag conditional yg:

    untuk menampilkan elemen hnya di template seluler.

    nah tag conditional untuk mehilangkan elemen pada template seluler apa ya mas? supaya elemen tersebut hanya tampil di halaman versi web saja..

    #maaf, pertanyaannya kepanjangan.. :D

    BalasHapus
    Balasan
    1. Mas SugengSabtu, 04 Agustus, 2012

      Kalo cuma menghilangkan bisa pake CSS mas.


      .mobile #selektor { display:none; }

      Hapus
    2. Isnan Nugrah Lastiko TikoRabu, 14 November, 2012

      kalo display:none masih terLoad oleh browser mas, ada gak tagConditional nya?

      Hapus
    3. Balas
  10. BinexSenin, 13 Agustus, 2012

    mas, gimana cara memasang related pos pada template selulernya? Dah tak coba well formed terus. Nek bisa kasih script related yang mas pakai di template seluler mas sugeng sekarang. Trims

    BalasHapus
    Balasan
    1. Mas SugengMinggu, 02 September, 2012

      Hmm.. Agak susah mas.. :)

      Hapus
    2. Balas
  11. DeathCrotKamis, 23 Agustus, 2012

    Terimakasih mas.. template nya muantap!!

    BalasHapus
  12. cerita anak kostSabtu, 25 Agustus, 2012

    ehm. ko saya coba ga berhasil ya mas. apa harus di setingg dulu versi mobilenya ke custome. soalnya saya ko nda bisa make kode di atas, tapilan mobile tetep flat aja tu ga ada perubahan. padahal pengen buat template mobile kaya punya mas nya e.

    BalasHapus
    Balasan
    1. Mas SugengMinggu, 02 September, 2012

      Baca dulu tutorial yang sebelumnya..

      Hapus
    2. Balas
  13. Iptek (Seven) BlogMinggu, 02 September, 2012

    mas favicon blog saya koq udah nggak tampil pada tampilan seluler, padahal pada menu tata letak faviconnya ada dan jika dibuka lewat desktop faviconnya ada, memang sih template SFV2 nya di edit tapi cuma nambahin slot widget di atas posting sama membuat navigasi baru trus membuat id baru, perasaan saya nggak merusak elemen lain. mohon penjelasannya mas, oh ya favicon mas juga gak tampil di opera mini, :p

    BalasHapus
    Balasan
    1. Mas SugengMinggu, 02 September, 2012

      Dari sononya lagi error mas, aku juga gak muncul..

      Hapus
    2. Balas
  14. Iptek (Seven) BlogMinggu, 02 September, 2012

    Oh ya mas, satu lagi,, tombol balas pada template saya kok nggak berfungsi..??

    BalasHapus
  15. birintandMinggu, 02 September, 2012

    met malam mas,kalu mau nambh widget seperti tutor diatas dimana nambhnya mas?

    BalasHapus
    Balasan
    1. Mas SugengMinggu, 02 September, 2012

      Add gadget atau tambah gadget seperti biasa.. Selanjutnya tinggal edit HTML tambahkan kode yang sudah saya jelaskan di atas.

      Hapus
    2. Balas
  16. Mang uemJumat, 14 September, 2012

    thanks sudah berbagi ilmunya, sukses selalu...

    BalasHapus
  17. Faizal Indra kusumaSelasa, 25 September, 2012

    Mas kalau mau merubah warnanya, sama bayangan pada teksnya gimana (ngga pake bayangan)? Kalo bisa kasi tau saya kalo komen ini di jawab lewat blog saya :) salam kenal

    BalasHapus
  18. Faizal Indra kusumaSelasa, 25 September, 2012

    Mas kalo hanya menampilkan widget di tampilan mobile saja gimana? (tampilan web tidak) terimakasih sebelumnya :)

    BalasHapus
  19. pasnemJumat, 28 September, 2012

    matikan tampilan seluler skrg gmana caranya ya? Tampilan baru kok malah hilang di menu Setelan >> Email dan Seluler . Hanya ada menu untuk atur email

    BalasHapus
  20. pasnemJumat, 28 September, 2012

    matikan tampilan seluler default ke custom lewat dashboard yang baru skrg ini gmana ya? Thanks before

    BalasHapus
  21. Sepeda Motor IndonesiaMinggu, 30 September, 2012

    Makasih templatenya mas bro ..

    BalasHapus
  22. eca aceSenin, 19 November, 2012

    mas, untuk pasang iklan google adsense for mobile gimana caranya ya?

    BalasHapus
  23. IkramSelasa, 20 November, 2012

    Mas, Saya pake Template Simple Faster V2 milik Mas Sugeng. Nah, itu nggak ada Mas Tag

    BalasHapus
  24. Berita AnehKamis, 29 November, 2012

    mungkin sekedar info atau pertanyaan masbro, mengapa saya coba (kebetulan pake bb onyx2) tampilan mas sugeng selelu berakhir dengan layar putih? apakah pengaruh jika terlalu banyak kita memberi kode "mobile=yes" pd widget membuat tampilan di mobile menjadi berat dan akhirnya tampilan putih? mhn info bos

    BalasHapus
  25. Fathur RakhmanJumat, 14 Desember, 2012

    Mas bos. sy yg prnah beli template nya,... kok url utama blog sy nggak ke index lg sm google yah, biasanya kata kunci "fathur" aja sudah ada di posisi2 pertama, skg malah nggak ada, kenapa yah,.. gimana nih agar template nya lbh seo...

    BalasHapus
  26. jona rendraSenin, 31 Desember, 2012

    makasih ya infonya. sudah saya terapkan di blog saya
    di http://jonarendra.blogspot.com/?m=1

    BalasHapus
  27. hp pilihanSelasa, 01 Januari, 2013

    mas, bagaimana menampilkan artikel terkait di versi mobile nya?

    BalasHapus
  28. Anaa AmatullahJumat, 04 Januari, 2013

    Adminx mgkn sibuk bnyk prtanyaan blm dijawab dikolom komentar ini, pdhl ada prtanyaan dists yg mwakili prtanyaan anaa.

    Terimaksh tuk sbgn info yg dah anaa dptkn. Smg sukses trs tuk anda.

    BalasHapus
  29. majalahku.infoKamis, 10 Januari, 2013

    benar bnar ribet gan

    BalasHapus
  30. Cara TerbaruSenin, 14 Januari, 2013

    Kalau misal nya banner iklan yg di pasang di html,bukan di widget,untuk sembunyiin banner tsb di tampilan mobil gmn mas?

    BalasHapus
  31. BunindoSabtu, 19 Januari, 2013

    Nice tutorial,,, sudah di coba

    BalasHapus
  32. AzrutJumat, 01 Februari, 2013

    supaya feed bisa terload di versi mobile gimana mas..

    BalasHapus
  33. Ahmadi TanjungJumat, 08 Februari, 2013

    gak work mas!

    BalasHapus
  34. hayeksajaRabu, 20 Februari, 2013

    punya saja msih standart tuh mas.. belum di apa aoainn..

    BalasHapus
  35. Joogja CirclesSenin, 25 Februari, 2013

    hebat... sudah dicoba

    BalasHapus
  36. risalahatiku46Selasa, 26 Februari, 2013

    Mas bagaimana cara menampilkan widget di versi mobile dengan tampilan buka tutup?

    BalasHapus
  37. Hendie Cahya MaladewaSelasa, 05 Maret, 2013

    gan link anda sudah ane add dan udah ada di link ane gan

    BalasHapus
  38. zaSabtu, 16 Maret, 2013

    Makasih triknya mas

    BalasHapus
  39. Vino JajaSenin, 25 Maret, 2013

    penjelasanya kurang jelas bro

    BalasHapus
  40. Era KataRabu, 01 Mei, 2013

    thanks ya mas sugeng tutornya, saya coba dl di blog saya hehe

    BalasHapus
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Poskan Komentar (Atom)

Blogroll

  • Jos Banget
  • Panduan Template Blog
  • Sik Asik
  • Share Tuts
  • Berita Terbaru
  • Go-Goblog
  • Cirebon-Cyber4rt
  • Info Terkini
  • 21webster
  • SHARE4RT
  • Tips dan Trick SEO
  • Blog Gado - Gado
  • Tekno Keren
  • Trik Internet Gratis
  • Pambudie Blog
  • Hasbi HTC

Site Info

Review this blog on Bloggers.com DMCA.com
Google PageRank Checker Powered by  MyPagerank.Net
Copyright © 2012 Blog Mas Sugeng - All Rights Reserved
Design by Mas Sugeng - Powered by Blogger