How To Add jQuery FadeIn and FadeOut Effect to Blogger

By Lasantha Bandara Updated October 11, 2026 / 1 min read

If you want to add FadeIn and FadeOut effect to your blog, follow the steps below.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the javascript code given below and click save.

$("#butFadeIn").click(function () {
$("#pFadeInOut").fadeIn(3000);
});
});
</script>

<button id="butFadeOut">Fade Out</button>  <button id="butFadeIn">Fade In</button>
<br />
<p id="pFadeInOut">Insert Your Content Here</p>

Note : Remember to replace 'Insert Your Content Here' with your real content.

Look at the example below.

Insert Your Content Here

Search Blogger Tips and Tricks