How to make like google adsense feed ads on blogger with css - invesroc

Just to the point, there's no need for long talk and confusion

Live ...

How to make a widget like google adsense feed ads on blogspot by using CSS

First, open Blogger > Click the Theme menu > Click Edit HTML > Then find and add the code below before </head>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script>
//<![CDATA[
function loadCSS(e,t,o){"use strict";var i=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet",i.href=e,i.media="only x",s.parentNode.insertBefore(i,s),setTimeout(function(){i.media=o||"all"})}loadCSS("https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css")
//]]>
</script>
<style>
#npc-ga{background:#fff;width:100%;margin:15px 0;display:inline-block;text-align:center;max-width:680px;padding:10px;border:1px solid #e9e9e982}
#npc-ga ul{margin:0;padding:0}
#npc-ga ul li{list-style-type:none;width:50%;position:relative;float:left}
#npc-ga .ga-img{width:320px;height:179px;overflow:hidden;margin-right:5px}
.ga-img img{width:100%;height:100%}
.ga-info{text-align:left}
.ga-info h2{margin-top:5px;font-size:22px;font-weight:500;color:#212121}
.ga-info h2 a{text-decoration:none;color:#212121;font-family:&#39;Roboto&#39;,san-serif}
.ga-info p{margin:8px 0 8px}
.ga-info p a{font-size:20px;color:#666;text-decoration:none;position:relative;font-family:&#39;Roboto&#39;,san-serif}
.ga-info p a:before{content:&quot;AD&quot;;background:green;padding:0 5px;border-radius:3px;color:#fff;font-size:13px;display:inline-block;margin-right:5px;font-family:&#39;Roboto&#39;,sans-serif}
.ga-info p a:hover{text-decoration:underline}
.ga-link a{font-size:16px;text-decoration:none;color:#999;font-family:&#39;Roboto&#39;,san-serif}
.ga-link a:hover{text-decoration:underline}
.ga-more{margin-top:25px}
.ga-more a{background-color:#4e92df;border-radius:2px;box-shadow:0 0 2px 0 rgba(0,0,0,0.12),0 2px 2px 0 rgba(0,0,0,0.24);font-family:&quot;Roboto&quot;,sans-serif;font-weight:500;text-decoration:none;color:#fff!important;padding:10px 23px}
.ga-tool{position:absolute;top:-3px;right:0}
.ga-tool a{text-decoration:none;position:relative;margin-left:3px}
.ga-tool a:before{font-family:&quot;Font Awesome 5 Pro&quot;;color:#8c9293;transition:all 0.3s ease;cursor:pointer}
a.ga-question:before{content:&quot;\f05a&quot;}
a.ga-exit:before{content:&quot;\f00d&quot;}
a.ga-question:hover:before,a.ga-exit:hover:before{opacity:0.8}
a.ga-question:after{content:&#39;Ads by Creative&#39;;font-size:11px;color:#212121;background:#fff;float:left;margin-right:5px;margin-top:2px;padding:1px 2px;opacity:0;visibility:hidden;transition:all 0.2s ease}
a.ga-question:hover:after{opacity:1;visibility:visible}
@media all and (max-width:1040px){#npc-ga,.none-mobile{display:none}}
</style>
</b:if>

Replace what I marked with what you want

 

The second step is to find the code <data:post.body/> and put the code below above or below the code <data:post.body/> , or you can also put it in the add HTML widget in the original layout
, don't worry about your forehead

<center>
<div id='npc-ga'>
<ul>
<li><div class='ga-img'><a href='You Link' rel='nofollow' target='_blank'>
<img alt='Title Your Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji30Kk6qKnTIsumaVmwgYH23_zKCfQAYygrJMShs5OgCPDtMjkkWuM9podHyUKquxYLTW6cfu7nT_XF1bbHenqbatxjSgIQpUlMQJ6G1iWM42LlkQYQz3q9Z_CXDQx5Wa45tjKVMYkXCk/s16000/clonedsgn.jpg' title='Title Your Blog'/>
</a></div></li>
<li class='ga-info'>
<h2><a href='You Link' rel='nofollow' target='_blank'>Title Your Blog</a></h2>
<div class='ga-tool'><a class='ga-question'/><a class='ga-exit' onclick='document.getElementById(&apos;npc-ga&apos;).style.display = &apos;none&apos;'/></div>
<p><a href='You Link' rel='nofollow' target='_blank'>Your Blog Description</a></p>
<div class='ga-link'><a href='You Link' rel='nofollow' target='_blank'>Domain Name.com</a></div>
<div class='ga-more'><a href='You Link' rel='nofollow' target='_blank'>Read more</a></div>
</li>
</ul>
</div>
</center>

Replace what I Mark: customize

 

The third step is to click save. done, see the results,

ok, that's the tutorial " How to make a google adsense feed like ads on blogger with css " thank you