Dede Tbs

Tampilkan postingan dengan label html. Tampilkan semua postingan

Sabtu, April 17, 2010

Membuat Rounded Corner Sederhana

Post under css, html, Tutorial Pada Sabtu, April 17, 2010 Diposting oleh Dede Al Mustaqim

Beberapa hari ini sudah blog saya ini tidak update, ya dalam beberapa hari ini kesibukan offline saya lebih banyak dan juga komputer saya baru upgrade motherboard dan proses instalasinya , sehingga saya harus dalam keadaan offline untuk sementara, nah barulah malam ini kembali lagi ke blog tercinta ini, ^_^ ,, !!!!!
Wokeh postingan kali ini saya akan kembali dengan tutorial html lagi,..!! langsung aja ya....!!
Sobat - sobat sekalian sudah tahukan yang namanya sidebar, yang berbentuk kotak - kotak itu lo, biasanya berada disamping disebuah halaman blog atau website, nah kali ini kita akan memberikan effect sedehana dengan rounded corner (border lengkung) menggunakan image dan css..!!!
Memang teknik ini sudah banyak dibahas di blog - blog atau website lain, namun kali ini akan saya posting lagi itung - itung nambahin arsip ,, hee

Oh iya hampir lupa, anda membutuhkan tiga buah gambar berfornat gif, untuk bagian atas , isi, dan bawah. Nah untuk bagian atas dan bawahnya , buatllah gambar berbentuk lengkung, sebagai contoh ketiga gambar tersebut dapat anda lihat dibawah ini :

atas.gif

isi.gif

bawah.gif

Script html nya sebagai berikut :

#kotak

{ margin:0px; padding:0px; position:absolute; width:250px; float:left; }

#kotak h2

