Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Minggu, 21 Februari 2010

Cara Mengatur Link pada Sub Pages

By internet marketing | At 02.16 | Label : , | 0 Comments
Mengatur link pada menu navbar mungkin mudah bagi mereka yang sudah mengenal kode HTML tetapi bagi mereka yang awam akan kode HTML sangatlah rumit dikarenakan banyaknya kode kode html seperti <ul> ------ </ul> dan <li> ------ </li> semuanya itu mungkin rumit bagi mereka yang tidak mengenalnya.

Sebelum kita membahasnya kita ketahui terlebih dahulu bahwa setiap sub page akan berawalan <ul> dan berakhir pada </ul>.

Dan pada link pada menu page, sub page, sub sub page dan sub sub sub page akan berawalan <li> dan berakhir pada </li>

Berikut di bawah ini adalah ilustrasinya :

<div id='NavbarMenu'>
  <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='#'>Page</a>
      <ul>                                 /* ------> awal menu pada sub page */
        <li><a href='#'>Sub Page #1&#160;&#160;&#160;&#160;&#187;</a>
          <ul>                             /* ------> awal menu pada sub sub page */
            <li><a href='#'>Sub Sub Page #1&#160;&#160;&#160;&#160;&#187;</a>
              <ul>                         /* ------> awal menu pada sub sub sub page */
                <li><a href='#'>Sub Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Sub Page #2</a></li>
              </ul>                         /* ------> akhir dari menu pada sub sub sub page */
            </li>
            <li><a href='#'>Sub Sub Page #2</a></li>
            <li><a href='#'>Sub Sub Page #3</a></li>
          </ul>                             /* ------> akhir menu pada sub sub page */
        </li>
        <li><a href='#'>Sub Page #2</a></li>
        <li><a href='#'>Sub Page #3</a></li>
        <li><a href='#'>Sub Page #4</a></li>
        <li><a href='#'>Sub Page #5</a></li>
      </ul>                                 /* ------> akhir menu pada sub page */
    </li>

    <li><a href='#'>About Me</a></li>
  </ul>
</div>

Ket :
  • Tulisan # Ganti dengan alamat link. diikuti nama link tersebut yaitu dengan mengganti tulisan sub page, sub sub page dan sub sub sub page yang ada di sampingnya.

  • Kode "&#160;" adalah "spasi" untuk membatasi jarak dengan kode "&#187;" yang berarti tampilan "»" jadi pada kode "Sub Sub Page #1&#160;&#160;&#160;&#160;&#187;" nantinya akan tampil menjadi "Sub Sub Page #1    »"

  • Tulisan NavbarMenu dan nav adalah pemanggil dari kode css pada template. jadi sesuaikan nama tersebut dengan kode css yang anda miliki pada template anda.

  • Jika belum mempunyai kode css tersebut mungkin anda harus membuatnya terlebih dahulu sesuai ukuran template anda. tetapi saran dari Trik Tips Tutorial agar anda memakai template yang sudah disertai sub pages pada templatenya kemudian anda tinggal mengedit linknya seperti yang diterangkan di atas.

Sabtu, 13 Februari 2010

Karakter Khusus Pada Kode HTML

By internet marketing | At 09.53 | Label : , | 0 Comments
Mungkin kita bingung ketika kita ingin memposting artikel tetapi artikel itu mempunyai karakter khusus / Karakter Spesial.

Karakter khusus atau karakter spesial (Special Character) mungkin jarang kita gunakan, terlebih yang tidak terdapat pada keyboard kita. tetapi, "sedia payung sebelum hujan", tidak ada salahnya kita mengenal sekaligus mempersiapkannya sewaktu waktu kita membutuhkannya.

Banyak sekali karakter karakter yang ada di kode HTML tetapi Trik Tips Tutorial disini akan menampilkan karakter karakter khusus yang sering di gunakan saja.

Di Bawah ini adalah Tabel Karakter khusus pada kode HTML yang sering di gunakan :

