Membuat iklan mini diam di tempat - HP Yitno Membuat iklan mini diam di tempat - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Membuat iklan mini diam di tempat

Apa kabar sahabat?
Kalau kita tengok ke belakang, blog yang paling sering dikunjungi adalah blog yang membahas tutorial. Bagaimana tidak, orang yang ahli desain web masih sedikit. Sedangkan blogger baru terus bermunculan. Yang ada dalam benak blogger pemula adalah tampilan blognya bukan isinya. Itulah yang terjadi pada diri saya kala itu. Fokus utamaku adalah memperindah tampilan blog tanpa memperhatikan loading dan isi blog. Isi artikel juga masih copas sana copas sini.

Waktu terus berjalan, bukan kepuasan yang diperoleh melainkan kebosanan. Maka dari itu yuk kita mulai belajar menulis dengan gaya bahasa kita sendiri. Seiring berjalannya waktu, kamu akan tersenyum membaca tulisanmu sendiri. Saya jadi teringat dengan sms dari pak Imam Supriyono. Beliau pernah sms ane begini,"menulislah tiap hari satu halaman dan jangan dibaca selama satu tahun." Berapa halaman yang berhasil kita tulis kalau kita komitmen menulis tiap hari satu halaman?

Berbicara mengenai tutorial, ane mau ngasih sedikit tutorial tentang membuat banner mini fixed position atau diam ditempat. Seperti headline news atau kabar patas gitu lho sob. Tutorial ini full menggunakan kode css. Tapi nggak sampai merubah template kok sob. Cuma memanfaatkan menu add widget aja. kalian juga bisa mengedit sesuai selera. Nanti ane kasih penjelasannya.

Berikut kode selengkapnya:


<style type="text/css">
#style {position:fixed; bottom:0px; right:0px; left:0px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77ACxexZkLEqRMZZKDeKnq_1q_gsYOMzjjLjzTESknWJVH1bhr9mI958j3xhKshUvZxgCpcXKt6v60PW1uykfUwy5IpDLvTLXu6u6BqWG2TeIz8poX6Zo44EUr8WwlQxge4hSaOw73Gaj/s30/background.png"); background-repeat:repeat-x;}
#text {position:relative; top:0px; left:110px; right:20px; color:red; font-size:16px;}
#logo {position:fixed; bottom:-9px; left:0px;}
</style>

<div id=style><div id=text><marquee scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()">Tulisan kamu</marquee></div><div id=logo><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghMzmq6Y4djGxBSo1APPMvumSHK8AFmMCGMvoM86k7BaXPJwsC-egAn2kMpuXD4L_cpc1gDC3qj0mPu_lj2Fhmlm3v7xNtTBH5pUWuYtKnVf8L6h_xOI3b8pOKDOzUVvlJ1XuRgITh-hUf/s110/logo.png" /></div></div>


Posisi dan jenis tulisan:
bottom  :  jarak penempatan dari bawah (pixel atau %)
left        :  jarak penempatan dari sebelah kiri (pixel atau %)
top        :  jarak penempatan dari atas (pixel atau %)
right      :  jarak penempatan dari sebelah kanan (pixel atau %)
color     : warna tulisan
font-size: besarnya tulisan

Background atau style:
background:blue;                 : membuat latar belakang dari warna standar (warna dalam bahasa inggris)
background-image:url("url");   : membuat latar belakang dari sebuah gambar.
background-repeat:repeat-x;  : membuat gambar kecil diperbanyak sesuai sumbu x (y untuk ke atas)

Pengaturan tulisan atau marquee:
scrollamount:"4"                : berfungsi untuk mengatur kecepatan gerakan (semakin tinggi semakin cepat)
onmouseover="this.stop()": tulisan berhenti saat mouse berada diatas tulisan
onmouseout="this.start()"  : tulisan kembali berjalan saat mouse tidak berada diatas tulisan

Untuk screenshootnya seperti gambar dibawah ini:

banner iklan mini

Cara pemasangannya:
1. Login ke akun blogger
2. Tekan gambar roda gigi pada dashboard
3. Klik tata letak
4. Klik add widget
5. Pilih HTML/JAVASCRIPT
6. Salin kode diatas dan tempatkan pada html/javascript tadi
7. Kalau sudah tekan save (simpan)
8. Drag atau letakkan widget tadi ke posisi yang paling bawah.
9. Simpan setelan dan lihat hasilnya.

Silahkan di edit sesuai selera anda. Selamat mencoba..!!
SHARE :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
22 Komentar untuk "Membuat iklan mini diam di tempat"

Kreatifitas adalah ketika anda mampu merealisasikan apa yang ada dalam pikiran anda.

andai saja adsense bisa dimodif begitu
hehehehe

Adsense dilarang muncul seperti itu... :D

Makasih yah mas untuk tipsnya.... berarti bisa pindah di bagian atas juga yah ?

Keren dan kreatif Kang.
Saya juga pernah masang aneka widget dan tampilan unik, akirnya banyak yang saya lepas soalnya bikin loading jadi berat

Kalau adsense bisa dipasang kayak gitu, para blogger mania yang diuntungkan.

Tapi kalau iklan pribadi kan boleh kak. Makanya ane memberi penawaran pada pengusaha yang ingin memperkenalkan bisnisnya dengan memasang iklan disini. Masalah harga insyaallah murah banget.

Bisa banget kang. kalau sobat lihat sebelah kiri atas, itu juga menggunakan css yang sama. Hanya posisi dan nilainya aja yang beda.

Seperti di blog ane yang sudah nggak keurus juga banyak widgetnya. Karena loading blognya berat, terpaksa ane bongkar dan ane kembalikan ke standar template.

Tapi untuk css yang ini tetep ane gunakan sebagai kabar patas (cepat terbatas). Untuk menginformasikan pada pengunjung juga kalau blog ini menerima jasa pemasangan iklan.

wah, keren kang, kayanya sekarang lebih fokus ke tutorial neh :D

keren tuh, promosinya :D

Iya nih kang sudah lama sekali nggak membahas tutorial css. Kangen juga otak-atik template. Sekalian mengabadikan hasil uji cobaku. Kalau lupa, ane tinggal baca aja postingan-postinganku.

Iya kak. Barangkali ada yang ingin memncoba bikin headline news kayak punyaku.

Belum dimonetize, Mas. Jadi belum dapet iklan nih. Btw, makasih tipsnya yang keren en simple ini. :D

Daftar adsensecamp aja sob. Punyaku aja ane daftarin adsensecamp. Simple dan cara pendaftarannya juga mudah

Seharusnya bisa mbak, Tapi ane belum nyoba di wordpress sih.
kalau sobat mengerti kode css bisa di uji coba kak.

Terima kasih ilmunya, Pak.
Alhamdulillah, sudah saya terapkan di blog dan berhasil.
Sekali lagi terima kasih.

Sama-sama sobat, Untuk gambar atau pengaturan jarak bisa disesuaikan dengan keinginan. Makasih sudah mau menggunakan css hasil eksperimenku.

sudah saya terapkan mas, cuma untuk menautkan kata ke suatu link kayaknya masih perlu penjelesan niii.....
:)

owh sudah paham saya.....
terimakasih mas...
andai saya tahu ini cara buat itu dari awal.....
:)

ok mas, udah qu terapkan di blogku. mkasih

Screen shotnya kurang jelas mas, kayak gimana sieh jadinya :)

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top