Beautiful Hide Show Effect Widget
Hello Every One, i want to ask you would you love to add effects in your post. Everyone wants to add beautiful effect in his post for catching visitor's attraction, like in author bio page or some download page anywhere. So today, I am sharing Beautiful Hide Show Effect Widget with you. You can use it anywhere in download page or author page.
Beautiful and Eye Catching
Multi Colors Look Make It Attractive
Beautiful Hide Show Effect Widget
Firstly Edit Your Post Or Page In Which You Want To Add This Widget
Add Paste Below Code Where You Want To Add This.
<style type="text/css"> .f4u1 { Padding: 5px; margin-right:0px; margin-bottom:5px; width:56%; height:29px; border:5px outset #00BFFF; font-size:24px; background:#DCDCDC 6px; color:#696969; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; border-radius: 10px ;
border-radius: 40px; border-right:#F0FFFF solid 5px; border-bottom:#DADAC8 solid 5px; box-shadow:inset 20px 6px 40px 0px #fff; } .f4u4 img { background: #FFFFFF; float: left; margin: -2px 10px 0 0; padding: 4px; border: 4px inset #E6E6E6; } .f4u4 { background: #FFF url(http://4.bp.blogspot.com/-w19VBzwqFxE/UMUxWLm_bYI/AAAAAAAAJUQ/xv9AOlPPTc4/s1600/bg.png); border-top: 5px inset #00BFFF; color: black; margin: 20px 0 30px 0; padding: 10px; overflow: auto; -webkit-border-radius: 4px; border-radius: 4px; border-right:#00BFFF outset 5px; border-left:#00BFFF outset 5px; border-bottom:#00BFFF inset 5px; box-shadow:inset 20px 0px 20px 0px #fff; -moz-box-shadow:inset 20px 0px 20px 0px #fff; -webkit-box-shadow:inset 40px 0px 30px 0px #F5F5DC; } .f4ubutton {display:block;margin:1px 15px; color:deepskyblue; background-color:#F0FFFF; font-weight: bold; ont-weight: bold;font-size: 23px;text-transform: uppercase;} .f4ubutton:hover{display:block;margin:10px 15;color: #A9A9A9;background:#FFF; font-weight: bold;font-size: 23px;text-transform: uppercase;} .f4u {overflow:hidden;background:;} .f4u > div {-webkit-transition: all 0.0s ease;-moz-transition: margin 0.0s ease;-o-transition: all 0.2s ease;transition: margin 0.0s ease;} .f4ubutton[value="click to read more"] + .f4u > div {margin-top:-100%;} .f4ubutton[value="Hide this"] + .f4u {padding:5px;} </style> <br /> <div class="f4u1"> Learn More About Mughees Ahmad</div> <input class="f4ubutton" onclick="this.value=this.value=='click to read more'?'Hide this':'click to read more';" type="button" value="click to read more" /> <div class="f4u"> <div> <div class="f4u4"> <img height="100px" src="http://3.bp.blogspot.com/-CLEVU2Hfy60/UfORMb9G5GI/AAAAAAAAA7Y/FAA85jHWzTY/s1600/mughees+ahmed.jpg" width="100px" /> <font size='4' position='right'> Mughees is a Pro Blogger who is founder of F4U ONLINE COURSES. He is 17 years old and living in Pakistan, Islamabad. Currently.<p>This Is Only For Demo</font></p> </div> </div>
Replace Blue Text With Your Desired Text
Replace Grey Text With The Text Show In Box
Replace Yellow Url With Your Image Url
If you find any problem regarding ' Beautiful Hide Show Effect Widget' feel free to comment below.
