| Cara Membuat Mega Menu Responsive Keren di Blogspot - Memasang Mega Menu Dropdown secara simpel dan sederhana - fungsi mega sajian bahwasanya hampir sama dengan sajian pada umumnya di blogger. Akan tetapi di Mega Menu di tambahkan beberapa fitur menyerupai feeds thumbnail, contact form, dan lain lain.
 |
| Cara Membuat Mega Menu Responsive Keren di Blogspot |
Cara Membuat Mega Menu Responsive Keren di Blogspot :
1. Masuk blogger.com
2. Pindah ke sajian Tema >> Edit Tema
3. Selanjutnya, Cari arahan </style> atau arahan ]]></b:skin> , Letakkan arahan di bawah ini sempurna diatasnya :
3. Selanjutnya, Cari arahan </style> atau arahan ]]></b:skin> , Letakkan arahan di bawah ini sempurna diatasnya :
/* Mega Menu Blogger publish by */ body { background: #ddd } @import url(https://fonts.googleapis.com/css?family=Oswald); nav { height: 60px; position: relative; background: #222; font-family: 'fontawesome', 'oswald', sans-serif; } nav ul { padding: 0; margin: 0; list-style: none; } nav a { text-decoration: none; } nav>ul>li { position: relative; float: left; } nav>ul>li>a { position: relative; line-height: 60px; padding: 0 20px; color: #fff; display: block; transition: all .3s; } nav>ul>li>a:hover { color: #f6d039; } nav>ul>li.contact-menu>a:after, nav>ul>li.mega-menu>a:after, nav>ul>li.blogger-pos>a:after, nav>ul>li.drop-down>a:after {content: ' 0d7'; position: absolute; top: 0; right: 0; } nav>ul>li.mega-menu { position: static; } nav>ul>li.mega-menu .mega-menu-inner { position: absolute; opacity: 0; width: 100%; overflow: auto; top: -9999px; left: -9999px; background: #f9f9f9; visibility: hidden; border-top: 3px solid #f6d039; transition: opacity .3s; } nav>ul>li.mega-menu .mega-menu-inner ul { width: 23%; float: left; margin: 20px 1%; } nav>ul>li.mega-menu .mega-menu-inner ul li a { display: block; padding: 10px; text-transform: uppercase; border-bottom: 1px solid #999; color: #222; } nav>ul>li.mega-menu .mega-menu-inner ul h3 { color: #8181ee; padding: 0; margin: 20px 10px; } nav>ul>li.mega-menu:hover .mega-menu-inner { opacity: 1; left: 0; top: 100%; visibility: visible; } nav>ul>li.blogger-pos { position: static; } nav>ul>li.blogger-pos:hover .nav-item { opacity: 1; top: 100%; left: 0; visibility: visible; } nav>ul>li.blogger-pos .nav-item { position: absolute; width: 100%; overflow: auto; padding: 40px 0; top: -9999px; opacity: 0; left: -9999px; background: #f9f9f9; visibility: hidden; border-top: 3px solid #f6d039; transition: opacity .3s; } nav>ul>li.blogger-pos .nav-item .item { float: left; width: calc(23.1% - 100px); background: #ddd; margin: 0 10px; padding: 10px; } nav>ul>li.blogger-pos .nav-item .item img { width: 100%; height: 180px; } nav>ul>li.blogger-pos .nav-item .item h3 { font-size: 15px; } nav>ul>li.blogger-pos .nav-item .item a { color: #222; } nav>ul>li.drop-down>ul { position: absolute; border-top: 3px solid #f6d039; top: -9999px; visibility: hidden; opacity: 0; left: -99999px; width: 170px; background: #f9f9f9; transition: opacity .3s; } nav>ul>li.drop-down>ul:after, nav>ul>li.drop-down>ul:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } nav>ul>li.drop-down>ul:after { border-color: rgba(236, 240, 241, 0); border-bottom-color: #f6d039; border-width: 5px; margin-left: -5px; } nav>ul>li.drop-down>ul:before { border-color: rgba(231, 76, 60, 0); border-bottom-color: #f6d039; border-width: 9px; margin-left: -9px; } nav>ul>li.drop-down:hover>ul { opacity: 1; top: 100%; left: 0; visibility: visible; } nav>ul>li.drop-down>ul a { padding: 10px; display: block; border-bottom: 1px solid #ddd; color: #222; font: 400 15px 'oswald', 'fontawesome', sans-serif; transition: all .3s; } nav>ul>li.drop-down>ul>li.sub-menu:after { content: ' 101'; position: Absolute; right: 10px; top: 50%; margin-top: -10px; height: 20px; width: 20px; line-height: 20px; text-align: center; display: block; } nav>ul>li.drop-down>ul>li.sub-menu { position: relative; } nav>ul>li.drop-down>ul>li.sub-menu>ul { left: 90%; width: 150px; opacity: 0; background: #f9f9f9; top: -99999px; visibility: hidden; border-left: 3px solid #f6d039; position: Absolute; transition: opacity .3s; } nav>ul>li.drop-down>ul>li.sub-menu:hover>ul { opacity: 1; left: 100%; top: 0; visibility: visible; } .arrow_box:after, nav>ul>li.drop-down>ul>li.sub-menu>ul:before { right: 100%; top: 15px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } nav>ul>li.drop-down>ul>li.sub-menu>ul:after { border-color: rgba(236, 240, 241, 0); border-right-color: #f6d039; border-width: 5px; margin-top: -5px; } nav>ul>li.drop-down>ul>li.sub-menu>ul:before { border-color: rgba(231, 76, 60, 0); border-right-color: #f6d039; border-width: 9px; margin-top: -9px; } nav>ul>li.contact-menu { position: static; } nav>ul>li.contact-menu .contact-menu-inner { position: Absolute; left: -9999px; top: -9999px; opacity: 0; visibility: hidden; width: 100%; border-top: 3px solid #f6d039; overflow: auto; background: #f9f9f9; transition: opacity .3s; } nav>ul>li.contact-menu:hover .contact-menu-inner { opacity: 1; left: 0; top: 100%; visibility: visible; } nav>ul>li.contact-menu .contact-menu-inner form { float: left; width: 46%; padding: 20px 0; margin: 0 2%; } nav>ul>li.contact-menu .contact-menu-inner form span { display: block; font: 400 14px 'oswald', 'fontawesome', sans-serif; text-transform: uppercase; letter-spacing: 1px; } nav>ul>li.contact-menu .contact-menu-inner form input, nav>ul>li.contact-menu .contact-menu-inner form textarea { display: block; width: 50%; padding: 10px; background: #fff; border: 1px solid #ddd; outline: none; color: #999; font-family: 'oswald', sans-serif; margin: 10px 0; } nav>ul>li.contact-menu .contact-menu-inner .misc-contact { float: right; width: 50%; padding: 20px 0; } nav>ul>li.contact-menu .contact-menu-inner .misc-contact span, nav>ul>li.contact-menu .contact-menu-inner .misc-contact a { color: #e74c3c; } Untuk desain tahapan selanjutnya kalian dapat menentukan warna, bentuk font awesome dan menambahkan sajian yang akan kalian pasang pada blog atau website anda masing - masing.
4. Masukkan arahan HTML dibawah ini pada arahan sajian sebelumnnya, atau dapat juga ditempatkan pada sebelum arahan </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav> <ul> <li><a href='#'> Home</a></li> <li class='mega-menu'><a href='#'> Categories</a> <div class='mega-menu-inner'> <ul> <h3>Heading 1</h3> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> </ul> <ul> <h3>Heading 2</h3> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> </ul> <ul> <h3>Heading 3</h3> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> </ul> <ul> <h3>Heading 4</h3> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> <li><a href='#'>Sublink</a></li> </ul> </div> </li> <li class='blogger-pos' data-label='All'><a href='#'> Coding</a></li> <li class='drop-down'><a href='#'> About Us</a> <ul> <li><a href='#'> Profile</a></li> <li><a href='#'> Community</a></li> <li class='sub-menu'><a href='#'> Team</a> <ul> <li><a href='#'> Designers</a></li> <li><a href='#'> Developers</a></li> <li><a href='#'> Marketers</a></li> </ul> </li> </ul> </li> <li class='contact-menu'><a href='#'> Contact Us</a> <div class='contact-menu-inner'> <form> <span>Name</span> <input type='text' /> <span>Email</span> <input type='email' /> <span>Description</span> <textarea></textarea> </form> <div class='misc-contact'> <address> Visit us at:<br> ,<br> https://quoranote.blogspot.com<br> Jakarta - Indonesia. </address> <span class='email'><a href='mailto:yosepsipil@gmail.com'>yosepsipil@gmail.com</a></span> / <span class='number'> Rahasia</span> </div> </div> </li> </ul> </nav>5. Kemudian masukkan arahan Javascript dibawah ini diatas arahan </body>
// Konsep Mega Menu Untuk Blogger // By Arlina Design , Publish By var q = $('li.blogger-pos'); q.each(function() { var e = $(this), indexnumber = Math.random(), domain = 'https://quoranote.blogspot.com', f = e.attr('data-label'), g = domain + '/feeds/posts/summary/-/' + f + '?max-results=5&alt=json-in-script'; e.append('<div class="nav-item"></div>'); $.ajax({ type: 'GET', url: g, async: false, contentType: "application/json", dataType: 'jsonp', success: function(json) { for (var i = 0; i < json.feed.entry.length; i++) { var h = json.feed.entry[i]; for (var j = 0; j < h.link.length; j++) { if (h.link[j].rel == 'alternate') { var l = h.link[j].href; break; } } try { var k = h.media$thumbnail.url.replace("s72-c", "s250-no"); } catch (m) { var k = 'https://4.bp.blogspot.com/-44M8yK5CHp8/ViTaiQDurbI/AAAAAAAALnU/v7jzzQsbkCY/s1600/No%2Bimage.png'; } var z = h.title.$t; var nnitem = "<div class='item'><img src='" + k + "'/><h3><a href='" + l + "'>" + z + "</a></h3></div>"; e.find('.nav-item').append(nnitem); } } }); }); Dengan Mega Menu ini halaman yang tidak dapat ditempatkan pada home blog anda dapat anda masukkan kedalam navigasi sajian bab atas, cukup simpel dan tidak memakan ruang yang begitu besar.
Demikianlah wacana konsep artikel Cara Membuat Mega Menu Responsive Keren di Blogspot, supaya bermanfaat untuk anda. Jika menyukai artikel ini silahkan klik like, share, and subscribe untuk mendapat artikel terbaru pribadi dari email anda.
Terima kasih. Salam blogger.