XtGem Forum catalog
MY
WAPMASTER

Free Online Tools And Generator

Contact

Contact Us

Contact Us

Thanks You

Back
selekeh

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

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: 411
Your Rating:

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

Share
Navigation


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

Random Berita

How your weekly shop affects the environment
sang begal komentar xtgem itu bernama badwords
Lawyer for woman who joined ISIS speaks out
Css Link Hover disertai icon
Cara Memasang Clip Pada Background Gambar Dengan Css