You can additionally modification the text Open/Close to your required alternative. you'll hide files like pictures, codes, audio files, transfer links etc.with this button. during this tutorial the code is formed from several CSS parts which can resize/cut huge pictures. The demo of this style hack is seen slightly below.
PROCEDURE
(1) Let me do it for blogger .
(2) Move to your Blogger Dashboard .
(3) Click on New Post .
(4) You will be able to see Compose/HTML.
(5) Complete your entire post and click over HTML
(6) Put your content that should be hidden in HIDDEN CONTENT HERE in the code below.
(7) The pattern would be the same as below.
Show/hide
VISIBLE CONTENT HERE
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
Create Animated Spoiler
****USING CSS****
If you are going to use it regularly for all your post.
Put this CSS code before </head> in your Edit Template option.
Elsei if particular to post ,do prefer the putting it in post html..
Get your code below.
<style type="text/css">
/* animated spoiler CSS by Stillsecret.com */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide"] + .spoiler {padding:5px;}
</style>
****USING HTML****
This is very usefull if you want to sync it with an widget.
Just Replace PUT CONTENT YOU WISH TO HIDE HERE with your own content.
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>
CUSTOMIZE
You can replace Show/Hide with your own words .
If you want multiple spoiler , make sure you rename them (ie Change Id)
No comments:
Post a Comment