Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

30
Tgl. 28 Juni 2012

Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes)

Menanggapi banyaknya permintaan dan pertanyaan terkait dengan cara mengubah tema tampilan halaman blog versi seluler, maka saya memutuskan...

Ilustrasi Tema Halaman Blog Seluler
Menanggapi banyaknya permintaan dan pertanyaan terkait dengan cara mengubah tema tampilan halaman blog versi seluler, maka saya memutuskan untuk menerbitkan artikel tentang panduan cara mengedit template blog untuk membuat dan atau mengubah tema halaman versi seluler (mobile) ini, dengan harapan akan mempermudah proses kustomisasi template, sehingga dapat dilakukan optimasi untuk halaman blog versi seluler seperti halnya optimasi yang dapat dilakukan pada halaman blog versi web. Dimana panduan ini akan saya susun dengan uraian yang sedetail mungkin sehingga walaupun Anda belum menguasai dan memahami teknik kustimisasi template, dapat mengerjakannya dengan mudah dan tidak mengalami kesulitan dalam penerapannya.

Oke, langsung pada pokok pembahasan, untuk mengedit template dan kemudian mengubah tema halaman blog versi seluler, maka persiapkan waktu Anda beberapa jam ke depan dan kemudian kerjakan langkah-langkah di bawah ini secara berurutan.


Pertama, backup template Anda guna mengantisipasi adanya kekeliruan dalam proses kustomisasi.

Kedua, ubahsesuaikan setelan template seluler yang akan digunakan. Caranya silakan klik di sini untuk membuka artikel dengan judul Optimasi Blog Dengan Memanfaatkan Fitur Mobile, kemudian pada langkah yang keempat pilih template selulerTersesuai’ (Custom).

Ketiga, buka editor  template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Keempat, ubah model menu pada halaman versi seluler. Caranya silakan klik di sini untuk membuka artikel dengan judul Cara Membuat Menu Mendatar Rata Tengah Untuk Halaman Blog Selular (Tampilan Mobile), dan kerjakan langkah yang ketiga saja.

Kelima, ubah model bidang posting halaman beranda tampilan versi seluler. Caranya silakan klik di sini untuk membuka artikel dengan judul Mengubah Model Bidang Posting Halaman Beranda Tampilan Selular (Blogspot Versi Mobile), dan kerjakan sampai langkah yang kedua.

Keenam, cari kode <div class='post hentry uncustomized-post-template' dan kemudian hapus rangkaian kode yang ada di bawahnya sampai dengan kode </b:if>, seperti yang tampak pada contoh berikut ini.
<div class='post hentry uncustomized-post-template'>
          <a expr:name='data:post.id'/>  <-- hapus dari sini

            -------- kode --------

          </b:if>  <-- hapus sampai sini

          <div class='post-header'>


Kemudian di bagian kode yang dihapus tersebut, sisipkan rangkaian kode di bawah ini.
<a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
           <div style='text-align: justify;'>
            <h3 class='post-title entry-title'>
            <div class='mobile-bingkai-judul' style='font-size: 71%;'><b>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  </b:if>
                <b:else/>
                  <a expr:href='data:post.url'><data:post.title/></a>
                </b:if>
              </b:if>
             </b></div>
            </h3>
           </div>
          </b:if>


Ketujuh, cari kode <b:includable id='mobile-nextprev'> dan kemudian hapus rangkaian kode yang ada di bawahnya sampai dengan kode yang ada di atasnya </b:includable>, seperti yang tampak pada contoh berikut ini.
<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>  <-- hapus dari sini

  ----- kode -----

  <div class='clear'/>  <-- hapus sampai sini
</b:includable>


