Tag Widget Show More/Less Plugin
I will explain how to use a different plugin in version 1, similar to the "show more/show less" feature in Blogger tag widget version 2.
You can run this plugin, which we created with CSS3 and HTML5 coding design at the request of one of our followers, without using any jQuery or javascript (without affecting the page load).
The purpose of the plugin is to limit the display of tags that take up too much space and to eliminate display clutter since there are 10 or more tags in the tag widget and the sorted tags take up too much space. Thus, it makes the tag widget more useful.
This plugin is valid for version='1' please do not use this plugin for version='2'. Make a backup of your blog theme before following the steps below.
Follow the steps below to add this plugin to the tag widget in the sidebar (sidebar) of your blog site.
Add the following CSS code one line above the </head> code on the theme editor page of your blog site.
<style>
/*<![CDATA[*/
.label-list{
counter-reset:labellist
}
.label-list__item{
display:block
}
.label-state:not(:checked) ~ .label-list .label-list__item:nth-child(n+7){
counter-increment:labellist;
visibility:hidden;
opacity:0;
height:0;
width:0;
margin:0;
padding:0;
border:0
}
.label-state:not(:checked) ~ .label-list .label-list__item:first-child:nth-last-child(-n+7):last-child,.label-state:not(:checked) ~ .label-list .label-list__item:first-child:nth-last-child(-n+7) ~ .label-list__block:last-child{
display:none
}
.label-state:not(:checked) ~ .label-list .label-button__less{
display:none
}
.label-state,.label-state:not(:checked) ~ .label-list .label-button__less,.label-state:checked ~ .label-list .label-button__more{
display:none
}
.label-button__count:after{
content:counter(labellist)
}
.label-list__item{
padding:10px;
margin:10px 0;
border:1px solid #d5d5d5;
background:#eee
}
.label-button{
display:block;
padding:10px;
border:1px solid #007acc;
background:#09f;
color:#fff;
text-decoration:underline;
cursor:pointer
}
.label-button:hover{
background:#33adff;
text-decoration:none
}
@media (max-width:568px){
.label-state:not(:checked) ~ .label-list .label-list__item:nth-child(n+5){
counter-increment:labellist;
visibility:hidden;
opacity:0;
height:0;
width:0;
margin:0;
padding:0;
border:0
}
.label-state:not(:checked) ~ .label-list .label-list__item:first-child:nth-last-child(-n+5):last-child,.label-state:not(:checked) ~ .label-list .label-list__item:first-child:nth-last-child(-n+5) ~ .label-list__block:last-child{
display:none
}
}
/*]]>*/
</style>Replace the HTML code of the tag widget in the sidebar of your blog site with the following code.
<b:widget id='Label1' locked='true' title='Labels' type='Label' version='1'>
<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'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<input class='label-state' id='label-state' type='checkbox' />
<ul class='label-list'>
<b:loop values='data:labels' var='label'>
<li class='label-list__item'>
<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' 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>
<li class='label-list__btn'>
<label class='label-button' for='label-state'>
<span class='label-button__more'>Show <span class='label-button__count'/> More</span>
<span class='label-button__less'>Show Less</span>
</label>
</li>
</ul>
</b:if>
<b:if cond='data:view.isLayoutMode'>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + 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' 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>
</b:includable>
</b:widget>After changing the widget code, save your theme editor page and check your blog page.
Trick Level
Tricklevel.blogspot.com is a blog where we post blogging tips, blogger plugins, AMP, Templates, SEO, HTML CSS & JavaScript project, new awesome tools.
