Membuat Sajian Navigasi Blog Ala Hompimpa

Pada suatu hari Saya mencoba iseng menciptakan model-model sajian navigasi, hingga balasannya inilah yang Saya dapatkan (lihat demonya di sini). Saya rasa, desain sajian navigasi Saya yang satu ini sudah cukup ganteng. Bagaimana berdasarkan kalian?

Jika kalian berminat menciptakan sajian navigasi menyerupai tampak di atas, maka ikutilah jalan kebenaran Saya ini:

Masuk ke tab Rancangan, kemudian pilih Edit HTML
Nah, sehabis itu salinlah isyarat ini, kemudian letakkan di atas isyarat ]]></b:skin>

#hompinav              {font:normal 0.9em Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;} #hompinav ul           {list-style-type:none;margin:0;padding:0;height:50px;} #hompinav li a         {display:inline;margin:0 2px;float:left;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;box-shadow:0 2px 3px #999;-moz-box-shadow:0 2px 3px #999;-webkit-box-shadow:0 2px 3px #999;} #hompinav li a:link, #hompinav li a:visited {font-weight:bold;color:#FFFFFF;background-color:#335577;border:2px outset #123;padding:5px 15px;text-decoration:none;} #hompinav li a:hover   {background-color:#882222;border:2px outset #992222;} #hompinav li a:active  {background-color:#333;border:2px outset #000;}

Yang tadi kita lakukan itu ialah memasang rancangan modelnya, kini kita tinggal meletakkan kerangka menunya. Tapi sebelum itu, kita harus tahu dulu bahwa untuk meletakkan sebuah objek dalam isyarat HTML, kita juga harus mengerti wacana di mana letak objek ini dan itu dalam tampilan di browser dikala kita sedang melihat dalam tampilan kode.
Oke, untuk lebih mudahnya, Saya sudah merangkumnya beberapa biar kalian lebih gampang meletakkannya. Namun satu hal: Jangan pernah tergantung dengan ID dan CLASS sebuah elemen, alasannya ialah tidak semua template mengikuti standarisasi. Sebagai contoh, elemen Header tidak selalu mempunyai id='header-wrapper', tetapi terkadang juga mempunyai id='top-header' atau id='ndhas-blog' (jika kalian menciptakan template sendiri hehe..).

Lanjut ke langkah berikutnya:

Salinlah isyarat ini, kemudian letakkan di kawasan yang kalian kehendaki:

<div id='hompinav'>     <ul>         <li><a href='#'>Beranda</a></li>         <li><a href='#'>Profil</a></li>         <li><a href='#'>Artikel</a></li>         <li><a href='#'>Forum</a></li>         <li><a href='#'>Kontak</a></li>         <li><a href='#'>Lapor</a></li>     </ul> </div>

Di mana kau meletakkan isyarat ini?

Untuk meletakkan sajian navigasi di atas atau di bawah header, carilah dulu baris isyarat yang tampak kurang lebih menyerupai ini:
```
<div id='header-wrapper'>     <b:section class='header' id='header' maxwidgets='1'>         <b:widget id='Header1' locked='true' title='Hompimpa Alaihum Gambreng (Header)' type='Header'/>     </b:section> </div>
```
Ingat, jangan terfokus pada ID dan CLASS, tetapi fokuslah pada type='header' dan judul blog (dalam hal ini: title='Hompimpa Alaihum Gambreng'). Nah, dari situ tarik pandangan matamu ke arah atas dan bawah hingga menemukan elemen <div> terluar. Di situlah batas final wilayah kekuasaan dari sebuah HEADER.

Sederhananya, untuk meletakkan sajian navigasi di atas header, letakkan isyarat yang gres saja kau salin tadi di atas <div id='header-wrapper'>. Sedangkan jikalau ingin meletakkannya di bawah header, letakkan di bawah isyarat </div>
Untuk meletakkan sajian navigasi di atas wilayah posting, carilah dulu baris isyarat yang kurang lebih tampak menyerupai ini:
```
<div id='main-wrapper'>     <b:section class='main' id='main' showaddelement='no'>         <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>     </b:section> </div>
```
Nah, letakkan isyarat yang kau salin tadi di bawah <div id='main-wrapper'>
Sekarang coba klik Pratinjau. Jika sudah puas, tinggal kita simpan templatemu, kemudian masuk ke tahap adaptasi dan pemahaman lebih lanjut.

Penyesuaian dan Pemahaman lebih Lanjut

Setiap unit sajian didefinisikan sebagai:

<li><a href='#'>Nama Menu</a></li>

Kamu sanggup dengan gampang melihat nama sajian yang akan tampil nantinya dengan melihat teks di dalam wilayah kekuasaan <a href='#'>teks...?</a>
Oleh alasannya ialah itu:
(Sebagai contoh) untuk menciptakan sajian Beranda, gantilah simbol # dengan URL homepage blogmu, kemudian gantilah Nama Menu menjadi Beranda sehingga menjadi menyerupai ini:
<li><a href='http://www.latitudu.co.cc'>Beranda</a></li>
Begitu saja caranya. Titik.

Sumber https://www.dte.web.id/