Teya Salat
MY
WAPMASTER

Free Online Tools And Generator

Contact
my wapmaster selekeh

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

New Update
sang begal komentar xtgem itu bernama badwords
badwords-xtgem.pngXtgem Badwords yang berguna menyaring kata-kata buruk di komentar Xtblog, Dengan begitu pengunjung lebih ditekankan untuk memberi komentar yang sesuai dengan artikel, badwords ini diatur oleh pengelola Wap itu sendiri, bagaimana caranya agar si begal badwords ini bekerja dengan baik??? Buka...

6 Comments Read More
Template sederhana responsive 3 kolom
resp3k.jpegW3schools.com sumber aslinya, template ini super sederhana dengan sedikit css, tapi sudah sangat responsive, dengan template ini kita tidak perlu memikirkan lagi tampilan pada browser apapun, sangat nyaman dan simpel. Di nakhodai warna putih dan teal, Tema ini terasa hidup di bawah air terjun...

4 Comments Read More
Tutorial Seputar Mywapblog Ada Disini
mwblogoMy Wapmaster Kembali merilis halaman khusus buat pengguna Mywapblog, Halaman ini akan terus update dari waktu ke waktu, jika Anda tertarik dapat bookmark halaman tersebut. Kunjungi Halaman

0 Comments Read More

Random Post

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:

:

mantap bro. makasih infonya

:

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

:

Oke Min. sama-sama :)

:

Selamat menjalankan ibadah puasa mohon maaf lahir dan batin





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

sang begal komentar xtgem itu bernama badwords
Michigan State's new coach Jonathan Smith and QB Aidan Chiles know each other well from Oregon State
Css Konten jadi Menghilang Dengan Tombol Ex
Cara Memasang Clip Pada Background Gambar Dengan Css