Skip to main content
Home Blogger Tutorial Cara Setting Kategori Multy Dropdown di Template simpleBlibli Blogger versi 1.7.1

Cara Setting Kategori Multy Dropdown di Template simpleBlibli Blogger versi 1.7.1

Cara Setting Kategori Multy Dropdown di Template simpleBlibli Blogger versi 1.7.1

www.azid45.web.id - Cara Setting Kategori Multy Dropdown di Template simpleBlibli Blogger versi 1.7.1. Udah lama saya tidak update efek fokus ke jasa pembuatan template toko online. Pada kesempatan kali ini saya akan share cara membuat kategori multy dropdown di template simpleBli Blogger.

Template ini sendiri sudah update ke versi 1.7.1 dan pada bulan ini akan diupdate salah satunya adalah mengubah kategori otomatis menggunakan label dengan kategori manual dan dapat bisa multy dropdown. Kategori ini bisa disetting di menu tata letak, jadi mudah untuk di edit pagi pemula.

Baiklah, bila Anda pengguna template simpleBli Blogger versi 1.7.1 bisa update manual dengan mengikuti cara berikut ini:

Pertama, login blogger

Kedua, menuju menu tema dan pilih edit HTML

Ketiga, cari kode CSS /*Kategori*/, bila udah ketemu hapus semua kode CSS dibawah tanda tersebut hingga akhir batas kemudian ganti dengan kode CSS dibawah ini 

/*Kategori*/
.kategori-dropdown{margin-right:15px}
#kategori-content-dropdown .PageList,#kategori-content-dropdown .PageList .widget-title,#kategori-content-dropdown .buka,.tombol-kategori{display:none}
#kategori-content-dropdown .buka{position:absolute;background:$(kategoridropdown.bg);padding:10px;margin:0;max-height:300px;overflow:hidden;overflow-y:auto;box-shadow:0px 3px 4px 0px rgba(0,0,0,0.1)}
#kategori-content-dropdown .Label,#kategori-content-dropdown .PageList{float:left}
#kategori-content-dropdown .Label .widget-title{position:relative;margin:0 10px;padding:0}
#kategori-content-dropdown .Label .widget-title h3.title{color:$(kategori.color);font-size:16px;font-weight:500;margin-left:25px}
#kategori-content-dropdown .Label .widget-title svg{position:absolute;width:20px;height:20px;vertical-align:middle;margin-top:2px}
#kategori-content-dropdown .Label .widget-title path{fill:#fff;}
#kategori-content-dropdown .Label ul li{list-style:none;padding:0;margin:0;border:0;display:block}
#kategori-content-dropdown .Label ul li a{color:$(kategoridropdown.color);font-size:14px;padding:5px 8px;display:block}
#kategori-content-dropdown .PageList ul{padding:10px 0;margin:0 8px}
#kategori-content-dropdown .PageList ul li{list-style:none;padding:0;margin:0;border:0;display:inline-block}
#kategori-content-dropdown .PageList ul li a{color:$(kategori.color);font-size:14px;padding:5px 8px;display:inline-block}
#kategori-content-dropdown .Label ul li.has-sub{padding-right:30px}
#kategori-content-dropdown .Label ul li.has-sub span.submenu-button{position:absolute;z-index:99;right:0;cursor:pointer}
#kategori-content-dropdown .Label ul li.has-sub span.submenu-button:after{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%232f303f'/%3E%3C/svg%3E") no-repeat center center;position:absolute;top:0;right:0;margin:7px 15px 14px;width:20px;height:20px;display:inline-block;vertical-align:middle;margin-left:15px;transition:all .3s ease}
#kategori-content-dropdown .Label ul li.has-sub span.submenu-button.submenu-opened:after{transform:rotate(180deg);}
#kategori-content-dropdown .Label ul li ul{margin:0;padding-left:5px;display:none}
@media only screen and (max-width:899px){
#kategori-content-dropdown .PageList{display:block;}
#kategori-content-dropdown .buka-kategori:after{top:0;right:5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23444'/%3E%3C/svg%3E") no-repeat center center}
#kategori-content-dropdown .Label,#kategori-content-dropdown .PageList{float:none}
#kategori-content-dropdown .buka{position:relative;background:$(kategorimobile.bg);padding:0;margin:0;max-height:none;overflow:hidden;overflow-y:visible;box-shadow:none;display:block!important}
#kategori-content-dropdown .Label .widget-title h3.title{color:$(kategorimobile.color);font-size:16px;font-weight:600}
#kategori-content-dropdown .Label .widget-title,#kategori-content-dropdown .Label ul li a,#kategori-content-dropdown .PageList ul li a{display:inline-block;padding:10px;font-size:14px;font-size:.875rem;text-align:left;margin:0;margin-bottom:10px;width:90%;color:#383f4a;border-radius:5px;-webkit-box-shadow:0 0 24px -4px rgba(0,0,0,.12);box-shadow:0 0 24px -4px rgba(0,0,0,.12)}
#kategori-content-dropdown .Label .widget-title svg path{fill:#444444;}
#kategori-content-dropdown .widget-title h3.title{padding:0;margin:0;}
#kategori-content-dropdown{background:#fff;padding:5px 22px 22px;overflow-y:auto;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}
#kategori-content-dropdown .Label ul li.has-sub{padding-right:0}
#kategori-content-dropdown .Label ul li.has-sub span.submenu-button:after{margin:12px 15px 14px}
#kategori-content-dropdown .PageList ul{padding:0;margin:0}
#kategori-content-dropdown .PageList ul li{display:block}
.kategori-dropdown.active{-webkit-transform:translateX(0);transform:translateX(0)}
.kategori-dropdown{position:fixed;width:100%;max-width:300px;z-index:99;height:100%;height:100vh;top:0;left:0;margin-right:0;-webkit-transform:translateX(-101%);transform:translateX(-101%);-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}
#kategori-content-dropdown .buka-kategori:after{margin:10px 0;}
#kategori-content-dropdown ul{margin:0;padding:0}
#kategori-content-dropdown ul li{list-style:none;display:block;font-weight:400;text-transform:none;font-size:14px;font-size:.875rem}
.tombol-kategori{display:block;padding:0 10px;overflow: hidden;position:relative;background:$(kategorimobile.bg);text-align:right;}
.closebtn{display:block;position:relative;padding:10px;height:20px;}
.button{position:relative;width:10px;height:20px;margin-left:15px;order:4;cursor:pointer;z-index:2;outline:0}
span.mline1,span.mline2,span.mline3{position:absolute;left:0;display:block;height:5px;width:5px;background:$(kategorimobile.tombol);content:'';border-radius:5px;transition:all .2s}
span.mline1{top:0}span.mline2{top:7px}span.mline3{top:14px}
}

