Cara Membuat Tata Letak 3 Kolom dalam CSS

Tata letak CSS mengharuskan Anda memikirkan tata letak situs web Anda secara keseluruhan, lalu mengambil potongan dan menyatukannya. Pelajari cara membuat tata letak 3 kolom sederhana dengan CSS.

01 09

Gambarkan Layout Anda

J Kyrnin

Anda dapat menggambar tata letak Anda di atas kertas atau dalam program grafis . Jika Anda sudah memiliki desain kerangka atau bahkan lebih luas dalam pikiran, sederhanakan ke kotak dasar yang membentuk situs. Desain yang menyertai artikel ini memiliki tiga kolom di area konten utama, serta header dan footer. Jika Anda melihat lebih dekat, Anda dapat melihat bahwa ketiga kolom tidak memiliki lebar yang sama.

Setelah tata letak Anda ditarik keluar, Anda dapat mulai memikirkan dimensi. Desain contoh ini akan memiliki dimensi dasar berikut:

02 09

Tulis HTML Dasar / CSS dan Buat Elemen Kontainer

Karena halaman ini akan menjadi dokumen HTML yang valid, Mulai dengan wadah HTML kosong

Untitled Document </ title> </ head> <body> </ body> </ html> <p> Tambahkan gaya dasar CSS untuk <a href="https://id.eyewated.com/gunakan-css-untuk-mengabaikan-batas-dan-batas-anda/">meniadakan margin halaman, batas, dan paddings</a> . Meskipun ada <a href="https://id.eyewated.com/dapatkan-untuk-tahu-cascading-style-sheets-dengan-cheat-sheet-css-ini/">gaya CSS standar</a> lain untuk dokumen baru, gaya ini adalah minimum yang Anda butuhkan untuk mendapatkan tata letak yang bersih. Tambahkan mereka ke kepala dokumen Anda: </p> <type style = "text / css"> html, body {margin: 0px; padding: 0px; border: 0px; } </ style> <p> Untuk mulai membangun tata letak, masukkan elemen penampung. Terkadang terjadi bahwa Anda dapat membuang penampungnya nanti, tetapi untuk tata letak dengan lebar tetap, memiliki elemen penampung membuatnya lebih mudah untuk dikelola di seluruh browser Web yang berbeda. Jadi di dalam tubuh tuliskan ini: </p> <div id = "container"> </ div> <p> Dan dalam style sheet CSS, letakkan: </p> #container {} <p> <strong>03 09</strong> </p> <h3> Beri Gaya Kontainer </h3><p> Penampung menentukan seberapa lebar konten laman web, serta margin apa pun di sekitar luar dan padding di bagian dalam. Untuk dokumen ini, wadah berukuran 870px dengan selaput piksel 20 di sebelah kiri. Selokan diatur dengan gaya margin, tetapi padding pada wadah memusatkan perhatian untuk mencegah setiap elemen dari selebar wadah. </p> #container {width: 870px; margin: 0 0 0 20px; / * kiri bawah kanan * / padding: 0; } <p> Jika Anda menyimpan dokumen Anda sekarang, akan sulit untuk melihat wadah karena tidak ada isinya. Jika Anda menambahkan teks placeholder, Anda akan dapat melihat elemen penampung lebih jelas. </p> <p> <strong>04 09</strong> </p> <h3> Gunakan Tag Headline untuk Header </h3><p> Cara Anda memutuskan gaya baris tajuk sangat bergantung pada apa yang ada di dalamnya. Jika baris header hanya akan memiliki grafik logo dan judul, maka menggunakan tag judul (<h1>) lebih masuk akal daripada menggunakan <div>. Anda dapat menata judul dengan cara yang sama seperti Anda memberi gaya pada div, dan Anda menghindari tag yang asing. </p> <p> HTML untuk baris tajuk berada di bagian atas penampung dan terlihat seperti ini: </p> <h1> Baris Header Saya </ h1> <p> Kemudian, untuk mengatur gaya di atasnya, perbatasan merah ditambahkan di bagian bawah sehingga Anda bisa melihat di mana ujungnya, margin dan padding dimaksimalkan, lebar diatur ke 100% dan tinggi ke 150px: </p> #container h1 {margin: 0; padding: 0; lebar: 100%; tinggi: 150px; float: kiri; border-bottom: # c00 solid 3px; } <p> Jangan lupa untuk mengapungkan elemen ini dengan float: left; milik. Kunci untuk menulis tata letak CSS adalah mengapung semuanya - bahkan hal-hal yang lebarnya sama dengan wadah. Dengan begitu, Anda selalu tahu di mana letak elemen-elemen itu di halaman. </p> <p> Gaya <a href="https://id.eyewated.com/apa-itu-pemilih-keturunan-css/">pemilih CSS</a> diterapkan hanya untuk elemen H1 yang ada di dalam elemen #container. </p> <p> <strong>05 09</strong> </p> <h3> Untuk Mendapatkan Tiga Kolom, Mulai dengan Membangun Dua Kolom </h3><p> Saat Anda membuat tata letak tiga kolom dengan CSS, Anda perlu membagi tata letak menjadi dua kelompok. Jadi untuk tata letak tiga kolom ini, kolom tengah dan kanan dan dikelompokkan dan ditempatkan di sebelah kolom kiri dalam tata letak dua kolom di mana kolom kiri adalah lebar 250px, dan kolom kanan adalah lebar 610px (masing-masing 300 untuk dua kolom , ditambah 10px untuk selokan di antara mereka). </p> <p> HTML terlihat seperti ini: </p> <div id = "col1"> <p> Ut aliquip ex ea commodo consequat. Karena itu, Anda tidak perlu khawatir, lorem ipsum dolor duduk amet. Dalam reprehenderit dalam latihan quad rostrud, eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. </ P> </ div> <div id = "col2outer"> <p> Ut enim ad minim veniam, sed do eiusmod tempri incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <p> Teks placeholder di kolom membuatnya lebih terlihat saat pengujian. CSS terlihat seperti ini: </p> #container # col1 {width: 250px; float: kiri; } #container # col2outer {width: 610px; float: benar; margin: 0; padding: 0; } <p> Kolom di sebelah kiri melayang ke kiri, sementara yang lain melayang ke kanan. Karena total lebar kedua kolom adalah 860px, ada selokan 10px di antara keduanya. </p> <p> <strong>06 09</strong> </p> <h3> Tambahkan Dua Kolom Di Dalam Kolom Lebar Kedua </h3><p> Untuk membuat tiga kolom, tambahkan dua div di kolom kedua yang lebih luas, seperti Anda menambahkan 2 div di dalam kolom kontainer pada langkah terakhir. HTML terlihat seperti ini: </p> <div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam, sed lakukan eiusmod tempid incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <div id = "col2side"> <p> Nam libero tempore, quia voluptas duduk aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. </ P> </ div> </ div> <p> Dan CSS terlihat seperti ini: </p> # col2outer # col2mid {width: 300px; float: kiri; } # col2outer # col2side {width: 300px; float: benar; } <p> Karena kedua kotak lebar 300px berada di dalam kotak selebar 610px, akan ada lagi selokan 10px di antara keduanya. </p> <p> <strong>07 09</strong> </p> <h3> Tambahkan di Footer </h3><p> Setelah sisa halaman ditata, Anda dapat menambahkan footer. Gunakan div terakhir dengan id "footer", dan tambahkan konten sehingga Anda dapat melihatnya. Anda juga dapat menambahkan batas di bagian atas, sehingga Anda akan tahu di mana itu dimulai. </p> <p> HTML: </p> <div id = "footer"> <p> Hak Cipta © 2017 </ p> </ div> <p> CSS: </p> #container #footer {float: left; width: 870px; border-top: # c00 solid 3px; } <p> <strong>08 09</strong> </p> <h3> Tambahkan Gaya Pribadi dan Konten Anda </h3><p> Setelah tata letak selesai, Anda dapat mulai menambahkan gaya dan konten pribadi Anda sendiri. Ingat bahwa batas pada header dan footer ditambahkan untuk menunjukkan bagian tata letak, tidak khusus untuk desain. </p> <p> <strong>09 09</strong> </p> <h3> HTML / CSS Akhir </h3><p> Berikut ini seluruh dokumen, HTML, dan CSS: </p> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <title> Untitled Document </ title> <style type = "text / css"> html, body {margin: 0px; padding: 0px; border: 0px; } #container {width: 870px; margin: 0 0 0 20px; / * kiri bawah kanan * / padding: 0; warna latar belakang: #fff; } #container h1 {margin: 0; padding: 0; lebar: 100%; tinggi: 150px; float: kiri; border-bottom: # c00 solid 3px; } #container # col1 {width: 250px; float: kiri; } #container # col2outer {width: 610px; float: benar; margin: 0; padding: 0; } # col2outer # col2mid {width: 300px; float: kiri; } # col2outer # col2side {width: 300px; float: benar; } #container #footer {float: left; width: 870px; border-top: # c00 solid 3px; } </ style> </ head> <body> <div id = "container"> <h1> My Header Row </ h1> <div id = "col1"> <p> Ut aliquip ex ea commodo consequat. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ P> </ div> </ div> <div id = "footer"> <p> Hak Cipta © 2008 </ p> </ div> </ div> </ body> </ html> </div> <div class="amp-related-wrapper"> <h2>Alike posts</h2> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-menggunakan-kolom-css-untuk-tata-letak-situs-multi-kolom/"> <amp-img src="https://exse.eyewated.com/pict/e20233b2c6ba3161-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-menggunakan-kolom-css-untuk-tata-letak-situs-multi-kolom/">Cara Menggunakan Kolom CSS untuk Tata Letak Situs Multi-Kolom</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/gunakan-css-untuk-mengabaikan-batas-dan-batas-anda/"> <amp-img src="https://exse.eyewated.com/pict/dd39682dc1123505-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/gunakan-css-untuk-mengabaikan-batas-dan-batas-anda/">Gunakan CSS untuk Mengabaikan Batas dan Batas Anda</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-menyelaraskan-dan-mengapung-elemen-di-halaman-web/">Cara Menyelaraskan dan Mengapung Elemen di Halaman Web</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/tampilkan-dan-sembunyikan-teks-atau-gambar-dengan-css-dan-javascript/"> <amp-img src="https://exse.eyewated.com/pict/696c800020b23383-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/tampilkan-dan-sembunyikan-teks-atau-gambar-dengan-css-dan-javascript/">Tampilkan dan Sembunyikan Teks atau Gambar Dengan CSS dan JavaScript</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/tinjauan-tentang-warisan-css/"> <amp-img src="https://exse.eyewated.com/pict/357261af990f3b51-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/tinjauan-tentang-warisan-css/">Tinjauan tentang Warisan CSS</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-menggunakan-html-dan-css-untuk-membuat-tab-dan-spasi/"> <amp-img src="https://exse.eyewated.com/pict/e5b045620d0733ff-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-menggunakan-html-dan-css-untuk-membuat-tab-dan-spasi/">Cara Menggunakan HTML dan CSS untuk Membuat Tab dan Spasi</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/gaya-garis-besar-css/"> <amp-img src="https://exse.eyewated.com/pict/b99552b45c483465-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/gaya-garis-besar-css/">Gaya Garis Besar CSS</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/styling-dokumen-xml-dengan-css/"> <amp-img src="https://exse.eyewated.com/pict/2445473108f83557-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/styling-dokumen-xml-dengan-css/">Styling Dokumen XML dengan CSS</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-mengganti-font-pada-halaman-web-menggunakan-css/"> <amp-img src="https://exse.eyewated.com/pict/2290be1f74fa346f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-mengganti-font-pada-halaman-web-menggunakan-css/">Cara Mengganti Font pada Halaman Web Menggunakan CSS</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>See Newest</h2> <div class="amp-related-content"> <a href="https://id.eyewated.com/9-starter-portable-jump-terbaik-yang-akan-dibeli-pada-2018/"> <amp-img src="https://exse.eyewated.com/pict/a994e9c5fed237d2-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/9-starter-portable-jump-terbaik-yang-akan-dibeli-pada-2018/">9 Starter Portable Jump Terbaik yang Akan Dibeli pada 2018</a></h3> <div class="amp-related-meta"> Membeli Pemandu </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/mx-vs-atv-unleashed-cheats-untuk-playstation-2/">"MX vs. ATV Unleashed" Cheats untuk PlayStation 2</a></h3> <div class="amp-related-meta"> Game </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/9-aplikasi-magical-walt-disney-world-untuk-iphone/">9 Aplikasi Magical Walt Disney World untuk iPhone</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/silicon-image-memenuhi-tantangan-8k-dengan-chip-pemroses-av/"> <amp-img src="https://exse.eyewated.com/pict/25c98c29909d38af-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/silicon-image-memenuhi-tantangan-8k-dengan-chip-pemroses-av/">Silicon Image Memenuhi Tantangan 8K Dengan Chip Pemroses AV</a></h3> <div class="amp-related-meta"> Ulasan produk </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/25-perangkat-lunak-perkantoran-dan-teknologi-hacks-untuk-guru-atau-instruktur/"> <amp-img src="https://exse.eyewated.com/pict/14e1b6335c8a35d0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/25-perangkat-lunak-perkantoran-dan-teknologi-hacks-untuk-guru-atau-instruktur/">25 Perangkat Lunak Perkantoran dan Teknologi Hacks untuk Guru atau Instruktur</a></h3> <div class="amp-related-meta"> Perangkat lunak </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/pintasan-keyboard-untuk-mengetik-tanda-tilde/"> <amp-img src="https://exse.eyewated.com/pict/953668bc99e92ef6-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/pintasan-keyboard-untuk-mengetik-tanda-tilde/">Pintasan Keyboard untuk Mengetik Tanda Tilde</a></h3> <div class="amp-related-meta"> Perangkat lunak </div> </div> </div> </div> <div class="amp-related-wrapper"> <h2>Sapid posts</h2> <div class="amp-related-content"> <a href="https://id.eyewated.com/apakah-windows-hardware-quality-labs/"> <amp-img src="https://exse.eyewated.com/pict/dbc230ca08e535bd-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/apakah-windows-hardware-quality-labs/">Apakah Windows Hardware Quality Labs?</a></h3> <div class="amp-related-meta"> Windows </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menggunakan-facebook-emojis-dan-smiley/"> <amp-img src="https://exse.eyewated.com/pict/d54f2ebf4c1637aa-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menggunakan-facebook-emojis-dan-smiley/">Menggunakan Facebook Emojis dan Smiley</a></h3> <div class="amp-related-meta"> Media sosial </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/bagaimana-mengurutkan-data-dalam-file-menggunakan-linux/"> <amp-img src="https://exse.eyewated.com/pict/e9b0d7afdc3e2f2b-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/bagaimana-mengurutkan-data-dalam-file-menggunakan-linux/">Bagaimana Mengurutkan Data Dalam File Menggunakan Linux</a></h3> <div class="amp-related-meta"> Linux </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/8-senter-edc-terbaik-everyday-carry-yang-dibeli-pada-2018/">8 Senter EDC Terbaik (Everyday Carry) yang Dibeli pada 2018</a></h3> <div class="amp-related-meta"> Membeli Pemandu </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/fluance-xlbp-bipole-surround-sound-loudspeaker-ulasan/"> <amp-img src="https://exse.eyewated.com/pict/df0c953ab3f637a9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/fluance-xlbp-bipole-surround-sound-loudspeaker-ulasan/">Fluance XLBP Bipole Surround Sound Loudspeaker - Ulasan</a></h3> <div class="amp-related-meta"> Ulasan produk </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/layanan-cadangan-online-apa-yang-anda-gunakan-tim/"> <amp-img src="https://exse.eyewated.com/pict/fc27984bd0c234f8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/layanan-cadangan-online-apa-yang-anda-gunakan-tim/">Layanan Cadangan Online Apa yang Anda Gunakan, Tim?</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/monitor-sistem-toms-mac-software-pick/"> <amp-img src="https://exse.eyewated.com/pict/d1bdd449daf535ff-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/monitor-sistem-toms-mac-software-pick/">Monitor Sistem: Tom's Mac Software Pick</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/apa-itu-sexting-apakah-sexting-masalah-besar-hari-ini/"> <amp-img src="https://exse.eyewated.com/pict/54de0173317a3960-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/apa-itu-sexting-apakah-sexting-masalah-besar-hari-ini/">Apa itu 'Sexting'? Apakah Sexting Masalah Besar Hari Ini?</a></h3> <div class="amp-related-meta"> Media sosial </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-memunculkan-ide-akun-twitter-parodi/"> <amp-img src="https://exse.eyewated.com/pict/00ac8d7210233377-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-memunculkan-ide-akun-twitter-parodi/">Cara Memunculkan Ide Akun Twitter Parodi</a></h3> <div class="amp-related-meta"> Media sosial </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/panduan-cepat-untuk-protokol-manajemen-jaringan-sederhana-snmp/">Panduan Cepat untuk Protokol Manajemen Jaringan Sederhana (SNMP)</a></h3> <div class="amp-related-meta"> Jaringan internet </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/cara-terbaik-menyimpan-aliran-audio-dari-internet/"> <amp-img src="https://exse.eyewated.com/pict/7a00c0604dbe340e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-terbaik-menyimpan-aliran-audio-dari-internet/">Cara Terbaik Menyimpan Aliran Audio Dari Internet</a></h3> <div class="amp-related-meta"> Pencarian web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/membuka-gambar/"> <amp-img src="https://exse.eyewated.com/pict/689d36f1d3b73474-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/membuka-gambar/">Membuka Gambar</a></h3> <div class="amp-related-meta"> Perangkat lunak </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/menyalin-file-lagu-itunes-ke-penyimpanan-lokal/"> <amp-img src="https://exse.eyewated.com/pict/bb8949a9fbf53885-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/menyalin-file-lagu-itunes-ke-penyimpanan-lokal/">Menyalin File Lagu iTunes ke Penyimpanan Lokal</a></h3> <div class="amp-related-meta"> Perangkat Lunak & Aplikasi </div> </div> </div> <div class="amp-related-content"> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/cara-menyembunyikan-tautan-menggunakan-css/">Cara Menyembunyikan Tautan Menggunakan CSS</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/pengembangan-aplikasi-seluler-dan-promosi-aplikasi-praktik-terbaik/"> <amp-img src="https://exse.eyewated.com/pict/124c12baa9f432d3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/pengembangan-aplikasi-seluler-dan-promosi-aplikasi-praktik-terbaik/">Pengembangan Aplikasi Seluler dan Promosi Aplikasi: Praktik Terbaik</a></h3> <div class="amp-related-meta"> Pencarian web </div> </div> </div> <div class="amp-related-content"> <a href="https://id.eyewated.com/6-alasan-mengapa-gambar-tidak-diunggah-di-situs-web-anda/"> <amp-img src="https://exse.eyewated.com/pict/f6d5ac837ef43eb9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img> </a> <div class="amp-related-text"> <h3><a href="https://id.eyewated.com/6-alasan-mengapa-gambar-tidak-diunggah-di-situs-web-anda/">6 Alasan Mengapa Gambar Tidak Diunggah di Situs Web Anda</a></h3> <div class="amp-related-meta"> Desain & Dev Web </div> </div> </div> </div></article> <footer class="amp-wp-footer"> <div class="amp-wp-footer-inner"> <a href="#" class="back-to-top">Back to top</a> <p class="copyright"> © 2024 id.eyewated.com </p> <div class="amp-wp-social-footer"> <a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a> </div> </div> </footer> <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/"> </amp-pixel> </div> </body> </html> <!-- Dynamic page generated in 1.249 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2019-10-03 22:34:22 --> <!-- 0.002 -->