Blogger için bir geliştirilen açılır etiket listesi widget'ının güncellenmiş halidir. Bu revizyon daha sade ama modern bir tasarıma, temiz koda ve yeni seçeneklere sahip.
Kurulum
Blogger yönetim paneli > Temalar > Özelleştir > gelişmiş seçenekler > CSS Ekle bölümüne gidiyoruz. Bu bölüme aşağıdaki kodu yapıştıracağız:
/*!
* Tlist v2.0
* Copyright 2020 zkreations
* Daniel Abel M. (fb.com/danieI.abel)
* Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
*/
/*! Core (Değişiklik yapmayın) {{*/
.tlist {
position: relative;
width: 100%;
z-index: 5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tlist-content {
overflow-y: auto;
}
.tlist-content::-webkit-scrollbar {width: 4px;}
.tlist-content::-webkit-scrollbar-track {background-color: transparent;}
.tlist-content::-webkit-scrollbar-thumb {
background-color: #CFD8DC;
border-radius: 10px;
}
.tlist-btn {cursor: pointer;}
.tlist > input {display: none;}
.tlist > input:checked ~ .tlist-dropdown {
display: block;
}
@-webkit-keyframes tlist-dropdown {
from {-webkit-transform: translateY(-1rem);transform: translateY(-1rem);opacity: 0}
to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}
}
@keyframes tlist-dropdown {
from {-webkit-transform: translateY(-1rem);transform: translateY(-1rem);opacity: 0}
to {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1}
}
.tlist-dropdown {
position: absolute;
width: 100%;
left: 0;
top: calc(100% + 4px);
display: none;
background: var(--tlist-bg);
-webkit-animation: tlist-dropdown .3s ease-in-out;
animation: tlist-dropdown .3s ease-in-out;
-webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))
drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))
drop-shadow(0 3px 5px rgba(0, 0, 0, 0.15));
}
.tlist-dropdown::before {
content: "";
border-right: 12px solid transparent;
border-left: 12px solid transparent;
border-bottom: 12px solid var(--tlist-bg);
position: absolute;
top: -10px;
left: calc(50% - 5px);
}
.tlist-btn,
.tlist-link {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.tlist-num {margin-left: auto;}
.tlist-link:not(:last-child) {margin-bottom: 4px;}
.tlist-link > i {
text-align: center;
width: 1.25em;
}
/*}} Core sonu {{*/
/*! Özelleştirme */
/* Yapı
-----------------------------------------*/
.tlist {
--tlist-bg: #fff; /* color de fondo */
}
.tlist-content {
max-height: 390px; /* alto maximo */
}
.tlist-dropdown {
padding: 10px; /* relleno */
border-radius: 5px; /* borde redondo */
}
/* Liste
-----------------------------------------*/
.tlist-link {
padding: 12px 14px; /* relleno */
color: #5a6370; /* color */
font-size: 14px; /* tamaño de texto */
font-weight: 500; /* densidad del texto */
}
.tlist-link:hover,
.tlist-link.is-here {
background: #f4f5f7; /* color de fondo */
border-radius: 5px; /* borde redondo */
color: #1c2333; /* color (hover) */
}
/* Simge
-----------------------------------------*/
.tlist-link > i {
font-size: 20px; /* tamaño de texto */
margin-right: 12px; /* separacion derecha */
color: #9fa6b2; /* color */
}
/* Sayı
-----------------------------------------*/
.tlist-num {
background: rgba(38, 50, 56, 0.05); /* color de fondo */
padding: 2px 12px; /* relleno */
font-size: 12px; /* tamaño de texto */
border-radius: 10px; /* borde redondo */
}
/* Buton
-----------------------------------------*/
.tlist-btn {
padding: 14px 18px; /* relleno */
background: #f4f5f7; /* color de fondo */
font-weight: 500; /* densidad del texto */
color: #5a6370; /* color */
border-radius: 5px; /* borde redondo */
}
.tlist-btn:hover {
color: #1c2333; /* color (hover) */
}
Değişiklikleri kaydetmek için "Uygula" düğmesine basın. Şimdi Temalar > html düzenle'ye gidin ve <b:section id='sidebar'> veya herhangi bir bölüm etiketini bulun, hemen altına aşağıdaki kodu yapıştırın:
<b:widget id='Label50' title='Etiquetas desplegables' type='Label'>
<b:includable id='main'>
<b:include expr:name='data:widgets ? "widget-title" : "title"'/>
<b:include name='content'/>
</b:includable>
<b:includable id='title'>
<b:tag name="h2" class='widget-title'>
<span class='widget-name'><data:title/></span>
</b:tag>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:with value='data:widget.instanceId' var='id'>
<div class='tlist'>
<b:include name='btn'/>
<div class='tlist-dropdown'>
<b:include name='list'/>
</div>
</div>
<b:include cond='!data:widgets' name='layout2fix'/>
</b:with>
</div><!-- .widget-content -->
</b:includable>
<b:includable id='btn'>
<input expr:id='"tlist-" + data:id' type='checkbox'/>
<label class='tlist-btn' expr:for='"tlist-" + data:id'>Seleccionar</label>
</b:includable>
<b:includable id='list'>
<div class='tlist-content'>
<b:loop values='data:labels' var='i'>
<a class='tlist-link' expr:href='data:i.url'>
<b:class cond='data:view.url == data:i.url' name='is-here'/>
<b:include name='icons'/><data:i.name/>
<b:include cond='data:showFreqNumbers' name='numbers'/>
</a>
</b:loop>
</div>
</b:includable>
<b:includable id='numbers'>
<span class='tlist-num'><data:i.count/></span>
</b:includable>
<b:includable id='layout2fix'>
<style>#<data:id/>{z-index: 2}</style>
</b:includable>
<b:includable id='icons'>
<b:switch var='data:i.name'>
<b:case value='Astronomia'/>
<i class="fas fa-meteor"></i>
<b:default/>
<i class="fas fa-tag"></i>
</b:switch>
</b:includable>
</b:widget>
Kaydet ve widget'ı varsayılan seçenekler ile yüklediniz.
Özelleştir
Blogger Şablon Tasarımcısı'ndan görünümü düzenlemek için bir kılavuz olarak kullanabileceğiniz css kodunda yorumlar bıraktım. Bazı ek seçenekleri değiştirmek de mümkün.
Simgeler
Varsayılan olarak liste boyunca bir etiket simgesi görüntülenecektir. Her etiketin kendi özel simgesine sahip olmasını istiyorsanız aşağıdaki kodu arayın:
<b:switch var='data:i.name'>
<b:case value='Astronomia'/>
<i class="fas fa-meteor"></i>
<b:default/>
<i class="fas fa-tag"></i>
</b:switch>
Örneğin, etiketin tam adını içeren bir <b:case> modülü ve altına bir Font Awesome simgesi eklemeniz yeterlidir:
<b:switch var='data:i.name'>
<!-- Icono para la etiqueta Astronomia -->
<b:case value='Astronomia'/>
<i class="fas fa-meteor"></i>
<!-- Icono para la etiqueta Salud -->
<b:case value='Salud'/>
<i class="far fa-heart"></i>
<b:default/>
<i class="fas fa-tag"></i>
</b:switch>
Bu örneği izleyerek istediğiniz kadar etiket ekleyebilirsiniz. Etiketler için tüm simgeleri devre dışı bırakmak istiyorsanız, aşağıdaki kodu bulun ve silin:
<b:include name='icons'/>
Miktarlar
Etiket başına giriş sayısını gösteren sayıyı etkinleştirmek veya devre dışı bırakmak istiyorsanız, widget'ı Tasarım'dan düzenlemeniz ve ilgili seçeneğin işaretini kaldırmanız yeterlidir.
Yazıyı faydalı bulduysanız yazıyı paylaşmayı unutmayın. Herhangi bir sorunuz varsa yorumlara yazın. Uğradığınız için çok teşekkür ederim.
