Create adsense loading animation

Hello Masrizky.sch.id friends, this time the admin will explain how to create an Adsense loading animation using SVG letters Ad by only using CSS code.

Info: If you are curious about our discussion this time, let's discuss it together.

Loading adsense animation

AdSense loading animation is an animation that appears when AdSense ads are loading on a web page. The animation is usually an icon or image that rotates or moves to show users that the ad is loading, for the display of the AdSense loading animation in this post using the SVG icon of the letter Ad, This helps provide a better user experience and reduces confusion when the ad is being processed to be displayed.

Display Example

So, rather than being curious about the example display of the Adsense loading animation, please check using the button below.

Check

Warning: Loading Adsense ads only works when you display ads using the Adsense ad unit code.

Ways of making

Okay, now it's time for the admin to explain how to create pure AdSense ad loading using CSS code, please read and follow each instruction that the admin will explain below.

1. Please login to blogger using your google account
2. Then please go to the Theme menu then select the Edit HTML menu.
3. Next, in the Edit HTML menu , please look for the code ]]></b:skin>
4. If you have found it, please copy the CSS code below and then place it above it.

<!--[ Loading ads adsense by Masrizky.sch.id ]-->
.adsbygoogle{background:rgba(0,0,0,.05) url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsPSIjNDc0NzQ3IiBkPSJNMTU3LjUyIDI3MmgzNi45NkwxNzYgMjE4Ljc4ek0zNTIgMjU2Yy0xMy4yMyAwLTI0IDEwLjc3LTI0IDI0czEwLjc3IDI0IDI0IDI0IDI0LTEwLjc3IDI0LTI0LTEwLjc3LTI0LTI0LTI0TTQ2NCA2NEg0OEMyMS41IDY0IDAgODUuNSAwIDExMnYyODhjMCAyNi41IDIxLjUgNDggNDggNDhoNDE2YzI2LjUgMCA0OC0yMS41IDQ4LTQ4VjExMmMwLTI2LjUtMjEuNS00OC00OC00OE0yNTAuNTggMzUyaC0xNi45NGMtNi44MSAwLTEyLjg4LTQuMzItMTUuMTItMTAuNzVMMjExLjE1IDMyMGgtNzAuMjlsLTcuMzggMjEuMjVBMTYgMTYgMCAwIDEgMTE4LjM2IDM1MmgtMTYuOTRjLTExLjAxIDAtMTguNzMtMTAuODUtMTUuMTItMjEuMjVMMTQwIDE3Ni4xMkEyMy45OTUgMjMuOTk1IDAgMCAxIDE2Mi42NyAxNjBoMjYuNjZBMjMuOTkgMjMuOTkgMCAwIDEgMjEyIDE3Ni4xM2w1My42OSAxNTQuNjJjMy42MSAxMC40LTQuMTEgMjEuMjUtMTUuMTEgMjEuMjVNNDI0IDMzNmMwIDguODQtNy4xNiAxNi0xNiAxNmgtMTZjLTQuODUgMC05LjA0LTIuMjctMTEuOTgtNS42OC04LjYyIDMuNjYtMTguMDkgNS42OC0yOC4wMiA1LjY4LTM5LjcgMC03Mi0zMi4zLTcyLTcyczMyLjMtNzIgNzItNzJjOC40NiAwIDE2LjQ2IDEuNzMgMjQgNC40MlYxNzZjMC04Ljg0IDcuMTYtMTYgMTYtMTZoMTZjOC44NCAwIDE2IDcuMTYgMTYgMTZ6Ii8+Cjwvc3ZnPgo=") center / 26px no-repeat;background-size:25px 25px}

5. Then save the template and see how it turns out.