• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif

05‘13
April

info72.jpg

Artikel ini adalah lanjutan dari artikel saya yang lalu tentang Membuat Desain Website Responsif dimana saya menunjukan pada anda suatu cara untuk membuat sebuah navigasi menu menjadi responsif pada saat dibuka di berbagai ukuran layar yang berbeda.

Disini saya akan melanjutkan tutorial sebelumnya dan menunjukan kepada anda bagaimana cara membuat content website yang responsif

Apa yang harus saya kuasai?

Untuk memulai tutorial ini anda harus memiliki pemahaman yang cukup tentang CSS dan HTML, silahkan klik link berikut CSS dan HTML untuk mempelajarinya

Tentunya anda juga harus menyelesaikan tutorial sebeumnya Membuat Desain Website Responsif Bagian 1

Tujuan dari tutorial ke 2

Saya akan menunjukan kepada anda bagaimana content utama dari website yang awalnya dibuat dua bagian berjajar ke sebelah kiri yaitu untuk bagian kolom article dan kolom sidebar, menjadi berjajar kebawah diukuran layar yang berbeda. Selain itu saya juga akan menunjukan perubahan dalam menampilkan iklan-iklan google adsense disetiap ukuran layar yang berbeda

Untuk tutorial ini Anda bisa mendownload scriptnya untuk pembelajaran anda

Stuktur html dari content website bisa anda lihat pada tag HTML di bawah

    <div class="wrap">
        <div class="content">
            <h3>Resize browser anda untuk melihat pergerakan design</h3>
            <p>Lorem Ipsum is simply dummy text .</p>
        
            <h3>Atau lihat di mobile browser anda</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and.</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
        </div>
        <div class="sidebar">
            <h3>Sidebar</h3>
            <p class="column-1">
            	Isi dengan kode adsense ukuran 300
            </p>
            
            <p class="column-2">
            	Isi dengan kode adsense ukuran 468
            </p>
            
            <p class="column-3">
            	Isi dengan kode adsense ukuran 728
            </p>
        </div>
    </div>

Berdasarkan kode diatas silahkan siapkan kode google adsense anda yang berukuran 300, 468 dan 728 pixel

CSS untuk Content Website

CSS untuk tampilan content website dilayar yang biasa (desktop) saya buat float kekiri dan untuk side bar saya buat float ke kanan sehingga di dalam bungkus content (wrap) ditampilkan 2 kolom yang sejajar kesamping.

Iklan google yang saya tampilkan untuk dilayar desktop adalah kode iklan yang berukuran 300 di dapat dilihat di tag html dengan class column-1, kode iklan yang lain di column-2 dan column-3 saya sembunyikan (display:none)

Berikut ini adalah CSS yang saya gunakan untuk mark up content

.wrap:after 		{ content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility: hidden; }

.content{
	background:#FFFFFF;
	float:left;
	padding:10px;
	width:580px;
}
.content h1, .content h2, .content h3{
	border-bottom:1px dotted #666666;
	margin:0px 0px 10px 0px;

	padding:3px 0px;
}

.sidebar{
	background:#FFFFFF;
	width:300px;
	padding:10px;
	float:right;
}
.sidebar p{
	margin:0 auto;
	width:98%;
	text-align:center;
}
.sidebar h1, .sidebar h2, .sidebar h3{
	border-bottom:1px dotted #666666;
	margin:0px 0px 10px 0px;
	padding:3px 0px;
}
.sidebar .column-3, .sidebar .column-2 {
	display:none;
}

Bagian Responsif

Sekarang saatnya membuat content website dan tampilan iklan menjadi responsif saat halaman dibuka dilayar kecil seperti di browser tab / mobile

Pada saat layar di break ke ukuran 1024px saya menghilangkan float elemen dengan class content dan sidebar dan merubah ukuran keduanya kedalam nilai prosentase, sehingga menjadi berjejer kebawah dengan lebar yang sama. Pada saat yang sama saya menyembunyikan kode iklan berukuran 300 dan 468 pada tag html dengan class column-1 dan column-2 lalu menampilkan column-3 yang berisi kode iklan berukuran lebar 728

Pada saat layar di break ke ukuran 780px saya menyembunyikan kode iklan berukuran 300 dan 728 pada tag html dengan class column-1 dan column-3 lalu menampilkan column-2 yang berisi kode iklan berukuran lebar 468

Pada saat layar di break ke ukuran 500px saya menyembunyikan kode iklan berukuran 468 dan 728 pada tag html dengan class column-2 dan column-3 lalu menampilkan kembali column-1 yang berisi kode iklan berukuran lebar 300. Diukuran ini saya juga mengubah tampilan dari navigasu menu yang telah dijelaskan di tutorial bagian 1

Berikut ini tag CSS yang saya buat untuk menghasilkan content dan sidebar yang responsif

@media screen and (max-width: 1024px) {
	.content{
		width:98%;
		padding:1%;
		float:none;
		margin-bottom:10px;
	}
	
	.sidebar{
		width:98%;
		padding:1%;
		float:none;
	}

	.sidebar .column-1, .sidebar .column-2 {
		display:none;
	}
	.sidebar .column-3 {
		display:block;
	}
}

@media screen and (max-width: 780px) {
	.sidebar .column-1, .sidebar .column-3 {
		display:none;
	}
	.sidebar .column-2 {
		display:block;
	}
}

@media screen and (max-width: 500px) {
	.navigation {
		position: relative;	
		min-height: 36px;
		margin-bottom:10px;
	}	
	.navigation ul {
		width: 180px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url("http://www.w3function.com/images_tutor/icon-menu-72.png") no-repeat 10px 11px;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
	}
	.navigation li {
		display: none; /* hide all 
  • items */ margin: 0; } .navigation .current { display: block; /* show only current
  • item */ } .navigation a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .navigation .current a { background: none; color: #666; } /* on navigation hover */ .navigation ul:hover { background-image: none; } .navigation ul:hover li { display: block; margin: 0 0 5px; } .sidebar .column-1 { display:block; } .sidebar .column-3, .sidebar .column-2 { display:none; } }
  • Cara yang sebetulnya menggunakan logika yang sederhana tapi tentunya dengan cara ini anda bisa menghemat pengerjaan proyek dengan tidak perlu membuat desain dengan banyak template html, satu desain template bisa dipakai diberbagai device (mantap)

    Semoga bermanfaat

    Anda juga mungkin suka dengan artikel ini :

    1. Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3
    2. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
    3. Belajar Cara Membuat Website dengan Photoshop dan Dreamweaver (Newbie)
    4. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3
    5. CSS 3 untuk border dan background

    Komentar

    • obat bab keras (20 Jun 2015 02:45:40)

      terimakasih gan infonya

    • rangga (03 Sep 2014 06:47:21)

      mohon diperbanyak lagi artikel nya supaya nambah wawasan

    • yoyo (28 Apr 2013 11:00:39)

      makasih gan atas tipsnya

    • pazmantab (17 Apr 2013 02:34:35)

      mantabz nih website makasih sudah banyak berbagi ilmu mas

    Kode?

    Telusuri dan Beritahu saya apabila ada komentar baru.

    loading

    Usulan Kontribusi dan Saran

    Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

    Pemberitahuan Disclaimer © Copyright

    Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

    Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

    Social Stuff