Make a Mega Menu Blogspot

RaBiitch Official - Pada Artikel yang anda baca kali ini dengan judul Make a Mega Menu Blogspot, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca artikel kami yang berjudul Make a Mega Menu Blogspot
Make a Mega Menu Blogspot


Make a mega menu blogspot article for blogging-this time I will share how to create mega menu on the blog, the usefulness of the mega menu as well as the horizontal menu as navigation to facilitate visitor access essential page page, but on the menu there are additional mega mega menu capable followed a similar feed of the latest articles (recent post) in the dropdown menu that draws the menu again diselipi pictures, cool lah.

Make a mega menu blogspot

These tips I found on a blog that he said took from arlinadesign.com, so I just arlina directly to the source while writing this article, I will share simple tips for you who want to make a blog, look for references that valid when creating a blog, do not believe in a quiet visitors blog but brave giving SEO tips, and don't believe the tips memperbagus blog display but will display its own chaotic team blog

How to make a mega menu blogspot

Before the start of the mental sipakan you well, because for this tutorial we are going to deal with the CSS code, code Txt/Java Script, HTML code. Layout trouble Make a mega menu blogspot is the placement of the menu, because each has a different CLASS IDS thempalte different but with the same functionality. Let us jump to the tutorial

Sign in to blogger.com, log in with your google account, after successfully entering keberanda bloggers please select the blog that you'll love mega menu

Kemudin select Thema, Select edit HTML, in the window at the view this will be an awful lot of code the code, there is a CSS/HTML, XML, and scripts

To facilitate the desired code to perform a search using the search field with the push of a button CTRL+F

Usually for modification themplate blog, the code is often tampered with atik is the CSS code, well if there is a slide effect glow and animations, usually code added is Java Script, as for the HTML is the object of a modified alias modification CSS dan JAVA SCRIPT sheer mmata to display HTML that's cool

Please copy the CSS code below and place the diarea  <style> Place your code here </style>


/* Mega Menu Blogger */
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: '\f0d7';
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: '\f101';
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;
}

Please adjust the size of your blog, customize menu colors and also bordernya, the color of the menu CSS code above is black, this code cssnya MAS background: #222 . Note also his CLASS ID if on previous blog themplate already existing ID nav, because if double id but different functionality to be able to display the blog even so messy, this is usually not noticed by bloggers who hurry hurry main copy paste

Now search the code </body>, When it's found please copy the code below and then put the above code  </body>

<script type='text/javascript'>
//<![CDATA[
// Konsep Mega Menu Untuk Blogger
// By Arlina Design
// Twitter: @ArlinaDesign
var q = $('li.blogger-pos');
q.each(function() {
  var e = $(this),
    indexnumber = Math.random(),
    domain = 'http://www.rabiitch.me/',
    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 = 'http://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);
      }
    }
  });
});
//]]>
</script>

Note the code in bold, please replace the url www.rabiitch.me with the url of the blog you

The next step is to test your intelligence, because the code that has the Id themplate class are different but the same functionality, if you already understand what the meaning please copy code HTML below and may be located according to taste. Usually it is located under the menu for Head or Header

<nav>
  <ul>
    <li><a href='#'>&#xf015; Home</a></li>
    <li class='mega-menu'><a href='#'>&#xf03a; 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='MACRO'><a href='#'>&#xf1ea; Coding</a></li>
    <li class='drop-down'><a href='#'>&#xf129; About Us</a>
      <ul>
        <li><a href='#'>&#xf1fe; Profile</a></li>
        <li><a href='#'>&#xf0e6; Community</a></li>
        <li class='sub-menu'><a href='#'>&#xf0c0; Team</a>
          <ul>
            <li><a href='#'>&#xf1fc; Designers</a></li>
            <li><a href='#'>&#xf121; Developers</a></li>
            <li><a href='#'>&#xf201; Marketers</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class='contact-menu'><a href='#'>&#xf0e0; 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>
          Galaksi Bima Sakti,<br>
          Bintang Matahari,<br>
          Planet Bumi.
        </address>
          <span class='email'><a href='mailto:arlinadesign@hotmail.com'>arlinadesign@hotmail.com</a></span> /
          <span class='number'>+00-000-123456</span>
        </div>
      </div>
    </li>
  </ul>
</nav>

Note the code in bold, please replace the url MACRO the label on your blog



So how to create mega menu blogspot, may be understood in practice and add to the appeal of your blog, congratulations on a long holiday


Demikian penjelasan mengenai Make a Mega Menu Blogspot dan seperti biasa silahkan tinggalkan apa pendapat kalian di kolom komentar mengenai Make a Mega Menu Blogspot

Bagikan : https://www.rabiitch.me/2018/08/make-mega-menu-blogspot.html

0 Response to "Make a Mega Menu Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel