Jumat, 27 Desember 2013

cara memasukan image dengan css

buat fail index.html buat fail style.css buat satu polder untuk menyimpan fail gambar

 ferintah untuk cssnya
=========================================================
img.format1 { width:60px; height:60px; float:left;border:1px solid blue;border-radius:10px;}
img.format2 { width:100px; height:100px; float:right;border:3px solid red;}
img.format3 { width:120px; height:120px;;border:1px solid blue;border-radius:10px;box-shadow:5px;}
==========================================================
perintah di cssnya

perintah di htmlnya

dibawah ini scrif fullnya
index.html
=====================================
<!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>memasukan image dengan css </title>
<link rel='stylesheet' type='text/css' href='style.css'/>

   </head>
 
   <body>
     <div id="halaman">
   <div id="header">
  <br> image dengan format css <br/>
<img src="image/barlianno.jpg" class="format1" alt="gb barlianno" title="text" />
<img src="image/barlianno.jpg" class="format2" alt="gb barlianno" title="text" />
<img src="image/kunkunmarkun.jpg" class="format1" alt="gb kunkun" title="text" />
<img src="image/kunkunmarkun.jpg" class="format2" alt="gb kunkun" title="text" />
<img src="image/barlin_nadin.jpg" class="format3" alt="gb kunkun" title="text" />
   </div>
   <div id="kiri"class="semua_kotak1">
  isi  KIRI
  <br> height:400px;
 padding:10px;
 background-color:#CCCCCC;
 float:left;
 width:250px;
 margin-top:10px;
border-radius : 10px;
 pakai class "class="semua_kotak1"
   </div>
   <div id="kanan">
   isi KANAN
   <img src="image/kunkunmarkun.jpg" class="format3" alt="gb kunkun" title="text" />
   <br>
   height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 tanpa class
 <br>
 <img src="image/barlin_nadin.jpg" class="format2" alt="gb kunkun" title="text" />
   </div>
   <div id="tengah"class="semua_kotak2">
   isi TENGAH
   <br>
   height:400px;
 padding:10px;
 background-color:#CCCCCC;
 margin:10px 290px 0 290px;
 pakai class "class="semua_kotak2"
 contoh gambar dengan format css
 <br>
 <img src="image/barlianno.jpg" class="format1" alt="gb kunkun" title="text" />
 <img src="image/kunkunmarkun.jpg" class="format1" alt="gb kunkun" title="text" />
 <img src="image/barlin_nadin.jpg" class="format1" alt="gb kunkun" title="text" />
 <img src="image/gundul.jpg" class="format1" alt="gb kunkun" title="text" />
   </div>
   <div id="footer">
 
   FOOTER
   </div>

  
   </div>
   </body>
   </html>
=======================================
fail style.css
=======================================
@charset "utp-8";
/**/
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
.semua_kotak2 {font-family:tahoma, verdana; font-size:18px; color:blue;}/*ini adalah class*/
img.format1 { width:60px; height:60px; float:left;border:1px solid blue;border-radius:10px;}
img.format2 { width:100px; height:100px; float:right;border:3px solid red;}
img.format3 { width:120px; height:120px;;border:1px solid blue;border-radius:10px;box-shadow:5px;}
#halaman{
 width:980px;
 margin:0 auto;
  background-color:#03438D;/*warna biru*/
 }   
#header {
 height: 250px;
 padding:10px;
 background-color:#CCCCCC;
 }  
#kiri{
 height:400px;
 padding:10px;background-color:#CCCCCC;
 float:left;
 width:250px;
 margin-top:10px;
border-radius : 10px;
 }  
#kanan {
 height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 }  
#tengah {
 height:400px;
 padding:10px;background-color:#CCCCCC;
 margin:10px 290px 0 290px;
 }  
#footer { clear:both; height:40px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
================================================
hasil broser
telah di uji coba di lab barlianno

semoga bermangfaat
kunjugi juga ke
www.barliannet.com
Diposting oleh di Tidak ada komentar:

perbedaan div dan class barlianno.

perbedaan div dan class barlianno.

perbedaan antara lain:
dalam penulisan css div diawali dengan(#) sedankan class di awali dengan titik (.)

contoh penulisan div dan class.
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
#halaman{ width:980px; margin:0 auto;  background-color:#03438D; /*ini adalah div*/

setiap class bisa di masukan pada div sesuai dengan keinginan kita.untuk lebih jelas kita coba langgsung praktek.
buat 2 fail di satu polder yang di beri nama index.html dan style.css

style.css
===========================================
@charset "utp-8";
/**/
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
.semua_kotak2 {font-family:tahoma, verdana; font-size:18px; color:blue;}/*ini adalah class*/

#halaman{
 width:980px;
 margin:0 auto;
  background-color:#03438D;/*warna biru*/
 }   
#header {
 height: 80px;
 padding:10px;
 background-color:#CCCCCC;
 }  
#kiri{
 height:400px;
 padding:10px;background-color:#CCCCCC;
 float:left;
 width:250px;
 margin-top:10px;
border-radius : 10px;
 }  
#kanan {
 height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 }  
#tengah {
 height:400px;
 padding:10px;background-color:#CCCCCC;
 margin:10px 290px 0 290px;
 }  
#footer { clear:both; height:40px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
=======================================
index.html
=======================================
<!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>Layout 3 kolom dengan css barlianno </title>
<link rel='stylesheet' type='text/css' href='style.css'/>

   </head>
 
   <body>
     <div id="halaman">
   <div id="header">
   HEADER
   </div>
   <div id="kiri"class="semua_kotak1">
  isi  KIRI
  <br> height:400px;
 padding:10px;
 background-color:#CCCCCC;
 float:left;
 width:250px;
 margin-top:10px;
border-radius : 10px;
 pakai class "class="semua_kotak1"
   </div>
   <div id="kanan">
   isi KANAN
   <br>
   height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 tanpa class
   </div>
   <div id="tengah"class="semua_kotak2">
   isi TENGAH
   <br>
   height:400px;
 padding:10px;
 background-color:#CCCCCC;
 margin:10px 290px 0 290px;
 pakai class "class="semua_kotak2"
   </div>
  
   <div id="footer">
 
   FOOTER
   </div>

  
   </div>
   </body>
   </html>
==========================================
hasil
==========================================
keterangan gambar:
pada isi kiri muncul warna tek merah karna menggunakan  class semua_kotak1
pada isi tengah muncul warana biru karna menngunakan class semua_kotak2
pada isi kanan muncul warna tek yang belum di seting pakai class.




cara memasukan di html

semoga bermangfaat
telah di uji coba di lab barlianno.
Diposting oleh di Tidak ada komentar:

Rabu, 18 Desember 2013

membuat menu horisontal dan menu vertikal bagian 2
index.html
======================================
<html>
    <head>
        <title>webset tempel barlianno </title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>

<div id ="halaman">
    <div id="kepala">
        <div id="logo">
        untuk logo
        </div>
        <div id="barner">
        untuk barner
        </div>
    kepala barlianno
   
    </div>

    <div id ="latihan">

    <ul id="menu">
 <li><a href="#">Menu 1  </a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
    </div>
    <div id ="isi">
        <div id ="kiri">
        isi kiri
            <div id ="menuvertikal">
            <ul id="menuv">
 <li><a href="#">Menu 1  </a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
konten lain

           
            </div>
           
       
        </div>
       
       
        <div id ="kanan">
        isi kanan
        </div>
ISI    barliannet.com
<p>lkjlkjlkjlkjjh
lkjljlijth
kjljlkj
jljlj</p>


    </div>
    <div id ="bawah">
     isi bawah
    </div>



BARLIANNO halaman

</div>
    </body>
</html>
=================================
style.css
=================================
@charset "utp-8";


body{
    background-color:GREY;
    COLOR:red;/*warna tek semua warna tek akan merah*/
    margin-top:0px;/*agar halaman menepi ke atas tanpa batas*/
    margin-botton:0px;/*agar halaman menepi ke bawah tanpa bawah*/
    }
#halaman{
    width:960px;
    height:auto;/*agar halaman disesuaikan dengan tex yang di tulis*/
    background-color:blue;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:0px;/*agar halaman menepi ke bawah tanpa batas*/

}
#halaman #kepala{ /*agar terbaca di index.html harus ada div kepala */
    width:950px;/*kepala berada di dalam halaman jadi 950px*/
    height:140px;
    background-color:green;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}
#halaman #kepala #logo{ /*agar terbaca di index.html harus ada div kepala */
    float:left;/*agar logo berada di sisi kiri*/
    width:100px;/*logo berada di dalam kepala */
    height:100px;
    background-color:66CCFF;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}
#halaman #kepala #barner{ /*agar terbaca di index.html harus ada div kepala */
    float:right;/*agar barner berada di sisi kanan*/
    width:850px;/*950-100 berada di dalam kepala */
    height:100px;/*supaya sejajar dengan logo*/
    background-color:66CC00;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}

    #menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}

#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:150px;/*lebar kotak untuk menu */
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#0106E5;/*warna tek menu biru*/
 background:#DDFE00;/*warna beckgroud tiap kotak menu kuning */
 padding:5px;/*lebar kotak ke bawah*/
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#33FF66; /*kalow di dekatkan mose warna akan berubah jadi hijau muda */
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}


#halaman #isi{ /*agar terbaca di index.html harus ada div halaman */
    width:950px;/*isi berada di dalam halaman jadi 950px*/
    height:700px;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}
#halaman #isi #kiri{ /*agar terbaca di index.html harus ada div isi */
    float:left;/*agar barner berada di sisi kiri*/
    width:200px;/*isi berada di dalam halaman jadi 950px*/
    height:700px;
    background-color:660066;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}
#halaman #isi #kiri #menu, ul#menuv ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 width: 200px;
 opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}

#halaman #isi #kiri #menuv li, ul#menuv ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:150px;/*lebar kotak untuk menu */
}

#halaman #isi #kiri ul#menuv li a, ul#menuv li ul.sub-menu li a {
 text-decoration:none;
 color:#0106E5;/*warna tek menu biru*/
 background:#DDFE00;/*warna beckgroud tiap kotak menu kuning */
 padding:5px;/*lebar kotak ke bawah*/
 display:block
}

#halaman #isi #kiri ul#menuv li a:hover, ul#menuv li ul.sub-menu li a:hover {
 background:#CC0000; /*kalow di dekatkan mose warna akan berubah jadi merah */
}

#halaman #isi #kiri ul#menuv li {
 position:relative
}

#halaman #isi #kiri ul#menuv li ul.sub-menu {
 position:center;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

#halaman #isi #kiri ul#menuv li:hover ul.sub-menu {
 display:block
}

   
#halaman #isi #kanan{ /*agar terbaca di index.html harus ada div isi */
    float:right;/*agar barner berada di sisi kanan*/
    width:200px;/*isi berada di dalam halaman jadi 950px*/
    height:700px;
    background-color:00FF33;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}
#halaman #bawah{ /*agar terbaca di index.html harus ada div halaman */
    width:950px;/*isi berada di dalam halaman jadi 950px*/
    height:30px;
    background-color:black;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
    margin-bottom:auto;

}
===============================
lihat hasil
===============================
untuk membuat menu vertikal saya mencopy dari menu css menu hori jontal dan sedikit mengedit supaya bisa jadi menu vertikal yaitu.menu di ganti degan nama menuv agar tidak bentrok degan menu horisontal.

============================
    #menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}
=============================
dirubah menjadi
============================
#halaman #isi #kiri #menu, ul#menuv ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 width: 200px;
 opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}
========================================
merubah ini supaya menu horosontal berubah menja horisontal
=========================================
 ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}
=========================================
dirubah menjadi
=========================================
#halaman #isi #kiri ul#menuv li ul.sub-menu {
 position:center;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}
========================================
ini berpungsi supaya tek sub menu tidak bertabrakan.

semogabermangpaat.

telah di tes di lab barlianno.


Diposting oleh di Tidak ada komentar:

