Membuat Template Blog Sendiri Dengan CSS Responsive

11/26/2016
Selamat siang teman-teman, melanjutkan tutorial sebelumnya tentang dasar cara membuat template blog sendiri, kali ini saya akan melengkapi tutorial tersebut dengan memberi css responsive pada template yang kita buat sebelumnya. Mari kita mulai dengan membuka template blog sebelumnya. Kira-kira penampakan kodingan template blog yang sudah kita buat sebelumnya adalah seperti dibawah ini.
Nah Jika belum paham mengenai susunan template dasar blogspot di atas, teman-teman bisa mengunjungi artikel saya sebelumnya mengenai cara bikin template dasar. Jika sudah memahami barisan kode diatas, silakkan masuk ke tahap selanjutnya yaitu cara menambahkan css yang responsive pada template dasar blog.

Sebelum masuk kedalam pembahasan tutorial membuat template blogger, teman-teman sebelumnya harus paham mengenai struktur dasar dari css template blogspot, jika saya gambarkan, kira-kira bentuknya seperti ini:
cara membuat template di blogger cara membuat template blog sendiri tutorial membuat template blogger
Struktur Dasar Template
Untuk kode CSS dasar agar terbentuk struktur seperti gambar di atas adalah seperti ini:

Copy dan Pastekan Kode CSS diatas kedalam <b:skin><![CDATA[ Pastekan Kode CSS di dalam sini ]]></b:skin>. Jika sudah selesai, simpan template dan kita mulai peletakan dari masing-masing tag css. Nantinya setiap b:section pada template yang sudah kita bikin 4 kemarin yaitu header, content, sidebar dan footer akan dimasukkan kedalam div.

Untuk Gambar dari ringkas dari koding di atas adalah sebagai berikut:
Membuat Template Blog Sendiri Dengan CSS Responsive
Peletakan Tag CSS pada Setiap Section
Selanjutnya simpan template dan lihat blog anda. Hasilnya struktur dari blogspot sudah terlihat seperti gambar di bagian awal tutorial ini. Namun permasalahannya adalah, tampilan tersebut belum responsive sehingga template buatan sendiri tidak SEO Friendly. Bagaimana Solusinya?

Mudah saja, hanya perlu menambahkan beberapa baris kodingan pada template yang kita buat sebelumnya. adapun kodingan yang perlu ditambahkan adalah:
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
Letakkan koding tersebut tepat dibawah tag <head>, gunakan ctrl + F untuk memudahkan mencari tag pada pembuatan template ini.

Selanjutnya, Tambahkan beberapa baris kodingan dibawah ini tepat diatas tag </head>


Jika sudah, silakkan simpan template anda dan kemudian lihat tampilan terbaru dari blog yang anda buat, agar terlihat jelas, buka menggunakan smartphone teman-teman. Berikut ini tampilan dari blog yang sudah responsive ketika dibuka menggunakan smartphone saya.
Membuat Template Blog Sendiri Dengan CSS
Tampilan responsive
Nah untuk sementara saya rasa cukup sekian dulu cara membuat template di blogger dengan memberikan sedikit hiasan CSS responsive, untuk tampilan yang lebih baik silakkan teman-teman pelajari mengenai CSS. Semoga tutorial ini dapat bermanfaat.

Share this :

Previous
Next Post »
6 Komentar
avatar

Terimakasih banyak ilmu nya ini ya saya tunggu2 , tks ya

Balas
avatar

kalau mau batasi postingan biar gak keluar semua kaya gitu gimana ya???

Balas
avatar

terimakasih ya mas. sya sudah coba tutorial dari anda, sekarang udah dikit mengerti cara buat template dasar hingga yang resposive
blog saya golbind.blogspot.com

Balas
avatar

Kalau dulu kita harus pandai-pandai mengubah ccs dari blog tapi kalau sekarang sudah banyak sekali tema yang menyediakan Responsive pada temanya. jadi gak perlu lagi menambahkan kode, tapi ada juga beberapa tema yang belum ada jadi perlu dicoba kode ini.

Balas
avatar

Wow! It's so helpful.Thanks a lot for this post!

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.