XtGem Forum catalog
Free Online Tools And Generator

Mywapmaster


☰ subc


Rangka Dasar membuat halaman template responsive 2 kolom

Template sederhana yang responsive dua kolom ini terdiri dari halaman posting dan navigasi, tentu sudah di siapkan header dan footer, selanjutnya Anda dapat menyesuaikan dari warna dan isi,
Sebelumnya mohon maaf jika Request ini tidak sesuai keinginan, karena saya tidak memiliki komputerkomputer jadi hanya sebatas rangka dasarnya saja, sebuah halaman yang di minta, template responsive sederhana dari https://codepen.io/johnstonian yang terdiri dari Header, Kolom Post, Navigasi dan footer, dengan sedikit sentuhan Css media template ini sudah responsive.

responsive template
gambar oleh www.sitepoints.com


Tutorial ini saya buat secara umum, jadi buat pengguna xtgem sesuaikan saja mana Header dan footer nya, untuk pengguna lain pada dasarnya tiada perbedaan.



CSS

<style> *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; } .KolomContainer, footer, header { position: relative; margin: .5em; } .KolomKiri, .KolomKanan, footer, header { border: 1px solid #ccc; padding: 1.25em; } .KolomKiri { margin-bottom: .5em; } .nav { list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0; } .nav > li, .nav > li > a { display: inline-block; *display: inline; zoom: 1; } .inline-items { margin-top: 0; } .inline-items li { margin-left: 0; border-left: 1px solid black; padding-left: 10px; padding-right: 10px; } .inline-items li:first-child { margin-left: 0; border: none; padding-left: 0; padding-right: 10px; } .inline-items li:last-child { padding-right: 0; } /* Responsive Css */ @media screen and (min-width: 47.5em ) { .KolomKiri { margin-right: 19.5em; } .KolomKanan { position: absolute; top: 0; right: 0; width: 18.75em; } } </style>



pasang dan Simpan Css diatas lalu masukan Html ini sebagai Header dan menu navigasi.

Header & Nav Menu

<h1>Responsive Layout</h1>
<header>
<nav>
<ul class="nav inline-items">
<li><a href="/Home">Home</a></li>
<li><a href="/Blog">Blog</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">My Trips</a></li>
</ul>
</nav>
</header>


Header dan menu Nav sudah terpasang, selanjutnya kolom kiri atau kolom artikel nya.

Kolom kiri post

<div class="KolomContainer"> <div class="KolomKiri"> <h2>Kolom Kiri ( post )</h2><p>artikel disini</p> </div>


sudah bisa ditebak selanjutnya kolom kanan navigation

Kolom kanan

<div class="KolomKanan">
<h2>Kolom Kanan ( Navigasi )</h2>
<p>Text disini</p>
</div></div>


sebagai penutup footer

footer

<footer>
<p><a href="#">Contact Us</a> | <a href="#">Sitemap</a> | <a href="#">Privacy Policy</a>
</p>
<p>©2016 Copyright info disini...</p>
</footer>


Catatan Penting
isi dari kolom kiri (post) harus lebih banyak dari kolom kanan ( navigation ) dalam arti kolom kiri wajib lebih panjang kebawah dari kolom kanan.

Untuk pengguna ponsel dapat memanfaatkan cara melihat tampilan desktop lewat ponsel

Demikian CARA MEMBUAT TEMPLATE SEDERHANA YANG RESPONSIVE DUA KOLOM




Rangka Dasar membuat halaman template responsive 2 kolom Rated 4.5/5 based on 144 reviews
Diposkan pada 05-06-2016 17:57
Tags: css , Template
Tuzer
17-04-2017 13:23

hello

ifangt
28-01-2017 08:27

mantap bro. makasih infonya

och4
15-08-2016 14:00

Itu cara buat untuk penempatan script .. kayak di W3school .. gimana cara nya ******

Mdian
19-06-2016 23:59

Josss boss!

RMRCX
06-06-2016 12:58

Oke Min. sama-sama :)


Close ×

Info

Note :

Do Not Copy Code Using Translator.
( Jangan Copy Code Menggunakan Translator Bahasa)

Please Like This Page