Cara Memasang atau Membuat Navigasi Menu Responsive + Dropdown untuk Blogger Tanpa JavaScript.

Posting ini melengkapi tutorial Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger.

Namun, navigasi hidangan berikut ini tanpa JavaScript, murni CSS dan HTML, sehingga ringan, fast loading, dan anti-error. Penampilannya menyerupai berikut ini:

Tampilan Mobile

Tampilan Desktop

Cara Membuat Navigasi Menu Responsive + Dropdown

Berikut ini cara memasangnya di template blog Anda:

1. Tema > Edit HTML
2. Copas instruksi CSS Menu Responsive berikut ini di atas instruksi ]]></b:skin>

#nav {background: #069bd6;margin-bottom: 20px;text-transform:uppercase;font-weight:bold}
#nav ul {margin:0;padding:0;}
#nav li {list-style:none;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;margin:0;padding:0;}
#nav li a {display:block;text-decoration:none;color:white;padding:1em;}
#nav li a:hover {color:white;background:#191919;}
.show-menu {background: #71a4fa;text-decoration: none;color: #fff;text-align: left;padding: 10px 5px;display: none;}
.show-menu b{font-size:30px;}
.show-menu span{margin-right: 1em;float:right;}
#nav input[type=checkbox]{display: none;}
#nav input[type=checkbox]:checked #menus {display: block;}
#nav ul.sub-menus{height:auto;overflow:hidden;width:180px;background:#eee;position:absolute;z-index:99;display:none;}
#nav ul.sub-menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#nav ul.sub-menus a{color:#fff;background:#48d}
#nav ul.sub-menus a:hover{background:#ddd;color:#333}
#nav li:hover ul.sub-menus{display:block}
#nav a.prett{padding:13px}
#nav a.prett::after{content:&quot;&quot;;width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:18px;right:9px}
@media screen and (max-width:768px){
#nav ul {position: static;display: none;}
#nav li {border-bottom: 1px solid #90b3ec;}
#nav ul li, #nav li a {width: 100%;}
#nav li a{display:block;height:auto;line-height:normal;}
#nav li a {text-align:left;}
#nav ul.sub-menus{width:100%;position:static;padding-left:20px}
.show-menu {display:block!important;line-height:30px;}
.show-menu:hover {cursor:pointer;}
label {margin:0!important;}
}

3. Copas instruksi HTML Menu Responsive berikut ini di bawah instruksi </header> atau di bawah instruksi header blog Anda.

<nav id='nav'>
<label class='show-menu' for='show-menu'><b>&#9776;</b> <span>Show Menu</span></label>
<input autocomplete='off' id='show-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='/'>Home</a></li>
    <li><a href='/p/about.html'>About</a></li>
    <li><a href='/p/kontak.html'>Kontak</a></li>
    <li><a href='/p/sitemap.html'>Sitemap</a></li>
    <li><a href='/p/sitemap.html'>Galeri</a></li>
<li><a class='prett' href='#'>Dropdown Menu <span class='arrow'>&#9660;</span></a>
 <ul class='sub-menus'>
 <li><a href='#'>Sub Menu1</a></li>
 <li><a href='#'>Sub Menu2</a></li>
 <li><a href='#'>Sub Menu3</a></li>
 <li><a href='#'>Sub Menu4</a></li>
 <li><a href='#'>Sub Menu5</a></li>
</ul></li>
      <li><a href='#'>Blogging</a></li>
</ul>
</nav>

4. Ganti Tanda Pagar (#) dengan URL Link hidangan yang akan Anda tampilkan.
5. Save!

Fungsi Navigasi Menu:
Navigasi hidangan yaitu elemen blog untuk menampilkan link internal ke halaman statis ataupun halaman label.

Bisa juga berisi link ke posting tertentu atau ke blog lain. Bebas diisi link apa saja, namun sebaiknya berupa halaman statis About, Kontak, Disclaimer, dan Halaman Label untuk menggambarkan konten blog secara keseluruhan.

Untuk mengetahui dan copas link halaman label atau halaman statis, buka saja halaman tersebut dan copy linknya di address kafetaria dan paste di instruksi HTML navigasi hidangan responsive menyerupai di atas.

Itu ia cara menciptakan Navigasi Menu Responsive + Dropdown untuk Blogger Tanpa JavaScript. Sumber instruksi di CSS Menu Maker.

Lihat di CodePen

See the Pen Responsive Menu by Romel Tea (@romeltea) on CodePen.

Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger

BERIKUT ini cara menciptakan navigasi sajian responsive (mobile friendly) dropdown dan multidropdown untuk blog blogger. Serupa dengan posting sebelumnya: cara menciptakan navigasi sajian responsive simple keren.

Penampakan sajian ini di dekstop ibarat pada umumnya sajian navigasi. Penampilan sajian responsivenya, ketika dibuka di mobile devices alias HP, ibarat gambar berikut ini:

Keren 'kan?

Cara Membuat Navigasi Menu Responsive + Dropdown untuk Blogger

1. Template > Edit HTML
2. Copas arahan CSS Menu Responsive berikut ini di atas arahan ]]></b:skin>

