RSS Follow us on Google+ Follow us on Twitter! Follow us on Facebook! Follow us on Linkedin!

Attention

Permohonan maaf

Mohon maaf yang sedalam-dalamnya kepada seluruh pengunjung Blog AsalNy@mbung dikarenakan Blog masih dalam modifikasi jadi seluruh konten atau artikel belum tertata secara benar, baik tampilan maupun designnya, sekali lagi admin AsalNy@mbung Mohon maaf. dan terimaksih banyak sudah berkunjung, salam sukses selalu untuk sahabat blogger semuanya.

Home » » Animated Content Spoiler

Animated Content Spoiler

Written By Asal Nyambung on Friday, April 5, 2013 | 9:30 PM


In today’s featured Blogger tip, we show you Bloggersentral’s Greenlava with this improved content spoiler that can also hide parts of your blog. It can be used in posts, pages, widgets, etc.
Some of its enhanced features are:
  • Animated actions by using CSS3 transitions.
  • Getting multiple spoilers in a page without assigning a unique ID.
  • Changing button text according to state of spoiler.
  • Made up of CSS and HTML, below are the codes.
CSS:
<style type="text/css">
/* animated spoiler CSS by Bloggersentral.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> 
HTML:
<input type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div><div>
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>
Note:
You can modify this by replacing ‘show’ and ‘hide’ text with your own. You can also change the speed of animation via line 5 of the CSS.
Share this article :

0 comments:

Post a Comment

Terimakasih atas kunjungannya
Demi Perubahan Blog Ini Ke Arah Lebih Baik Saran Agan-Agan Sangat Bermanfaat, Terimakasih......!!!

 
Support : Kolom Tutorial™ | MPI. Al-Munfardiyyah
Copyright © 2013. Asal Ny@mbung - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger