SKIP TO MAIN CONTENT
tina-andrew.blogpot.com blog uses cookies to help google service, personalise ads, and more. By visiting us you agree with our privacy policy. For more information: Cookies Policy | Privacy Policy

Tips Ngeblog Blogger Blogspot

Cara Mudah Bikin Blog Web Responsive

Salah satu faktor SEO demi mendapatkan google ranking di halaman hasil pencarian Google (baca: SERP), maka sebuah blog atau website harus (wajib) mobile friendly dan responsive. Blog yang responsive jelas support SEO. Bila template blog anda sudah support SEO tinggal anda menentukkan Judul, sub judul (judul kecil) dan struktur konten termasuk keyword density dalam judul dan konten artikel blog anda agar lebih optimal hasilnya.

Web Framework Twitter Bootstrap & Responsive

Siapa yang tidak kenal bootstrap alias twitter bootstrap? Bootstrap adalah sebuah web framework (baca: kerangka kerja desain website) yang dipublikasikan secara umum secara gratis dan dapat didistribusikan oleh siapapun baik untuk kepentingan pribadi atau komersil. Salah satu blog yang menggunakan web framework twitter bootstrap ini adalah: templatemobilefriendly.blogspot.com yang menyediakan template khusus blogspot gratis yang didesain agar responsive dan support SEO. Bila menginginkan lebih optimal lagi plus tutorial SEO-nya, anda bisa membeli template blogspot responsive premium via akun facebooknya di facebook.com/dev7cyber2012 hanya dengan 2,10 dollar via paypal/ transfer bank.



Prinsip Desain Blog Responsive

Apakah kita bisa mendesain sendiri blog yang responsive itu? jawabnya: gampang banget.  Hal yang paling menonjol dalam desain-mendesain template adalah digunakannya ukuran dalam bentuk pixel. Template blogspot yang lama menggunakan fixed size (baca: ukuran tetap) dalam wujud pixel. Misalnya saja, bagian header akan dirancang dari margin kiri hingga kanan dengan ukuran: 980pixel. atau 980px. Perhatikan ilustrasi berikut ini:

#header-nav{ /*bagian header yang ada menunya*/
width:980px;
}

Ukuran lebar #header-nav diatas disebut fixed-size. Oleh karena bersifat statis. Bila halaman yang ada ukuran fixed-size itu ditampilkan pada gadget atau mobile yang lebih kecil ukuran lebarnya, maka #header-nav dengan ukuran fixed-size diatas akan menimbulkan scroll bar dibagian bawah jendela browsernya, sehingga anda harus menggeser scroll bar tersebut untuk melihat isi halaman semuanya. Jelas ini tidak praktis dan memakan waktu dan tidak 'cool' dilihat :D

Untuk itu, template yang didesain secara responsive sangat diperlukan dalam mengatasi hal tersebut diatas. Salah satu cara termudah adalah dengan mengganti pixel dengan persen atau dynamic-size, sehingga menjadi:

Misalnya:

#header-nav{ /*bagian header yang ada menunya*/
width:87%;
}

Bila template dengan ukuran persen diatas ditampilkan dibrowser melalui media mobile atau smartphone maka akan me-resize sendiri atau #header-nav akan berukuran sesuai media smartphone tersebut. Dengan demikian mempermudah kita mengakses semua kontennya dengan cepat dan mudah.


Bahasan Inti: Template Responsive - Mobile Friendly

Sekarang kita akan membahasnya dengan jelas mengenai cara mudah mendesain template blogspot agar responsive/mobile friendly.


  1. Gunakan ukuran persen daripada pixel
  2. Gunakan property [float] dengan value [left]
  3. Gunakan media queries

Prinsip desain template itu ibaratnya membuat bagian-bagian blog dalam bentuk kotak-kotak tertata rapi dengan menggunakan kode CSS / stylesheet.

Contoh Cara Mendesain Bagian-bagian Template RESPONSIVE

Bagian yang akan dibuat adalah:
  • Header
  • Sidebar kanan
  • Blog content
  • Footer
Misalnya saja, lebar blog tersebut adalah 80% dari media browser. Baik Header maupun Footer akan dibuat tetap berukuran 80%. Kemudian dari 80% itu dibagi untuk Sidebar kanan dan Blog content, masing-masing memperoleh ukuran:
  • Blog content: 55%;
  • Sidebar kanan: 25%;
Sehingga pada Kode CSS kita tulis sbb:

body{
width:80%;
margin:0 auto;
padding: 0px;
}
#blogcontent{
width:54.5%;
padding:0px 5px 10px 10px;
float:left;
}
#sidebarkanan{
width:24.5%;
padding:0px 5px 10px;
float:left;
}


Selanjutnya menulis kode HTML dimana widget dari #sidebarkanan dan #blogcontent akan ditampilkan, spt contoh berikut ini:


        <div id='blogcontent'>
          <b:section class='blog-area-1' id='blog-area-1'></b:section>
        </div>



        <div id='sidebarkanan'>
          <b:section class='blog-sidebar' id='blog-sidebar'></b:section>
        </div>




Setelah dibuat kode HTMLnya maka, tambahkan media queries sebagai penyesuai pada saat blog/template tampil di smartphone/mobile, 
contohnya:

@media screen and (max-width:768px){
#blogcontent{
float:none;
text-align:center;
width:100%;
}
#sidebarkanan{
float:none;
text-align:center;
width:100%;
}
}
@media screen and (max-width:330px){
#blogcontent{
float:none;
text-align:center;
width:100%;
}
#sidebarkanan{
float:none;
text-align:center;
width:100%;
}
}

Sekarang tinggal anda copy dan pastekan ke blogspot anda untuk mencobanya. Silahkan hubungi kami bila masih bingung. Bila script diatas tidak bekerja secara layak, mohon kontak kami di facebook.com/dev7cyber2012 untuk revisi dan update script. trims.

Lihat Tips & Tutorial Sebelumnya
Back to Homepage

Popular Posts