DnD2810

Cara memasang Widget pada blog

1. Login ke Blogger dahulu
2. Pilih Tata Letak atau Layout
3. Pilih posisi yang akan ditempatkan oleh widget, misalnya anda ingin menampilkannya di sidebar maka pilih gadget yang berada di samping layar. Kalau mau pasang di tengah pilih gadget yang berada di tengah.

4. Setelah itu klik "Tambahkan Gadget", maka akan terbuka , setelah itu silahkan pilih widget yang ingin dipasangkan di blog Anda. Saya ambil contoh gadget pengikut google+ baru yang akan saya pasangkan ke blog.

5. Klik tanda ' + ' , dan akan masuk menu tampilan sementara yang dapat disetting sesuai dengan warna blog.

Kemudian "Simpan" .

Cara membuat web responsive (RWD)

DnD2810 12 Juni

Cara membuat web responsive (RWD)

Mengapa harus membuat Web Responsive ?

Perlu di ketahui pengguna internet sekarang ini lebih banyak menggunakan ponsel , sehingga jika ingin web kita dapat diakses dimanapun dan kapanpun tidak lain hanya dengan menggunakan web yang responsive . Artinya ketika laman web di akses melalui layar 1080px maka akan tampak 2 kolom atau 3 kolom . Namun jika di akses menggunakan layar dengan lebar dibawah 760px , akan menjadi satu kolom .

