MY
WAPMASTER

Free Online Tools And Generator

Contact
my wapmaster selekeh

Tips
Jika mendapati halaman blank ( blank Page ) silahkan gunakan halaman VERSI DASAR Kami. ×

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








Back to posts

Comments:

:

hello

:

mantap bro. makasih infonya

:

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




Total Average Rating:
star star
2.3 Out Of 5
Total Votes: 436
Your Rating:

My Wapmaster
Rating 4 stars
Deskripsi
Author
Keywords Generator, Widget, wapmaster tools

Share
Navigation


My Wapmaster merupakan Wapsite layanan online umpan web, yang terdiri dari tools atau alat pengelola untuk blogger, serta tutorial publikasi lain yang berbasis web.

Random Berita

European SolO probe ready to take on audacious mission
sang begal komentar xtgem itu bernama badwords
The Latest: California names director for wildfire safety
Css Konten jadi Menghilang Dengan Tombol Ex
Cara Memasang Clip Pada Background Gambar Dengan Css



Polly po-cket