Membuat Iklan di Web Sendiri

Table of Contents

Sehubungan dengan semakin besarnya potongan Admin di e-commerce yang mencapai 15-20 persen, bahkan ada yang lebih besar dari itu, maka penulis mulai membuat web sendiri khusus untuk jualan, selain untuk menaikan branding sendiri juga buat belajar sesuatu yang baru dalam hal ini penulis belajar wordpress secara serius.

 Mengingat selama ini penulis lebih banyak menggunakan blogspot maka ketika menggunakan wordpress agak lama juga adaptasinya, tapi penulis tetap semangat untuk selalu belajar kok, bahkan punya niat untuk membuat buku Panduan Wordpress Bahasa Indonesia yang lengkap, karena belajar yang baik itu adalah dengan menulis ulang apa yang telah dipelajari.

Di artikel kali ini penulis membuat tutorial sederhana cara membuat dan menampilkan iklan melayang di web berbasis blogspot, kemungkinan bisa diterapkan pada web berbasis lain (saya belum coba)

Pertama buat gambar atau banner yang memuat keterangan dari iklan, sebagai contoh gunakan aplikasi Inkscape.

Atur ukuran halaman Inkscape menjadi 900 x 450 px 

Kemudian buat object persegi panjang ukuran 794 x 340 px warna hitam yang berada ditengah-tengah halaman

Langkah selanjutnya adalah membuat tulisan di tengah-tengan object persegi panjang, dalam hal ini penulis membuat tulisan menggunakan Text Tool, tulisan yang dibuat terdiri dari dua warna yaitu kuning dan merah

Jika desain tulisan yang dibuat sudah jadi, ekspor menjadi format JPG, setelah itu unggah atau upload ke web atau blog, tujuannya untuk mendapatkan kode link gambar tersebut yang nantinya akan disematkan pada TML, CSS, dan JavaScript. contohnya seperti gambar di bawah ini

Klik kanan gambar => pilih View Selection Code yang telah diunggah untuk mendapat code dari gambar tersebut, cari dan salin code yang diawali https://blogger......... dengan akhiran jpg, untuk sementara bisa dipaste ke teks editor dulu.

 

 

Selanjutnya buatlah code HTM/JavaScript menggunakan text editor yang nantinya akan di pasang pada Gadget => HTML/JavaScript

Sebagai contoh Anda boleh menyalin code di bawah ini kemudian melakukan sedikit modifikasi 

==============

<style>
#popup-iklan {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    justify-content: center;
    align-items: center;
}
.konten-popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    width: 90%;
    max-width: 500px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
.tutup-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
</style>

<div id="popup-iklan">
    <div class="conten-popup">
        <span class="tutup-popup" onclick="tutupPopup()">&times;</span>
        <a href="https://istanamedia.net/" target="_blank">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKu6-laFVz-OyzFRlBBcunJ_C4RwRA206dhZgZA9BmNP2XHk1_GUrxU2MYmiv4ABEIPyPPdQkMzFt55KSX68F-e2ruGGG9GuGvUsRbUcjIFRe1dIPL5IQBCgAbOqiKZGLH0I5lgyqLc3BnXdVPzThx0fOQL7fBuAzB1dhJ6ZqiDfkbK_2iTd_45dQl7s/s1304/Tulisan%20iklan_edit.jpg" style="width: 100%; height: auto; border-radius: 5px;" alt="PART TV/MONITOR" />
        </a>
    </div>
</div>

<script>
window.onload = function() {
    setTimeout(function() {
        document.getElementById('popup-iklan').style.display = 'flex';
    }, 3000); 
}

// Fungsi untuk menutup pop-up
function tutupPopup() {
    document.getElementById('popup-iklan').style.display = 'none';
}
</script>

============== 

Keterangan Singkat Script:

Untuk mempermudah pemahaman script di atas pembaca bisa melihat pada warna yang sengaja penulis tandai

• Warna Merah: diisi dengan link alamat web 
• Warna Biru:  diisi dengan link alamat gambar
• Warna Hijau: diisi sesuai jeda waktu iklan yang akan tampil ketika halaman web terbuka (3000=30 detik)

Menambahkan Gadget

Penulis asusmsikan bahwa pembaca sudah login dan berada pada dasbord blogspot, jika belum silakan login

• Pada halaman Dashboard pilih dan klik Tata Letak, kemudian klik TAMBAHKAN GADGET => pilih HTML/JavaSript

 

• Salin/copy script yang sudah dibuat sebelumnya, kemudian tempel/paste pada kotak Konten, sedangkan untuk kotak Judul boleh diisi judul iklan atau pun dikososngkan, jangan lupa aktifkan tombol Tampilkan widget ini sehingga berwarna hijau.
• Selanjutnya klik Simpan untuk menerapkan pengaturan Gadget 

 

• Atur letak Gadget sesuai kebutuhan dengan cara menyeretnya ke lokasi yang sesuai.

• Terakhir klik tombol Simpan di pojok kanan bawah untuk menerapkan iklan yang dibuat agar bisa tampil di halaman web.

Demikian Artikel singkat cara membuat dan manampilkan iklan di web sendiri, semoga bermanfaat untuk pembaca semuanya, sampai jumpa pada artikel selanjutnya, slam leterasi.