Tampilkan postingan dengan label menu drop down. Tampilkan semua postingan
Tampilkan postingan dengan label menu drop down. Tampilkan semua postingan

Cara membuat List pada daftar menggunakan html

List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Secara umum biasanya bentuk list yang sering digunakan adalah seperti Angka, huruf, romawi, titik atau bentuk-bentuk bidang seperti lingkaran, kotak, dll.
Dibawah ini saya mencoba memberikan beberapa contoh bentuk list untuk membuat sebuah daftar dengan menggunakan Html, dan untuk membuat List image atau list yang berbentuk gambar, seperti tanda panah, tanda centang, atau list dengan gambar yang lain, akan saya bahas pada tutorial css.
Kali ini kita fokus pada tutorial html terlebih dulu ya.......
silahkan anda perhatikan cara penulisan kodenya.





<h4>List bentuk Angka :</h4>
 <ol>
 <li>Satu</li>
 <li>Dua</li>
 <li>Tiga</li>
 <li>Empat</li>
</ol>

List bentuk Angka :

  1. Satu
  2. Dua
  3. Tiga
  4. Empat
<h4>List bentuk Huruf besar:</h4>
<ol type="A">
 <li>Huruf besar A</li>
 <li>Huruf besar B</li>
 <li>Huruf besar C</li>
 <li>Huruf besar D</li>
</ol>

List bentuk Huruf besar:

  1. Huruf besar A
  2. Huruf besar B
  3. Huruf besar C
  4. Huruf besar D
<h4>List bentuk Huruf kecil:</h4>
<ol type="a">
 <li>Huruf kecil a</li>
 <li>Huruf kecil b</li>
 <li>Huruf kecil c</li>
 <li>Huruf kecil d</li>
</ol>

List bentuk Huruf kecil:

  1. Huruf kecil a
  2. Huruf kecil b
  3. Huruf kecil c
  4. Huruf kecil d
<h4>List bentuk Romawi besar:</h4>
<ol type="I">
 <li>Romawi besar I</li>
 <li>Romawi besar II</li>
 <li>Romawi besar III</li>
 <li>Romawi besar IV</li>
</ol>

List bentuk Romawi besar:

  1. Romawi besar I
  2. Romawi besar II
  3. Romawi besar III
  4. Romawi besar IV
<h4>List bentuk Romawi kecil:</h4>
<ol type="i">
 <li>Romawi kecil i</li>
 <li>Romawi kecil ii</li>
 <li>Romawi kecil iii</li>
 <li>Romawi kecil iv</li>
</ol

List bentuk Romawi kecil:

  1. Romawi kecil i
  2. Romawi kecil ii
  3. Romawi kecil iii
  4. Romawi kecil iv




<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Disc bullets list:

  • Merah
  • Kuning
  • Hijau
  • Biru
<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Circle bullets list:

  • Merah
  • Kuning
  • Hijau
  • Biru
<h4>Square bullets list:</h4>
<ul type="square">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Square bullets list:

  • Merah
  • Kuning
  • Hijau
  • Biru




<h4>Sub Daftar:</h4>
<ul> <li>Buah</li>
  <li>Hewan
    <ul>
    <li>Reptil</li>
    <li>Mamalia
      <ul>
      <li>Sapi</li>
      <li>Kambing</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Pohon</li>
</ul>

 