Karakter
Notasi
Keterangan
<
&lt;
Buka Kurung / Lebih Kecil
>
&gt;
Tutup Kurung / Lebih Besar
≤
&le;
Lebih Kecil Sama Dengan
≥
&ge;
Lebih Besar Sama Dengan
≠
&ne;
Tidak Sama Dengan
«
&#171;
Dobel Buka Kurung
»
&#187;
Dobel Tutup Kurung
&
&amp;
Tanda Dan
"
&quot;
Tanda petik ganda
±
&plusmn;
Tanda plus minus / Kurang Lebih
Spasi
&nbsp;
Tanda Spasi
©
&copy;
Tanda hak cipta (copyright)
®
&reg;
Tanda terdaftar (Registered)
Σ
&Sigma;
Tanda Sigma
™
&trade;
TradeMark
½
&frac12;
Setengah
¼
&frac14;
SeperEmpat / Satu per Empat
¾
&frac34;
Tiga per Empat
€
&euro;
Satuan Euro
¥
&yen;
Satuan Yen

Cara Mengedit Teks dan Gambar

By internet marketing | At 07.07 | Label : , | 0 Comments
Dalam dunia Blogging tak lepas dari yang namanya teks dan gambar. dan pada setiap teks dan gambar tersebut biasanya tersimpan link dan title atau judul dari dari gambar dan teks tersebut.

Khusus pada gambar biasanya tersimpan alt (Alternative Text) atau Associated Text. yang berguna sebagai teks alternatif gambar tersebut.

Berikut ini adalah cara cara mengedit teks dan gambar :


* CARA MEMASUKKAN GAMBAR
kode :
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" border="0" height="18" width="30">

keterangan :
yang warna BIRU adalah lokasi gambar dimana disimpan.
height="18" width="30" adalah ukuran tinggi (height) dan lebar (width) gambar
hasil :




* CARA MEMBUAT LINK
Kode :
<a href="http://trik-tips-tutorial.blogspot.com" >Trik Tips Tutorial </a>

Keterangan :
Teks warna BIRU adalah alamat link yang dimaksud.
Tulisan "Trik Tips Tutorial" adalah tulisan yang akan ditampilkan.

Jika anda ingin link yang tampil adalah sebuah gambar maka kita hanya perlu menggabungkannya, sehingga kodenya akan seperti ini :
<a href="http://trik-tips-tutorial.blogspot.com" target="_blank"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" border="0" height="18" width="30"> </a>


Keterangan :
tambahan kode target="_blank" adalah digunakan apabila anda ingin link atau gambar yang di klik akan membuka tab baru.

Jika ingin menambahkan title pada link teks dan gambar anda tinggal menambahkan kode
title="keterangan link" ganti tulisan keterangan link dengan keterangan link yang anda inginkan seperti :
<a href="http://trik-tips-tutorial.blogspot.com/" target="_blank" title="Ke Beranda">Trik Tips Tutorial</a>

Hasilnya : Trik Tips Tutorial



* CARA MEMBUAT TEKS/GAMBAR BERADA DI TENGAH
Kode :
<center> teks/gambar atau link gambar/link teks </center>

Keterangan :
Ganti tulisan "teks/gambar atau link gambar/link teks" dengan teks atau gambar yang dimaksud.



* CARA MEMBUAT BARIS BARU
Kode :
<br> atau kode <br/>

Keterangan :
Tambahkan kode berwarna MERAH tersebut sebelum atau sesudah objek (teks/gambar) yang dimaksud.



* MEMBUAT HURUF TEBAL, MIRING, BERGARIS BAWAH, TERCORET, KECIL BAWAH (Subscript) DAN KECIL ATAS (Superscript)
Kode :
<b>teks</b> hasil : teks menjadi tebal.
<i>teks</i> hasil : teks menjadi miring.
<u>teks</u> hasil : teks menjadi bergaris bawah.
<strike>teks</strike> hasil : teks menjadi bergaris tengah atau tercoret.
<sub>teks</sub> hasil : teks menjadi kecil bawah atau Subscript.
<sup>teks</sup> hasil : teks menjadi kecil atas atau Superscript.


* MEMBERI WARNA TEKS
<font color="#FF0000"> Merah </font>
<font color="red"> Merah </font>

Keterangan :
Ganti text yang berwarna MERAH dengan warna atau kode warna kesukaanmu.
Hasil :
Merah

Untuk kode kode warna yang lainnya bisa di lihat di Kode Kode Warna



* MERUBAH UKURAN TEKS
kode :
<font size="1">ini font size 1</font>

Ganti angka 1 dengan ukuran 1, 2, 3, 4, 5, dan seterusnya Hasilnya seperti :
Ini font size 1
Ini font size 2
Ini font size 3
Ini font size 4
Ini font size 5
dan seterusnya...
Posting Lama ►
 

Copyright © 2012. live smart - All Rights Reserved B-Seo Versi 4 by Bamz