terça-feira, 29 de setembro de 2015

Multi tabbed widget

multi-tabbed-widget-blogger


Hoje vamos mostrar aqui como adicionar multi tabbed widget isso da um tom mais profissional no seu template ou seja são 3 em um comentários popular postagem e também recente post  então para adicionar siga os passos abaixo.


Primeiro faça login no blogger 
vá no menu modelo >> editar html 
com as teclas combinadas procure por </head> e antes disso copie o código abaixo e cole

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// Multi tab  
jQuery(document).ready(function($){ 
$(".laimed").hide(); 
$("ul.blake li:first a").addClass("pointz").show(); $(".laimed:first").show(); $("ul.blake li a").click(function() { $("ul.blake li a").removeClass("pointz a"); $(this).addClass("pointz"); $(".laimed").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn();return false; }); });
</script>


Agora procure por ]]></b:skin> então copie o código abaixo e cole antes 

/* Multi tab css setting */
.multitabs{text-transform:uppercase; margin:0 0px 30px; }
.kidder{list-style:none;margin:0 0 7px;padding:0; background: #f8f8f8; border-bottom:3px solid #2E9DD4; height:38px;}
.kidder li{list-style:none;padding:0;margin:0;float:left;}
.kidder li a{ display:block;padding:8px 14px;font-size:12px; font-weight:bold; text-decoration:none; color:#777}
.multitabs h2 {display:none;}
.kidder li a.pointz, .kidder li a:hover{background:#2E9DD4; color:#fff !important;text-decoration:none;}
.laimed li{border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:10px 3px !important; margin:0 !important; text-transform:none;}
.laimed li { background:none; list-style:none;}
.laimed img {width:65px;height:60px;float:left; padding:0px; margin:0 6px 0px 0;}
.PopularPosts .item-thumbnail{margin:0px;}


Passo 3 

Agora procure por sidebar-wrapper e abaixo disso copie o seguinte código e cole

<div class='multitabs'>
<ul class='kidder blake'>
<li class='beez'><a href='#id1'>Popular</a></li>
<li class='beez'><a href='#id2'>Recent</a></li>
<li class='beez'><a href='#id3'>Comments</a></li>
</ul>
<div class='clear'/>

<!-- Tab Widget 1 -->
<div class='laimed' id='id1'>
<b:section class='sidebar' id='sidebaze1' preferred='yes'/>  
</div>

<!-- Tab Widget 2 -->
<div class='laimed' id='id2'>
<b:section class='sidebar' id='sidebaze2' preferred='yes'/>
</div>

<!-- Tab Widget 3 -->
<div class='laimed' id='id3'>
<b:section class='sidebar' id='sidebaze3' preferred='yes'/> 
</div>
</div>
<div class='clear'/>

Salve e esta pronto seu multi tabbed widget

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner