quinta-feira, 12 de novembro de 2015

Show hide more categories Blogger

show-more-categories-blogger-widget


Show more catetories é um widget animado onde você pode ter a opção de esconder mais categorias com um clique magico elas aparecem isso é muito util quando colocado em um pequeno espaço para poupar espaço dando um efeito para que o visitante tome uma ação de clicar para ver o restante Créditos idblanter

Para colocar isso no seu blogger siga os passos 

Faça login no blogger  então va no menu modelo >> editar/HTML 
então com as teclas combinadas CTRL+F busque por ]]></b:skin> 
e logo acima disso copie e cole o seguinte código.

h1{text-align:center;background:#eee;padding:10px;border:1px solid #ddd;}body{background:#f5f5f5;font-family:'Open Sans', Arial}
#label-wrapper{background:#eee;padding:20px;overflow:hidden;border:1px solid #ddd;width:250px;margin:0 auto;max-width:100%;}#Label1{height:37px;transition:all 1s ease-in-out;overflow:hidden}
a.show-more{width:180px;overflow:hidden;color:#fff;background:#36BD80;text-transform:uppercase;font-weight:bold;border:4px solid #ddd;padding:10px 30px;border-radius:10px;font-size:12px;transition:all .5s ease-in-out}
#HTML4{padding:15px;text-align:center;margin-top:-10px}
a.show-more:hover{border:4px solid #22AF6F;background:#fff;color:#22AF6F}
#showmore{display:block}#hidemore{display:none}


<a class='show-more' id='showmore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;auto&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Show More Categories</a>
<a class='show-more' id='hidemore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;130px&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Hide More Categories</a>

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-size {background:#fff;display:block;float:left;margin:0 5px 5px 0;
color:#666;font-size:11px;transition:.8s linear;}
.label-size a,.label-size span{display:inline-block;color:#666;padding:8px 10px;
font-weight:400;}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;
background:#e25756;color:#fff;transition:all .3s ease-out;}
.label-count:hover {background:#22AF6F;color:#fff;}
.label-size {line-height:1.2}
.Label li {background:#fff;color:#666;float:left;padding:10px 5px;margin-left:3px;text-align:left;width:95%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover {background:#fff;color:#22AF6F;}
.Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
.Label li:hover:before {padding-right:4px;color:#22AF6F;}
.Label li a {color:#666;transition:all .3s ease-out;}
.label-size{background:#36BD80;display:block;float:left;margin:0 5px 5px 0;font-size:12px;border:1px solid #22AF6F;transition:all .3s ease-out;}
.label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:all .3s ease-out;}
.label-size a:hover {background:#22AF6F;color:#fff;}a:link{text-decoration:none}
#Label1{height:130px;transition:all 1s ease-in-out;overflow:hidden}a.show-more{text-align:center;width:180px;overflow:hidden;color:#fff;background:#36BD80;text-transform:uppercase;font-weight:bold;border:4px solid #ddd;padding:10px 30px;border-radius:10px;font-size:12px;transition:all .5s ease-in-out}#HTML4{padding:15px;text-align:center;margin-top:-10px}a.show-more:hover{border:4px solid #22AF6F;background:#fff;color:#22AF6F}#showmore{display:block}.copyright{padding:20px;text-align:center;font-size:11px}

Salve o modelo 

Para adicionar o Html você pode optar por menu layout adicionar novo gadget então busque por Html/Javascript adicionando o seguinte código.


<h1>DEMO - SHOW MORE CATEGORIES</h1>
<div id='label-wrapper'><div id='Label1' style='height:37px'><span class='label-size label-size-1'>
<a dir='ltr' href='http://URLDOBLOGGER/search/label/CATEGORIA'>Android</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Artikel</a>
</span>
<span class='label-size label-size-2'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Evolution</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Fakta Unik</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Games</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Health</a>
</span>
<span class='label-size label-size-4'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Kisah</a>
</span>
<span class='label-size label-size-5'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Lorem Ipsum</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Personal</a>
</span>
<span class='label-size label-size-2'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Story</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Template</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Tips &amp; Trik</a>
</span>
<span class='label-size label-size-1'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Tools</a>
</span>
<span class='label-size label-size-3'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Umum</a>
</span>
<span class='label-size label-size-3'>
<a dir='ltr' href='URLDOBLOGGER/search/label/CATEGORIA'>Work</a>
  </span></div>
<a class='show-more' id='showmore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;auto&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Show More Categories</a>
<a class='show-more' id='hidemore' onclick='document.getElementById(&#39;Label1&#39;).style.height=&#39;37px&#39;;document.getElementById(&#39;hidemore&#39;).style.display=&#39;none&#39;;document.getElementById(&#39;showmore&#39;).style.display=&#39;block&#39;;' href='javascript:;'>Hide More Categories</a>
</div>

Nota: Não esqueça de trocar o que esta realçado em amarelo pelo url do seu blog e sua respectiva categoria.


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