Breaking News

Membuat Efek Bingkai Pada Widget Javascript, Text, atau Gambar Dengan CSS/Div Style

B anyak hal yang dapat kita lakukan untuk memperindah tampilan blog/website kita. Diantaranya memberi efek bingkai pada gambar atau widget dengan css dan div style. Tanpa harus saya jelaskan apa itu css dan div style, karena mungkin anda lebih tahu dari saya. Di sini, saya hanya berbagi cara mudah dan praktis. Walaupun anda tak mengerti dengan bahasa keduanya tak jadi masalah. Jujur, saya sendiri kurang begitu faham. Yang akan saya bagikan adalah langsung ilmu praktek bukan teori. Jadi jika anda ingin tahu teorinya, cari saja di google dengan kata kunci tersebut. Tak kurang para webmaster di dunia ini yang mengulas keduanya.

Oke, kita mulai saja. Untuk lebih jelasnya silahkan klik contoh gambar dan efek kode javascript yang sudah saya bubuhi div style berikut:



Gimana sobat? Anda tertarik? Cara membuatnya sangat mudah. Anda cukup meng copy-paste kode-kode yang sudah siap pakai yang telah dirancang oleh para webmaster. Sebenarnya tutorial ini banyak digunakan oleh para wapmaster seperti xtgem.com dan wen.ru. Namun setelah saya pasang di blogspot, bisa juga tuh. Karena blogspot sendiri support HTML/JavaScrip. Anda bisa meletakkannya di sidebar sebagai widget. Caranya, masuk ke blogger-->tambah gadget-->HTML/JavaScript-->paste kode di sana. Atau pada postingan juga bisa, karena postingan blogspot adalah HTML. Berikut saya kasih contoh kode div style:

<div style="border:4px solid#00001f"><div style="border:4px solid#00001f"><div style="border:4px solid#00003f"><div style="border:4px solid#00004f"><div style="border:4px solid#00005f"><div style="border:4px solid#00006f"><div style="border:4px solid#00007f"><div style="border:4px solid#00008f"><div style="border:4px solid#00009f"><center><font color="yellow"> Teks, link gambar, javascript di sini</font></center></div></div></div></div></div></div></div></div></div>

Format penulisan link gambar adalah:
<img src="http://link gambar anda">

Untuk contoh model div style yang lainnya anda bisa klik link berikut:

Div Style
Div Style 2
Div Style 3

Tidak ada komentar

Jika ada pertanyaan, sekedar sharing pendapat, dll, Silakan Isi komentar di bawah ini: