Dede Tbs

Tampilkan postingan dengan label css. 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

Sabtu, Februari 20, 2010

Navigasi Menu Horizontal Hitam Part I

Post under css, Tutorial Pada Sabtu, Februari 20, 2010 Diposting oleh Dede Al Mustaqim

Hari ini setelah berjam - jam di depan kompi melakukan eksperimen yang selalu gagal, timbulah inisiatif saya untuk memodifikasi navigasi menu yang satu ini.
Yup walaupun tidak bagus - bagus amat, paling tidak saya hanya membagi hasil karya saya yang sederhana ini kepada anda.
Dengan ilmu css yang apa adanya saya coba bikin navigasi menu hitam seperti dibawah ini,, ya lumayan lah buat coba - coba bikin situs,, he,,
Silahkan di nikmati aja navigasi menu hitam di bawah ini..!!

Horizontal Navigation Menu Hitam

Kalau ada yang pengen tahu cara membuat navigasi menu seperti ini, mungkin lain kali aja ya saya posting cara membuatnya,

Oh iya,,, yang punya css buat side bar,, bagi- bagi donk,,

Selengkapnya