Cara Menciptakan Sajian Navigasi Drop Down Di Blogspot

Pada tutorial terdahulu sudah aku jelaskan cara menciptakan menu navigasi biasa, cara membut menu pages dan cara menciptakan adonan menu vagiasi dan pages, pada tutorial kali ini aku akan menjelaskan cara menciptakan sajian navigasi drop down atau sajian sub navigasi. Sebelumnya akan aku jelaskan apa itu sajian vaigasi drop down. Dalam terjemahan bahasa Indonesia drop down sanggup di artikan turun kebawah jadi sajian navigasi drop down ialah sajian yang di fungsikan untuk mengelompokkan suatu artikel ke dalam sub kategori tertentu menjadi lebih terperinci sesuai dengan kategori artikel dan di susun  kebawah menurut sajian utama. Sebagai misalnya Anda ingin menciptakan sajian artikel dengan tema Smartphone di mana di dalamnya Anda kelompkkan lagi menjadi lebih terperinci dengan menambah sub sajian menyerupai Android, iOS, Windows Phone atau Blackberry. 

Fungsi sajian drop down intinya untuk lebih memudahkan pembaca blog Anda membaca artikel tertentu yang sudah Anda buat sebelumnya, jadi bila ada pengunjung blog Anda yang kebetulan ialah pemilik Smartphone Android maka akan lebih memudahkan pembaca blog Anda membaca semua artikel menurut sub kategori dari Smartphone yaitu Android.

Sama menyerupai artikel sebelumnya untuk memudahkan memahami artikel Cara Membuat Menu Navigasi Drop Down di Blogspot ini aku gunakan template blog yang aku pasang dalam blog ini. Karena tutorial ini ialah lanjutan dari tutorial sebelumnya, maka Saya sarankan Anda untuk membaca terlebih dahulu tutorialnya di sini, biar gampang dalam mempelajari tutorial lanjutan dalam artikel ini. Template blog ini merupakan template hasil download (template editan) bukan template bawaan dari blogspot. Pada tutorial kali ini Saya akan mengedit sajian pada kategori Smartphone untuk aku spesifikkan lagi ke dalam kategori sub sajian Android, Blackberry dan iOS. Sebelum aku rubah aku akan menunjukkan gambar biar perubahan sanggup di lihat setelah aku edit. Gambar sajian sebelum di edit sanggup di lihat pada gambar di bawah ini.

Menu Navigasi Smartphone sebelum di edit

Menu navigasi pada gambar di atas bila dilihat dari instruksi HTMLnya ialah menyerupai pada gambar di bawah ini, 

 Menu Smartphone sebelum di edit

Cara menambah sub kategori pada sajian Smartphone pada blog aku ini langkah-langkahnya ialah sebagai berikut. Masuk ke sajian Blogspot, lalu pilih Template selanjutnya pilih sajian Edit HTML. Lihat gambar di bawah ini untuk lebih jelasnya.

Khusus pada sajian Smartphone pada sajian edit HTML pada sajian blog ini akan aku tambahkan beberapa instruksi yang nantinya akan lebih spesifik sesuai dengan kategori yang akan aku buat. 

Menu Smartphone setelah di edit

Untuk memudahkan akan aku jabarkan edit HTML sebelum dan sehabis di edit, bandingkan perubahan mana saja yang terjadi untuk memudahkan membedakanya. Yang pertama ialah sajian Smartphone sebelum di edit instruksi HTML nya sebagai berikut

<li><a href='http://kupastutorial.blogspot.com/search/label/NEWS'>NEWS<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SMART PHONE'><a/>SMART PHONE</li>
<li><a href='http://kupastutorial.blogspot.com/search/label/WEBSITE'>WEBSITE<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SOSIAL MEDIA'>SOSIAL MEDIA<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/PHOTOSHOP'>PHOTOSHOP<a/></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/KOMPUTER'>KOMPUTER<a/></li>
</ul>

Setelah sajian Smartphone aku edit menjelma menyerupai pada instruksi HTML di bawah ini :

<li><a href='http://kupastutorial.blogspot.com/search/label/NEWS'>NEWS</a></li>
<li><a href='http://kupastutorial.blogspot.com/#'>SMART PHONE</a>
<ul>
<li><a href='http://kupastutorial.blogspot.com/search/label/Android'>Android</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/Blackberry'>Blackberry</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/iOS'>iOS</a></li>
</ul>
</li>
<li><a href='http://kupastutorial.blogspot.com/search/label/WEBSITE'>WEBSITE</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/SOSIAL MEDIA'>SOSIAL MEDIA</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/PHOTOSHOP'>PHOTOSHOP</a></li>
<li><a href='http://kupastutorial.blogspot.com/search/label/KOMPUTER'>KOMPUTER</a></li>
</ul>

Perhatikan baik-baik instruksi sebelum dan sehabis di edit pada instruksi HTML ini di atas terutama pada goresan pena yang aku beri tanda warna hitam. Pada sajian setelah di edit atau perunahan sajian Smartphone menjelma <li><a href='http://kupastutorial.blogspot.com/#'>SMART PHONE</a>. Fungsi ini untuk menampilkan statis atau dikala di klik tidak akan terjadi perubahan apa-apa. Jangan lupa tambahkan instruksi <ul> pada sub sajian dan akhiri dengan instruksi </ul> untuk menutup instruksi pada sub sajian kategori sub Smartphone.

Prose selanjutnya edit kembali artikel yang sudah Anda buat sebelumnya, buat kategori sesuai dengan sub sajian yang anda buat sebelumnya, proses ini butuh waktu alasannya ialah harus mengedit satu persatu perartikel, jadi Saya sarankan sebelum menciptakan banyak artikel sebaiknya sub sajian navigasi harus di buat sebelumnya. Hasil sajian Smartphone setelah di edit dengan menciptakan sub sajian sanggup di lihat pada gambar di bawah ini

Proses menciptakan sub sajian navigasi selesai, selamat mencoba, bila terdapat kesulitan silahkan tinggalkan komentar.

Share this post