Senin, 16 Desember 2013

memasukan scrip html ke dalam postingan

program untuk memasukan kode / scrip html ke dalam postingan

bingung memasukan scrip html ke dalam postingan blog. saya coba di copy terus di paste di postingan setelah di publikasikan ehh ternya scripnya berubah tidak karuhan. jagan bingun coba pakai program ini. caraya paste scrip yang mau di postingkan pada kotak di bawah ini, setelah itu klik tombol parse scrip.lalu copy di tempat postingan.maka scrip akan sesuai dengan yang di inginkan.




kalow anda ingin membuat seperti di atas ini scripnya
=======================================================
<script type="text/javascript">function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}</script><br /> <table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody> <tr> <td valign="top" width="400"><textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input onclick="convert();" type="button" value="Parse Script" /> <a href="http://mas-andes.blogspot.com/2012/11/memasukan-html-di-postingan.html" target="_blank" title="Get This Widget"><button>Get This Widget</button></a></td> </tr> </tbody></table>
============================================================
Cara Pemasangan:

Anda dapat memasangnya di dalam postingan dengan menaruh kode tersebut didalam kolom posting mode HTML (bukan di Compose). Atau bisa juga memasangnya sebagai widget dengan menaruh di sidebar, caranya klik Tata Letak » Tambah Widget » HTML/Javascript (paste kode tersebut, kemudian klik Save).
 
sumber// http://mas-andes.blogspot.com/2012/11/memasukan-html-di-postingan.html
Diposting oleh di Tidak ada komentar:

membuat menu horisontal dan vertikal dengan css

membuat menu vertikal sederhana dengan mengunakan css
buat fail index.html dan style.css dalam satu polder

index.html

==================================
<!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>bikinmenubarlianno</title>
<link rel="stylesheet"  type="text/css" href="barlianno.css"/>
</head>

<body>
<ul id="menu">
 <li><a href="#">Menu 1  </a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
</body>
</html>
===================================================
fail barlianno.css
===================================================
@charset "utf-8";
/* CSS Document */

#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:50;
 text-align:center;
 width:200px; /*agar menjadi menu horijontal wide di hilangkan*/
 opacity:.9
}

#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#8557FB;/*warna tek*/
 background:#666;
 padding:6px;
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#33FF66; /*kalow di dekatkan mose warna akan berubah jadi hijau muda */
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position:right;/*kalow untuk menu horisontal pakai absolute*/
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}
==============================================================
lihat di boser
semoga bermangpaat.

cara membuat menu horisontal

bikin fail dengan nama index.html dan style.css

index.html
==============================================================
<!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>bikinmenubarlianno herisontal</title>
<link rel="stylesheet"  type="text/css" href="style.css"/>
</head>

<body>
<ul id="menu">
 <li><a href="#">Menu 1  </a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
</body>
</html>
========================================================
fail style.css
========================================================
 @charset "utf-8";
/* CSS Document */

#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}

#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#8557FB;/*warna tek*/
 background:#666;
 padding:5px;
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#33FF66; /*kalow di dekatkan mose warna akan berubah jadi hijau muda */
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}
=================================================================
lihat di broser

kolow kita perhatikan dalam pembuatan menu horisontal dan pertikal sama, kita haya mengedit sedikit fail css pada css horisontal yaitu

kita haya merubah
=================================
#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}
=================================
agar jadi menu vertikal ditambah dengan width 200px dirubah menjadi:
=================================
#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:50;
 text-align:center;
 width:200px; /*agar menjadi menu horijontal wide di hilangkan*/
 opacity:.9
}
=================================
 posisi:absolut dirubah menjadi posisi: right maka droup menu menjadi tidak bertabrakan.pada menu pertikal.
=================================
ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}
===============================
dirubah menjadi
===============================

ul#menu li ul.sub-menu {
 position:right;/*kalow untuk menu horisontal pakai absolute*/
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}
=============================
selamat mencoba dan semoga bermanfaat.


telah di uji coba di lab barlianno
Diposting oleh di Tidak ada komentar:

Jumat, 06 Desember 2013

