Silahkan
klik link pada nama perangkat diatas jika anda belum mempunyai-nya,
santai saja tidak akan dipunggut biaya, karena alat membuat website
diatas bisa di-download secara gratis. Tutorial ini terdiri dari
beberapa langkah mulai dari menyiapkan sketsa sampai testing template
responsive.
Perhatikan perbedaan antara dua gambar diatas. Pada sketsa desktop,
area sidebar berada disebelah kanan, sedangkan pada sketsa mobile, area
sidebar berada sejajar dengan area lain-nya. Area sidebar dibuat sejajar
dengan tujuan memberikan ruangan yang lebar pada saat tampil pada layar
halaman yang lebih sempit.
Kita juga menggunakan Meta Tag Viewport dalam elemen head, untuk lebih memahami tentang menggunakan Meta Tag Viewport, silahkan kunjungi tutorial ” Tips Cara Website Responsive dengan Viewport “.
Kita mulai dengan membuat div
Jika skrip diatas kita jalankan (belum CSS) , maka tampilan halaman web akan tampak seperti berikut:
Selanjutnya kita setting style untuk div
Simpan skrip CSS diatas dalam satu file CSS dengan nama
Demikian tutorial cara membuat template responsive dengan HTML 5,
cara diatas merupakan cara yang sederhana dan ditujukan untuk sebatas
memahami proses pembuatan template responsive. Jika anda ingin agar
tampilan lebih menarik, silahkan anda padukan dengan font dan bootstrap
atau dengan mengunjungi tutorial ” Cara Membuat Tampilan Blog / Website Menarik “.
Masih dibutuhkan modifikasi tambahan jika anda ingin aplikasikan untuk blog blogger maupun blog wordpress, gunakan teknik mengatur kolom dan CSS media kueri yang telah anda pelajari disini. Jangan ragu untuk ajukan pertanyaan jika ada langkah yang tidak dimengerti dengan menuliskan-nya dalam kolom komentar.
Happy Nyekrip!
Langkah 1: Membuat Sketsa Desain Web Responsive
Kita akan memulai dengan membuat sketsa tampilan web untuk tampilan desktop dan juga mobile, dengan sketsa ini kita bisa mengatur arah perubahan tampilan dari desktop ke mobile atau sebaliknya. Berikut adalah sketsa halaman web responsive untuk latihan.
Gambar Sketsa Desktop
Gambar Sketsa Mobile
Langkah 2: Membuat Struktur HTML Halaman Responsive
Karena kita menggunakan template responsive dengan HTML5, maka kita akan menggunakan elemen-elemen baru seperti header, nav, article. Disarankan untuk memberikan skripHTML5SHIV agar template kita bisa berjalan dengan baik dalam browser IE versi 9 kebawah, dan juga menyertakan file reset.css untuk mereset semua style bawaan dari browser (file reset.css bisa di-download pada tombol download skrip diatas).Kita juga menggunakan Meta Tag Viewport dalam elemen head, untuk lebih memahami tentang menggunakan Meta Tag Viewport, silahkan kunjungi tutorial ” Tips Cara Website Responsive dengan Viewport “.
Kita mulai dengan membuat div
wrapper (pembungkus), area
header dan navigasi. Area utama akan di-isi dengan tutorial terpopuler
dan daftar tutorial . Area sidebar akan di-isi dengan arsip, kategori
dan sosial. Membuat area about sebagai tempat untuk memberikan informasi
tambahan dan terakhir membuat area footer. Setiap area kita berikan id dan class untuk memudahkan dalam pengaturan style dalam skrip CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Nyekrip - Membuat Template Responsive</title>
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/media-queries.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,400,400italic,700italic' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrapper">
<header>
<h1><a href="index.html">Nyekrip</a></h1>
<h2>Nyekrip <span>-</span> Web Tutorial Indonesia</h2>
<nav>
<a href="#">Beranda</a>
<a href="#">Skrip</a>
<a href="#">Glosarium</a>
<a href="#">Tentang</a>
<a href="#">Nyekrip Yuk</a>
<div class="clearfix"></div>
</nav>
</header>
<section id="main-content">
<div id="featured">
<h3>Tutorial Populer :</h3>
<h4><a href="#">Tutorial 1</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere,
quis dapibus metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus pellentesque
dignissim. Curabitur ipsum magna, sodales quis auctor quis, pulvinar eu neque.llis...
<br/> <a href="#">Nyekrip More →</a></p>
</div> <!-- END Featured -->
<hr/>
<div id="latest">
<section class="left-col">
<h3>Tutorial Terbaru :</h3><br/>
<h4><a href="#">Tutorial 1</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at
ipsum posuere. <a href="#">Nyekrip More →</a></p>
<h4><a href="#">Tutorial 2</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at
ipsum posuere. <a href="#">Nyekrip More →</a></p>
<h4><a href="#">Tutorial 3</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at
ipsum posuere. <a href="#">Nyekrip More →</a></p>
</section> <!-- END Left Column -->
<aside class="sidebar">
<h4><a href="#">Arsip</a></h4>
<ul>
<li><a href="#">Jan 2015</a></li>
<li><a href="#">Feb 2015</a></li>
<li><a href="#">Mar 2015</a></li>
</ul>
<br/>
<h4><a href="#">Kategori</a></h4>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
</ul>
<br/>
<h4><a href="#">Sosial</a></h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Google+</a></li>
</ul>
</aside>
</div> <!-- END Latest -->
<div class="clearfix"></div>
<hr/>
<div id="about">
<h3>Tentang</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor eros at ipsum posuere,
quis dapibus metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus pellentesque
dignissim. Curabitur ipsum magna, sodales quis auctor quis, pulvinar eu neque.llis... </p>
</div>
</section>
<hr/>
<footer>
<p>© 2015 - Membuat Template Responsive</p>
</footer>
</div> <!-- END Wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
|
Gambar tanpa CSS
Langkah 3: Membuat Style CSS Template Responsive
Pembuatan skrip CSS dengan tujuan memberikan style dan responsif pada halaman web dibagi dengan 3 bagian yaitu bagian struktur, utama dan media kueri sekaligus reset CSS. Simpan file CSS ini dalam folder style.Membuat Style CSS bagian Struktur
Pada skrip HTML diatas, dibagian elemen head telah diset font Open Sans. Mari kita ketikkan skrip dibawah ini untuk mengatur default font dan warna latar belakang (background).
1
2
3
4
5
6
|
body {
background: #F9F9F9;
color: #222;
font-family: 'Droid Serif', serif;
font-size: 16px;
}
|
#wrapper, kita berikan lebar width: 90%;.
1
2
3
4
5
6
7
|
#wrapper {
margin: 10px auto;
max-width: 980px;
width: 90%;
background: #fff;
padding: 10px 0;
}
|
Membuat Style CSS bagian Utama
Sekarang kita buat skrip CSS untuk style bagian dalam div wrapper yang terdiri dari header, konten utama, sidebar dan footer. Pada bagian tengah kita berikan 2 kolom, masing-masing ukuran lebar kita atur dengan nilai persentase.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
header {
padding: 3px;
}
::-moz-selection {
background-color: #91D8f7;
color: #fff;
}
::selection {
background-color: #91D8f7;
color: #fff;
}
a {
outline: 0;
color: #222;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p a:hover {
color: #53bd84;
}
a:active {
outline: 0;
position: relative;
top: 2px;
}
.clearfix {
clear: both;
}
h1 {
font-size: 89px;
font-family: 'Open Sans', serif;
line-height: 75px;
padding: 10px;
}
h1 a:hover {
text-decoration: none;
color: #53bd84;
}
h2 {
font-family: Helvetica;
font-size: 18px;
padding: 10px;
}
h3 {
font-family: 'Droid Serif', serif;
font-size: 30px;
}
h4 {
font-family: 'Droid Serif', serif;
padding: 3px;
margin: 5px 0 0;
}
h4 a {
text-decoration: underline;
}
nav {
background: #222;
padding: 0;
margin: 10px 0;
}
nav a {
color: #F9F9F9;
display: block;
float: left;
padding: 10px;
}
nav a:visited {
color: #f9f9f9;
}
nav a:hover {
text-decoration: none;
background: #53bd84;
}
nav a:active {
position: relative;
top: 0;
}
.left-col {
width: 70%;
float: left;
}
.sidebar {
width: 20%;
float: right;
margin-bottom: 10px;
}
#about, #featured, #latest {
padding: 20px;
}
p {
padding: 0 5px;
}
ul {
list-style: none;
}
ul li {
margin: 0 5px;
}
footer {
padding: 5px;
}
pre {
overflow: scroll;
font-size: 10px;
}
|
style.css,
refresh halaman web dan halaman web akan menampilkan halaman kita
seperti gambar berikut (ingat ya, pada tahap ini halaman masih belum
responsif).
Tampilan Akhir
Membuat Style CSS Media Kueri
Sekarang kita akan membuat skrip CSS media kueri agar template web bisa responsif, buatlah satu file CSS dengan namamedia-queries.css.
Dalam file CSS tersebut akan kita atur ukuran font dari h1, h2 dan
ukuran lainnya untuk bisa berubah ketika layar halaman web berubah. Juga
tidak lupa untuk mengatur agar area sidebar berpindah pada tampilan
mobile (2 kolom ke 1 kolom).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*Style Media Kueri*/
@media screen and (max-width:478px) {
h1 {
font-size: 70px;
padding: 1px;
}
h2 {
font-size: 13px;
padding: 1px;
}
body {
font-size: 13px;
}
}@media screen and (max-width:740px) {
.left-col, .sidebar {
width: 100%}
}img {
max-width: 100%;
height: auto;
}
|
Membuat Reset Style CSS
Terakhir kita buat filereset.css dan ketik-kan skrip dibawah ini. Ingat untuk menyimpan file style.css, media-queries.css dan reset.css dalam folder bernama style.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
/*Style untuk reset*/
a ,
abbr ,
acronym ,
address ,
applet ,
article ,
aside ,
audio ,
b ,
big ,
blockquote ,
body ,
canvas ,
caption ,
center ,
cite ,
code ,
command ,
datalist ,
dd ,
del ,
details ,
dfn ,
div ,
dl ,
dt ,
em ,
embed ,
fieldset ,
figcaption ,
figure ,
font ,
footer ,
form ,
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 ,
header ,
hgroup ,
html ,
i ,
iframe ,
img ,
ins ,
kbd ,
keygen ,
label ,
legend ,
li ,
meter ,
nav ,
object ,
ol ,
output ,
p ,
pre ,
progress ,
q ,
s ,
samp ,
section ,
small ,
source ,
span ,
strike ,
strong ,
sub ,
sup ,
table ,
tbody ,
tdvideo ,
tfoot ,
th ,
thead ,
tr ,
tt ,
u ,
ul ,
var {
background: 0 0;
border: 0;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
|
Masih dibutuhkan modifikasi tambahan jika anda ingin aplikasikan untuk blog blogger maupun blog wordpress, gunakan teknik mengatur kolom dan CSS media kueri yang telah anda pelajari disini. Jangan ragu untuk ajukan pertanyaan jika ada langkah yang tidak dimengerti dengan menuliskan-nya dalam kolom komentar.
Happy Nyekrip!
About The Author
tapi sayangnya waktu dan kemampuanku sangat terbatas
Nice share ^^
banyak yang saya dapatkan dari postingan ini
Sekalian ijin comot artikelnye…..! [>_<]
Ane dah coba tapi templatenye enggak responsif….
link hasilnye di bawah ini :
http://localhost:8099
Ane dah coba, tapi templatenye enggak responsif….
link hasilnye di bawah ini :
http://localhost:8099
Salam
mantap bet..
lanjut kan berbagi gan..
sukses selalu gan
tx
file reset.css itu fungsi nya gimana yak? thanks gan
punya template untuk blogspot nggak?!?!? mirip seperti yg dipake skrng ini..?!?!?
terima kasih toturialnya om
Btw, mks untk artikel yg sangat bermanfaat bagi nubi sprti saya… smga sehat sllu n trus brsemangat memberikan artikel yg penuh manfaat. Salam sukses
saya tunggu jawabannya terima kasih
body { background-image: url(“paper.gif”); background-color: #cccccc; }