1. Paste this HTML code in text area as described in the Video.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="popup-container">
<img class="popup-logo" src="logo_source_url" alt="Community Logo" /><strong><span style="color: var(--td_text_color, #111111); font-family: var(--td_default_google_font_2, 'Roboto', sans-serif); font-size: 27px;">News Community</span></strong>
Join the groups below to get latest news and updates.
<div class="button-group"><a class="button tech" href="link1"><i class="fa fa-link" aria-hidden="true"></i> Tech & Telecom</a>
<a class="button startups" href="link2"><i class="fa fa-link" aria-hidden="true"></i> Startups</a>
<a class="button auto" href="link3"><i class="fa fa-link" aria-hidden="true"></i> Auto</a>
<a class="button global" href="link4"><i class="fa fa-link" aria-hidden="true"></i> Global News</a>
<a class="button sports" href="link5"><i class="fa fa-link" aria-hidden="true"></i> Sports</a>
<a class="button entertainment" href="link6"><i class="fa fa-link" aria-hidden="true"></i> Entertainment</a>
<a class="button whatsapp" href="link7"><i class="fa fa-whatsapp" aria-hidden="true"></i> WhatsApp Channel</a></div>
</div>
2. Go to Appearance>customize>Additional CSS, paste this CSS code and then publish it.
.popup-container {
text-align: center;
padding: 20px;
}
.popup-logo {
width: 200px;
mix-blend-mode: darken;
}
.popup-container h2 {
font-size: 1.5em;
color: #333;
margin-bottom: 1px;
}
.popup-container p {
font-size: 1em;
color: #555;
margin-bottom: 20px;
}
.button i {
margin-right: 5px;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.button {
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
color: white;
text-decoration: none;
display: inline-block;
text-align: center;
min-width: 120px;
}
.button.tech { background-color: #007bff; } /* Blue */
.button.startups { background-color: #000; } /* Black */
.button.auto { background-color: #dc3545; } /* Red */
.button.global { background-color: #ffc107; color: #333; } /* Yellow with black text */
.button.sports { background-color: #28a745; } /* Green */
.button.entertainment { background-color: #e83e8c; } /* Pink */
.button.whatsapp { background-color: #25d366; } /* WhatsApp green */