toturial css barliannet untuk pemula.




toturial css barliannet untuk pemula.

pada kesempatan ini saya akan mencoba membuat layout sederhana menggunakan css.
buat dua buah fail. satu diberi nama
.index.html.
.style.css
.software editor notepad 2
.software  xamp untuk melihat hasil di broser


gb hasil pembuatan fail

 fail style.css edit dengan notepad 2 sehingga hasilnya seperti di bawah ini.
===================================================
@charset "utp-8";


body{
    background-color:GREY;
    COLOR:RED;
   
    }
#halaman{
    width:960px;
    height:200px;
    background-color:blue;
}

=================================================





gb hasil editan di nopad 2

isi fail.style.css

gb pail css yang di edit di notepad 2

setelah membuat dua pail tersebut sekarang coba lihat di mozila maka kasil ya akan seperti di bawah ini



gb di mozila  hasil pembuatan 2 pail tersebut.

membuat kepala pada web

edit style.css seperti di bawah ini
==================================


@charset "utp-8";


body{
                background-color:GREY;
                COLOR:RED;
                margin-top:0px;/*agar halaman menepi ke atas tanpa batas*/
                margin-botton:0px;/*agar halaman menepi ke bawah tanpa bawah*/
                }
#halaman{
                width:960px;
                height:auto;/*agar halaman disesuaikan dengan tex yang di tulis*/
                background-color:blue;
                margin-left:auto;
                margin-right:auto;
                margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
                margin-bottom:0px;/*agar halaman menepi ke bawah tanpa batas*/

}
#halaman #kepala{ /*agar terbaca di index.html harus ada div kepala */
                width:950px;/*kepala berada di dalam halaman jadi 950px*/
                height:140px;
                background-color:green;
                margin-left:auto;
                margin-right:auto;
                margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
                margin-bottom:auto;

}
 
=====================================================
edit index.html
=====================================================
==================================================================

untuk melihat hasil lihat di broser.



Diposting oleh di Tidak ada komentar:

Selasa, 26 November 2013

blok situs porno dengan squid win 7

blok situs  porno dengan squid win 7

buat pail dan isi dengan nama nama situs yang akan di blok

simpan di derektori squid\etc


 buka fail squid.conf  cari kata  TAG: http_access dengan menekan ctrl + f , terus tambahkan kata di bawah ini  acl blokir url_regex -i "c:\squid\etc\blokir.txt"
http_access deny blokir
http_access allow all
 setelah selesai restar squid
lalu coba brousing alamat detik.com maka akan muncul

gb di atas menunjukan bahwa dtik.com telah di blokir oleh squid

telah di coba di lab barlianno.


Diposting oleh di Tidak ada komentar:

Senin, 18 November 2013

configurasi squid win 7 barlianno

contoh configurasi squid win 7 barlianno


 contoh satu squid ini diintal di drive c:/squid
 swap case di jalkan di c pada polder c:/squid
sumber : http://tutorialsegalada.blogspot.com/2011/08/cara-instalasi-proxy-di-windows-xp-dan.html
telah di coba di lab barlianno
cara intal
Buka "Command Prompt", kemudian masuk ke directory "squid" tadi melalui "Command Prompt".
Contohnya adalah dengan mengetik "cd C:\squid\sbin\"

Setelah masuk ke dalam direktori sbin, ketikkan perintah "squid -z". Perintah ini digunakan untuk
membuat direktori cache_dir.

Kemudian ketik "squid -d l -D", setelah itu tekan ctrl+c.

Setelah itu mendaftarkan squid ke registry windows dengan jalan ketik "squid   -i"

Kemudian yang terakhir ketik "squid -O -D
==========
 http_port 3128
dns_nameservers 208.67.222.222 208.67.220.220
acl shoutcast rep_header X-HTTP09-First-Line ^ICY.[0-9]
upgrade_http0.9 deny shoutcast
acl apache rep_header Server ^Apache
broken_vary_encoding allow apache

