Membuat iklan mini diam di tempat

By HP Yitno

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:



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 :