Tutorial cara membuat desain web responsive

Tutorial cara membuat desain web responsive — Pada tulisan kali ini saya akan menjelaskan secara singkat bagaimana cara membuat layout website yang responsive yaitu layout yang bisa menyesuaikan tampilannya meskipun dibuka di berbagai ukuran layar (ponsel, tablet maupun pc).

Artikel ini adalah lanjutan dari pembahasan responsive web, sebelumnya kita sudah berkenalan dengan responsive web, lalu setelah itu kita membahas secara lengkap apa manfaat dan kegunaan responsive web untuk bisnis anda, selanjut pada artikel ini kita belajar bagaimana cara membuat desain web responsive itu sendiri.

Tujuan Artikel Ini

Pada tulisan ini kita akan mencoba membuat layout web responsive, dimulai dengan layout 3 kolom, lalu ketika dibuka di ukuran tertentu (1080px) maka akan menjadi 2 kolom, dan selanjutnya pada layar 780px kebawah akan menjadi 1 kolom.

Pertama Buat Script HTML

Pertama kita akan mulai dengan membuat struktur HTML nya, terdiri dari 3class 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, ditambahkanbackground: #fff000; untuk merubah background menjadi warna kuning.

Baca Juga: Cara Melakukan Test Responsive Web Design

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 dibuatwidth: 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.

Untuk elemen-elemen berikutnya seperti menu responsive, video responsive, dan lainnya mungkin akan kita bahas di artikel-artikel berikutnya.

Jika anda tertarik untuk mencoba dan membuat sendiri anda bisa melihat script lengkapnya berikut ini.

DEMO | DOWNLOAD SCRIPT

Sekain tutorial kali ini, semoga membantu anda memahami cara pembuatan layout responsive agar website anda bisa dibuka di berbagai ukuran layar.

Salam Web Design Indonesia

Deface dengan Teknik Remote File Upload Exploit Vulnerability

Deface dengan Teknik Remote File Upload Exploit Vulnerability Deface dengan Teknik Remote File Upload Exploit Vulnerability |  - Ngga ada habis-habisnya kalo ngebahas soal hacking, Setiap hari berbagai macam exploit ditemukan. Dan sekarang saya akan share cara deface website lagi sob. Tutorial ini saya dapat dari grup facebook Hacker Indonesia. Namun karena masih banyak yang bingung, disini saya akan jelaskan beserta gambarnya.

We Are Anonymous !

Ok, daripada lama-lama cerita, mending kita langsung aja ketutorialnya sob, Berikut Tutorial Deface dengan Teknik Remote File Upload Exploit Vulnerability :

Dork :

inurl:/editor/editor/filemanager/
inurl:/HTMLEditor/editor/"

1). Masukan salah satu dork diatas ke Seacrh Enginee Google.

2). Pilih salah satu website sebagai target.

3). Tampilan Webitenya nanti akan seperti ini.

4). Kemudian kode ini :

editor/editor/filemanager/browser/mcpuk/images/icons/32/

5). Ganti dengan kode ini, Lalu enter :

editor/editor/filemanager/upload/test.html

6). Jika sudah, kamu ubah pada Select the "File Uploader" to use: Ubah dari ASP menjadi PHP.

7). Kemudian kamu klik Choose File, kamu pilih salah satu file HTML deface'an kamu.

8). Lalu klik Send it to the Server.

9). Jika berhasil nanti akan muncul notice jika file yang kamu upload berhasil tanpa eror, dan pada kotak ( Upload File URL ) akan memberikan patch dimana file kamu berada.

10). Copykan saja file yang ada di ( Upload File URL ) lalu taruh dibelakang site target, jadi nanti akan terlihat seperti ini :

http://www.tysk.ee/failid/Image/idulfitri(1).html
http://www.tysk.ee/failid/Image/3xpl0iter.html

Cara sama dengan dengan tutorial yang pernah saya share dulu yaitu Cara Deface Website Melalui Spaw Uploads Vulnerability, hanya saja sedikit berbeda tampilan ketika kita akan mengupload file HMTL.