acl all src all
acl manager proto cache_object
acl localhost src 127.0.0.1/32
acl localnet src 10.0.0.0/8 # RFC1918 possible internal network
acl localnet src 172.16.0.0/12 # RFC1918 possible internal network
acl localnet src 192.168.0.0/16 # RFC1918 possible internal network
acl Safe_ports port 80 # http
acl Safe_ports port 21 # ftp
acl Safe_ports port 443 # https
acl Safe_ports port 70 # gopher
acl Safe_ports port 210 # wais
acl Safe_ports port 1025-65535 # unregistered ports
acl Safe_ports port 280 # http-mgmt
acl Safe_ports port 488 # gss-http
acl Safe_ports port 591 # filemaker
acl Safe_ports port 777 # multiling http
acl CONNECT method CONNECT

http_access allow manager localhost
http_access allow localhost
http_access allow localnet
http_access deny manager
http_access deny !Safe_ports

refresh_pattern ^ftp: 1440 20% 10080
refresh_pattern ^gopher: 1440 0% 1440
refresh_pattern -i (/cgi-bin/|\?) 0 0% 0
refresh_pattern . 0 20% 4320

cache_mem 8 MB
cache_swap_low 98
cache_swap_high 99

access_log c:/squid/var/logs/access.log
coredump_dir c:/squid/var/cache

access_log none
cache_store_log none

===================================================================

contoh squid dua
pada contoh di bawah kita intal squidnya di c dan swapnya di di drive d
intal squid di c:/squid
untuk swap case di d:/squid

sumber http://gubuk.orgfree.com/squid.php

Catatan :
Kalau di windows 7 ada tambahannya gan sebelum instal squidnya buka dulu
Control Panel -> System and Security -> Change User Account Control Settings
Trus pilih “Never Notify“
Lalu restart baru instal squidnya..
Langkah:
1. Download aplikasi squid klik Disini
2. Klik kanan squid yang barusan di download --> klik extrak file --> simpan extrakan di direktori C:\ --> klik OK
3. Masukan password : wdblog
Nah.. squd berhasil di install.. coba agan liat di direktori C:\. Ada kan folder squidnya??
4. Lalu masuk ke direktori D:\ atau E:\ . ini berfungsi dimana agan akan menyimpan data akses internet
computer agan. Yup ini mirip cookies juga/ memang cookies ya. Hee
5. Buat folder : klik kanan sembarang pilik new --> klik folder . beri nama squid.
6. Lalu masuk direktori C:\ --> klik dua kali/ buka folder squid yg td berhasil di ekstrak --> cari tulisan install lalu klik 2 kali .
7. Setelah masuk CMD/coment promt. Tekan CTRL + C --> pilih/ketikan NO atau N --> enter
8. Maka akan muncul press any key to continue….. --> agan tekan enter aja
Maka squid berhasil di install : coba agan liat di folder squid yg di direktori D:\ .
itu loh folder yg agan buat tadi, hehei. Berhasil kan gan ??? jika udah maka lanjut
9. Masuk ke RUN ketikan services.msc --> enter
10. Di system service cari nama squid --> klik kanan lalu klik start.
Nah squid sudah aktif.

11. Sekarang setting browser. : Masuk browser Mozilla Firefox klik TOOL --> pilih/klik options -->
pilih advanced --> network --> pilih/klik setting --> pilih manual proxy configuration dan
masukan proxy 127.0.0.1 dengan Port 3128.

ini configurasi squid nya

===================================================================
http_port 3128 transparent
cache_mgr e.wandi@ymail.com
forwarded_for off
visible_hostname Squid_Proxy_NT

cache_mem 16 MB
cache_dir ufs d:/squid/cache0 1000 16 256
coredump_dir d:/squid

#logformat squid  %ts.%03tu %6tr %>a %Ss/%03Hs %#logformat squidmime  %ts.%03tu %6tr %>a %Ss/%03Hs %h] [%#logformat common %>a %ui %un [%tl] "%rm %ru HTTP/%rv" %Hs %logformat combined %>a %ui %un [%tl] "%rm %ru HTTP/%rv" %Hs %h" "%{User-Agent}>h" %Ss:%Sh
access_log d:/squid/access.log squid
cache_store_log none
cache_log  d:/squid/cache.log