Selanjutnya pada bagian kode yang dihapus tersebut, sisipkan rangkaian kode di bawah ini.
<div class='blog-pager' id='blog-pager'>
   <div class='mobile-navigation-area'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='Posting Lebih Baru' border='0' height='20px' src='https://lh5.googleusercontent.com/-BsdaN_Y45t0/TxWZo8B8txI/AAAAAAAABUc/GitLQckzVfo/s800/Previous.png' width='15px'/></a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='Posting Lama' border='0' height='20px' src='https://lh3.googleusercontent.com/-ckA-XTysZQM/TxMGzJbrtBI/AAAAAAAABRk/SCisyux4P6s/s800/Next.png' width='15px'/></a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Beranda' border='0' height='20px' src='https://lh3.googleusercontent.com/-uvH0WqaL1i8/TxMMNX3qiqI/AAAAAAAABSc/WCyLxLXIGu4/s800/Home.png' width='20px'/></a>
    </div>
    </div>

    <div class='mobile-site-widget-title'>
      <span style='color: #000000;'><b>Site Widget</b></span>
    </div>

    <div class='mobile-site-widget-area' style='text-align=center;'>

    ----- CUSTOM WIDGET -----

    </div>

    <div class='mobile-site-widget-area'>
      <b><a href='#atas'>Kembali ke Atas</a> | <a expr:href='data:desktopLinkUrl'>Lihat Versi Web</a></b>
    </div>

    <div class='desainer'>
      Desain versi seluler oleh <a href='http://eltelu.blogspot.com/'><b>Semar Bingung</b></a>
      <br/>Dimodifikasi oleh <a href='URL Blog Anda'><b>Nama Blog Anda</b></a>
    </div>
   </div>
  <div class='clear'/>


Kedelapan, cari kode /* Mobile dan kemudian hapus semua rangkaian kode yang ada di bawahnya sampai dengan kode yang terdapat di atas ]]></b:skin>, untuk selanjutnya ganti dengan rangkaian kode di bawah ini. Dalam hal ini diasumsikan bahwa Anda masih menggunakan template standar Blogger, sehingga apabila sebelumnya telah dilakukan kustomisasi atau perubahan pada template yang Anda gunakan, maka Anda dapat melihat contoh kode standar template sesuai dengan template yang saat ini Anda gunakan sebagai acuan untuk menentukan kode yang semestinya dihapus.
/*--------------------------------------------------------------
Kustomisasi Desain Halaman Blogspot Seluler
Oleh: Semar Bingung
Blog: http://eltelu.blogspot.com/
--------------------------------------------------------------*/ 
html body.mobile {
  background-size: 210px;
  height: auto; width: auto;
  min-height: 480px; min-width: 210px;
}

.mobile .body-fauxcolumn-outer {
  background: transparent none repeat scroll top left;
}

.mobile .content-outer {
  font-size: 100%;
}

.mobile a:link, .mobile a:visited,
.mobile-link-button a:link, .mobile-link-button a:visited {
  text-decoration:none; color: rgb(17, 85, 204);
}

html .mobile .header-outer {
  margin-bottom: 0px; background: #001b26;
  text-shadow: none; padding: 2px; border: none;
}

html .mobile .header-inner .header .titlewrapper, 
html .mobile .header-inner .header .descriptionwrapper {
  margin: 0px; padding: 0px; text-align: justify;
}

html .mobile .Header h1 {
  font-size: 220%;   text-shadow: none;
  margin: 0px;  padding: 0px;
}

html .mobile .Header h1 a {
  color: #ffffff;
}

.mobile .tabs-inner .PageList .widget-content {
  width: 100%; height: 100%;
  padding: 0px; margin: 0px; 
}

.mobile .tabs-inner .widget ul {
  padding-top: 5px; padding-bottom: 5px;
  padding-left-value: 2px; padding-right-value: 2px;
  text-align: left; border: 1px solid #001b26;
  border-radius: 0px; background: #001b26; 
}

.mobile .tabs-inner .widget a {
  color: #ffe599;
}

.mobile-site-widget-title {
  background: #cccccc;
  border-top: 1px solid rgb(59, 89, 152);
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
}

.mobile-site-widget-area {
  width: auto; height: auto;
  padding: 2px; padding-bottom: 0px;
  text-align: center; overflow: hidden;
  border-top: 1px solid;
  border-color: rgb(226, 200, 34);
  background: rgb(255, 251, 226);
}

.mobile-navigation-area {
  background: rgb(216, 223, 234);
  border-top: 1px solid #444444;
  border-bottom: 1px solid #444444;
  height: auto; overflow: hidden;
  padding: 4px; padding-bottom: 0px;
  text-align: center; width: auto;
}

html .main-outer {
  margin: 0px;
}

html .mobile .main-inner .date-outer,
html .mobile .Attribution, .mobile .comments,
.mobile .comments-content .comment-thread,
.mobile .comments .comment-block {
  padding: 2px;
}

