quinta-feira, 17 de novembro de 2016

Spoiler Blogger widget show hide post

Spoiler blogger widget show hide post


Hoje vamos mostrar como adicionar spoiler no Blogger com efeito mostrar e ocultar, para que serve isso, bem isso tem uma função diferenciada como esconder e mostrar o texto que deseja escrever também pode ser usado para deixar um lembrete uma nota no rodapé do post com um efeito deslizante interessante esse widget torna se util ao visitante clicar no botão aparece o conteúdo que deseja mostrar para adicionar isso no seu Blogger siga os passos abaixo.

Adicionando Spoiler blogger conteúdo com efeito mostrar e ocultar:

Faça login no Blogger então va no menu modelo 
editar >> HTML com as teclas combinadas CTRL+F busque por 
]]></b:skin> ou </style> e adicione o seguinte código:

#content-spoiler {text-align:center;}
#content-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;font-size:14px;transition:all .3s ease-out}
#content-spoiler button:hover, #content-spoiler button:focus {outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}


Agora procure por </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//Spoiler
$(document).ready(function(){$("#content-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>


Nota: Se seu template ja tem o mais recente Jquery não precisa adicionar o código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Então salve isso.

Para adicionar o botão no corpo do texto do post no editor do post ao lado de escrever clique em HTML como mostra a figura
spoiler blogger widget


<div id="content-spoiler">
<button>Content Spoiler</button></div>
<div id="spoilerpanel">

ADD SEU TEXTO AQUI 

<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE" style="border: none;" /></a></div>
ADD TEXT HERE
</div>
</div>

Salve e Pronto.



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