acl apache rep_header Server ^Apache
broken_vary_encoding allow apache
maximum_object_size 8194240 KB
maximum_object_size_in_memory 1024 KB

negative_ttl 2 minutes
half_closed_clients off
#cache_swap_high 100%
#cache_swap_low 80%

ipcache_size 4096
ipcache_low 95
ipcache_high 100

memory_pools off
reload_into_ims on
pipeline_prefetch on

acl all src 0.0.0.0/0.0.0.0
acl localNet src 192.168.0.0/24, 192.168.1.0/24, 192.168.10.0/24, 192.168.100.0/24
acl manager proto cache_object
acl localhost src 127.0.0.1/255.255.255.255
acl to_localhost dst 127.0.0.0/8
acl SSL_ports port 443
acl Safe_ports port 80 # http
acl Safe_ports port 21 # ftp
acl Safe_ports port 443 # https
acl Safe_ports port 70 # gopher
acl Safe_ports port 210 # wais
acl Safe_ports port 1025-65535 # unregistered ports
acl Safe_ports port 280 # http-mgmt
acl Safe_ports port 488 # gss-http
acl Safe_ports port 591 # filemaker
acl Safe_ports port 777 # multiling http
acl CONNECT method CONNECT

# Yahoo! Messenger
acl ym dstdomain .messenger.yahoo.com .psq.yahoo.com
acl ym dstdomain .us.il.yimg.com .msg.yahoo.com .pager.yahoo.com
acl ym dstdomain .rareedge.com .ytunnelpro.com .chat.yahoo.com
acl ym dstdomain .voice.yahoo.com

acl ymregex url_regex yupdater.yim ymsgr myspaceim

# Other protocols Yahoo!Messenger uses ??
acl ym dstdomain .skype.com .imvu.com

# Manual configuration