.mobile-index-title {
  width: 100%;
}

html #blog-pager {
  padding: 0px; margin: 0px;
}

html .mobile .mobile-date-outer{
  background-color: #ffffff;
}

html .mobile .blog-pager {
  border-bottom: none;
  background: transparent none repeat scroll top center;
  margin-bottom: 0px; margin-top: 0px;
}

.mobile .date-outer {
  background-color: #ffffff;
  border-top: solid 1px #777777;
}

.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  border-radius: 0px; -goog-ms-border-radius: 0px;
}

.mobile .content-outer,
.mobile .main-outer ,
.mobile .post-outer {
  background: inherit; border: none;
  box-shadow: none; margin: 0pt auto;
}

.mobile-bingkai-judul {
  background-color: rgb(236, 239, 245);
  border: 1px solid #cccccc;
  height: auto; margin: 0px;
  overflow: hidden; padding: 2px;
  width: 99,99%; text-align: justify;
}

.mobile-baca-selengkapnya {
  padding-top: 4px; text-align: right;
}

.mobile-baca-selengkapnya a {
  display: inline-block; margin: 0;
  padding: 4px 4px; border: 1px solid #cccccc;
  text-align: center; text-decoration: none;
  background: rgb(236, 239, 245);
  font: 13px/18px arial;
}

.mobile .comments {
  border: 1px solid rgb(204, 204, 204);
  background-color: rgb(236, 239, 245);
}

.mobile .comments .comments-content .comment {
  margin-bottom: 0px; padding-bottom: 0px;
}

.mobile .comments .comments-content .comment:first-child {
  padding-top: 0px;
}

.mobile .comments-content .comment-thread,
.mobile .comments .avatar-image-container {
  border: 1px solid rgb(204, 204, 204); background-color: #ffffff;
}

.mobile .comments .avatar-image-container {
  height: 36px;
}

.mobile .comments .comment-block {
  border: 1px solid rgb(204, 204, 204); background-color: #fafafa;
}

html .home-link, html .blog-pager-newer-link, html .blog-pager-older-link {
  height: auto;
}

html #blog-pager-newer-link {
  margin-left: 0px;
}

html #blog-pager-older-link {
  margin-right: 0px;
}

.mobile-link-button {
  background-color: inherit; height: auto;
}

.mobile-index-contents {
  color: #000000; width: 100%;
}

html .mobile .comment-form {
  max-width: 100%;
}

.mobile .comment-form {
  text-align: justify;
}

.desainer {
  color: #ffffff; border: 1px solid #444444;
  background: #444444;  text-align: center;
  padding-top: 2px;
}

.desainer a:link, .desainer a:visited {
  color: #ffffff;
}

.mobile .footer-outer {
  color:$(footer.text.color); border: 1px solid #444444;
  background: #444444; 
}

.mobile .footer-outer a, 
.mobile .footer-outer a:visited,
.mobile .footer-outer a:hover,
.mobile .footer-outer .widget h2 {
  color: #ffffff;
}


Kesembilan, cari kode </head> kemudian sisipkan kode <a id='atas'/> tepat di atasnya.

Kesepuluh, simpan template Anda.


Sehingga akhirnya apabila blog Anda dibuka dengan menggunakan perangkat seluler, tampilan halaman akan berubah dari tampilan halaman blog versi standar Blogger menjadi tampilan halaman seluler seperti yang tampak pada gambar di bawah ini.

Tampilan Halaman Blog Seluler (Mobile Blog)

Sebagai catatan, apabila Anda ingin menambahkan widget tertentu seperti yang tampak pada gambar di atas, maka Anda dapat menyisipkan script dari widget yang dimaksud ke bagian yang ditandai dengan kata ----- CUSTOM WIDGET ----- (dalam hal ini terdapat pada langkah yang ketujuh). Kemudian apabila ingin memasang tombol follow Blogger, Twitter, dan Facebook serta menambahkan daftar artikel terkait untuk halaman blog versi seluler seperti dalam blog ini, maka silakan terapkan teknik yang terdapat dalam artikel dengan judul Memasang Widget Blogger Follow Button Pada Blogspot Versi Mobile dan Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot.

