Cara membuat papan pengumuman ber-style MONITOR

Hari ini saya akan memenuhi janji saya kepada teman blogger saya - Anton. Janji saya mengajarkan cara membuat papan pengumuman dengan style Monitor, tampilannya tampak seperti gambar di samping.

Papan pengumuman ber-style monitor ini merupakan hasil eksperimen saya, setelah beberapa kegagalan, akhirnya mencapai ote-ote juga (lho, lho...apaan nih??)..Maksudnya, akhirnya berhasil juga.

Jadi, pada nantinya anda dapat mengganti tulisan yang ada di monitor dengan pengumuman anda. Atau anda bisa juga menggunakannya sebagai slot iklan untuk anda jual. Terserah anda ingin menggunakannya sebagai apa.
Tertarik belajar cara membuatnya?. . .

Di sini, untuk membuat kode ini berhasil anda harus mengedit dua tempat di blogger, pertama di edit layout HTML dan yang kedua memasukkan kodenya ke add HTML/Javascript di layout.

Oke, sekarang mari kita lakukan tahap pertama!

Tahap pertama

1. Log in ke account blogger anda - layout - edit html - expand widget templates


2. Kemudian anda copykan kode ini di bagian layout CSS nya.
Cara mencari layout css : tekan ctrl-f, kemudian ketikkan # (yang diawali dengan tanda # adalah bagian dari CSS).

Kalau sudah ketemu, copy-pastekan kode di bawah ini :

#latar_pengumuman { width:350px;height:350px; text-align:center; background:#FFFFFF url(http://img186.imageshack.us/img186/2915/monitorflat.jpg) center center no-repeat; padding:61px 5px 3px 3px; }

3. Click save

4. Nah, kalau sudah, sekarang anda pergi ke layout - edit page element

5. Click pada add html/javascript. Kemudian, pastekan kode di bawah ini:

<center>
<div id="latar_pengumuman">
<center>
<div style="border: 0px solid rgb(238, 238, 238); padding: 20px 10px 10px 5px; overflow: auto; width: 260px; height: 180px;">
<span style="font-weight: bold;">Welcome to my blog
<br/>
9 May 2009<br/>
<br/>

- Di sini anda bisa membeli slot iklan<br/>
- Anda juga bisa menemukan berbagai info menarik juga<br/>
- Silakan menikmati artikel yang ada di blog ini<br/>
- Artikel merupakan artikel fresh dari oven yang dihadirkan setiap harinya untuk anda
<br/>
<br/>
<br/>
<br/>
Untuk pemesanan iklan bisa kirim e-mail ke
stefan421388@yahoo.com
</span>
</div>
</center></div></center>

Anda bisa ganti teks yang ada.
Keterangan
Tanda <br/> --> Untuk enter (atau spasi ke bawah)

6. Jika sudah anda save, dan anda atur peletakannya.

Semoga berhasil, kalau belum berarti anda harus mencoba lagi pelan-pelan dari step satu. Selamar bereksperimen.

Posted in: Tutorial Blog