Бутон „Покажи всички“ в притурката за етикети

Здравейте, приятели. Радвам се, че отново сме заедно след горещото, но прекрасно лято.
Както знаем, притурката „Етикети“ е един от важните елементи в блога, който служи за предоставяне на информация на посетителите. Когато се виждат всички публикации с даден етикет, посетителите могат да търсят необходимата им във всяка категория в блога. Но когато в блога си имаме много на брой етикети, от десетки до стотици, това ще пречи на зареждането на блога. Това може да бъде преодоляно. Как? Чрез ограничаване броя на показващите се етикети, с което външният вид на блога ще изглежда по-представителен и минималистичен.
В тази публикация ще дам съвети как да добавите бутона „Покажи всички“ („Show Аll“) в притурката етикети – облак.

➤Отворете таблото за управление на Blogger;

➤Щракнете върху Тема и изберете Редактиране на HTML кода;

➤Уверете се, че сте добавили притурката за етикет в оформлението на блога;

или потърсете този ред в кода на темата:

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

➤Ако не откривате притурката "Етикети", добавете я;

➤Редактирайте съдържанието на притурката така:

➤Заменете кода по-горе с този:

<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>

➤След това добавете този CSS код преди </ head;

<style type='text/css'>

/* CSS Label */

.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>

Участъкът (n + 7) означава, че ще бъдат показани само 6 етикета, докато 7-ия етикет и другите нататък ще бъдат скрити. Те ще се показват, когато щракнете върху бутона 'Show all“ -  „Покажи всички“

➤Добавете този код преди </ body;

<script type='text/javascript'>

//<![CDATA[

// Show all label

$("#Label1 .btn-more").on("click",function(e){e.preventDefault(),$(this).closest("#Label1").toggleClass("open")});

//]]>

</script>

➤Сега щракнете върху бутона за запазване на темата;

Пример за резултатите вижте в този блог, в секцията на страничната лента. Не се виждат всички етикети.

За въпроси, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!