Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Table of Content

How To Create Google News Followers Card Widget For Blogger

Hello friends, what we are going to see today is how to create Google News Followers Widget For Blogger in this post.
How To Create Google News Followers Card Widget For Blogger

Introduction 

Hello friends, what we are going to see today is how to create Google News Followers Widget For Blogger in this post.

Okay guys let’s go into today’s tutorial.

Google News Followers Widget Demo

How to create Google News Followers Widget 

  1. Friends, the first step is to sign in to your Blogger account and open your Blogger Dashboard.  
  2. Please copy the code given below
  3. <style>
    :root {
        --black: #333;
        --mediumblue: rgba(55, 64, 240, 1);
        --blue: rgba(47, 47, 162, 1);
    }
    
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
    }
    
    a {
        color: inherit;
        text-decoration: none;
        display: block;
    }
    
    .profile-card {
        width: 80%;
        max-width: 560px;
        background-color: #f1f1f1;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    }
    
    .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .top-section {
        position: relative;
        align-items: center;
        display: flex;
        justify-content: center;
        background-color: var(--mediumblue);
    }
    
    .profile-photo {
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        border: 4px solid var(--blue);
        overflow: hidden;
        margin: 1em;
    }
    
    .profile-photo img {
        width: 100%;
    }
    
    .profile-name {
        position: absolute;
        bottom: 1.00rem;
        left: 1.00rem;
        font-size: 0.93em;
        color: #ffffff;
        font-weight: 900;
        text-transform: uppercase;
    }
    
    .info-section {
        display: flex;
        flex-direction: column;
        color: #333;
        padding: 1.8em;
        padding-top: 0;
    }
    
    h2 {
        position: relative;
        font-size: 1em;
        margin-top: 1em;
    }
    
    .border {
        position: absolute;
        left: 0;
        bottom: -0.375rem;
        width: 1.875rem;
        height: 0.1875rem;
        background-color: var(--blue);
    }
    
    p {
        text-align: left;
        font-size: 0.875em;
        margin-top: 0.8em;
    }
    
    .description {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
    
    .followers {
        display: flex;
        justify-content: space-around;
        margin-top: 0.2em;
    }
    
    .followers div {
        color: var(--blue);
        text-decoration: none;
        font-size: 2.25em;
        font-weight: 900;
    }
    
    .follow-link {
        align-self: center;
    }
    
    .btn-f {
        position: relative;
        outline: 0;
        margin-top: 0.7em;
        padding: 0.8em 4em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--blue);
        border: 4px solid var(--blue);
        background: transparent;
    }
    
    .btn-f::before, .btn::after {
        position: absolute;
        content: '';
        width: 0.875em;
        height: 4px;
        background-color: #f1f1f1;
        transform: skewX(50%);
        transition: 0.4s linear;
    }
    
    .btn-f::before {
        top: -4px;
        left: 10%;
        animation: animate-left 5s infinite linear;
    }
    
    .btn-f::after {
        bottom: -4px;
        right: 10%;
        animation: animate-right 5s infinite linear;
    }
    
    .btn-f:hover::before {
        left: 80%;
    }
    
    .btn-f:hover::after {
        right: 80%;
    }
    
    @keyframes animate-left {
        0% {
            left: 10%;
        }
        50% {
            left: 80%;
        }
        
        100% {
            left: 10%;
        }
    }
    
    @keyframes animate-right {
        0% {
            right: 10%;
        }
        50% {
            right: 80%;
        }
        
        100% {
            right: 10%;
        }
    }
    
    @media screen and (min-width: 700px) {
        .profile-card {
            display: flex;
        }
        
        .profile-name {
            left: 50%;
            transform: translateX(-50%);
        }
                
        .follow-link {
            margin-top: 1.5em;
        }
    }
    </style>
  1. Next click on your Themes option and then on the Edit Html option Paste this code above  ]]></b:skin> the tag.

After pasting this CSS code on your website, don't forget to click on the Save Changes option.

  1. Copy the html code given below.
  2. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
        <div class="container">
          <b:include name='-icon'/>
            <div class="profile-card middle">
                <div class="top-section">
                    <div class="profile-photo">
                            
                            <img src="  Your Logo URL " alt=" Your Image Alt text ">
                    </div> <!-- End profile photo -->
                    <div class="profile-name">
                        <span>Ziver Shop </span>       
                    </div> <!-- End name -->
                </div> <!-- End top section -->
                <div class="info-section">
                    <h2>About
                        <div class="border"></div>
                    </h2>
                    <p class="description">Student | Blogger | Content Writer </p>
                        
                    <a href="https://www.ziver-shop.eu.org" class="follow-link"><button class="btn-f">Follow</button></a>
                    <h2>Followers
                        <div class="border"></div>
                    </h2>
                    <p></p>
                    
                    <div class="followers">
                        <div>0</div>
                    </div>
                </div> <!-- End info section -->
            </div> <!-- End card -->
        </div> <!-- End container -->
    1. Next, publish your page after pasting this code on the page of the Html code given below.

Conclusion 

I hope you understand How To Create Google News Followers widget For Blogger through this post.  If you have any doubts after reading this post please let us know your top comments in the comment box
Student / Blogger / Content Writer

Post a Comment