Skip to main content
Azid Blogger

follow us

Menambahkan Widget Label Pada Slide Sidebar Vertikal Pada Blog Non AMP

Menambahkan Widget Label Pada Slide Sidebar Vertikal Pada Blog Non AMP

www.azid.web.id - Menambahkan Widget Label Pada Slide Sidebar Vertikal Pada Blog Non AMP. Sebelumnya saya sudah pernah share tutorial terkait membuat menu navigasi vertikal seperti AMP Sidebar yang saya modif dari kode template kompi flexible versi 8, dan untuk kali ini saya modif lagi agar bisa tampil kategori pada menu slide sidebar tersebut seperti yang pernah di share oleh kang Adhy Suryadi tentang menambahkan widget label pada amp-sidebar.

Dari tutorial yang disampaikan kompiajaib tersebut tentunya untuk blog AMP, lantas apakah cara tersebut bisa digunakan untuk blog Non AMP?, dari eskperimen yang saya lakukan ternyata langkah-langkah yang ada pada tutorial kompiajaib bisa digunakan pula pada blog Non AMP yang tentunya perlu menghapus kode, menambah kode, dan memodifikasi kode agar tampilannya tidak berantakan. Eksperimen yang saya buat agar mirip dengan AMP-Sidebar plus terdapat widget label saya tidak menggunakan kode slide sidebar untuk Blog Non AMP yang sudah pernah di share oleh kang Adhy Suryadi melainkan memodifikasi kode navigasi yang digunakan pada template kompi flexible versi 8.

Baiklah jika sobat tertarik dengan tutorialnya sobat bisa simak langkah-langkahnya dibawah ini, akan tetapi jika template sobat AMP sobat bisa melihat tutorialnya di kompiajaib.com

Pertama, menuju menu edit HTML. Jika sudah sobat bisa cari kode </head> , jika sudah ketemu copas kode berikut ini dan letakkan diatas kode </head>

<style>
/* Main Menu */
.logo-sidebar{width:60%;height:auto;text-align:center;margin:50px auto 0}
.roboto{font-family:Roboto,sans-serif!important;font-weight:500!important;}
.topnav {background-image:linear-gradient(to right, #fff 0%, #fff 100%)}
.icon_menu svg path{fill:#333}
.topnav a{color:#333}
.dropdown .dropbtn,.topnav a,.dropdown-content a{font-size:16px;font-weight:500;padding:0 16px;height:57px;line-height:57px}
.topnav{overflow:hidden;display:block;}
.topnav a{display:block;text-align:center;text-decoration:none}
.activr{background-color:#20aadb;color:#161c1e}
.icon_menu,.topnav a.closebtn{display:none}
.dropdown{float:left;overflow:hidden}
section:not([expanded]) .show-less,section[expanded] .show-more,#Label2 h6{display:none}
#Label2{margin:0;padding:0 20px}
#Label2 .label-size{position:relative;margin-bottom:5px;padding:0 50px 0 10px;background:rgba(255,255,255,.2);border-radius:3px;text-align:left;display:block;transition:all .4s ease-in-out;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
#Label2 .label-size a,#Label1 .label-size span{text-decoration:none;color:#fff;font-weight:500;font-size:16px;padding:6px 0;display:block;}
#Label2 .label-size span.label-count{position:absolute;top:0;right:10px;padding:6px 0;transition:all .4s ease-in-out;}
#Label2 .label-size:hover{background:#262626;}
.dropdown .dropbtn{border:none;outline:0;color:#333;background-color:inherit;font-family:inherit;margin:0;padding:0 6px 0 16px;cursor:pointer;position:relative;z-index:1}
.dropdown-content{display:none;position:absolute;background-color:#fff;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:2}
.dropdown-content a{float:none;color:#000;text-decoration:none;display:block;text-align:left;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap;height:35px;line-height:35px}
.dropdown-content li.drop{margin:0;list-style:none;padding:0}
.dropdown-content li.drop section{margin:0;padding:0;background-color:#04549d!important;color:#fff}
.dropdown-content li.drop section:hover{background-color:#333;color:#fff}
.dropdown-content h5 svg{width:20px;height:20px;vertical-align:middle;float:right;margin-right:20px}
.dropdown-content h5 svg path{fill:#efefef}
.dropbtn.active~.dropdown-content{display:block}
#menuoverlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:999;cursor:pointer}
.dropbtn .fa{float:right;margin-left:2px;margin-top:12px;position:relative;z-index:-1}
.dropbtn.active .fa path{fill:#000}
.dropbtn.active{position:relative;z-index:1}
.outclick{display:none}
.dropbtn.active~.outclick{content:&quot;&quot;;background:transparent;cursor:pointer;width:100%;height:40px;position:relative;margin-top:-40px;z-index:2;display:block}
.topnav{position:fixed;top:0}
.icon_menu{position:absolute;top:0}
.topnav .dropdown,.topnav a{float:none!important}
.topnav{height:100%;width:300px;z-index:9999;right:-300%;overflow-x:hidden;transition:.5s}
.icon_menu{height:57px;line-height:60px;right:10px;display:block}
.icon_menu svg{width:35px;height:35px;vertical-align:-11px}
.topnav a.closebtn{position:absolute;display:block;top:0;left:0;font-size:32px;font-weight:lighter;height:57px;
line-height:57px;padding:0 12px}
.topnav a{text-align:left}
.topnav .dropdown-content{position:relative}
.topnav .dropdown .dropbtn{width:100%;text-align:left}
.flow{overflow:hidden;position:relative;}
.follow_sidebar{line-height:normal;letter-spacing:normal;text-transform:uppercase;font-weight:700;color:#333;font-size:.94rem;padding-top:1.5rem;display:block;text-align: center;}
.start-social-follow{margin:.5rem 0 1rem;-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;display:block;text-align: center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0}
.start-social-follow li{display:inline-block;margin-right:0;padding:0}
.p1{padding:.5rem}
.inline-block{display:inline-block}
svg:not(:root){overflow:hidden}
.start-icon,.start-sidebar .start-icon{fill:#333}
.mobile-up{display:none;visibility:hidden}
@media screen and (max-width:800px){.mobile-up{display:block;visibility:visible}
.desktop-up{display:none;visibility:hidden}}
</style>

Kedua, cari kode </header>, jika sudah ketemu letakkan kode berikut ini tepat dibawah kode </header>


<div class='topnav' id='myTopnav'>
<div class='logo-sidebar'>
<img alt='MAS TRIGUS' height='37' layout='responsive' noloading='' src='https://cdn.staticaly.com/img/cdn.staticaly.com/img/2.bp.blogspot.com/-9TRzG-WPxX4/XMVkGob878I/AAAAAAAAAS0/o-JFF7oQ4R4wKiXpFBeg9a-c3BrehbgMQCLcBGAs/s320/logo-slide.png' width='154'/></div>
<div class='dropdown mobile-up'>
<button class='dropbtn'>Support
      <svg class='fa' height='24px' viewBox='0 0 24 24' width='24px'><path d='M7,10L12,15L17,10H7Z' fill='#f2f2f2'/></svg>
</button>
<div class='outclick'/>
<div class='dropdown-content'>
<a class='mobile-up' href='/p/about.html' title='About'>About</a>
<a class='mobile-up' href='/p/contact.html' title='Contact'>Contact</a>
<a class='mobile-up' href='/p/sitemap.html' title='Sitemap'>Sitemap</a>
<a class='mobile-up' href='/p/privasy-policy.html' title='Privacy'>Privacy</a>
<a class='mobile-up' href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a>
</div>
</div>
<a href='#news'>News</a>
<a href='#tutorial'>Tutorial</a>
<div class='dropdown'>
<button class='dropbtn'>Dropdown
      <svg class='fa' height='24px' viewBox='0 0 24 24' width='24px'><path d='M7,10L12,15L17,10H7Z' fill='#f2f2f2'/></svg>
</button>
<div class='outclick'/>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
<div class='dropdown'>
<button class='dropbtn'>Kategori
      <svg class='fa' height='24px' viewBox='0 0 24 24' width='24px'><path d='M7,10L12,15L17,10H7Z' fill='#f2f2f2'/></svg>
</button>
<div class='outclick'/>
<div class='dropdown-content'>
      <li class='drop'>
        <section>
<b:section class='sidebarmenu' id='sidebarmenu' preferred='yes'>
  <b:widget id='Label2' locked='false' title='Labels' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>CLOUD</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h6/>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection' expr:title='data:label.name'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.name'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection' expr:title='data:label.name'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' expr:title='data:label.name'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if><div class='clear'/>
        </div>
</b:includable>
  </b:widget>
</b:section>
</section>
  </li>
</div>
</div>
<h3 class='follow_sidebar'>follow us</h3>
<ul class='start-social-follow list-reset flex justify-around items-center img-center flex-wrap m0 mb4'>
<li>
<a aria-label='Link to AMP HTML Facebook' class='inline-block p1' href='https://www.facebook.com/xxxxx/' rel='nofollow noopener' target='_blank'><svg height='23.6' viewbox='0 0 56 55' width='24' xmlns='http://www.w3.org/2000/svg'><title>Facebook</title><path class='start-icon start-icon-fb' d='M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43'/></svg></a>
</li>
<li>
<a aria-label='Link to AMP HTML Instagram' class='inline-block p1' href='https://www.instagram.com/xxxxx/' rel='nofollow noopener' target='_blank'><svg height='24' viewbox='0 0 54 54' width='24' xmlns='http://www.w3.org/2000/svg'><title>instagram</title><path class='start-icon start-icon-instagram' d='M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z'/></svg></a>
</li>
<li>
<a aria-label='Link to AMP HTML Twitter' class='inline-block p1' href='https://twitter.com/xxxxx' rel='nofollow noopener' target='_blank'><svg height='22.2' viewbox='0 0 53 49' width='24' xmlns='http://www.w3.org/2000/svg'><title>Twitter</title><path class='start-icon start-icon-twitter' d='M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6'/></svg></a>
</li>
</ul>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav();menuoverlayOff();removeClassBody()'><svg viewBox='0 0 24 24' width='20'><path d='M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z' fill='#333'/></svg></a>
</div>
<div id='menuoverlay' onclick='closeNav();menuoverlayOff();removeClassBody();'/>
<a class='icon_menu' href='javascript:void(0);' onclick='openNav();menuoverlayOn();addClassBody();' title='Menu'>
<svg height='25px' viewBox='0 0 25 25' width='25px'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='#333'/></svg>
</a>

KETERANGAN:
Bisa jadi pada setiap struktur template berbeda beda, lihat pada kode bawah sendiri yang saya bold. Jika penempatannya berantakan sobat bisa memindahkan kode tersebut di dalam kode <header> atau lainnya. Intinya sobat harus kreatif, dan jeli untuk meletakkan kode tersebut agar tampil sesuai yang diinginkan.

Ketiga, cari kode </body>, jika sudah ketemu letakkan kode berikut ini diatas kode </body>

<script>
//<![CDATA[
function openNav(){document.getElementById("myTopnav").style.right="0"}function closeNav(){document.getElementById("myTopnav").style.right="-300px"}function menuoverlayOn(){document.getElementById("menuoverlay").style.display="block"}function menuoverlayOff(){document.getElementById("menuoverlay").style.display="none"}function addClassBody(){var e,t,n;e=document.body,t="flow",n=e.className.split(" "),-1==n.indexOf(t)&&(e.className+=" "+t)}function removeClassBody(){var e=document.body;e.className=e.className.replace(/\bflow\b/g,"")}for(var btns=document.getElementsByClassName("dropbtn"),i=0;i<btns.length;i++)btns[i].addEventListener("click",function(){var e=document.getElementsByClassName("active");e.length>0&&(e[0].className=e[0].className.replace(" active","")),this.className+=" active"});window.onclick=function(e){if(!e.target.matches(".dropbtn")){var t,n=document.getElementsByClassName("dropbtn");for(t=0;t<n.length;t++){var a=n[t];a.classList.contains("active")&&a.classList.remove("active")}}};
//]]>
</script>

Terakhir, Save Template sobat.

Untuk melihat demonya, sobat bisa melihat gambar thumbnail diatas postingan, maaf tidak bisa menampilkan demonya secara langsung dikarenakan kebatasan saya untuk membuat demo dengan hosting eksternal.

Sobat bisa mengubah warnah sesuai keinginan sobat, semoga berhasil.

Update: 

Jika slide sidebar sobat terlalu banyak navigasi maka sobat tidak akan bisa scroll ke bawah. Hal ini diakibatkan karena scroll telah di hidden dengan kode css. Untuk menampilkannya sobat bisa mengganti kode ".topnav{overflow:hidden;display:block}" dengan ".topnav{overflow-y:auto;display:block}".
PERHATIAN! File di Azid Blogger di redirect kurang lebih 5-7 kali oleh karena itu sobat harap bersabar untuk mendapatkan filenya.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar