Struktur Navigasi Website

Struktur navigasi adalah struktur atau alur dari suatu program yang merupakan rancangan hubungan (rantai kerja) dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan Website.  Menentukan struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat suatu Website. Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan Website, yaitu :

1.      Struktur Navigasi linier

Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang  berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

Gambar 1  Struktur Navigasi linier

2.      Struktur Navigasi Non-linier

Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan dari struktur navigasi linier. Pada struktur ini  diperkenankan  membuat navigasi bercabang. Percabangan yang dibuat pada struktur nonlinier ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave Page.

Gambar 2  Struktur Navigasi Non-linier

3.      Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu struktur yang mengandalkan  percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama pertama), halaman utama ini mempunyai halaman percabangan yang disebut Slave Page (halaman pendukung). Jika salah satu halaman pendukung dipilih atau diaktifkan, maka tampilan tersebut akan bernama Master Page (halaman utama kedua), dan seterusnya. Pada struktur navigasi ini tidak diperkenankan adanya tampilan secara linier.

Gambar 3   Struktur Navigasi Hirarki

4.      Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas. Struktur navigasi ini banyak digunakan dalam pembuatan website karena struktur ini dapat digunakan dalam pembuatan website sehingga dapat memberikan ke-interaksian yang lebih tinggi.

Gambar 4  Struktur Campuran/Composite

Sumber: http://www.freebacklink.us/Struktur_Navigasi_Website.cgi

Cara Daftarkan Blog Ke Open Directory DMOZ

Mengapa harus mendaftar ke directory tersebutIJ, karena blog atau situs yang telah terindex pada dmoz trafiknya akan meningkat pesat hal ini disebabkan karena blog/situs anda akan muncul hampir pada setiap direktori search engine terkenal seperti yang dijelaskan di atas, tentunya sesuai dengan keyword yang di cari yang berkenaan dengan deskripsi dan title(judul) blog anda. Menurut dari beberapa pengamatan, blog/situs yang sudah terdaftar pada open directory dmoz akan memiliki peringkat yang lebih tinggi dibandingkan dengan blog/situs yang tidak terdaftar ke dmoz. Keren dan sangat menguntungkan bagi blog kita agar memiliki traffic dan peringkat yang sangat tinggi.

Akan tetapi untuk dapat dipilih dan masuk kategori dmoz tidaklah semudah membalikkan telapak tangan. Banyak situs-situs yang mencoba mendaftar ke directory dmoz namun hanya sedikit yang dipilih dan masuk ke kategori mereka, karena untuk dapat di pilih dan masuk ke kategori mereka di lakukan proses penyaringan yang sangat ketat terlebih dahulu, karena open directory dmoz mereview semua situs/blog yang mendaftar/masuk dengan menggandalkan tenaga manusia dan para sukarela bukan mesin. 

Berikut ini adalah Cara Mendaftarkan Blog ke DMOZ
1. Buka situs http://www.dmoz.com

2. Klik pada "World", lalu pilih bahasa yang digunakan.

3. lalu pilih kategori sobat, misalkan "komputer". Atau gunakan cara praktis dengan memilih kategori di bawah ini sesuai kategory blognya sobat. 

Search Open Directory
Arts Business Computers Games Health Home News	Recreation Reference Regional Science Shopping Society Sports

4. Setelah itu, lalu kita memilih subkategorinya, misal "Internet"

5. lalu kita memilih subkategori yang lebih rinci lagi, misal "Web Design", kemudian pilih lagi, misal "Designer"

6. Sampai pada tahap di atas, sudah selesai dalam memilih kategori blog yang akan kita daftarkan/submit.Sekarang mulai mendaftar, klik pada "Suggest URl" pada bagian pojok atas header (tambahan: biasanya kata "suggest url" terganti menjadi "Baeta við sloð")

 7. Mulai mengisi form pendaftaran, masukkan alamat blog sobat

8. Masukkan judul blog sobat

9. lalu masukkan deskripsi blog sobat

10. Isikan "email sobat" pada kolom pertama, lalu isikan "kata verifikasi" yang tertera pada kolom kedua

11. Terakhir, klik submit

Setelah itu, tunggulah sampai beberapa minggu. Karena blog anda akan direview kemungkinan setelah 2 atau 3 minggu lebih setelah mendaftar.Harap bersabar karena yang mereview blog kita adalah manusia bukan mesin. dan tidak selalu blog kita akan di terima oleh si admin

Sumber: http://www.freebacklink.us/cara_daftarkan_blog_ke_open_directory_dmoz.cgi

Desain Populer Buat Web atau Blog Galeri

Desain Populer Buat Web atau Blog Galeri

1. login ke Blogger
2. Masuk ke template >> klik Edit HTMl centang Expand Widget Templates.
3. lalu masukkan kode berikut ini diatas
   
   
   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
   .PopularPosts ul{padding:5px 0}
   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
   .PopularPosts .item-content{position:relative;float:left;margin:0}
   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
   
   Silahkan disesuaikan dengan web atau blog sobat masing2
4. Kemudian masuk ke menu layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
6. Setelah langkah diatas, masuk lagi ke Edit HTMl (centang Expand Widget Templates), cari kode berikut :
   
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7.  Setelah kode di atas ketemu, ganti dengan kode berikut ini :
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8.  langkah yang paling terakhir, save templates dan  lihat hasilnya.

Sumber: FreeBacklink