refresh_pattern ^http\:\/\/*\.google\.co\*.*/ 10080 90% 43200 reload-into-ims
refresh_pattern ^http://*.google-analytics.*/.* 720 100% 4320
refresh_pattern ^http\:\/\/*\.facebook\.com\/ 10080 80% 43200 reload-into-ims
refresh_pattern ^http://*.texas_holdem.*/.* 720 100% 4320
refresh_pattern ^http://*.facebook.poker.zynga.com/.* 720 100% 4320
refresh_pattern ^http://*.static.ak.fbcdn.net/.* 720 100% 4320
refresh_pattern ^http://*.b.static.ak.fbcdn.net/.* 720 100% 4320
refresh_pattern ^http://*.creative.ak.fbcdn.net/.* 720 100% 4320
refresh_pattern ^http://*.profile.ak.fbcdn.net/.* 720 100% 4320
refresh_pattern ^http://*.platform.ak.fbcdn.net/.* 720 100% 4320
refresh_pattern ^http://*.statics.poker.static.zynga.com/.* 720 100% 4320
refresh_pattern ^http://*.zynga.*/.* 720 100% 4320
refresh_pattern ^http\:\/\/*\.yahoo\.co*\.*/ 10080 90% 43200 reload-into-ims
refresh_pattern ^http://*.id.yahoo.com/.* 720 100% 4320
refresh_pattern ^http://*.s.yimg.com/.* 720 100% 4320
refresh_pattern ^http://*.login.yahoo.com/.* 720 100% 4320
refresh_pattern ^http\:\/\/*\.friendster\.com\/ 10080 80% 43200 reload-into-ims
refresh_pattern ^http\:\/\/*\.detik\.com\/ 10080 80% 43200 reload-into-ims

# Manual configuration

refresh_pattern ^http://(.*?)/get_video\? 10080 90% 999999 override-expire ignore-no-cache ignore-private
refresh_pattern ^http://(.*?)/videoplayback\? 10080 90% 999999 override-expire ignore-no-cache ignore-private
refresh_pattern -i (get_video\?|videoplayback\?id|videoplayback.*id) 161280 50000% 525948 override-expire ignore-reload

# Manual configuration

# compressed
refresh_pattern -i \.gz$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.cab$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.bzip2$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.bz2$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.gz2$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.tgz$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.tar.gz$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.zip$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.rar$ 1008000 90% 99999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.tar$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.ace$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.7z$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload

# documents
refresh_pattern -i \.xls$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.doc$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.xlsx$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.docx$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.pdf$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.ppt$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.pptx$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.rtf\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload



# web content
refresh_pattern -i \.js$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.psf$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.html$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.htm$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.css$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.swf$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.js\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.css\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.xml$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload

# images
refresh_pattern -i \.gif$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.jpg$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.png$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.jpeg$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.bmp$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.psd$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.ad$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.gif\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.jpg\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.png\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.jpeg\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.psd\?$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload

# application
refresh_pattern -i \.deb$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.rpm$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.msi$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.exe$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.dmg$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload

# misc
refresh_pattern -i \.dat$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.qtm$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload

# itunes
refresh_pattern -i \.m4p$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload
refresh_pattern -i \.mpa$ 10080 90% 999999 override-expire override-lastmod reload-into-ims ignore-reload

refresh_pattern ^ftp: 1440 20% 10080
refresh_pattern ^gopher: 1440 0% 1440

refresh_pattern cgi-bin    0    0%    0
refresh_pattern \?    0    20%    4320
refresh_pattern .    0    20%    4320


storeurl_access deny all

#blocking ads
#redirect_program c:/squid/bin/perl.exe c:/squid/adzap/scripts/squid_redirect

http_access allow manager localhost
http_access allow ym
http_access allow localhost
http_access allow localNet
http_access deny manager
http_access deny !Safe_ports
http_access deny CONNECT !SSL_ports
http_access deny all
http_reply_access allow all
icp_access allow all


## ANONYMITY OPTION ###
#header_access From deny all
#header_access Referer deny all
#header_access Server deny all
#header_access User-Agent deny all
#header_access WWW-Authenticate deny all
#header_access Link deny all

header_access Proxy-Connection deny all
header_access Cache-Control deny all
header_access X-Cache deny all
header_access X-Cache-Lookup deny all
header_access X-Powered-By deny all
header_access Via deny all
#header_access Rewrite-URL deny all
#header_access X-Rewrite-URL deny all
header_access Forwarded-For deny all
header_access X-Forwarder-For deny all
#header_access Pragma deny all
#header_access Keep-Alive deny all
===========================
Diposting oleh di 1 komentar:

Selasa, 15 Oktober 2013

cara reset password win 7 pakai heren 15.1

 cara reset password win 7 pakai heren 15.1 

jika kita lupa password login  pada win 7 siapkanlah heren dan ikuti langkah di bawah ini

- pilih menu Programs >> Password / Keys >> Windows Login >> NTPWEdit (Reset XP/Vista/7 User Password)


- Pada jendela NTPWEdit carilah file SAM di Local Disk pada komputer Kamu. Lihat ketarangan gambar di bawah!


- Biasanya Local Disk akan di map ke drive [D:] atau ke [E:] tergantung jumlah partisi hardisk pada komputer yang Kamu gunakan.

- Arahkan pencarian ke folder Windows - System32 - config dan pilih file SAM, selanjutnya klik tombol Open



- Perhatikan daftar user pada jendela NTPWEdit pilih user yang sering Kamu gunakan, atau user yang akan di reset password-nya dan klik tombol Change Password.

- Ganti Password sesuai keinginnan Kamu atau jika Kamu ingin mengosongkan passwordnya biarkan field New password dan field Verify kosong, lalu klik tombol OK


- Langkah selanjutnya, jangan lupa menekan tombol Save Changes untuk menyimpan perubahan.


Demikian proses Reset Password Windows Menggunakan Hiren's BootCD, silahkan Shut down Mini Windows XP dan restart komputer Kamu, pastikan password sudah berubah atau telah kosong.

Selamat mencoba dan semoga bermanfaat bagi kita semua. :)
source http://ropink.blogspot.com/2012/11/reset-password-windows-menggunakan.html
telah di tes ulang di lab barlianno
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)