Sub Daftar:

  • Buah
  • Hewan
    • Reptil
    • Mamalia
      • Sapi
      • Kambing
  • Pohon

    Selamat mencoba dan semoga bermanfaat....
    Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
    Diposting oleh di Tidak ada komentar:
    Label: , , , , ,

    Cara buat Menu navigasi Drop-Down Horisontal


    Menu navigasi berfungsi sangat penting untuk website atau blog. Selain memberikan daya tarik lebih  pada website atau blog. Tapi sangat berguna untuk menavigasi atau memberi petunjuk pada pengunjung untuk memudahkan menelusuri dan melihat seluruh isi yang ada pada website atau blog anda. Ada beberapa bentuk menu navigasi, diantaranya vertikal dan horisontal. Dan keduanya mempunyai fungsi yang sama.
    Kali ini saya menampilkan bermacam-macam koleksi menu navigasi Horisontal  yang saya dapat dari Blogger Tips And Tricks. Dan anda bisa membuat dan memiliki menu-menu ini sesuai selera anda. Anda tinggal lihat demonya, baca artikel panduannya, dan coba untuk membuat.

    Langsung saja berikut koleksi menu navigasi Drop-Down Horisontal :

    1. Advanced CSS Menu

    Demo : http://www.webdesignerwall.com/demo/advanced-css-menu/
    Article : http://www.webdesignerwall.com/tutorials/advanced-css-menu/
    Download : http://www.webdesignerwall.com/file/advanced-css-menu.zip


    2.  Bulletproof CSS Sliding Doors

    Demo : http://azadcreative.com/files/Bulletproof.zip
    Article : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
    Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


    3.  How to Make a CSS Sprite Powered Menu

    Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
    Article : http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
    Download : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


    4.  CSS Express Drop-Down Menus

    Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
    Article : http://www.projectseven.com/tutorials/navigation/auto_hide/
    Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


    5.  CSS3-only horizontal drop line tab menu

    Demo : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
    Article : http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
    Download : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


    6.  Nicer Navigation with CSS Transitions

    Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
    Article : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions



    7.  Pure CSS Horizontal Menu

    Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
    Article : http://www.devinrolsen.com/pure-css-horizontal-menu/


    8.  DropDown CSS Menu

    Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
    Article : http://divitodesign.com/css/how-to-dropdown-css-menu/
    Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


    9.  Pure CSS Menu With Infinite Sub Menus Tutorial

    Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
    Article : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/


    10. CSS3 Dropdown Menu

    Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
    Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/


    11. Elegant Drop Menu with CSS Only

    Demo : http://aext.net/example/elegant-menu-with-css-only/
    Article : http://aext.net/2009/09/elegant-drop-menu-with-css-only/
    Download : http://www.box.net/shared/paoqo8y1lt


    12. CSS dropdown menu without javascripting or hacks

    Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
    Article : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129


    13. Create Vimeo-like top navigation

    Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
    Article : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
    Download : http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip


     14. ADxMenu


    Demo : http://aplus.rs/adxmenu/examples/htb/
    Article : http://aplus.rs/adxmenu/
    Download : http://aplus.rs/adxmenu/adxmenu-v4.zip


    15.  A Great CSS Horizontal Drop-Down Menu

    Demo : http://sperling.com/examples/menuh/
    Article : http://sperling.com/examples/menuh/
    Download : http://sperling.com/examples/menuh/menuh.css


    16. CSS menus

     Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
    Article : http://www.howtocreate.co.uk/tutorials/testMenu.html


    17. Pure CSS Fish Eye Menu

    Demo : http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html#expandDown
    Article : http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
    Download : http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


    18. A centered menu with gradient and two pointers

    Demo : http://www.cssplay.co.uk/menus/two_points.html
    Article : http://www.cssplay.co.uk/menus/two_points.html


    19. Create an Advanced CSS3 Menu

    Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
    Article : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
    Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


    20. Solid Block Menu


    Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
    Article : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
    Download : http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
    http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


    21. Sleek Pointer Menu

    Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
    Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
    Download : http://www.dynamicdrive.com/cssexamples/media/rightround.gif
    http://www.dynamicdrive.com/cssexamples/media/pointer.gif


    22. Sleek Pointer Menu 2

    Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
    Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
    Download : http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
    http://www.dynamicdrive.com/cssexamples/media/pointer.gif


    23. How to Create a CSS Menu Using Image Sprites


    Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
    Article : http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
    Download : http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


    24. CSS Sprite Navigation Tutorial

    Demo : http://www.ehousestudio.com/assets/downloads/sprite/
    Article : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
    Download : http://www.ehousestudio.com/assets/downloads/sprite.zip

    25. CSS Overlapping Tabs Menu

    Demo : http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
    Article : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
    Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


    26. CSS Navigation Menus

    Article : http://www.jacorre.com/design/cssnavmenus.htm

    27.
    CSS3 Chunky Menu

    Demo : http://zubeta.com/demo-menu.html
    Article : http://zubeta.com/css3-menu-demo.html


    28. Creating a glassy non div navigation bar

    Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
    Article : http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
    Download : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


    29. Centered Tabs with CSS

    Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
    Article : http://24ways.org/2005/centered-tabs-with-css


    30. Apple’s Navigation bar using only CSS

    Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
    Article : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css


    31. Animated horizontal tabs

    Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
    Article : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
    Download : http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
    http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


    32. A Horizontal Button Menu - The Easy Way

    Demo : http://www.cssplay.co.uk/menus/listnine.html
    Article : http://www.cssplay.co.uk/menus/tutorial.html


    Naah.... banyak kan...?
    sekarang Selamat Mencoba...
    Semoga bermanfaat.

    Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.
    Diposting oleh di 8 komentar:
    Label: , , , , , ,
    Langganan: Postingan (Atom)