How to add Google News Widget for Blogger?

How to add Google News Widget for Blogger?

google news widget for Blogger Blogspot

Google News is a publisher platform for News and Blogger. If your website got approved for Google News then your website get instant index in search console and also get much visitors from google news. In this article BongoWiki gonna share How to add Google News Widget in Blogger/Blogspot website using Html & CSS.

How to add Google News Widget:

To add Google News Widget for Blogger follow the instructions given below.

  • Go to Blogger Layout
  • Click new Gadget section. I suggest you to select sidebar section.
  • Then Select HTML/JavaScript.
  • Give title like this "Google News" and paste the html code given below.

<div class="GoogleNew">

<a class="news" href="" target="_blank" rel="nofollow noreferrer">

<div class="news-image"><img src="" /></div>

<div class="news-name"> YOUR WEBSITE NAME </div>

<div class="news-follow" title="Follow"><i class="icon follow"></i></div>


NB: Red marked text change with your google news link and your site name then save.

Google News Widget for Blogger Blogspot

One more thing you need to do. Go to theme option and add custom css. You can also add this css by editing your theme.

Paste this css to custom css option:

 .GoogleNew a {display:flex;align-items:center;flex-direction:row;position:relative;padding:12px 15px;border:1px solid #ebeced;border-radius:3px;background:transparent;overflow:hidden}

.GoogleNew a:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.025);border-radius:70px 0 5px 0;}

.GoogleNew a .news-image{flex:0 0 auto;width:50px;height:50px;border-radius:50%;overflow:hidden;border: 2px solid #556ee6;padding: .25rem;}

.GoogleNew a .news-image img {background: #fff; padding: .19rem}

.GoogleNew a .news-name{flex-grow:1;margin:0 auto 0 15px;font-family:Google Sans, sans-serif;color:#161617;font-weight: 600}

.GoogleNew a .news-name:after{content:'LIVE 10 followers';display:block;margin-top:5px;color:#137333;font-size:11px;font-family:Google Sans, sans-serif}

.icon.follow svg:hover{fill: #fff;stroke: #fff}

.dark-mode .GoogleNew a .news-name, .dark-mode .profile-data{color: #fff} 

NB: Change red marked "Live xx followers" as you want.

After do this two step accurately then go to your website. Yes, you can see Google News Widget in your website's sidebar.

Hey guys, I think you everyone understand how to add Google News Widget in Blogger. If you have any questions or request then feel free to comment here and don't forget to like our Facebook Page

এ সম্পর্কিত আরও