Membuat Navigasi Menu Responsive Dropdown + Submenu dengan Logo

Cara Membuat Navigasi Menu Responsive Dropdown + Submenu dengan Logo di Blogger. Navigasi menu model gini lagi trend nih. Logo atau Nama Blog dipasukan dengan menu dalam satu bar. Ini penamapakannya:

Tampilan Mobile

Tampilan Desktop

Keren 'kan?

Ini dari CSS Menu Maker sebagaimana sudah dishare warna di posting nav menu responsve sebelumnya.

Model menu responsive mobile-friendly ini CB dapatkan di Code Pen. Demonya juga ada di sana, di bagian bawah.

Untuk dipasang di blogger, hanya perlu penambahan kode di bagian javascript.

Cara Memasang Navigasi Menu Responsive Dropdown + Submenu dengan Logo

Ada tiga kode yang harus dipasang setelah Anda masuk ke template blog Anda: Template > Edit HTML:

1. Kode CSS dipasang di atas kode ]]></b:skin>. Bisa juga di atas kode </head> namun harus diawali dengan kode <style> dan ditutup dengan kode </style>
2. Kode HTML dipasang di bawah kode </header> atau setelah kode header blog.
3. Kode JavaScript dipasang di atas kode </body>

Ketiga kode navigasi menu responsive dropdown ini bisa Anda dapatkan di CodePen.

Untuk kode JS, Anda tambahkan kode <script type='text/javascript'>//<![CDATA[ di awal dan kode //]]></script>

di akhir kode.

Lihat: Cara pasang kode Javascript di Blogger biar gak error.

Demikian Cara Membuat Navigasi Menu Responsive Dropdown + Submenu dengan Logo di Blog Anda. Good Luck & Happy Blogging! (www.contohblog.com).*

Tweet

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Subscribe to receive free email updates: