Cara Membuat seperti Iklan feed google adsense di blogger dengan css

To The Point aja ya gak perlu basa basi panjang lebar bikin bingung

Langsung ...

Cara membuat widget seperti iklan feed google adsense di blogspot dengan mengunakan Css

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </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>
Ganti yang saya tandai dengan ke inginan anda

 

Step Kedua cari kode <data:post.body/> dan letakan kode di bwah  diatas atau dibawah kode <data:post.body/> , atau bisa juga menepatkan di add widget HTMl di Tata Letak
Asal jagan di jidadat anda


<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://1.bp.blogspot.com/-A_ejm_elUSg/YLRW7MjkRYI/AAAAAAAAIWA/3tRX_1kn3IcR1SpCXFjdj4DJMBvQrcRUQCLcBGAsYHQ/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>
Ganti yang saya Tandai: sesuaikan

 

Step ketiga cukup klik sinpan .  done lihat hasil nya

ok sekian tutorial " Cara Membuat seperti Iklan feed google adsense di blogger dengan css " trimakasih

1 comment


EmoticonEmoticon