/* Responsive Menu Dropdown */
.dropdowns nav, .dropdowns ul, .dropdowns li, .dropdowns a  {margin: 0; padding: 0;}

.dropdowns a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;}

.toggleMenu {
    display:  none;
}
.nav {
    list-style: none;
     *zoom: 1;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
}
.nav a {
    padding: 10px 15px;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    position: relative;
    z-index:100;
}
.nav li li li a {
    z-index:200;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}
.toggleMenu {
    background: #666;
    color: #fff;
}

.nav {
     background:#175e4c;
}

.nav a {
    color:#fff;
}

.nav > li {
    border-top: 1px solid #104336;
}

.nav li li a {
    background: #1d7a62;
    border-top: 1px solid #175e4c;
}

.nav li li li a {
    background:#249578;
    border-top: 1px solid #1d7a62;
}
.dropdowns {
    width: 100%;
    max-width: 960px;
    background: #111;
}

a.toggleMenu {
    padding: 10px 15px;background: #111;
}

.nav ul {
    width: 9em;
}

.nav > li > .parent {
  
}

3. Copas arahan JavaScript Navigasi Menu Responsive + Dropdown untuk Blogger berikut ini di atas arahan </body> atau </head>


<script type="text/javascript">
(function($){
    $.fn.dropdowns = function (options) {
       
        var defaults = {
            toggleWidth: 768
        }
       
        var options = $.extend(defaults, options);
       
        var ww = document.body.clientWidth;
       
        var addParents = function() {
            $(".nav li a").each(function() {
                if ($(this).next().length > 0) {
                    $(this).addClass("parent");
                }
            });
        }
       
        var adjustMenu = function() {
            if (ww < options.toggleWidth) {
                $(".toggleMenu").css("display", "inline-block");
                if (!$(".toggleMenu").hasClass("active")) {
                    $(".nav").hide();
                } else {
                    $(".nav").show();
                }
                $(".nav li").unbind('mouseenter mouseleave');
                $(".nav li a.parent").unbind('click').bind('click', function(e) {
                    // must be attached to anchor element to prevent bubbling
                    e.preventDefault();
                    $(this).parent("li").toggleClass("hover");
                });
            }
            else if (ww >= options.toggleWidth) {
                $(".toggleMenu").css("display", "none");
                $(".nav").show();
                $(".nav li").removeClass("hover");
                $(".nav li a").unbind('click');
                $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
                    // must be attached to li so that mouseleave is not triggered when hover over submenu
                    $(this).toggleClass('hover');
                });
            }
        }
       
        return this.each(function() {
            $(".toggleMenu").click(function(e) {
                e.preventDefault();
                $(this).toggleClass("active");
                $(this).next(".nav").toggle();
                adjustMenu();
            });
            adjustMenu();
            addParents();
            $(window).bind('resize orientationchange', function() {
                ww = document.body.clientWidth;
                adjustMenu();
            });
        });
   
    }
})(jQuery)
</script>
<script>
    $(".dropdowns").dropdowns();
</script>

4. Copas Kode HTML alias nama-nama dan link menunya di bawah arahan epilog </header> atau di atas arahan <div class='main-wrapper'> dan yang serupa dengannya.


<div class='dropdowns'>

<a class='toggleMenu' href='#'>Menu</a>
<ul class='nav'>
  <li><a href='/'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>

    <li class='test'>
        <a href='#'>Dropdown1</a>
        <ul>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>Sandals</a></li>
                    <li><a href='#'>Sneakers</a></li>
                    <li><a href='#'>Wedges</a></li>
                    <li><a href='#'>Heels</a></li>
                    <li><a href='#'>Loafers</a></li>
                    <li><a href='#'>Flats</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>Loafers</a></li>
                    <li><a href='#'>Sneakers</a></li>
                    <li><a href='#'>Formal</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Dropdown2</a>
        <ul>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>T-Shirts</a></li>
                    <li><a href='#'>Dress Shirts</a></li>
                    <li><a href='#'>Tank Tops</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>T-Shirts</a></li>
                    <li><a href='#'>Blouses</a></li>
                    <li><a href='#'>Dress Shirts</a></li>
                    <li><a href='#'>Tunics</a></li>
                    <li><a href='#'>Camisoles</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Pants</a>
        <ul>
            <li>
                <a href='#'>Mens</a>
                <ul>
                    <li><a href='#'>Trousers</a></li>
                    <li><a href='#'>Slacks</a></li>
                    <li><a href='#'>Jeans</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Womens</a>
                <ul>
                    <li><a href='#'>Trousers</a></li>
                    <li><a href='#'>Slacks</a></li>
                    <li><a href='#'>Jeans</a></li>
                    <li><a href='#'>Leggings</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Skirts</a>
        <ul>
            <li>
                <a href='#'>Long</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Short</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
            <li>
                <a href='#'>Mini</a>
                <ul>
                    <li><a href='#'>Denim</a></li>
                    <li><a href='#'>Knits</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Dresses</a>
        <ul>
            <li>
                <a href='#'>Casual</a>
            </li>
            <li>
                <a href='#'>Formal</a>
                <ul>
                    <li><a href='#'>Wedding</a></li>
                    <li><a href='#'>Party</a></li>
                </ul>
            </li>
          
        </ul>
    </li>
    <li>
        <a href='#'>Seks</a>
        <ul>
            <li><a href='#'>Mens</a></li>
            <li><a href='#'>Womens</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>Link</a>
    </li>
</ul>
</div>

Save Template!

NOTES!
Pastikan di template Anda suda link ke arahan jQuery ibarat ini:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

atau

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Jika belum ada, pasang/tambahkan salah satu arahan tersebut di atas  arahan </head>

KHOTIMAH
Kode Navigasi Menu Responsive + Dropdown untuk Blogger di atas dimodifikasi dari sumbernya di Github. Wasalam. (http://blogromeltea.blogspot.com).*
 
Link Sumber Kode: https://github.com/tessalt/dropdowns

Cara Membuat Navigasi Menu Responsive Dropdown di Blog yang Simple tapi Keren Pisan. Penampakannya ibarat gambar di bawah ini --tampilan Desktop dan Mobile (HP).

Navigasi sajian ini cocok pisan dikombinasikan dengan Top Navigasi di atas Header plus Media Sosial. Membuat blog Anda jadi keren dan yummy dipandang.

Cara Membuat Navigasi Menu Responsive Blogger Simple Keren Pisan

1. Kode Javascrip
Simpan isyarat berikut ini di atas isyarat </body> atau <./head>

<script type='text/javascript'>
//<![CDATA[
(function($) {

  $.fn.menumaker = function(options) {
     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) {
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});

});
})(jQuery);
//]]>
</script>


2. Kode CSS
Simpan isyarat berikut ini di atas isyarat ]]></b:skin> atau </style>

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #333333;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}

3. Last Step: Menempatkan Navigasi Menu Responsive
Simpan isyarat HTML/XML berikut ini di atas kode  <div id='content-wrapper'> atau yang ibarat dengannya.

<div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='/p/about.html' itemprop='url'><span itemprop='name'>About</span></a></li>
    <li><a href='/p/kontak.html' itemprop='url'><span itemprop='name'>Kontak</span></a></li>
    <li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
    <li><a href='/p/disclaimer.html' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
    <li><a href='/p/koleksi-kode.html' itemprop='url'><span itemprop='name'>Kode</span></a></li>
    <li><a href='/p/gallery.html' itemprop='url'><span itemprop='name'>Gallery</span></a></li>
   <li class='active'><a href='#'>Dropmenu</a>
      <ul>
         <li><a href='#'>Menu 1</a>
            <ul>
               <li><a href='#'>Sub Menu1</a></li>
               <li><a href='#'>Sub Menu2</a></li>
            </ul>
         </li>
         <li><a href='#'>Sub Submenu 2</a>
            <ul>
               <li><a href='#'>Sub 1</a></li>
               <li><a href='#'>Sub 2</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
