Etiket Widget'ı Daha Fazla/Daha Az Göster Eklentisi

Etiket Widget'i Daha Fazla/Daha Az Göster Eklentisi - Blogger etiket widget'ı versiyon 2'de bulunan "daha fazla göster/daha az göster" özelliğini benzer şekilde farklı bir eklentinin versiyon 1'de nasıl kullanılacağını anlatacağım.

Bir takipçimizin isteği üzerine CSS3 ve HTML5 kodlama tasarımıyla oluşturduğumuz bu eklentiyi, (sayfa yüklenmesini etkilemeden) herhangi bir jQuery veya javasctipt kullanmadan çalıştırabilirsiniz.

Eklentinin amacı, etiket widget'ında 10 veya fazla etiket olması ve sıralanan etiketlerin çok fazla yer kaplamasından dolayı, çok fazla yer kaplayan etiketlerin görüntülenmesini sınırlandırmak ve görüntü kirliğini ortadan kaldırmaktır. Böylece, etiket widget'ının daha kullanışlı hale gelmesini sağlar.

Bu eklenti version='1' için geçerlidir, lütfen version='2' için bu eklentiyi kullanmayınız. Aşağıdaki adımları uygulamadan önce blog temanızın yedeğini alın.

Ön İzleme

Blog sitenizin kenar çubuğunda bulunan (sidebar) etiket widget'ına bu eklentiyi eklemek için aşağıdaki adımları takip edin.

Aşağıdaki CSS kodunu blog sitenizin tema editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.

CSS

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

Blog sitenizin kenar çubuğunda bulunan (sidebar) etiket widget'ı HTML kodunu aşağıdaki kod ile değiştirin.

Etiket Widget'ı (version='1')

<b:widget id='Label1' locked='true' title='Etiketler' 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 != &quot;&quot;'>
            <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;'>
                <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='&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' 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>

Widget kodunu değiştirdikten sonra tema editör sayfanızı kaydedin ve blog sayfanızı kontrol edin.