Dangling Rainbow Hearts

Asalamualaikum sahabat >💗>Modetorial<💗<
Kali ini saya ingin memberikan informasi bagaimana cara membuat kotak html di halaman blog, kotak html ini sebenarnya adalah cara menulis script agar tidak dibaca oleh sistem, untuk itu kita harus membuatkan tempatnya. sebenarnya saya juga sudah pernah menulis artikel tentang "Cara menyisipkan HTML di halaman blog" tetapi disitu hanya sebatas kotak sederhana, nah kalau disini saya akan menyambungnya dengan memberikan jenis garis yang dipakai untuk kotak tersebut.
nah langsung aja ikuti langkahnya.
Cara membuat kotak sederhana
Masuk kedalam Mode HTML di halaman blog kemudian masukan kode berikut ini:

<div style="border: 3px #ff0000 Double; padding: 10px;background-color:#ffffff;
text-align: left;">
Edit tulisan ini</div>

maka hasilnya akan sjadi seperti ini:
Edit tulisan ini

kemudian kita bisa mengcostum garis diatas sesuai dengan apa yang kita mau.
tingga merubah bahasa nya saja yang mengartikan kode tersebut. berikut arti kode tersebut:
1. Ketebalan garis ganti nilai 3px di kode ( border: 3px )
2. Ganti warna garis bisa di rubah kodenya di ( 1780dd )
3. Ganti Jenis Garis dengan costum di ( Double  ) menjadi kode berikut:
-dashed
Edit tulisan ini
-dotted
Edit tulisan ini
-Groove
Edit tulisan ini
-inset
Edit tulisan ini
-outset
Edit tulisan ini
-ridge
Edit tulisan ini


4. Untuk menempatkan tulisan di sebelah kiri atau tengah atau kanan kalian cukup mengganti kode yang berwarna merah ini ( text-align:left ) menjadi tulisan:
Left = Rata Kiri
Center = Rata Tengah
Right = Rata Kanan
menjadi seperti ini:
Edit tulisan ini

bagaimana menurut kalian? apakah bisa membantu?
tapi kalau mau kode html nya panjaaaaang banget, kalian bisa menggunakan kode berikut ini:
<div style="border: 3px #eeeeee solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 520px;
text-align: left;">
Jika kode script panjang tulis disini</div>

maka hasilnya jadi seperti ini:
Jika kode script panjang tulis disini
maka akan mncul garis scrol di samping dengan sendirinya
dan kalau tulisan ini sedikit, maka
scrollnya tidak akan muncul.
cuma ada tulisa saja.
maka dari itu saya buat tulisan agak panjang disini
agar scrollnya muncul


Cara membuat Kotak Scroll agar ada judulnya langsung
Hampir sama caranya dengan di atas, hanya saja berikut ini langung memiliki judul, yang biasanya terbagi menjadi kotak kecil.
langsung saja copy scrip dibawah ini:
<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col">JUDUL DISINI</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Ganti tulisan ini dengan artikel kalian yang panjang. dan format ini bisa kalian ganti di menu html dengan rata kiri atau kanan atau rata tengah seperti ini, hanya perlu mengubah tulisan ini saja jika skrip di atas sudah kalian copy kan ke blog kalian.</div></div></td></tr>
</table>
</div>

maka penampilanya akan menjadi seperti ini:
JUDUL DISINI
Ganti tulisan ini dengan artikel kalian yang panjang. dan format ini bisa kalian ganti di menu html dengan rata kiri atau kanan atau rata tengah seperti ini, hanya perlu mengubah tulisan ini saja jika skrip di atas sudah kalian copy kan ke blog kalian.
Catatan: Jenis font dan ukuran font juga dapat kalian rubah seperti biasa setelah mengcopy kan kode html diatas ke dalam postingan blog dengan mode html

UNTUK MEMBUAT MENU DI SATU HALAMAN
maka masukan kode html berikut ini:

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">DAFTAR ISI</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">


<ul>
<li><a href="http://alamat url">judul 1</a></li>
<li><a href="http://alamat url">judul 2</a></li>
<li><a href="http://alamat url">judul 3</a></li>
<li><a href="http://alamat url">judul 4</a></li>
</ul>

</div>
</div>
</td></tr>
</tbody></table>
</div></div></div></td></tr>
</table></div>
silahkan di ganti yang warna merah sesuai dengan judul daftar isi blog kalian dan link url blog kalian yang sesuai dengan judul
Maka hasilnya akan seperti ini



MUDAH-MUDAHAN BERMANFAAT DAN BISA DI PRAKTEKAN
TERIMAKASIH

 
Top