Cara Mengedit CSS Template Seluler Blogspot

Cari kode <body>, hapus kode tersebut dan ganti dengan <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Penting! khusus di dalam template Simple Faster v2 terdapat dua kode <body>. Pilih yang kedua, bukan yang pertama.
Fungsi dari kode tersebut adalah untuk menambahkan class CSS khusus pada template seluler yaitu .mobile. Jadi nanti saat kita mereset elemen, kode CSSnya kurang lebih seperti ini: .mobile #header { width:bla..bla..bla..;}.mobile #kontent { bla..bla..bla..;}
Setelah kita menambahkan kode tersebut, sekarang waktunya kita mereset elemen-elemen yang memiliki lebar fixed.
Copy kode CSS di bawah ini:
/* Custom Mobile Template by Mas Sugeng */  /* menghilangkan iframe yg dihasikan script sharethis */ .mobile #kepala-kiri, .mobile #stSegmentFrame, .mobile #stwrapper {
 display:none !important;
}
 /* Reset Elemen */ .mobile #wrapper {
 margin:0 auto !important;
 width:auto !important;
 max-width:600px !important;
}
.mobile #kepala {
 background:#fff;
 width:auto;
 max-width:100% !important;
 margin:0px !important;
 padding:0px !important;
}
.mobile #kepala-kanan {
 height:auto;
 padding:6px;
 margin:0px;
 width:auto;
 max-width:100%;
}
.mobile #posting, .mobile #sidebar {
 margin:0 auto !important;
 float:none !important;
 width:auto !important;
 max-width:100% !important;
}
.mobile #kotak-posting {
 padding:6px !important;
 border-right:medium none !important;
 font-size:13px;
}
.mobile #kotak-sidebar {
 margin:6px !important;
 font-size:13px;
}
.mobile #navigasi {
 display:none;
}
Setelah di-Copy, taruh atau pastekan di atas kode ]]></b:skin> dan Save template
Sedikit penjelasan dari kode CSS di atas. Kode CSS di atas saya gunakan untuk mereset semua elemen menjadi max-width:600px; atau kalo diterjemahkan artinya memiliki lebar maksimal 600 pixel. Dan saya juga menyembunyikan bagian Navigasi karena menurut saya navigasinya kurang pas jika ditampikan di template seluler.
Kurang lebih tampilan blog sobat jika diakses via perangkat seluler akan menjadi seperti ini:
Custom Mobile Template Custom Mobile Template Nah, sekarang tinggal bagaimana kreatifitas sobat dalam mempercatik template seluler tersebut. Saya yakin sobat sudah tahu caranya. Jadi intinya saat ingin mengedit CSS template seluler selalu tambahkan class .mobile.
Oh ya, sekali lagi saya tekankan, kode CSS yang saya tulis di atas adalah khusus untuk template Simple Faster v2 yang saya gunakan sebagai contoh pada tutorial ini. Seperti yang sudah saya sebutkan di atas, bahwa hampir semua template memiliki kode CSS yang berbeda-beda. Jadi saya harap sobat bisa menyesuaikan dengan template yang sobat pakai.
Mungkin hanya segitu saja yang bisa saya tulis. Bila apa yang saya tulis di atas kurang bisa dipahami, saya mohon maaf yang sebesar-besarnya. Karena sejujurnya saya kurang begitu bisa dalam membuat artikel tutorial.

Sumber

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Situs Auto Visitors

Image
Demo Click here Download Click here   Cara Membuat Situs Auto Visitors Situs ini seperti bot yang berfungsi untuk memperbanyak pengunjung/penayangan sehingga blog/situs akan tampak seperti ramai, script ini bisa di pasang cron job dengan mengcopy link yang sudah di submit lalu buat cron job di google drive dan situs Auto Visitors yang dibuat pun bisa di gunakan orang lain 1.Buka cpanel mu 2.Masuk ke file manager 3.Upload script di atas 4.Buka situsmu dan Situs Auto Visitors pun berhasil di buat Bebas megedit script di atas asalkan tidak mengganti credit dari blog Alal dan saya sendiri (yang mengedit sedikit)
Read more

Free Download | Warcraft 3 - Frozen Throne Maps | Naruto | Bleach | One piece | More ...

Image
* To play maps, you must have Warcraft 3 Frozen throne game installed on your PC, untuk memainkan game (maps), komputer anda sudah harus terinstal game Wacraft 3 frozen throne * All maps hosted and shared in 4shared.com , semua map game adalah milik netter lain yang di share di situs 4shared.com W3 Game Maps - Download Links » Warcraft 3 - Frozen throne Maps » Bleach ( *.w3x ) » Warcraft 3 - Frozen throne Maps » One Piece ( *.w3x ) » Warcraft 3 - Frozen throne Maps » Naruto ( *.w3x ) - the best Naruto Maps » Warcraft 3 - Frozen throne Maps » Final Fantasy ( *.w3x ) » Warcraft 3 - Frozen throne Maps » Inuyasha ( *.w3x ) » Warcraft 3 - Frozen throne Maps » Dota All Stars (*.w3x) » Warcraft 3 - Frozen throne Maps » All Tournament maps (*.w3x) » Warcraft 3 - Frozen throne Maps » All Ai Maps (*.w3x) » Warcraft 3 - Frozen throne Maps » All Defense Maps (*.w3x) » Warcraft 3 - Frozen throne Maps » Tower Defense (*.w3x) » Warcraft 3 - Frozen throne Maps » Survival
Read more

Cara Membuat Website Auto Like dan Comment Beranda dengan Blogger

Image
Cara Membuat Website Auto Like dan Comment Beranda dengan Blogger Mungkin sudah ada yang mendengar atau memakai Website Auto Like dan Comment Beranda , tetapi disini saya membuat tutorial Cara Membuat Website Auto Like dan Comment Beranda dengan Blogger . Mungkin tidak hanya Blogger, situs lain mungkin juga bisa. Disini saya bagi menjadi 2 bagian. Fitur: Auto Like Auto Comment Auto Post (Grup, teman) Cara Membuat Website Auto Like dan Comment Beranda dengan mengganti Template 1. Login ke Blogger dan pilih blog yang ingin diubah menjadi Website Auto Like dan Comment 2. Klik Template 3. Geser ke paling bawah dan klik Kembali ke Template Klasik dan klik Kembali ke template klasik lagi 4. Geser ke paling bawah dan pada kolom Edit Template HTML ganti dengan kode ini . 5. Selesai Website Auto Like dan Comment Beranda dengan Blogger sudah jadi. Cara Membuat Website Auto Like dan Comment Beranda dengan Postingan 1. Buat postingan baru 2. Pastekan kode beriku
Read more