How To Add A Custom Content Banner Widget To Your Blogger Website?

Ever wanted to add a custom banner to your blogger website to display certain places of your site or platforms you're currently subscribed to. Good news, we've got a widget to match your liking as seen above.

Step 1: Go to Blogger's layout section and click Add Gadgets 

Step 2: You will have to choose HTML/JavaScript and copy the code provided below

<div class="custom-banner">

    <div class="banner-content">

        <h3>Explore Our Content!</h3>

        <p>Check out our latest posts and resources.</p>

        <div class="banner-buttons">

<a href="https://prsdube16.blogspot.com/p/posts-you-might-like.html?m=1" class="banner-btn">Cartoon Games</a>

            <a href="https://prsdube16.blogspot.com/p/featured-attractions.html?m=1" class="banner-btn">DStv Highlights</a>

            <a href="https://prsdube16.blogspot.com/search/label/Everyday%20Novelas?m=1" class="banner-btn">Telenovela Updates</a>

<a href="https://www.mediafire.com/folder/7vznku6zvg906/Insidus+Collection" class="banner-btn">Insidus Plus - Documents And Games</a>

<a href="https://prsdube16.blogspot.com/search/label/Openview%20Plus?m=1" class="banner-btn">Openview Highlights</a>

<a href="https://prsdube16.blogspot.com/p/posts-you-might-like.html?m=1" class="banner-btn">News On Animation</a>

<a href="https://prsdube16.blogspot.com/search/label/Sports%20Entertainment?m=1" class="banner-btn">Sports Highlights</a>

<a href="https://taplink.cc/prsdube16" class="banner-btn">Social Platforms</a>

<a href="https://prsdube16.blogspot.com/search/label/Video%20Entertainment?m=1" class="banner-btn">Streaming Highlights</a>

        </div>

    </div>

</div>

<style>

.custom-banner {

    background-color: #FFFFFF;

    border: 0px solid #ddd;

    border-radius: 8px;

    padding: 20px;

    text-align: center;

    margin: 10px auto;

    max-width: 1200px; /* Adjust width as needed */

}

.banner-content h3 {

    font-size: 24px;

    margin: 0 0 10px;

    color: #333;

}

.banner-content p {

    font-size: 16px;

    color: #666;

    margin: 0 0 15px;

}

.banner-buttons {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

}

.banner-btn {

    background-color: #ff0000;

    color: #ffff00 !important;

    padding: 10px 20px;

    text-decoration: none;

    border-radius: 5px;

    font-size: 10px;

    transition: background-color 0.3s;

    white-space: nowrap;

}

.banner-btn:hover {

    background-color: #0056b3;

    color: #ffff00

}

@media (max-width: 600px) {

    .custom-banner {

        max-width: 90%;

        padding: 10px;

    }

    .banner-buttons {

        flex-direction: column;

    }

    .banner-btn {

        width: 88%;

        margin-bottom: 10px;

    }

}

</style>

Notes

• By <a></a> you can remove the links within href and replace them with your own

• Before closing with </a> you can give your link a name