Keempat, cari widget Label1 nanti akan tampil kurang lebih seperti dibawah ini

<b:widget id='Label1' locked='true' title='Kategori' type='Label' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
        <b:widget-setting name='display'>LIST</b:widget-setting>
        <b:widget-setting name='selectedLabelsList'/>
        <b:widget-setting name='showType'>ALL</b:widget-setting>
        <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>
                <div class='widget-title'>
                  <a class='buka-kategori' href='javascript:;'><svg viewBox='0 0 24 24'>
    <path d='M3 11H11V3H3M5 5H9V9H5M13 21H21V13H13M15 15H19V19H15M3 21H11V13H3M5 15H9V19H5M13 3V11H21V3M19 9H15V5H19Z' fill='currentColor'/>
</svg><b:include name='widget-title'/></a>
                </div>
                <b:include name='content'/>
            </b:includable>
      <b:includable id='cloud'>
                <b:loop values='data:labels' var='label'>
                    <span class='label-size'>
                        <b:class expr:name='&quot;label-size-&quot; + data:label.cssSize'/>
                        <a class='label-name' expr:href='data:label.url'>
                            <data:label.name/>
                            <b:if cond='data:this.showFreqNumbers'>
                                <span class='label-count'>(<data:label.count/>)</span>
                            </b:if>
                        </a>
                    </span>
                </b:loop>
            </b:includable>
      <b:includable id='content'>
                <div class='widget-content'>
                    <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
                    <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
                    <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
                </div>
            </b:includable>
      <b:includable id='list'>
                <ul class='buka'>
                    <b:loop values='data:labels' var='label'>
                        <li>
                            <a class='label-name' expr:href='data:label.url'>
                                <data:label.name/>
                                <b:if cond='data:this.showFreqNumbers'>
                                <span class='label-count'>(<data:label.count/>)</span>
                                </b:if>
                            </a>
                        </li>
                    </b:loop>
                </ul>
            </b:includable>
    </b:widget>

bila udah ketemu, ganti kode widget tersebut dengan kode dibawah ini

<b:widget id='HTML111' locked='true' title='Kategori' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'>&lt;li&gt;
&lt;a href=&#39;javascript:;&#39; title=&#39;Dropdown&#39;&gt;Dropdown 1&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;#&#39; title=&#39;Multi Dropdown 1&#39;&gt;Multi Dropdown 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39; title=&#39;Multi Dropdown 2&#39;&gt;Multi Dropdown 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39; title=&#39;Multi Dropdown 3&#39;&gt;Multi Dropdown 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39; title=&#39;Multi Dropdown 4&#39;&gt;Multi Dropdown 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://eksperiment-jualan.blogspot.com/search/label/Artikel&#39;&gt;Artikel&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://eksperiment-jualan.blogspot.com/search/label/Elektronik&#39;&gt;Elektronik&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href=&#39;#&#39; title=&#39;Dropdown&#39;&gt;Dropdown 2&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;#&#39; title=&#39;Multi Dropdown 2&#39;&gt;Multi Dropdown 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39; title=&#39;Multi Dropdown 2&#39;&gt;Multi Dropdown 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://eksperiment-jualan.blogspot.com/search/label/Flasdisk&#39;&gt;Flasdisk&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://eksperiment-jualan.blogspot.com/search/label/Pakaian&#39;&gt;Pakaian&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://eksperiment-jualan.blogspot.com/search/label/Promo&#39;&gt;Promo&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://eksperiment-jualan.blogspot.com/search/label/Smartphone&#39;&gt;Smartphone&lt;/a&gt;&lt;/li&gt;</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
                <div class='widget-content Label' id='cssmenu'>
                  <div class='widget-title'>
                  <a class='buka-kategori' href='javascript:;'>
                  <svg viewbox='0 0 24 24'><path d='M3 11H11V3H3M5 5H9V9H5M13 21H21V13H13M15 15H19V19H15M3 21H11V13H3M5 15H9V19H5M13 3V11H21V3M19 9H15V5H19Z' fill='currentColor'/></svg><b:include name='widget-title'/></a>
                  </div>
                <ul class='buka'>
                <data:content/>
                    </ul>
                </div>
            </b:includable>
    </b:widget>

Kelima, cari kode 'bliblijavascripts' bila udah ketemu masukkan kode script berikut tepat dibawah bliblijavascripts

<script>
  //<![CDATA[
  !function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
  //]]>
</script>

Keenam, Save Template

Bagaimana mudah bukan. Demikianlah Tutorial  Cara Setting Kategori Multy Dropdown di Template simpleBlibli Blogger versi 1.7.1. Semoga bermanfaat. Amin

author-photo Blogger Tutorial

PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
Close Disqus