Dan karena saya yakin Anda adalah seorang Blogger yang baik, maka saya percaya bahwa Anda akan tetap mencantumkan, menyertakan, dan atau tidak menghapus maupun mengubah kode Desain versi seluler oleh <a href='http://eltelu.blogspot.com/'><b>Semar Bingung</b></a> yang terdapat  dalam <div class='desainer'>, sebagai wujud penghargaan Anda terhadap usaha, jerih payah, dan hasil karya orang lain, apabila menggunakan, memodifikasi, dan atau menerapkan teknik yang diuraikan dalam artikel ini. Sehingga apabila Anda hendak mencantumkan blog Anda, silakan ganti kata ‘URL Blog Anda’ dan ‘Nama Blog Anda’ yang terdapat pada kode <br/>Dimodifikasi oleh <a href='URL Blog Anda'><b>Nama Blog Anda</b></a> sesuai dengan URL dan nama blog yang Anda kelola.

Sekian, terimakasih, semoga berguna dan bermanfaat, serta selamat mencoba.
Salam.


Ad

Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , , .
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
Terdapat 30 komentar untuk artikel ELTELU yang berjudul Panduan Cara Mengubah Tema Pada Template Untuk Tampilan Halaman Blog Versi Seluler (Blogger Mobile Themes) .
28/06/12 15.43 O

selamat sore. sob,,,

29/06/12 06.06 O

surprice bangeet baru dpt artikel ini, bakal betah nongkrong disini lama2 kya nya..

lanjut karya nya sob

29/06/12 06.08 O

@RahmatullahSelamat sore Sobat. :)

29/06/12 06.54 O

@arenaSilakan Sobat... Akan tetapi saya mohon maaf karena tidak dapat menyuguhkan apa-apa, selain secuil ilmu yang saya miliki ini, untuk dibagikan kepada orang lain.

Harapan saya, semoga apa yang saya tuliskan dalam artikel ini dapat berguna dan bermanfaat bagi kita semua. :)

08/07/12 12.10 O

om script agak kurang jelas .. ketika di copas dan di masukan ke dalam edit html .. pasti script itu akan menyatu .. gak seperti bentuk di gambaran di atas .. gimana caranya ni .. saya bingung .. mohon dikasih tau ya om ..

08/07/12 12.52 O

@GhiieellaaankSobat Ghiieellaaank, kalau saya boleh tahu, yang agak kurang jelas script mana ya?

Jadi gini, agar tidak mengalami kesulitan maka silakan Sobat kerjakan langkah demi langkah secara berurutan mulai dari langkah pertama.

Nah, apabila Sobat mengerjakannya secara berurutan, maka saya dapat memastikan bahwa teknik tersebut dapat diterapkan pada blog Sobat. Karena setelah tadi saya membuka beberapa blog yang Sobat miliki, kebetulan beberapa blog tersebut juga menggunakan template standar Blogger.

Jadi pada intinya, silakan dicermati dan pahami dulu masing-masing langkah yang ada, baru kemudian kerjakan secara berurutan.

Sekian, semoga dapat membantu, dan salam. :)

23/07/12 12.14 O

yg kode cara ke 8 gk ada gan, ada solusi gk ea..setelah sy paste di atas ]]> tetap gk berubah tampilannya gan

24/07/12 21.00 O

@awalullSobat, kiranya perlu diketahui bahwa teknik tersebut hanya dapat diimplementasikan (diterapkan) pada template standar yang disediakan oleh Blogger.

Sedangkan apabila diterapkan pada template yang Sobat gunakan, tentu saja tidak bisa karena template yang Sobat gunakan adalah kustom template.

Sekian dan salam. :)

24/09/12 01.41 O

kok nggak jadi mas...?

24/09/12 12.15 O

@serba serbiSetelah saya cek template yang Sobat gunakan, ternyata templatenya adalah template pihak ketiga. Sehingga tentu saja tidak jadi karena teknik yang diuraikan dalam artikel ini hanya dapat diimplementasikan pada template standar (bawaan) yang telah disediakan oleh Blogger.

Sekian dan semoga dapat membantu. :)

24/09/12 22.26 O

nice gan walaupun panjang tetapi tetap mudah di mengerti karena ada gambar-gambarnya yang mendukung, keep posting gan.. saya benar0-benar tunggu kunjungan baliknya nih gan...

