Siapa yang tak kenal dengan Google AdSense, yup media periklanan terbesar dan paling diinginkan oleh para blogger. Karena sebagian besar orang menginginkan iklan dari adsense meskipun mereka tidak memiliki akun adsense ane kasih iklan alternatif untuk kamu. Iklannya mirip dengan adsense tentunya :D
Demonya bisa dilihat disini
Menarik bukan? Untuk Membuat Iklan Gambar Ala / Seperti Google AdSense silahkan ikuti langkah berikut ini:
1. Simpan code css ini didalam kode ]]></b:skin> atau </style>
.iklanads{position:relative;width:300px;height:250px;margin:0 auto;overflow: hidden;}
.infoads{position: absolute;top: 0;right: 0;background:#D3D3D3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetJ1GlaqoeSPk7l4zKP-yTnN88pnf2YoxcmmXOBFhzh9QZRJ2XGHnxALQZjxe2CSi6RPy_me0hwROwn-c6uYz7_qm5rppzix4agsHO4nQsL3WK60tm6i69ikrSDc0QbjwuX2CS4w-Yj8/s320/googleads.png) no-repeat center;color: #fff;width:17px;height:17px;cursor: pointer;}
.infoads:hover p{display:block;transform-origin: 100% 0%;animation: fadeIn 0.3s ease-in-out;}
.infoads p{ display: none;background-color: #D3D3D3;padding: 1px 6px;position: absolute;top: -11px;right: 15px;width: 100px; border-radius: 0 0 0 9px;color: #000;font: normal 11px arial, sans-serif;}
2. Untuk pemasangan iklannya silahkan ubah kode yang berwarna merah lalu pasang kode berikut pada Widget HTML / JavaScript
<div class="iklanads">
<a href="http://runeanime.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYr62k6rIUupsJqkBLJj9xyuWan9WyMadQxP1aaoTIhhkPlrXTaCsNVV-D9nA1qpK_BDbD2Vdzdfh0apT1t8AL8JV5zp9zDqQNm6Tos5jhPvmmCZNWAoeW7qgAJGAY-vyqvP8bbnfCik/s1600/300x250.gif" alt="Pasang Iklan" title="Pasang Iklan"/></a>
<div class="infoads">
<a href="#" target="_blank" title="Iklan oleh Indcreate"><p>Iklan oleh Indcreate</p></a>
</div>
</div>
3. Simpan dan lihat hasil iklannyaKeterangan:
Ubah http://runeanime.com/ dengan link iklan
Ubah Iklan oleh Indcreate dengan nama blog kamu
Jika kamu Tidak Bisa atau Tidak ingin edit template silahkan gunakan kode berikut di Widget HTML / JavaScript
<style>
.iklanads{position:relative;width:300px;height:250px;margin:0 auto;overflow: hidden;}
.infoads{position: absolute;top: 0;right: 0;background:#D3D3D3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetJ1GlaqoeSPk7l4zKP-yTnN88pnf2YoxcmmXOBFhzh9QZRJ2XGHnxALQZjxe2CSi6RPy_me0hwROwn-c6uYz7_qm5rppzix4agsHO4nQsL3WK60tm6i69ikrSDc0QbjwuX2CS4w-Yj8/s320/googleads.png) no-repeat center;color: #fff;width:17px;height:17px;cursor: pointer;}
.infoads:hover p{display:block;transform-origin: 100% 0%;animation: fadeIn 0.3s ease-in-out;}
.infoads p{ display: none;background-color: #D3D3D3;padding: 1px 6px;position: absolute;top: -11px;right: 15px;width: 100px; border-radius: 0 0 0 9px;color: #000;font: normal 11px arial, sans-serif;}
</style>
<div class="iklanads">
<a href="http://runeanime.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYr62k6rIUupsJqkBLJj9xyuWan9WyMadQxP1aaoTIhhkPlrXTaCsNVV-D9nA1qpK_BDbD2Vdzdfh0apT1t8AL8JV5zp9zDqQNm6Tos5jhPvmmCZNWAoeW7qgAJGAY-vyqvP8bbnfCik/s1600/300x250.gif" alt="Pasang Iklan" title="Pasang Iklan"/></a>
<div class="infoads">
<a href="#" target="_blank" title="Iklan oleh Indcreate"><p>Iklan oleh Indcreate</p></a>
</div>
</div>
Sekian tutorial kaliini semoga bisa membantu :D, jika butuh referensi soal html atau css kesini aja gan :D
0 Komentar Untuk "Membuat Iklan Gambar Ala / Seperti Google AdSense"
Post a Comment
Berkmentarlah dengan baek dan sopan
- jangan melakukan spam ataupun sara Home