Sabtu, 24 Juli 2010

Dasar dasar html 4

| Sabtu, 24 Juli 2010 | 16 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)

Dalam Dasar dasar html 4 ini saya tidak membahas tag lagi karena telah saya bahas pada post:

  • Dasar dasar html 3
  • Dasar dasar html 2
  • Dasar dasar html 1
  • Sekarang saya akan membahas bagaimana cara menambah CSS dalam Bahasa HTML.
    Sebagai contoh saya akan mempraktekkan cara membuat Bubble tooltips 100% menggunakan CSS.
    Caranya seperti berikut:
    1. Cari code <body>
    2. Dibawah code tersebut tambahkan code dibawah ini
      <style type="text/css">
      ....
      </style>
    3. Ganti code yang berwarna merah dengan code css berikut:
      /*---------- balon tips -----------*/
      a.bt{
      position:relative;
      z-index:24;
      color:#3CA3FF;
      font-weight:bold;
      text-decoration:none;
      }

      a.bt span{ display: none; }

      /*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
      a.bt:hover{ z-index:25; color: #aaaaff; background:;}

      a.bt:hover span.balontips{
      display:block;
      position:absolute;
      top:0px; left:0;
      padding: 15px 0 0 0;
      width:200px;
      color: #993300;
      text-align: center;
      filter: alpha(opacity:90);
      KHTMLOpacity: 0.90;
      MozOpacity: 0.90;
      opacity: 0.90;
      }

      a.bt:hover span.atas{
      display: block;
      padding: 30px 8px 0;
      background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
      }

      a.bt:hover span.tengah{
      display: block;
      padding: 0 8px;
      background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
      }

      a.bt:hover span.bawah{
      display: block;
      padding:3px 8px 10px;
      color: #548912;
      background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
      }

      /*---------- balon tips END-----------*/
    4. Untuk menggunakan code css tesebut caranya seperti ini:
      Dibawah code </style> Pastekan code berikut:
      <a class='bt' href='#'>FAQ&#39;S<span class='balontips'>
      <span class='atas'>
      </span>
      <span class='tengah'>
      Tulis apa aja tentang FAQ&#39;S!
      </span>
      <span class='bawah'>
      </span>
      </span>
      </a>

    5. Maka hasilnya seperti ini:














    16 komentar :

    GudangBlog mengatakan...

    Thanks kang... Infonya bagus-bagus...
    Dapat Ilmu lagi dari K-Blogger

    Yoga Kucing mengatakan...

    ini bahasa pemrograman ya...?

    keren....

    MF Modifier mengatakan...

    ini bahasa CSS sob, bukan pemrogaman ^_^ hhehehee

    o'o mengatakan...

    memang klo seperti ini bukan hal rumit bgi master2 ,,,tpi bgi newbie ,,,klabakan,,,hehehe

    Manchester United Tech mengatakan...

    makasih infonya sob...

    happy blogging!!

    tips dan informasi terkini mengatakan...

    ditunggu posting terbarunya... ane bljr html disini aja deh... hehehe

    PeJhes mengatakan...

    Thx,, tutorialnya menarik..

    Coretan Felix mengatakan...

    Mengikuti perkembangan dari sini :)

    CongCot mengatakan...

    contoh posting ni saya mau coba

    Serba Serbi mengatakan...

    hmmm,...
    kayaknya ahli dalam HTML nie..
    hehehe...
    mantep sob..
    saya suka dengan yang beginian .
    berharap untuk bisa diajarin HTML..
    ^_^

    PIK Remaja Al-Hikmah mengatakan...

    Makasih infonya, jadi tau tentang html nich

    WOObuzz | All Tips mengatakan...

    Ternyata CSS bisa si buat dari HTML juga ya... mantep banget. ditunggu tutorial berikutnya..

    febriyanto mengatakan...

    mantep ilmunya gan........ tapi kok panjang bgt y.... enakan yg biasa aj dh kyknya... ga perlu css... hhe

    AkuJagoan.Com mengatakan...

    Isi nya HTML semua nih SOb...Kau Memang berbakat menjadi blogger ...

    Yuda Kurniawan mengatakan...

    waduh ribet nih sob,, saya gak ngerti yang kayak gini. Eh katanya HTML sudah ada HTML 5 yah?

    Ka Damar mengatakan...

    klo tooltips make banyak HTML y

    :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    Posting Komentar

     

    Blogroll

    Flagcounter

    free counters
    © Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
    Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online