24/09/12 23.03 O

@Farhan FikriTerimakasih Sobat. Kebetulan tadi saya juga langsung berkunjung ke blog yang Sobat kelola dan ternyata loading halamannya sangat ringan. Dan bahkan bisa jadi lebih ringan bila dibandingkan dengan blog ini. Tidak hanya itu, bila saya cermati artikel yang Sobat terbitkan pun sangat bermanfaat.

Sekali lagi saya sampaikan terimakasih.

26/11/12 02.11 O

Makasih gan atas tutornya, Saya mau mencobanya.
minta doa'nya aja semoga berhasil.. :)
Salam.

26/11/12 09.46 O

@Ijang CahyanaSama-sama Sob. Silakan. :)

01/12/12 11.26 O

wah, bagus nih buat blog saya... makasih gan infox.. siap diterapkan
http://501kck.blogspot.com

05/12/12 03.23 O

@501kckTerimakasih balik Sobat.

09/12/12 11.47 O

coba dulu ya bang.....

11/12/12 16.49 O

@andi fahmiSilakan Sob. :)

21/01/13 08.43 O

mas tutorial ini sudah saya coba.. tetapi .. ada pemberitahuan setelah disimpan.. kalo ada kesalahan dalam penghampusan.. pada kolom 11 baris seribuan keatas..
saya aga bingung mas.. untuk mencari kesalahannya tersebut..
mohon sarannya ya mas.. sudah saya coba 3 kali tapi ada kesalahan terus

terimakasih sebelumnya

22/01/13 11.54 O

@Asih Budi AriyantiUntuk terjadinya error yang diakibatkan oleh kekeliruan saat melakukan editing, maka saya sangat enyarankan agar Sobat mengimplementasikannya terlebih dulu pada sebuah blog uji coba.

Sehingga dengan demikian bila terjadi error atau kekeliruan, maka Sobat dapat me-restore template ke dalam template standar.

Jadi akhirnya tidak akan menyebabkan kerusakan fatal pada blog utama Sobat.

Semoga dapat membantu. :)

saya bisa nyanya ne,,
bagai mana memposting blog ga nampil di home/ beranda..
tapi nampilnya ke page..

klo bisa kimkan ke email ane yah
falentino91@gmail.com

30/01/13 13.33 O

@Falentino SembiringKalau menurut sepengetahuan saya tidak bisa, Sob. Karena page (laman statis) merupakan laman mandiri.

Sehingga ketika kita memposting artikel, maka secara default akan ditampilkan di laman beranda (home).

CMIIW

14/04/13 23.15 O

turorialnya sangat jelas dan lengkap sob, terima kasih sudah berbagi semoga bermanfaat

14/04/13 23.15 O

tutorialnya sangat jelas dan lengkap sob,salam kenal, semoga bermanfaat

15/04/13 12.21 O

@Dedic AhmadSalam kenal balik, Sobat.

23/06/13 09.48 O

wah artikelnya bermanfaat semua ya master
tukar link dong master
www.cpartikel.com

23/06/13 13.44 O

@Copy PasteTerimakasih banyak Sob. Namun seperti yang telah saya sampaikan pada komentar balasan untuk komentar Sobat dalam artikel lain blog ini, dengan sangat terpaksa saya tidak dapat memenuhi ajakan Sobat untuk bertukar link mengingat sudah terlalu banyak link yang terpasang pada blogroll.

Semoga dapat dimaklumi.

30/06/13 19.51 O

Sangat bermanfaat. pengen sih. bisa tampilannya kayak gitu, tapi gak ngerti. masih gaptek. cuma bisa ngeliat aja :(

25/01/14 16.44 O

Kalo blog saya solusinya gimana sob, jika pake versi mobile ada menu home diatas dan dibawahnya beranda.tolong dong kasih solusi,semoga berpahala sob.amien

26/01/14 23.19 O

@Zainal Abidin Hal seperti itu biasanya disebabkan karena terdapat 2 (dua) buah pagelist widget yang digunakan Sob.

Jadi pastikan bahwa pagelist widget yang Sobat gunakan hanya sejumlah 1 (satu) buah agar bilah menu yang ditampilkan hanya 1 (satu).

Semoga dapat membantu.

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