How to Add Rotating Cube Ad to your Website or Blog

TIAL WIZARDS

4 Nov, 2022

A+ A-

Hi to all, in this article I am going to tell you all about how to add rotating cube ad to your website or blog easily in just few minutes by using simple code.

So, read the article carefully and completely to get clear understanding about adding rotating cube ad to your website or WordPress or Blogger without any issue or error.

Here I am going to tell you all about adding rotating cube in blogger and you can add this code in any website.

This rotating code ad will not effect your website speed or any SEO related issue, you can use this without any issue.

This is a 3D Cube Banner Using CSS, this Cube Ads is a visually compelling Ad of 200 pixels wide by 200 pixels high (200×200).

Steps to Add Rotating Cube Ad in Blogger

Login to Blogger Dashboard

First of all you need to visit official blogger website.

Now you need to login to your blogger website dashboard by using your login credentials safely.

Backup Blogger Theme

Now after login to blogger dashboard make sure that you have backup of your blogger theme, if any error or issue occurs while saving the code then, you can restore your backup code again and can run your website as usual, and to backup your blogger theme code, you can refer the below path.

Path: Blogger Dashboard -> Click on theme -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

Now after successful backup of your blogger theme, now you need to open blogger theme editor to add the rotating cube ad code inside it to show in your website, and to open blogger theme editor, you can follow the below provided path.

Path: Blogger Dashboard -> Click on theme -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Adding HTML Code

Open blogger theme editor.

Find for closing body tag or </body> tag.

Now you need to copy below provided HTML code.

Paste the copied HTML code just above </body> tag.



<div id="banner-cube-pe">
    <div id="cube-close-pe" onclick="document.getElementById('banner-cube-pe').remove();">&amp;times;</div>
       <div id="banner-cube-stage">
        <div id="banner-cube-shape">

            <!-- Cube 1 -->
            <div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) rotateY(-90deg) translateZ(100px) !important;">
                <!-- Init Ads Cube 200 x 200 -->
               <img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO92uEKcLstCiXzbcfUG-DZkofRA5O1bwxem_-ub8uzGaKqoA8WVEgcw6BXOy8P1Pmo9tLWHh7uJt4ewbyg-9F1WsI0cg5ULaSL8qcVzwDPZgFkgy-YRKVKlipLtdD7hmM23mZxYw68lAcpL3rjdmDSv5b_FLbjw-8iTiafo9UbguIdegAO2hYwXs/w640-h360/add-rotating-cube-ad.webp' width='200' height='200' style='width:200px;height:200px'/>
                <!-- End Ads Cube 200 x 200 -->
            </div>

            <!-- Cube 2 -->
            <div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) translateZ(100px) !important;">
                <!-- Init Ads Cube 200 x 200 -->
                 <img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO92uEKcLstCiXzbcfUG-DZkofRA5O1bwxem_-ub8uzGaKqoA8WVEgcw6BXOy8P1Pmo9tLWHh7uJt4ewbyg-9F1WsI0cg5ULaSL8qcVzwDPZgFkgy-YRKVKlipLtdD7hmM23mZxYw68lAcpL3rjdmDSv5b_FLbjw-8iTiafo9UbguIdegAO2hYwXs/w640-h360/add-rotating-cube-ad.webp' width='200' height='200' style='width:200px;height:200px'/>
                <!-- End Ads Cube 200 x 200 -->
            </div>

            <!-- Cube 3 -->
            <div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) rotateY(90deg) translateZ(100px) !important;">
                <!-- Init Ads Cube 200 x 200 -->
                 <img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO92uEKcLstCiXzbcfUG-DZkofRA5O1bwxem_-ub8uzGaKqoA8WVEgcw6BXOy8P1Pmo9tLWHh7uJt4ewbyg-9F1WsI0cg5ULaSL8qcVzwDPZgFkgy-YRKVKlipLtdD7hmM23mZxYw68lAcpL3rjdmDSv5b_FLbjw-8iTiafo9UbguIdegAO2hYwXs/w640-h360/add-rotating-cube-ad.webp' width='200' height='200' style='width:200px;height:200px'/>
                <!-- End Ads Cube 200 x 200 -->
            </div>

            <!-- Cube 4 -->
            <div id="cube-side-expensive" style="transform:scale3d(1.05, 1, 1.05) rotateY(180deg) translateZ(100px) !important;">
                <!-- Init Ads Cube 200 x 200 -->
                 <img src ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO92uEKcLstCiXzbcfUG-DZkofRA5O1bwxem_-ub8uzGaKqoA8WVEgcw6BXOy8P1Pmo9tLWHh7uJt4ewbyg-9F1WsI0cg5ULaSL8qcVzwDPZgFkgy-YRKVKlipLtdD7hmM23mZxYw68lAcpL3rjdmDSv5b_FLbjw-8iTiafo9UbguIdegAO2hYwXs/w640-h360/add-rotating-cube-ad.webp' width='200' height='200' style='width:200px;height:200px'/>
                <!-- End Ads Cube 200 x 200 -->
            </div>

        </div>
    </div>
</div>

Adding CSS Code

Open blogger theme editor.

Find for ]]></b:skin> tag or </head> tag.

Now you need to copy below provided CSS code.

Paste the copied CSS code just above ]]></b:skin> or you can paste it above <head/> tag by adding <style></style>.



#banner-cube-pe { height: 250px; width: 300px; position: fixed; margin: 0px auto; z-index: 100001; top: 325px; right: 15px; cursor: pointer; width: 300px; height: 250px; margin: auto; perspective: 800px; perspective-origin: 50% 225px; } #cube-close-pe { right: 0 !important; top: 0px !important; width: 22px !important; height: 22px; position: absolute !important; z-index: 4500 !important; font-size: 20px; background: red; border-radius: 50%; color: #fff; font-weight: 700; text-align: center; line-height: 1.1; } @media (max-width: 480px){#banner-cube-pe{transform: scale(0.5);}} #cube-side-expensive { position: absolute; height: 200px; width: 200px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.6); transition: -webkit-transform 1s ease-in-out 0s; backface-visibility: visible; } #banner-cube-stage { transition: transform 4s ease 0s; transform-style: preserve-3d; position: relative; } #banner-cube-shape { animation-duration: 14s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: spin_Cube; position: relative; top: 46px; margin: 0px auto; height: 200px; width: 200px; transform-style: preserve-3d; } @keyframes spin_Cube { from { transform: rotateY(0); } to { transform: rotateY(-360deg); } }

Saving the Code

After adding the HTML and CSS code, now it's time to save the theme carefully and need to check any issues arises or not, if no issues found then the code is working perfectly, if any found then you can read the warning message and resolve that issue or restore you backup code and repeat the same process again carefully.

Note: After adding the HTML code you need change the image links based on your requirements to show in the 3d rotating cube ad.

Conclusion

I hope that you all have understood about adding rotating cube ad to your website or blog easily by using simple HTJML and CSS without any issue or error.

If you have any doubts then please reach out to us from contact page.