Cara Gampang Menciptakan Iklan Parallax Adsense Di Blog
Cara Praktis Membuat Iklan Parallax Adsense di Blog - Oke pada kesempatan kali ini aku akan share kepada kalian cara memasang iklan parallax di dalam postingan, pada postingan sebelumnya aku sudah singgung cara menciptakan iklan ditengah postingan blog.
Sudah pada tau apa itu parallax? parralax ada lah desain blog yang dimana objek latar paling belakang bergeraknya akan lebih lebih lambat dari pada ddidepannya parallax ini juga sanggup diaplikasikan terhadap iklan adsense ketika teman scroll kebawah atau keatas iklan tersebut akan terlihat membisu pada tempatnya.
Baca Juga : Cara Membuat Slot Iklan Link Mirip Adsense di Blog
Biasanya ukurannya pada iklan parallax ini 300x320 pemasangan iklan parallax ini sangat membantu bagi blog teman kekurangan widget untuk pemasangan iklan.
Oke pribadi saja ke caranya..
Cara Praktis Membuat Iklan Parallax Adsense di Blog
1. Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML lalu copy arahan dibawah ini dan pastekan sempurna diatas arahan </head>.
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> /*<![CDATA[*/ .paralax_div { position: relative; overflow: visible; width: 300px; height: 250px; margin-right: 20px; display: inline-block; float: left; z-index: 99; } .paralax_div > div { overflow: hidden; width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0; clip: rect(auto auto auto auto); } .paralax_div > div > div { width: 100%; height: 100%; position: fixed; top: 0; margin: 0 auto; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .paralax_div > div > div > div { width: 100%; height: 100vh; position: absolute; left: 50%; top: 0; border: none; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .paralax_div > div > div > div > * { margin: 0; margin-top: 0; } .paralax_div > div > div > div > a { width: 100%; height: 100vh; } .paralax_div img,.paralax_div iframe,.paralax_div ins { height: 600px; width: 300px; } .clear { clear: both; display: block } @media screen and (max-width:640px) { .paralax_div { width: 100%; height: 250px; margin: 0 auto; float: none; } .paralax_div > div > div > div { left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .paralax_div > div > div { width: 100%; left:0; text-align: center; } .paralax_div img { margin: 0 auto; width:auto; max-width:100%; height:auto; } } @media screen and (max-width:320px) { .paralax_div iframe,.parallax_banner ins { margin: 0 auto; width:100%; height:600px; } } /*]]>*/ </style> </b:if>
2. Cari kode <div class='post-body entry-content' pada template teman biasanya terdapat banyak arahan tersebut lalu copy arahan dibawah ini dan pastekan sempurna diatas kode <div class='post-body entry-content'
<b:if cond='data:blog.pageType == "item"'> <div class="paralax_div"> <div> <div> <div> <img src="KODE ADSENSE DISINI" alt="Cara Praktis Membuat Iklan Parallax Adsense di Blog Cara Praktis Membuat Iklan Parallax Adsense di Blog" title="Cara Praktis Membuat Iklan Parallax Adsense di Blog" width="300" height="600" /> </div> </div> </div> <span class="clear"/> </div> </b:if>
3. Klik simpan pada template.
Bagi yang bertanda merah sanggup diganti dengan arahan adsense teman sendiri.
Baca Juga : Cara Memasang Iklan Adsense di Tengah Postingan Artikel
Oke sekian yang sanggup aku sampaikan tentang Cara Praktis Membuat Iklan Parallax Adsense di Blog Terima Kasih yang sudah berkunjung agar bermanfaat bagi kalian semua.