Widget de invitación para unirse a tu grupo de telegram echo con HTML y CSS

Hola, este es un widget que logre extraer de cinehax.com, "me gusto jaja" si te gusta el widget al igual que a mi, puedes colocarlo en tu sitio. Más abajo te dejare el codigo html y css que tendras que pegar dentro de un widget tipo "HTML" en blogger (para wordpress seria algo igual) y para poder colocar el codigo "CSS" tendras que colocarlo dentro de las etiquetas <style>__AQUI__</style> dentro del mismo widget a crear.

HTML

<div class="social_box"> <a href="https://t.me/+B5FUfo7zobs0MjUx" class="bubble mt-2" target="_blank" rel="nofollow noreferrer noopener"> <p>Únete a nuestro canal de</p> <p> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <path d="M46.137,6.552c-0.75-0.636-1.928-0.727-3.146-0.238l-0.002,0C41.708,6.828,6.728,21.832,5.304,22.445c-0.259,0.09-2.521,0.934-2.288,2.814c0.208,1.695,2.026,2.397,2.248,2.478l8.893,3.045c0.59,1.964,2.765,9.21,3.246,10.758c0.3,0.965,0.789,2.233,1.646,2.494c0.752,0.29,1.5,0.025,1.984-0.355l5.437-5.043l8.777,6.845l0.209,0.125c0.596,0.264,1.167,0.396,1.712,0.396c0.421,0,0.825-0.079,1.211-0.237c1.315-0.54,1.841-1.793,1.896-1.935l6.556-34.077C47.231,7.933,46.675,7.007,46.137,6.552z M22,32l-3,8l-3-10l23-17L22,32z" fill="currentColor" data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor;"></path> </svg> Telegram </p> <p>y recibe todas nuestras actualizaciones</p> </a> <div id="cinehax.com_300x250_desktop"></div><div id="cinehax.com_300x250_mobile"></div></div>

Ahora solo reemplaza "https://t.me/+B5FUfo7zobs0MjUx" con el enlace de tu grupo de telegram y listo!

CSS

.social_box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.social_box .bubble {
    border-color: rgb(11, 137, 173);
    color: rgb(232, 230, 227);
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUjPa1cBw4Dh9Q3zlGaNp6s7Vqoi-Ul6mv6of7qiFvo_Dc38hMrqDce1dmkYY-heNnAalN8QhL7wVP1mvtGHgBweH1f-1BQEt7dQeWL8mdJjGsYrDOy8azXxZRsqJ-Wv9LGF0vwQLnsM_kO_BkjvAS8tbprqzx9QLhblcIO7M9aJUKhu16kfmUeWR1KhC/s1600/emojis-patt.png);
}
.social_box .bubble {
    width: 100%;
    border-radius: 20px;
    border: 3px solid #0eb1e0;
    min-height: 100px;
    position: relative;
    margin-left: 15px;
    text-align: center;
    color: #fff;
    padding: 20px 10px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUjPa1cBw4Dh9Q3zlGaNp6s7Vqoi-Ul6mv6of7qiFvo_Dc38hMrqDce1dmkYY-heNnAalN8QhL7wVP1mvtGHgBweH1f-1BQEt7dQeWL8mdJjGsYrDOy8azXxZRsqJ-Wv9LGF0vwQLnsM_kO_BkjvAS8tbprqzx9QLhblcIO7M9aJUKhu16kfmUeWR1KhC/s1600/emojis-patt.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.social_box .bubble p {
    font-size: 22px;
    font-weight: 700;
    line-height: 22px;
    margin-top: 0;
    margin-bottom: 1rem;
}
.social_box .bubble p:nth-child(2) {
    color: rgb(50, 199, 242);
    text-shadow: rgb(38, 42, 43) 0px 1px 1px;
}
.social_box .bubble p:nth-child(2) {
    font-size: 36px;
    color: #0eb1e0;
    text-shadow: 0 1px 1px #333;
}
.social_box .bubble p {
    font-size: 22px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 1rem;
}
.social_box .bubble p svg {
    max-width: 36px;
    vertical-align: middle;
}
.social_box .bubble p:nth-child(3) {
    font-size: 18px;
    margin-bottom: 0;
}
.social_box .bubble p {
    font-size: 22px;
    font-weight: 700;
    line-height: 22px;
}
.social_box .bubble::before {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: rgb(11, 137, 173);
    border-left: 0px;
}
.social_box .bubble:before {
    border: 14px solid transparent;
    border-right-color: #0eb1e0;
    border-left: 0;
    margin-top: -14px;
    margin-left: -17px;
}

.social_box .bubble::after {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: rgb(135, 125, 111);
    border-left: 0px;
}
.social_box .bubble:after {
    border: 12px solid transparent;
    border-right-color: #0a0e17;
    border-left: 0;
    margin-top: -12px;
    margin-left: -12px;
}
.social_box .bubble:after, .social_box .bubble:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    left: 0;
}

.social_box .bubble::before {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: rgb(11, 137, 173);
    border-left: 0px;
}
.social_box .bubble:before {
    border: 14px solid transparent;
    border-right-color: #0eb1e0;
    border-left: 0;
    margin-top: -14px;
    margin-left: -17px;
}
.social_box .bubble:after, .social_box .bubble:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    left: 0;
}