Sekmeli modal eklentisi, blog tasarımlarında, sayfalarında ve yayınlarında kullanabileceğiniz tablo tarzında sekmeli efekti ve kayan efekti ile tasarlanmış olan eklentidir.
Bu eklenti, kullanıcılara her panel arasında yumuşak bir geçiş sağlayan CSS3 malzemelerin oluşturulmuştur. Eklenti navigasyonu, ikonik materyal dalga efekti tasarımı ile oluşturulmuş olup, kullanıcılara hangi sekmenin aktif olduğunu gösteren kayan kenarlık ile bilgi verir.
Eklentiyi blog sitenize kurmak istiyorsanız aşağıdaki adımları takip edin.
Sekmeli Modal Eklentisi Kurulum Bilgileri
Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör sayfasını açın ve aşağıdaki adımları uygulayın.
Birinci adım: Aşağıdaki CSS kodlarını blogunuzun tema editör sayfasında bulunan </head> kodunun bir satır üzerine ekleyin.
CSS Kodu
<style type='text/css'>
/*<![CDATA[*/
[ripple]{
z-index:1;
position:relative;
overflow:hidden
}
[ripple] .ripple{
position:absolute;
background:#fff;
width:12px;
height:12px;
border-radius:100%;
-webkit-animation:ripple 1.6s;
animation:ripple 1.6s
}
@-webkit-keyframes ripple{
0%{
-webkit-transform:scale(1);
transform:scale(1);
opacity:0.2
}
100%{
-webkit-transform:scale(40);
transform:scale(40);
opacity:0
}
}
@keyframes ripple{
0%{
-webkit-transform:scale(1);
transform:scale(1);
opacity:0.2
}
100%{
-webkit-transform:scale(40);
transform:scale(40);
opacity:0
}
}
.blog-tabs{
z-index:15;
position:relative;
background:#fff;
width:600px;
border-radius:4px;
box-shadow:0 0 30px rgba(0,0,0,0.1);
box-sizing:border-box;
margin:100px auto 10px;
overflow:hidden
}
.blog-tabs-header{
position:relative;
background:#4285F4;
overflow:hidden
}
.blog-tabs-header .blog-tabs-border{
position:absolute;
bottom:0;
left:0;
background:#F4B142;
width:auto;
height:2px;
transition:0.3s ease
}
.blog-tabs-header ul{
display:flex;
flex-direction:row;
flex-wrap:wrap;
width:calc(100% - 68px)
}
.blog-tabs-header li{
transition:0.3s ease
}
.blog-tabs-header a{
z-index:1;
display:block;
box-sizing:border-box;
padding:15px 20px;
color:#fff;
font-weight:500;
text-decoration:none;
text-transform:uppercase
}
.blog-tabs-nav{
position:absolute;
top:0;
right:0;
background:#4285F4;
display:flex;
align-items:center;
height:100%;
padding:0 10px;
color:#fff;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.blog-tabs-nav:before{
content:'';
z-index:1;
position:absolute;
top:0;
left:0;
height:100%;
box-shadow:0 0 20px 10px #4285F4
}
.blog-tabs-nav span{
border-radius:100%;
cursor:pointer
}
.blog-tab-prev-icons{
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M15.41,16.59L10.83,12l4.58-4.59L14,6l-6,6l6,6L15.41,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E%0A");
display:inline-block;
width:28px;
height:28px
}
.blog-tab-next-icons{
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z'/%3E%3Cpath fill='none' d='M0,0h24v24H0V0z'/%3E%3C/svg%3E");
display:inline-block;
width:28px;
height:28px
}
.blog-tabs-content{
position:relative;
padding:15px 20px;
transition:0.3s ease;
overflow:hidden
}
.blog-tabs-content:after{
content:'';
position:absolute;
bottom:-1px;
left:0;
display:block;
width:100%;
height:1px;
box-shadow:0 0 20px 10px #fff
}
.blog-tabs-content .blog-tab{
display:none
}
.blog-tabs-content .blog-tab.active{
display:block
}
/*]]>*/
</style>İkinci adım: Aşağıdaki jQuery kodunu blogunuzun tema editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.
jQuery Kodu
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var t=$(".blog-tabs-header .active").position();function e(){t=$(".blog-tabs-header .active").position(),$(".blog-tabs-border").stop().css({left:t.left,width:$(".blog-tabs-header .active").width()})}e();var a=$(".blog-tab.active").height();function i(){a=$(".blog-tab.active").height(),$(".blog-tabs-content").stop().css({height:a+"px"})}function s(){var t=$(".blog-tabs-header .active a").attr("blog-tab-id");$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$(".blog-tab[blog-tab-id="+t+"]").stop().fadeIn(300,function(){$(this).addClass("active"),i()})}i(),$(".blog-tabs-header a").on("click",function(t){t.preventDefault();var a=$(this).attr("blog-tab-id");$(".blog-tabs-header a").stop().parent().removeClass("active"),$(this).stop().parent().addClass("active"),e(),n=c.filter(".active"),$(".blog-tab").stop().fadeOut(300,function(){$(this).removeClass("active")}).hide(),$('.blog-tab[blog-tab-id="'+a+'"]').stop().fadeIn(300,function(){$(this).addClass("active"),i()})});var c=$(".blog-tabs-header ul li"),n=c.filter(".active");$("#next").on("click",function(t){t.preventDefault();var a=n.next();n.removeClass("active"),n=a.length?a.addClass("active"):c.first().addClass("active"),e(),s()}),$("#prev").on("click",function(t){t.preventDefault();var a=n.prev();n.removeClass("active"),n=a.length?a.addClass("active"):c.last().addClass("active"),e(),s()}),$("[ripple]").on("click",function(t){var a=$('<div class="ripple" />'),e=$(this).offset(),i=t.pageY-e.top,s=t.pageX-e.left,c=$(".ripple");a.css({top:i-c.height()/2,left:s-c.width()/2,background:$(this).attr("ripple-color")}).appendTo($(this)),window.setTimeout(function(){a.remove()},1500)})});
//]]>
</script>Yukarıdaki adımları tamamladıktan sonra tema editör sayfasını kaydedin.
Üçüncü adım: Blog yayınlarınıza ve sayfalarınıza sekmeli modal eklentisi eklemek için, aşağıdaki HTML kodu sayfa veya yayın editör sayfanızın HTML bölümüne ekleyin.
HTML Kod
<div class="blog-tabs">
<div class="blog-tabs-header">
<div class="blog-tabs-border"></div>
<ul>
<li class="active"><a href="#blog-tab-1" blog-tab-id="1" ripple="ripple" ripple-color="#fff">tab 1</a></li>
<li><a href="#blog-tab-2" blog-tab-id="2" ripple="ripple" ripple-color="#fff">tab 2</a></li>
<li><a href="#blog-tab-3" blog-tab-id="3" ripple="ripple" ripple-color="#fff">tab 3</a></li>
<li><a href="#blog-tab-4" blog-tab-id="4" ripple="ripple" ripple-color="#fff">tab 4</a></li>
<li><a href="#blog-tab-5" blog-tab-id="5" ripple="ripple" ripple-color="#fff">tab 5</a></li>
</ul>
<nav class="blog-tabs-nav">
<span class="blog-tab-prev-icons" id="prev" ripple="ripple" ripple-color="#fff"></span>
<span class="blog-tab-next-icons" id="next" ripple="ripple" ripple-color="#fff"></span>
</nav>
</div>
<div class="blog-tabs-content">
<div class="blog-tab active" blog-tab-id="1">Metin ekle</div>
<div class="blog-tab" blog-tab-id="2">Metin ekle</div>
<div class="blog-tab" blog-tab-id="3">Metin ekle</div>
<div class="blog-tab" blog-tab-id="4">Metin ekle</div>
<div class="blog-tab" blog-tab-id="5">Metin ekle</div>
</div>
</div>Yukarıdaki HTML kod içerisinde işaretlenmiş olan yerlere sekme başlığını ve sekme içerisinde görünmesini istediğiniz ilgili açıklama metnini ekleyin.
Sekmeli modal eklentisini, blogunuzun Sibedar'ında veya diğer bölümlerinde de kullanabilirsiniz. Sekmeler içerisine widget kodlarınızı (her sekme içerisinde bulunan elementleri doğru bir şekilde kullanarak) ekleyerek düzenli bir widget grubu oluşturabilirsiniz.
Eklenti hakkında görüş ve sorularınızı yorum formu üzerinden bize iletebilirsiniz.