<div class='clear'/>

Jika akan dijadikan TOP MENU, ialah ditempatkan di atas Header Blog, maka isyarat ketiga tadi simpan di atas isyarat <div id='header' >

Kode Navigasi Menu Responsive Dropdown untuk Blogger di atas gres satu jenis atau style. Masih ada empat model Navigasi Bar Menu Responsive lainnya di CSS Menu Maker yang menjadi sumber isyarat di atas. Wilujeng! (http://blogromeltea.blogspot.com).*

Cara Membuat Template Blog Sendiri dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap. Responsive 100% dan Fast Loading. Template blogger starter-simple sederhana pisan. Tinggal dipoles di CSS.

Apa Itu Bootstrap?

Sebelum ke teknis cara menciptakan template blogger sendiri dengan bootstrap, kita kenali dulu apa itu bootstrap.

Bootstrap yaitu produk Twitter untuk membangun situs web atau blog berbasis HTML dan CSS.

• Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates.
• Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. (Get Bootstrap)

Menurut Wikipedia, Twitter Bootstrap yaitu sebuah alat bantu untuk menciptakan sebuah tampilan halaman website yang sanggup mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Sesuai namanya, website yang dibentuk dengan alat bantu ini mempunyai tampilan halaman yang sama / menyerupai dengan tampilan halaman Twitter atau desainer juga sanggup mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang sanggup menciptakan layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun memakai JavaScript.  
Template blog yang memakai Bootstrap dijamin Mobile Friendly alias Responsive alasannya orientasi kodenya memang "mobile first".

Cara Membuat Template Blog Sendiri dengan Bootstrap

Berikut ini cara Membuat Template Blog Sendiri dengan Bootstrap yang layak Anda coba. Jika kesannya bagus, sanggup Anda jual tuh templatenya!

Tahapan Membuat Template Blog Sendiri dengan Bootstrap
'
1. Buat Blog Baru di Blogger
2. Klik Template > Edit HTML
3. Hapus SEMUA arahan yang ada, lalu...
4. Copas arahan berikut ini!

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta expr:content='data:blog.metaDescription' name='description'/>

<b:skin><![CDATA[
/*
Name: Nama Template
Author: Nama Desainer
URL: Url Blog Desainer
*/

]]></b:skin> <!-- End Style -->

</head>

<body>
<!-- Header -->

<div class='bs-example'>
<!-- Blog Navigation Start -->
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>
<img alt='Brand' src='Logo kau / atau sanggup diganti dengan goresan pena disini'/>
</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
<li><a href='/?m=1'>Mobile View</a></li>
</ul>
<form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + &quot;search&quot;' role='search'>
<div class='form-group'>
<input class='form-control' name='q' placeholder='Search' type='text'/>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- Blog Navigation End -->

<div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->

<div class='blog-header'> <!-- Blog Header Start -->
<div class='container'>
<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
</div>

<div class='row'>
<div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
</b:section>
</aside> <!-- Blog Sidebar Wrapper End -->
</div> <!-- Blog Row End -->

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'/>

</div> <!-- Blog Content Wrapper End -->

<footer class='blog-footer'> <!-- Blog Footer Start -->
<p>Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.</p>
<p>
<a href='#'>Back to top</a>
</p>
</footer> <!-- Blog Footer End -->

</body> <!-- End Body -->

</HTML>

5. Pasang Bootstrap

5.1 Pasang di atas arahan </head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>

5.2 Pasang arahan berikut ini di atas arahan </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type='text/javascript'/>

6.  Copas arahan berikut ini di atas kode </head>

<style type='text/css'>

/*Navigation*/
.navbar {
    border-radius:0;
}
/*Nav Brand*/
.navbar-brand img {
    width: 32px;
    height: 32px;
}
.navbar-brand {
    padding: 10px 20px;
}
/*Blog Wrapper*/
.blog-header {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: -20px;
}
.blog-main {
    font-size: 18px;
    line-height: 1.5;
}
.blog-sidebar {
    margin:0;
}
/*Headings*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333;
}
/*Posts*/
.post .post-title {
    margin-bottom:0;
}
.post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    font-size:15px;
}
/*Post Image*/
.post table.tr-caption-container td {
    border:none;
    padding:8px;
}
.post table.tr-caption-container, .post table.tr-caption-container img, .post img {
    max-width:100%;
    height:auto;
}
.post td.tr-caption {
    color: #333;
    font-size: 80%;
    padding: 8px 8px 8px !important;
    background-color: #eee;
    font-style: italic;
}
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
table.tr-caption-container {
    padding:4px;
    margin-bottom:.5em
}
td.tr-caption {
    font-size:80%
}
.post table caption {
    border:none;
    font-style:italic;
}
.post table caption {
    border:1px solid #d8dde1;
    padding:.2em .5em;
    text-align:left;
    vertical-align:top;
}
/*Post Footer*/
.post-footer {
    margin:.75em 0;
    letter-spacing:.1em;
    line-height:1.4em;
    font-size: 12px;
}
/*Post Meta*/
.blog-post-meta {
    margin: 10px 0 5px;
    color: #999;
    font-size: 15px;
}
.blog-post-meta a {
    color: #999;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-post-meta a:hover {
    border-bottom: 1px solid #23527c;
}
.timestamp-link {
    cursor:help;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.timestamp-link:hover {
    border-bottom: 1px solid #23527c;
}
/*Breadcrumbs and Date Header Font-size*/
.breadcrumb, .date-header {
    font-size: 13px;
}
/*SideBar*/
.sidebar .widget ul, .sidebar .widget ol {
    margin-top:0
}
.sidebar h2, .sidebar h3, .footer h2 {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    position: relative;
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
/*Popular Posts*/
.popular-posts ul, .popular-posts li {
    margin:0;
    padding:0;
    list-style:none
}
.popular-posts li {
    margin-bottom:.6em
}
.PopularPosts .item-snippet {
    font-size:12px;
    color:#333;
    max-height:45px;
    overflow:hidden;
}
.PopularPosts .item-thumbnail {
    transition: all 0.15s ease-in-out 0s;
    margin:0 8px 0 0;
    display:inline;
    opacity:10;
}
.PopularPosts .item-thumbnail a img {
    height:69px;
    width:69px;
    display:block;
    margin:0;
    padding:2px;
    border:1px solid #e8e8e8 !important;
}
.PopularPosts .item-thumbnail a img:hover {
    background:#00AFAF;
    border:1px solid #00AFAF !important;
}
.PopularPosts .widget-content ul li {
    padding:3px 0px !important;
    border-bottom:1px solid #e2e2e2;
}
/*Footer*/
.blog-footer {
    padding: 40px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
}
.blog-footer a {
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-footer a:hover {
    border-bottom: 1px solid #23527c;
}
/*Comments*/
#comments h4 {
    margin:1em 0;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
}
#comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
}
#comments-block .comment-author {
    margin:.5em 0;
}
#comments-block .comment-body {
    margin:.25em 0 0;
}
#comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
}
#comments-block .comment-body p {
    margin:0 0 .75em;
}
.deleted-comment {
    font-style:italic;
    color:gray;
}
.feed-links {
    display:none;
}
/*Responsive*/

/*Override Bootstrap's default container.*/
@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}
@media screen and (max-width: 960px) {
    .blog-main, .blog-sidebar {
        float: none;
        display: block;
        width: auto;
    }
}
</style>

7. Save Template! 

Beres! Anda tinggal lengkapi dengan widget lainnya, seperti: Memasang arahan Auto Read More semoga tampilan goresan pena halaman depan berupa ringkasan, tidak full artikel, dan Menghapus Teks Subscribe to Atom.

Demikian Membuat Template Blog Sendiri dengan Bootstrap. Saya sudah terapkan. Hasilnya: Bootstap fo Blogger. Mau? Nanti kalo sudah beres 100% dibagikan gratis.

Cek ada dulu yang sudah ada: Koleksi Template Boootsrap Gratis. Wasalam. (blogromeltea.blogspot.com).*

Sumber:
http://www.w3schools.com/bootstrap/default.asp
http://templetedownload.blogspot.com//search?q=cara-membuat-auto-read-more-ringkasan
https://startbootstrap.com/bootstrap-resources/3