Cara Membuat Web Responsive Pertama Buat Script HTML

Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3 class utama, dan karena kita akan membuat 3 kolom maka pada class .main akan kita bagi menjadi 3 class yaitu .left, .middle dan .right, setiap class nanti diberi ukuran tertentu dan diberi properti float agar membentuk kolom.
1. class header
2. class main ( terdiri dari class “.left”, “.middle” dan “.right”
3. class footer


<div class="container">
 <div class="header">Untuk bagian header...</div>
 <div class="main">
  <div class="left">Untuk kolom bagian Kiri...</div>
  <div class="middle">Untuk kolom bagian tengah...</div>
  <div class="right">Untuk kolom bagian kanan...</div>
 </div>
 <div class="footer">Untuk bagian footer...</div>
</div>

Untuk bagian head dari HTML jangan lupa di beri tag meta viewport, tag nya seperti ini:



<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sisipkan meta viewport didalam tag< head>

Mengatur Layout Dengan CSS

Struktur HTML telah selesai kita buat, namun layout nya belum terbentuk. Maka selanjutnya kita beri tambahan kode CSS agar membentuk layout yang terdiri dari 3 kolom, potongan kode css nya seperti berikut ini.


.container{
 max-width: 1080px;
 margin: 20px auto;
 background: #fff;
 overflow: hidden;
 padding: 10px;
}

.header{
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

/* Main */
 .left{
  width: 250px;
  border: 1px solid #dedede;
  background: #e5e5e5;
  padding: 10px;
  margin: 10px;
  float: left;
 }

 .middle{
  width: 500px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }
  .middle img{
   max-width: 100%;
   height: auto;
  }

 .right{
  width: 250px;
  border: 1px solid #dedede;
  padding: 10px;
  margin: 10px;
  float: left;
 }

.footer{
 clear: both;
 border: 1px solid #dedede;
 padding: 10px;
 margin: 10px;
}

Mengatur Gambar Agar Menyesuaikan Layout

Gambar biasanya menjadi masalah jika ukuran nya lebih lebar dibanding layout, oleh karena itu kita harus tentukan script untuk gambar ini, kita buat gambar berukuran 100%, dengan begini maka gambar tidak akan pernah lebih lebar dibanding ukuran layout penampungnya.


.middle img{
 max-width: 100%;
 height: auto;
}

Menjadi 2 Kolom Ketika di Tablet.

Layout akan kita buat berubah ketika ukuran layar 1080px, untuk ukuran 1080px ini sebenarnya bisa anda sesuaikan dengan kebutuhan, bisa saja 960px, atau 1000px, tergantung keinginan anda saja. Tapi sebenarnya kalau bisa sesuai dengan ukuran perangkat-perangkat yang banyak dipakai seperti iPad, Amazon kindle atau Galaxy Tab. Kode untuk merubah layout menjadi 2 kolom adalah seperti dibawah ini, kita bisa lihat bahwa untuk merubahnya kita menggunakan bantuan media query @media screen and (max-width: 1080px) yang artinya ketika ukuran layout maksimal 1080 maka tentukan CSS nya, CSS ini inherit dari kode CSS sebelumnya.


@media screen and (max-width: 1080px) {
 
 .container {
  width: 100%;
 }
 .left {
  width: 25%;
  background: #fff000;
 }
 .middle {
  width: 68%;
  float: right;
 }
 
 .right {
  clear: both;
  padding: 1% 4%;
  width: auto;
  float: none;
 }
}

Kode CSS diatas bukan hanya untuk mengatur jumlah kolom, namun juga bisa melakukan perubahan-perubahan lain seperti merubah kolom kiri menjadi berwarna kuning, atau bisa juga merubah ukuran font, bahkan warna font, seperti yang kita lihat di class .left, ditambahkan background: #fff000; untuk merubah background menjadi warna kuning.

Menjadi Satu Kolom Ketika di Ponsel

Layout untuk tablet tidak bisa kita pakai untuk mengakomodir ponsel, oleh karena itu ketika ukuran layar lebih kecil kita tentukan lagi css berikutnya, masih tetap dengan media query, kami merubahnya menjadi satu kolom pada ukuran 780px kebawah. Script nya adalah sebagai berikut.


@media screen and (max-width: 780px) {
 
 .header, 
 .footer{
  text-align: center;
 }
 .left {
  width: auto;
  float: none;
 }
 
 .middle {
  width: auto;
  float: none;
 }
 
 .right {
  width: auto;
  float: none;
 }

}

Pada kode css diatas tidak ditentukan lagi lebar kolom, semua div dibuat width: auto yang artinya dibuat memenuhi lebar layar, akhirnya terbentuk lah layout yang hanya satu kolom. Begitulah cara sederhana membuat layout responsive, kami hanya menjelaskan prinsip dasar nya agar mudah dimengerti, jadi layoutnya dibuat sangat sederhana. Untuk project yang serius anda bisa mengembangkan lagi dengan elemen-elemen yang lain.

JavaScript

DnD2810 12 Juni

JAVASCRIPT

JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis.

JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

CSS (Cascading Style Sheet )

DnD2810 12 Juni

CSS

CSS (Cascading Style Sheet )

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar,warna bagian tubuh pada teks, warna table, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

HTML

DnD2810 12 Juni

HTML

HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.

HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Contoh dokumen HTML sederhana

<!DOCTYPE html>

<html>
 <head> 
<title>Page Title</title>
</head>
 <body> 

<p>My first paragraph.</p>

<h1>My First Heading</h1>

 </body> 
</html>

Penjelasan:

Elemen <DOCTYPE html> mendefinisikan dokumen ini menjadi HTML5
Elemen <html> elemen elemen akar halaman
Elemen <head> berisi informasi meta tentang dokumen
Elemen <title> menentukan judul untuk dokumen
Elemen <body> berisi konten halaman yang terlihat
Elemen <h1> mendefinisikan judul besar
Elemen <p> mendefinisikan sebuah paragraf

Langganan: Postingan ( Atom )

DnD2810

MENU

Cara memasang Widget pada blog

Cara membuat web responsive (RWD)

JavaScript

CSS (Cascading Style Sheet )

HTML

Terbaru

Popular Posts

KATEGORI

HTML

CSS

JAVASCRIPT

BLOGING

TENTANG SAYA

TERHUBUNG