Blog Sitelerine Zippy Nasıl Eklenir ve Kullanılır?

Blogger Yardım sayfasında gördüğüm ve blog sayfalarının daha düzenli görünmesini düşünerek basit bir jQuery ve CSS3 ile tasarlamış olduğum Zippy özelliğini blogumda kullanmaya başladım. Blog ziyaretçilerimin yoğun isteği üzerine bu yazımda Zippy özelliğini blogcu arkadaşlarımla paylaşmak istedim.


Blog sayfalarınızda bulunan yazılara açıklama ekleme ve kod paylaşımlarının blog sayfalarında çok yer kaplamasından dolayı, özellikle mobil cihazlar üzerinden erişim sağlayan blog ziyaretçilerini çok rahatsız ediyordu. Bunun bir yolunu bulmam gerekiyordu ve söylediğim gibi Blogger Yardım sayfasında görmüş olduğum Zippy özelliği ile blog sayfalarını daha kullanışlı duruma getirdim.

Basit bir özellik olan Zippy, kurulumu ve kullanımı oldukça basit bir özellik. Şimdi bu özelliği blog sitenize kurmak ve kullanmak için aşağıdaki adımları takip edin.

Zippy Kurulumu

Birinci adım: Blogger hesabınıza giriş yapın ve blog sitenizin kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın.

İkinci adım: Aşağıdaki CSS kodlarını şablon editör sayfanızda bulunan </head> kodunun bir satır üzerine ekleyin.

CSS

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<style type='text/css'>
/* ===== Zippy CSS ===== */
.zippy{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;color:#28a1f0;cursor:pointer;margin:-1px;padding:10px 0;position:relative;width:100%;transition: all .0s ease}
.zippy:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAHlBMVEVChfRChfRChfRChfRChfRChfRChfRChfRChfRChfSnCpalAAAACXRSTlMALYH8WFuAWVpIu53cAAAAOElEQVR42t3JsREAIAxC0SiKZv+FLULjsUGouP+i2Yad2sSqs8EPmDjVk+GibnLVXdRd1F0Y/fYAIYwA+YcaWtQAAAAASUVORK5CYII=);content:'';height:24px;margin-top:-12px;position:absolute;right:0;top:50%;width:24px}
.zippy-wrapper.open .zippy:before{margin-top:-12px;transform:scaleY(-1);-webkit-transform:scaleY(-1);-moz-transform:scaleY(-1);-ms-transform:scaleY(-1);-o-transform:scaleY(-1)}
.zippy-wrapper.open .zippy{position:relative;border-bottom:1px solid #fff}
.zippy-content{overflow:hidden;position:relative;display:none}
.zippy-overflow{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative}
.zippy-wrapper.open .zippy-content{-webkit-animation:slide-down 0.218s ease-out;-moz-animation:slide-down 0.218s ease-out;display:block}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0)}}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}100%{opacity:1;-moz-transform:translateY(0)}}
</style>
</b:if>

Üçüncü adım: Aşağıdaki jQuery kodunu şablon editör sayfanızda bulunan </body> kodunun bir satır üzerine ekleyin.

jQuery

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
//<![CDATA[
// Zippy URL: https://bloggereklentileri.blogspot.com
$(function() {
$('.zippy').on('click', function(e) {
$(this).parent().toggleClass('open');}).on('zippy-down', function(e) {
e.stopPropagation();
e.preventDefault();
return false;});});
//]]>
</script>
</b:if>

Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin.

Zippy Kullanımı

Blog yayınlarınızı oluşturduğunuz editör sayfasının HTML sayfasına aşağıdaki HTML kodları ekleyin.

HTML

<div class="zippy-wrapper">
<div class="zippy">Başlık</div>
<div class="zippy-overflow">
<div class="zippy-content">
<-- Açıklama / kod vs. -->
</div>
</div>
</div>

HTML kod içersinde belirtilen kısmına konteyner içerine eklemiş olduğunuz bilgilerin ne olduğunu belirtmek için bir başlık ekleyin. İçerik kısmına varsa blog yazılarınızın kısa açıklamasını, bilgilendirme, alıntı ve kod vb. gibi bilgileri ekleyerek kullanabilirsiniz.

Ön İzleme

Blog sitemizde de kullanmış olduğumuz Zippy özelliğini sonunda paylaşmış oldum. Buna benzer kısa ve basit eklentilere ihtiyacınız varsa yorum formunu kullanarak bize iletebilirsiniz. İsteklerinize zaman oldukça en hızlı şekilde cevap vermeye çalışacağım.