Cara Memasang Kotak Iklan Responsive Di Blog

Cara Membuat Kotak Iklan Responsive Di Blog. Kotak iklan merupakan sebuah tempat atau ruang yang digunakan untuk meletakkan unit iklan, baik itu berupa teks maupun gambar. Pastinya kalian sering kali melihat sebuah web yang memasang iklan di bagian dalam web tersebut, baik itu sidebar ataupun yang lainnya.
Baiklah, saya akan segera menunjukkan tentang cara untuk memasang widget space iklan dengan ukuran tertentu pada blog yang bisa responsive di berbagai perangkat. Seperti yang kalian ketahui bahwasannya jika memasang iklan yang tepat dan jelas maka bisa mendatangkan income pada blog kita, oleh karena itu widget ini saya buat responsive.

Baca juga :
Cara Daftar Google Adsense Non Hosted
Cara Mendapatkan Uang Dari Website Kita
Cara Menghasilkan Uang Dari Internet 2018

Panduan Untuk Cara Memasang Berbagai Macam Widget Kotak Iklan Responsive Di Blog

1. Masuk ke dalam blog kalian masing masing
2. Kemudian kalian pilih menu "Tata Letak" dan klik "Tambahkan Gadget"
3. Lalu pilih widget "HTML/JavaScript" dan masukkan salah satu script html di bawah ini ke dalam konten widget tersebut

Widget Space Iklan Banner Ukuran 300px*250px

<style>
.kotak_iklan{width:100%;max-width:300px;display:block;margin:0 auto;padding:0}
.kotak_wrapper{margin:0 auto;left:0;right:0;padding:0;position:relative;max-width:600px}
.kotak_iklan .iklan_besar{max-width:100%;height:auto;max-height:250px;text-align:center}
.kotak_iklan .iklan_besar a img{max-width:100%;height:auto}
@media screen and (max-width:768px){
.kotak_iklan{max-width:100%}
.kotak_iklan .iklan_besar,.kotak_iklan .iklan_kecil,.kotak_iklan .iklan_text{margin:0 auto;position:relative}
.kotak_iklan .iklan_besar{margin:25px auto}}
@media screen and (max-width:340px){
.kotak_iklan .iklan_besar{width:100%;height:auto;margin:0 auto 4px}
.kotak_iklan .iklan_besar a img{height:auto}}
</style>

<div class="kotak_iklan">
<div class="kotak_wrapper">
<div class="iklan_besar">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLWB2EgaIXg6dHHzmoSwL2i4vHLzpUt_3_E_rbl5PKXas7zlD_RoEh498nA1v-yPWJ4wI9UEA0b2e_WGn8dP_3a18J986l51JR8OKy96adI2ziFFbRQfRo6mBSt_T_0L9CEsZj9j8cHBL/s1600/ads+300x250.jpg" height="250px" width="300px"/></a>
</div>
</div>
</div>

Widget Space Iklan Banner Ukuran 125px*125px

<style>
.kotak_iklan{width:100%;max-width:300px;display:block;margin:0 auto;padding:0}
.kotak_wrapper{margin:0 auto;left:0;right:0;padding:0;position:relative;max-width:600px}
.kotak_iklan .iklan_kecil{text-align:center}
.kotak_iklan .iklan_kecil a img{margin:4px;padding:0;border:0}
@media screen and (max-width:768px){
.kotak_iklan{max-width:100%}
.kotak_iklan .iklan_kecil{margin:0 auto;position:relative}}
@media screen and (max-width:340px){
.kotak_iklan .iklan_kecil{width:100%;height:auto;margin:0 auto 4px}
.kotak_iklan .iklan_kecil a img{height:auto;width:calc(50% - 2px);margin:1px}}
</style>

<div class="kotak_iklan">
<div class="kotak_wrapper">
<div class="iklan_kecil">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
</div>
</div>
</div>

Widget Space Iklan Banner Ukuran 300px*250px Dan 125px*125px

<style>
.kotak_iklan{width:100%;max-width:300px;display:block;margin:0 auto;padding:0}
.kotak_wrapper{margin:0 auto;left:0;right:0;padding:0;position:relative;max-width:600px}
.kotak_iklan .iklan_besar{max-width:100%;height:auto;max-height:250px;text-align:center}
.kotak_iklan .iklan_besar a img{max-width:100%;height:auto}
.kotak_iklan .iklan_kecil{text-align:center}
.kotak_iklan .iklan_kecil a img{margin:4px;padding:0;border:0}
@media screen and (max-width:768px){
.kotak_iklan{max-width:100%}
.kotak_iklan .iklan_besar,.kotak_iklan .iklan_kecil{margin:0 auto;position:relative}
.kotak_iklan .iklan_besar{margin:25px auto}}
@media screen and (max-width:340px){
.kotak_iklan .iklan_besar,.kotak_iklan .iklan_kecil{width:100%;height:auto;margin:0 auto 4px}
.kotak_iklan .iklan_besar a img{height:auto}
.kotak_iklan .iklan_kecil a img{height:auto;width:calc(50% - 2px);margin:1px}}
</style>

<div class="kotak_iklan">
<div class="kotak_wrapper">

<!--Iklan Banner Besar-->
<div class="iklan_besar">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLWB2EgaIXg6dHHzmoSwL2i4vHLzpUt_3_E_rbl5PKXas7zlD_RoEh498nA1v-yPWJ4wI9UEA0b2e_WGn8dP_3a18J986l51JR8OKy96adI2ziFFbRQfRo6mBSt_T_0L9CEsZj9j8cHBL/s1600/ads+300x250.jpg" height="250px" width="300px"/></a>
</div>

<!--Iklan Banner Kecil-->
<div class="iklan_kecil">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIeQS8JZQAQkZYAD4lWm3d7ytNvkItG15Lmt0T06GF3XAtNkEFuKw3Ja1aWi3hPrgYggXFRp6qiqSU6U79bCSX_lVbCmAhxOQuWU2lhQNPo3ZankIk-k2CbTvpLRQnaOO9UYEn7rxuEp5/s1600/Ads+125x125.png" height="125" width="125"/></a>
</div>

</div>
</div>

Perhatian :
Jangan lupa untuk mengganti url iklan dan juga url banner iklan pada widget tersebut

4. Jika semuanya sudah selesai dan benar benar siap maka silahkan kalian klik "Simpan" untuk menyimpan perbuahan pada blog kalian

Baca juga :
Cara Membuat Tombol Back To Top Keren Di Blog
Cara Membuat Tombol Demo Dan Download Keren Di Blog
Cara Mengubah Widget Popular Post Menjadi Keren

Itulah panduan singkat mengenai Cara Memasang Kotak Iklan Responsive Di Blog yang mungkin saja bisa berguna untuk kalian dan terima kasih telah berkunjung

Share this post