How to Add Show All Button in Cloud Label Widget New | Droidnur123

W

elcome to Droidnur tech blog today we will talk about How to Add Show All Button in Cloud Label Widget New.

What is Cloud Label Widget?

As we know, the label widget is one of the important elements in a blog that serves to provide information to visitors to view posts that have been labeled so that visitors can search for posts with any category on the blog.

What is Show All Button in Cloud Label Widget?

Sometimes if we have a blog with many posting labels up to tens to hundreds of course it will be a little disturbing the appearance of the blog. However, this can be overcome by limiting the number of labels to make the blog look neater and minimalist.

In this blogger tips, I will give tips on "How to Add a Show All Button on the Cloud Label Widget, here are the simple steps.

How to Add Show All Button in Cloud Label Widget?

As usual First, open the Blogger dashboard > Then click the Theme menu and click the Edit HTML button next customize > Make sure you have previously added a label widget in your blog layout > Look for this label widget code.

<b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>...</b:widget>

Select And Replace all the above widget code with this widget code

<b:widget id='Label1' 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'>false</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </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'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;'><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'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=10&quot;'><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>
   <a class='btn-more' href='#' title='Show all label'>Show All</a>
  </div>
</b:includable>
    </b:widget>

Next add this css code before </head> tag

<style type='text/css'>
/* CSS Label by droidnur*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left}#Label1 .label-size{display:block;float:left;line-height:1.2;margin:0 5px 5px 0;font-size:13px;font-weight:600;z-index:9;transition:initial}#Label1 .label-size a,#Label1 .label-size span{background:#4e72f8;display:inline-block;color:#fff;border:1px solid #4e72f8;padding:6px 12px;font-weight:600;border-radius:3px;transition:all .3s}#Label1 .label-size a:hover{background:#4667e1;color:#fff;border-color:#4667e1;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#f8f8f8}
#Label1 .label-size:nth-child(n+7){display:none}#Label1.open .label-size:nth-child(n+7){display:block}#Label1 a.btn-more{background:#4e72f8;display:block;color:#fff;border:1px solid #4e72f8;font-weight:600;border-radius:3px;transition:all .3s;float:left;overflow:hidden;line-height:1.2;padding:6px 12px;font-size:13px;margin:0 5px 5px 0}#Label1 a.btn-more:hover{background:#4667e1;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,0.1),0 3px 4px rgba(0,0,0,0.12)}#Label1 .widget-content{max-height:110px;overflow:hidden;overflow-y:visible}
</style>

Please, Pay attention carefully to the marked code, (n + 7) means that only 6 labels will be shown while the 7th label and so on will be hidden and will be displayed all when you click the Show All button.

At last Add this code before </body> Tag

<script type='text/javascript'>
//<![CDATA[
// Show all label
$("#Label1 .btn-more").on("click",function(e){e.preventDefault(),$(this).closest("#Label1").toggleClass("open")});
//]]>
</script>

When all process is done then click the Save theme button and you are done. For examples of the results can be seen on this blog in the sidebar.

That's all from Droidnur123, thank you for visiting visit again.

Go to Link