In this designing article TrickPk will share a tutorial on How to make Google Adsense infeed Advertisements on Blogger.
How to Create Google Adsense infeed Advertisements on Blogger
Following are the common three steps used to create Google Adsense infeed Advertisements on Blogger.
Step 1. To begin, go to Blogger > Select Theme from the drop-down menu > Edit HTML. After, before you do anything else, look for and add the code below just above it. </head>
<b:if cond='data:blog.pageType != "index"'>
<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-trickpk{background:#fff;width:100%;margin:15px 0;display:inline-block;text-align:center;max-width:680px;padding:10px;border:1px solid #e9e9e982}
#npc-trickpk ul{margin:0;padding:0}
#npc-trickpk ul li{list-style-type:none;width:50%;position:relative;float:left}
#npc-trickpk .trickpk-img{width:320px;height:179px;overflow:hidden;margin-right:5px}
.trickpk-img img{width:100%;height:100%}
.trickpk-info{text-align:left}
.trickpk-info h2{margin-top:5px;font-size:22px;font-weight:500;color:#212121}
.trickpk-info h2 a{text-decoration:none;color:#212121;font-family:'Roboto',san-serif}
.trickpk-info p{margin:8px 0 8px}
.trickpk-info p a{font-size:20px;color:#666;text-decoration:none;position:relative;font-family:'Roboto',san-serif}
.trickpk-info p a:before{content:"AD";background:green;padding:0 5px;border-radius:3px;color:#fff;font-size:13px;display:inline-block;margin-right:5px;font-family:'Roboto',sans-serif}
.trickpk-info p a:hover{text-decoration:underline}
.trickpk-link a{font-size:16px;text-decoration:none;color:#999;font-family:'Roboto',san-serif}
.trickpk-link a:hover{text-decoration:underline}
.trickpk-more{margin-top:25px}
.trickpk-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:"Roboto",sans-serif;font-weight:500;text-decoration:none;color:#fff!important;padding:10px 23px}
.trickpk-tool{position:absolute;top:-3px;right:0}
.trickpk-tool a{text-decoration:none;position:relative;margin-left:3px}
.trickpk-tool a:before{font-family:"Font Awesome 5 Pro";color:#8c9293;transition:all 0.3s ease;cursor:pointer}
a.trickpk-question:before{content:"\f05a"}
a.trickpk-exit:before{content:"\f00d"}
a.trickpk-question:hover:before,a.trickpk-exit:hover:before{opacity:0.8}
a.trickpk-question:after{content:'Ads by Creative';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.trickpk-question:hover:after{opacity:1;visibility:visible}
@media all and (max-width:1040px){#npc-trickpk,.none-mobile{display:none}}
</style>
</b:if>
Step 2. The second step is to find the code <data:post.body/> and put the code below above or below the code <data:post.body/>
<center>
<div id='npc-trickpk'>
<ul>
<li><div class='trickpk-img'><a href='You Link' rel='nofollow' target='_blank'>
<img alt='Title Your Blog' src='https://blogger.googleusercontent.com/img/a/AVvXsEix2JUHyDTDMlz9vqvnc_NIA73Hbl2au7_bKOQS7mOx8qWKLuu1gOs_49BJHz6_orTs4KDc-ryJ4rbfmjD5IAWzhHalacI1KM_kve92dLzdkFISgfbxx0p5fEl9pAYtVNn6xKlBNaFDfNIK44AgAezZ-aFQUZYTFD_7d0W7davJqrgEIuD_ts0WCMJ_=s320' title='Title Your Blog'/>
</a></div></li>
<li class='trickpk-info'>
<h2><a href='You Link' rel='nofollow' target='_blank'>
TrickPk Blog</a></h2>
<div class='trickpk-tool'><a class='trickpk-question'/><a class='trickpk-exit' onclick='document.getElementById('npc-trickpk').style.display = 'none''/></div>
<p><a href='You Link' rel='nofollow' target='_blank'>Known For Tricks and Tips !</a></p>
<div class='trickpk-link'><a href='www.trickpk.com' rel='nofollow' target='_blank'>TrickPk.com</a></div>
<div class='trickpk-more'><a href='You Link' rel='nofollow' target='_blank'>See more</a></div>
</li>
</ul>
</div>
</center>
or you may use the add HTML widget in the original layout (don't worry it's about you ).
Replace the words "highlight green text" with your own "replacement."
Step 3. The third step is to save your work. completed, check out the outcomes
Okay, that concludes the instruction on "How to make Google Adsense infeed advertisements on Blogger with CSS."
Copyright © TrickPk