Langsung ke konten utama

Entri yang Diunggulkan

BLOG FOR TEST: INTRODUCE MY NEW SITE

This new blog for test There is no big deal even how hard I try to concealed and in the back door: We are fool when we think we has been done with the great thing and dream to enjoy it instantly. Or when we think we can hide everything forever and ever after. Here I am sitting in the desk and my lovely cat sitting on it too and she close to my laptop licking her knee by itself. I've tried to write something and there no any kind inspiration comes even though I just done create new site called "KOTAK PANDORA" and hope I can write something by comfort. really feel like a shit when my mom called me for help her in the kitchen in this moment. Lmao? I am gonna be it. I am a girl and I am 16 years old a student degree 11. I am not the only one in this house, I have a young sister she is 2 classes under me. I study, yes I do but here still many spare times for playing and even for writing yes I do. So if it is bored for me time always divided to be three sessions but not really ...
4 komentar
Lanjutkan membaca
Label

7 LANGKAH MEMBUAT TEMPLATE SEDERHANA BAWAAN BLOGGER MENJADI RESPONSIVE DAN MOBILE FRIENDLY (LANJUTAN)

Home blogger desain template 7 LANGKAH MEMBUAT TEMPLATE SEDERHANA BAWAAN BLOGGER MENJADI RESPONSIVE DAN MOBILE FRIENDLY (LANJUTAN)
Pada tulisan sebelumnya saya hanya memberikan contoh bagaimana mengubah tampilan template bawaan blogger "sederhana" menjadi :
  • Menyembunyikan tampilan navbar
  • Membuang gambar obeng atau opsi bawaan "quick edit"
  • Membuat read more
  • Membuat menu navigasi sederhana yang responsive dan mobile friendly (Pada tampilan desktop/laptop tampil inline, pada tampilan hape atau mobile menu navigasi akan otomatis menjadi menu dropdown.
  • Memasang font awsome ke dalam blog
  • Menambahkan kode css reset ke dalam setting dengan opsi melalui tambahkan css di menu Desainer Tema Blogge.
  • Menambahkan widget back to top.
Namun perlu diperhatikan langakah lanjutan agar template sederhana tadi menjadi benar benar responsive dan mobile friendly kita dapat melakukan sedikit perombakan struktur template tanpa melanggar aturan kodingnya.

1. Cari kode berikut ini, letaknya ada di dalam tag head (pada template sederhana biasanya tepat berada di bawah kode <head>
  1. <meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>
Jangan ragu, hapus saja dan ganti dengan kode dibawah ini:

  1. <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
2. Di bawah kode <b:template-skin> terdapat kode dibawah ini, hapus saja!

  1. <b:variable default='960px' name='content.width' type='length' value='960px'/>
    2. <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
  2. <b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>
Setelah kedua langkah diatas dilakukan, template akan menjadi lebih user friendly, akan tetapi sidebar pada tampilan desktop/laptop dan layar ukuran 8 inchi katas lenyap! Akan tetapi dengan perubahan ini template tidak perlu lagi memilih opsi mobile pada pengaturan, template secara otomatis dapat menyesuaikan diri baik untuk web/desktop, maupun hape/mobile.

Untuk mengembalikannya dengan gaya yang sangat berbeda dan lebih responsive kita dapat melakukan langkah berikut:

3.1. Sidebar kanan:
Cari kode berikut ini letaknya di dalam atau dibawah kode <b:template-skin> kita akan kesulitan mengenalinya tapi teliti saja abaikan sedikit perbedaannya.
body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
Jika kita ragu merobahnya, hapus dan ganti saja kode diatas dan langsung diganri dengan kode yang sudah jadi dibawah ini:
body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}
 4. Tambahkan kode dibawah dibawah kode diatas:
main-inner .column-center-outer{
float: left;
width:65%;
}
Catatan: width:65% bisa kita robah tapi jangan sampai 100% karena mempengaruhi tampilan margin tulisan postingan.

5. Tambahkan separator css dibawah ini ke atas ]]></:skin>:
.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}
6.  Terakhir untuk merombak total tampilan template "Sederhana" bawaan blogger ini adalah dengan menambahkan kode css dibawah ini dan meletakannya kembali tepat di atas ]]></:skin>:
/*Responsive*/
@media screen and (max-width:1024px){
body{width:100%!important;padding:0;}
.content-inner{overflow: hidden;}
}
@media screen and (max-width:768px){
.main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
.footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
.Header h1{font-size:30px;text-align:center;}
.Header .description{font-size:14px;text-align:center;}
}
@media screen and (max-width:414px){
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
}
@media screen and (max-width:320px){
.fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
.fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
}
Setiap tema memiliki struktur berbeda, langkah langkah diatas hanya berlaku buat tema sederhana. Kami akan membuat tutorial untuk merobah tampilan dan merombak struktur tema tema bawaan blogger yang lain pada episode selanjutnya. Hanya di editblogtema.

7. Dengan mengikuti langkah yang di sampaikan diatas setiap tampilan widget pada opsi desktop/laptop dapat tampil pada hape/mobile. Jika widget yang yang kita inginkan ternyata tidak tampil pada hape/mobile kita dapat melakukan langkah berikut: Masuk ke pengaturan dan langsung ke opsi "edit HTML"

gunakan ctrl+f cari widget yang kita inginkan misalnya "popular posts" jika sudah ketemu kdoe seperti dibawah:
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='popular post'
Tambahkan saja mobile="yes" diantara locked="false/true" dengan title=....Mudah sekali, bukan?
LIHAT DEMO
Label:

Komentar

  1. Sugeng JanggutAgustus 26, 2018

    Tes

    BalasHapus
  2. Cindy HuangAgustus 26, 2018

    RajaBandarQ Adalah website yang paling digemari saat ini oleh para pecinta judi online
    Dengan adanya 8 game terbaik yang disediakan oleh pihak website RajaBandarQ , akan banyak mengundang para pecinta judi poker online untuk bermain diwebsite RajaBandarQ

    8 Game Yang disediakan oleh pihak RajaBandarQ diantaranya adalah :

    * AduQ
    * BandarQ
    * Bandar Poker
    * Bandar 66 ( New Games )
    * Capsa Susun
    * Domino QQ
    * Poker
    * Sakong

    Keunggulan jika bergabung di website RajaBandarQ :

    - 100% Mudah Menang & Fairplay Game
    - Minimal Deposit & Withdraw Rp 20.000,-
    - Bonus Rollingan 0.3% (Tanpa Syarat)
    - Bonus Referral 15% (Seumur Hidup)
    - Sistem keamanan terbaru
    - Support 6 Bank Local ( BCA , BNI , BRI , CIMB NIAGA , DANAMON , MANDIRI )

    Contact Us
    BBM : D887A35F
    WA : +6281314872594
    Line : rajabandarq
    Fanspage : @RajaBandarQQ

    Link Official :
    RajaBandar99,com
    RajaBandar99,net
    RajaBandar99,org
    RajaBandar99,info

    Tunggu apalagi ? Daftarkan diri anda segera juga dan menangkan jackpot jutaan rupiah hanya dengan modal Rp 20.000,-
    Hanya Di RajaBandarQ

    BalasHapus

Posting Komentar

Postingan Populer