{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #FF0000; text-decoration: none; background:url("atas.gif") 0 0 no-repeat; width:250px; height:30px; padding-left:17px; padding-top:10px; margin:0px; }

#kotak .isi

{ background:url("isi.gif") 0 0 repeat-y ; width:240px; padding:20px; margin:0px;}

#kotak p

{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #000000; text-decoration: none; margin:0px; padding:0px; }

#kotak .bawah

{ background:url("bawah.gif") 0 0 no-repeat; width:250px; height:30px; }

</style>
</head>
<body>
<div id="kotak">
<h2>Rounded Box By Spirit 89 Blog</h2>
<div class="isi">
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
<p> Isi ........................................... </p>
</div>
<div class="bawah">

</div>
</div>
</body>
</html>

Simpanlah dengan ektensi html, liat hasilnya di browser web anda., maaf nih ya sobat - sobat untuk tutorial kali tidak terlalu saya bahas secara detail,, he

Sekian dulu postingan kali ini,, Semoga bermanfaat,,, keep spirit...!!!!

Selengkapnya

Kamis, April 08, 2010

Navigasi Menu Horizontal Hitam (Cara Membuatnya) Part II

Post under css, html, Tutorial Pada Kamis, April 08, 2010 Diposting oleh Dede Al Mustaqim

Seperti janji saya pada postingan yang berjudul Navigasi Menu Horizontal Hitam Part I untuk memposting kembali cara pembuatannya maka dari itu pada postingan kali ini saya akan coba contohkan cara pembuatan Navigasi menu tersebut.

Navigasi menu ini hanya dibuat dengan bahasa html sederhana dan css nya saja dan masih jauh dari pengembangan yang sebenarnya. Untuk penerapannya ke blog atau website sobat – sobat sekalian saya mohon maaf karena tidak saya bahas pada artikel ini.

Di bawah ini adalah cara – cara Membuat Navigasi Menu Hitam yang telah saya contohkan pada postingan sebelumnya, untuk melihat bentuk dari navigasi menu ini anda dapat mengklik disini.

Untuk membuat navigasi menu ini kita membutuhkan empat file pendukung sebagai berikut menu.html , style.css, kiri_menu.gif dan kanan_menu.gif Software yang akan kita gunakan hanyalah notepad, atau anda bisa menggunakan dreamweaver jika diperlukan

Nah langkah pertama simpanlah kedua gambar di bawah ini dengan cara klik kanan dan save image. Simpanlah dalam satu folder di hardisk anda (folder ini juga akan digunakan untuk menyimpan file menu.html dan style.css )

Selanjutnya bukalah sofware notepad dikomputer anda , ketikkan css di bawah ini :

#menu { float:left; font: bold 10px/1.3em Verdana; width:100%; background:#ffffff; font-size:90%; line-height:normal; }
#menu ul {margin:0; padding:10px 10px 0 50px; list-style:none; }
#menu li { display:inline; margin:0; padding:0; }
#menu a { float:left; background:url("kiri_menu.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#menu a span { float:left; display:block; background:url("kanan_menu.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
#menu a span {float:none;}
#menu a:hover span { color:#FF0000; }
#menu a:hover { background-position:0% -42px; }
#menu a:hover span { background-position:100% -42px; }

Simpanlah dengan ektension *.css, untuk cara meyimpan pada notepad klik file > save dan pada box save as ketikkan File name dengan nama style.css dan Save as Type ubah menjadi All Files

Langkah selanjutnya adalah membuat tag html nya, Ketikkan tag html dibawah ini pada notepad :

<html>
<head>
<title>Navigasi Menu</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
   <div id="menu">
<ul>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
         <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
       <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
     <li><a href="http://dede-spirit89.blogspot.com"><span>Spirit 89 Blog</span></a></li>
    </ul>
</div>
</body>
</html>

Gantilah http://dede-spirit89.blogspot dengan link- link yang ingin anda tuju dan Spirit 89 Blog dengan nama dari linknya. Simpanlah dengan ekstension *.html , cara pemyimpanannya sama dengan cara meyimpan style.css, namun gantikan File Name dengan nama menu.hmtl

** catatan : Semua file disimpan dalam satu folder

Nah setelah semua sudah siap, bukalah file menu.html dengan browser web anda.
Selamat mencoba dan semoga bermanfaat..!!

Selengkapnya

Rabu, Februari 10, 2010

Marquee dengan OnMouseOver dan Out

Post under html, Tutorial Pada Rabu, Februari 10, 2010 Diposting oleh Dede Al Mustaqim

Postingan ini berawal dari saya melihat blogroll saya yang memanjang kebawah, nah disitu saya memikirkan gimana kalau di pasang marquee aja dengan direction up,. Marquee itu adalah salah satu tag html yang membuat text dapat berjalan keatas , kebawah, kekanan, atau kekiri.

Tutorial kali ini terbilang sangat sederhana, mungkin sudah banyak yang membahas tentang ini, tapi gak apa - apalah kalau diposting lagi oleh saya, kali aja ada sobat - sobat sekalian ada yang membutuhkan,, he,, he :)

Dibawah ini adalah contoh tag marquee dengan attribut Direction , Scrollamount, OnMouseOver, dan OnMouseOut

Text Anda

</marquee>

Saya coba jelaskan ya Attribut2 diatas :

height dan width adalah lebar area dari marquee, untuk menentukan ini tergantung pada anda.

direction , nah direction ini berfungsi untuk menetukan posisi text berjalan kemana,. jika anda menggunakan up, maka text akan berjalan keatas, untuk opsi yang lainnya anda dapat menggunakan down, right, dan left.

scrollamount, attribut ini berfungsi untuk menentukan kecepatan dari marquee, semakin kecil nilainya semakin lambat pergerakannya.

onmouseover, ini merfungsi untuk menghentikan text pada marquee jika mouse disorot pada text tersebut, sebaliknya onmouseout , text akan berjalan kembali jika mouse tidak menyorot text didalam marquee itu.

Berikut contoh penggunaan marquee dengan direction up dan down :