Cara Menciptakan Hidangan 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 yaitu 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 ibarat 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 jikalau ada pengunjung blog Anda yang kebetulan yaitu pemilik Smartphone Android maka akan lebih memudahkan pembaca blog Anda membaca semua artikel menurut sub kategori dari Smartphone yaitu Android.

Sama ibarat 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 yaitu lanjutan dari tutorial sebelumnya, maka Saya sarankan Anda untuk membaca terlebih dahulu tutorialnya di sini, semoga 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 semoga 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 jikalau dilihat dari isyarat HTMLnya yaitu ibarat pada gambar di bawah ini, 

 Menu Smartphone sebelum di edit

Cara menambah sub kategori pada sajian Smartphone pada blog aku ini langkah-langkahnya yaitu 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 isyarat 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 setelah di edit, bandingkan perubahan mana saja yang terjadi untuk memudahkan membedakanya. Yang pertama yaitu sajian Smartphone sebelum di edit isyarat 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 bermetamorfosis ibarat pada isyarat 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 isyarat sebelum dan setelah di edit pada isyarat HTML ini di atas terutama pada goresan pena yang aku beri tanda warna hitam. Pada sajian setelah di edit atau perunahan sajian Smartphone bermetamorfosis <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 isyarat <ul> pada sub sajian dan akhiri dengan isyarat </ul> untuk menutup isyarat 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 yaitu 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, jikalau terdapat kesulitan silahkan tinggalkan komentar.

Share this post

Berlangganan update artikel terbaru via email: