Tutorial Cara Membuat Template Responsive

Tutorial Cara Membuat Template ResponsiveTutorial Cara Membuat Template Responsive - Template responsive sekarang lagi populer banyak blog yang sekarang mencoba membuat template responsive, Termasuk Zaid Info yang telah sukses membuat template responsive sederhana yang bisa dibuka di berbagai browser dengan resolusi berbeda beda.

Template responsive menurut Mas Zaid adalah sebuah template yang mampu menyesuaikan diri dengan resolusi device, baik itu HP ataupun Tablet. Kali ini Mas Zaid akan membagikan info tentang cara membuat template responsive blogspot, bagaimana caranya ayo kita liat langkah langkah dibawah ini.

1 ) Cek dulu blog Anda coba kecilkan browser apakah dia menyesuaikan? jika tidak berarti belum responsive.
2 ) Buka akun blogger Anda kemudian buka halaman edit HTML
3 ) Jika Anda membuat sendiri template Anda maka ini akan sedikit memudahkan Anda, apalagi Anda telah mahir membuat template mobile ini tidak jauh berbeda dengannya.
4 ) Berikut ini kode dasarnya :
@media screen and (max-width:...px) {CSS YANG DIATUR}
5 ) Pastekan sebelum kode ]]></b:skin>
6 ) Jika template Anda valid HTML 5 maka Anda harus membuatnya dibawa ]]></b:skin> dengan rincian kode.
<style type='text/css'>@media screen and (max-width:...px) {CSS YANG DIATUR}</style>
7 ) Ganti "...px" ke resolusi yang Anda inginkan, dan isikan CSS pada "CSS YANG DIATUR"
8 ) Contoh :
@media screen and (max-width:979px) { #halaman,#mozillatelek,#judul,#menuz{width:100%;margin:0}#header2{display:none} #main{float:none;display:block;width:auto;padding:5%; } #samping {float:none;display:block;width:auto;margin:5%; } #judul{height:60px}#header-first, #header-scnd {float: none; width: auto;} .post-thumbnail {width: 72px; height: 72px; display: block;} .post-thumbnail {height: 72px; width: 72px;} h2.post-title, .first-post h2.post-title{display: block;font-family: Arial, sans-serif;font-weight:bold;font-size:14px;margin: 0;padding:5px;height:auto} .first-post .post,.post{width:99%} .first-post .post-thumbnail{width:72px;height:72px} #hak-cipta{width:100%;padding:3px 3px}#blog-pager{width:100%} #pilihan li a{width:40%;margin: 1%} #pilihan li a{display: block; text-decoration: none; color: #fff; padding: 1px 5px 1px 5px; background: #333; margin-top: 2px; margin-bottom: 2px; border: #3c3c3c solid 1px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;float:left}#pilihan ol{width:100%} }
 9 ) Jadi itu bermaksud bahwa pada resolusi 979px maka CSS halaman dan lain lain memiliki width dan style yang berbeda dari CSS asal, jadi Anda bisa membuat template jauh berbeda saat pada resolusi tertentu.
10 ) Jika ada element yang tidak Anda sukai silahkan gunakan kode
IDcss{display:none} contoh : #HTML2{display:none}
Dengan demikian Anda bisa mengatur iklan muncul iklan tidak akan muncul, dan berbagai element lain, semoga Anda bisa membuat template responsive Anda, ada satu tips lagi buat Anda jika Anda kesulitan menghapalkan CSS Anda, buka blog Anda klik kanan dan Inspect Element ini akan membantu Anda menemukan kode IDCSS yang belum atau yang telah responsive.

2 comments:

  1. ane penasaran ni gan, ijin nyoba :)
    salam kenal dari www.belajar-creatives.web.id

    ReplyDelete
  2. Ikut nyoba juga biar tampilan blog makin mantap..

    ReplyDelete

Komentar Anda akan dimoderasi terlebih dahulu...