Sekian postingan saya kali ini tentang Deface dengan Teknik Remote File Upload Exploit Vulnerability, semoga dapat bermanfaat untuk kalian semua.

Credits : Hacker Indonesia

Animasi Unik loading untuk Blog Bola Bergaya Kontras

Animasi Unik loading untuk Blog Bola

Bergaya Kontras


Animasi loading page balutan CSS3 berbentuk lingkaran yang beberapa bagiannya bewarna merah dan kuning. Gaya animasi page blog ini bergerak cepat mengarah seperti jarum jam dan kemudian berbalik arah putaran. Cara penerapannya, sobat langsung ke Template, mengklik Edit HTML:

Cara Membuat Loading Page Animasi Bola Kontras (Foto: screenshoot)

1. Copy script Jquery berikut, jika telah ada sebelumnya lewati langkah ini.
    Paste Jquery di atas kode </head>,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

2. Letakan kode CSS berikut di atas kode ]]></b:skin>,

     /* X-Gen Loader */
    #xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

    #load2 body {
        background-image: url(../images/hexabump.png);
        background-color: #222;
    }
    #load2 body:after {
        content: "";
        z-index: -1;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    }
    #load2 .spinner {
        position: relative;
        font-size: 100px;
        width: 1em;
        height: 1em;
        margin: 100px auto;
        border-radius: 50%;
        background: #123456;
        box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
        background:
            -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
            -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
        background:
            -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background-size: 50% 100%, 50% 100%;
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
        opacity: 0.7;
        -webkit-animation: mask 3s infinite alternate;
        -moz-animation: mask 3s infinite alternate;
        -ms-animation: mask 3s infinite alternate;
        -o-animation: mask 3s infinite alternate;
        animation: mask 3s infinite alternate;
    }

    @-webkit-keyframes mask {
        25%  { -webkit-transform: rotate(270deg); }
        50%  { -webkit-transform: rotate( 90deg); }
        75%  { -webkit-transform: rotate(360deg); }
        100% { -webkit-transform: rotate(180deg); }
    }
    @-moz-keyframes mask {
        25%  { -moz-transform: rotate(270deg); }
        50%  { -moz-transform: rotate( 90deg); }
        75%  { -moz-transform: rotate(360deg); }
        100% { -moz-transform: rotate(180deg); }
    }
    @-ms-keyframes mask {
        25%  { -ms-transform: rotate(270deg); }
        50%  { -ms-transform: rotate( 90deg); }
        75%  { -ms-transform: rotate(360deg); }
        100% { -ms-transform: rotate(180deg); }
    }
    @-o-keyframes mask {
        25%  { -o-transform: rotate(270deg); }
        50%  { -o-transform: rotate( 90deg); }
        75%  { -o-transform: rotate(360deg); }
        100% { -o-transform: rotate(180deg); }
    }
    @keyframes mask {
        25%  { transform: rotate(270deg); }
        50%  { transform: rotate( 90deg); }
        75%  { transform: rotate(360deg); }
        100% { transform: rotate(180deg); }
    }

3. Posisikan JavaScript berikut di bawah kode <body>,

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="load2"><div class="spinner">
    <i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->

4. Selesai, tekan tombol Simpan Template. Jika langkah dirasa sudah benar, review hasilnya.
    Selamat mencoba, happy blogging

Cara Pasang Animasi Loading pada Blog Kota-kotak Cantik

Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik

Animasi loading page kali ini berbentuk kotak-kotak berputar sistematis ke sisi kiri. Animasinya cantik dan menarik, sobat dapat menerapkannya dengan melakukan setelan Edit HTML.

Cara Pasang Animasi Loading Page Blog Kotak-kotak Cantik (Foto: screenshoot)

1. Masukan terlebih dahulu kode script Jquery di bawah ini,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

    ______Jika sebelumnya telah memiliki script Jquery pada template, lewat langkah ini.
2. Copy CSS ini ke atas kode ]]></b:skin> ,

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}

3. Letakan JavaScript berikut tepat di bawah kode <body>,

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>
<!-- End Loader -->

4. Konfigurasi selesai, klik Simpan Template.