Beautiful Hide Show Effect Widget

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.

Features of This Widget

Beautiful and Eye Catching

Fast Loading

Hover Effects

Designed In HTML/CSS

Multi Colors Look Make It Attractive

You May Also Like: Beautiful Author Box Widget Below Every Post

Beautiful Hide Show Effect Widget

How To Add This Widget

Firstly Edit Your Post Or Page In Which You Want To Add This Widget

Now Select Html Mode

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgceo2R5tP2T3W_ZLpF6tKBINivov9d2ckMVcG0bCPOKtwt9ZUe9eVmfGI85Sj-68PJfRP0unaA6CXMIibB88CumNSr3dmSKn9kGIk6JM_hNKYzIbrwVMjEKNpmxHuDmK5gRd-N-P-vokc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaiK-KErM19rK0cA-Kn7kZ2hLR8LaoBymtZXx5Gf-Nte1l2Dv3RhQ-vL4WUNY5BS7dVJGZMfhX1NVmjwNk0gYWNA-rNYw3Mc1FVjAzR73axKpvSI5u7lWXlAnW0kbTWHMv3pmlBRZ9mc/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>

You May Also Like: Social Sharing Widget With Email Subscription

Instruction:

Replace Blue Text    With Your Desired Text

Replace Grey Text   With The Text Show In Box

Replace Yellow Url    With Your Image Url

Note:

If you find any problem regarding ‘Beautiful Hide Show Effect Widget’ feel free to comment below.