Kode Script Tulisan dalam Kotak Di Tengah Artikel

Kode Script Tulisan dalam Kotak Di Tengah Artikel

Banyak cara untuk memperindah tampilan dalam suatu blog. Baik itu dalam tampilan tema ataupun tampilan saat berposting artikel. Namun kali ini yang akan di bahas adalah mempercantik halaman di dalam postingan artikel saja. Sesuai dengan judul yaitu kita akan memperindah suatu posting dengan menambah tulisan yang berada di dalam  KOTAK.

Selain bisa mempercantik tampilan, Membuat tulisan di dalam kotak juga akan membuat blok kita tampak rapi di mata pengunjung sehinga pengunjung akan merasa betah. Bila tampilan blog rapi maka bisa juga mendapatkan nilai lebih dari mesin pencarian secara otomatis akan bisa meningkatkan Seo. Fungsi lain nya adalah kita bisa menghemat ruang artikel.

Bila kita sering BlogWalking tidak jarang kita menjumpai web atau blog yang sudah menerapkan cara ini. Berikut adalah Kode Script Tulisan dalam Kotak Di Tengah Artikel yang bisa menerapkan di blog masing-masing.

Untuk cara penerapan nya bisa anda lihat di bawah ini :

Cara pertama :

Cara ini adalah cara yang di bilang sangat sederhana
1. Masuk ke blogger anda
2.Klik " Posting Baru "

Pada umumnya kalau kita menulis, kita akan ada di mode " Compose " . Di dalam membuat tulisan dalam kotak harus memakai kode HTML jadi yang perlu anda lakukan adalak klik tulisan " HTML"

* Setelah itu Masukkan kode script ini pada mode HTML

<div style="border: 1px solid rgb(100, 100, 100); height: 200px; overflow: auto; padding: 10px; text-align: justify; width: 500px;">Buat tulisan sesuai dengan artikel yang anda buat. Atau apa saja sesuai dengan keinginan.Contohnya.https://segelrusak.blogspot.com/2019/06/panduan-memasang-meta-tag-otomatis-di.html</div>Keterangan :
- Warna Merah = Ganti dengan link, menu atau text yang mau Anda ingin masukkan kedalam kotak.Keterangan https://segelrusak.blogspot.com/2019/06/panduan-memasang-meta-tag-otomatis-di.html adalah LINK AKTIF sehingga tidak bisa di warnai merah..he..he
- Warna Biru merupakan angka pada height dan weight = Anda dapat merubah panjang dan lebar bisa disesuaikan

* Apabila anda mengikuti step nya kemungkinan anda akan berhasil. Dan Jika berhasil, maka akan Nampak seperti berikut :

Buat tulisan sesuai dengan artikel yang anda buat. Atau apa saja sesuai dengan.keinginan.Contohnya.https://segelrusak.blogspot.com/2019/06/panduan-memasang-meta-tag-otomatis-di.html

Cara Kedua :
Cara ini adalah cara membuat Tampilan yang lebih cantik lagi
1.Ikuti seperti langkah pertama tadi
2.Ikuti seperti langkah pertama juga

*Masukkan kode script ini pada mode HTML

<div align="center">
<table border="4" style="width: 200px;"><tbody>
<tr> <th colspan="100%" scope="col">Blog1</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; height: 80px; overflow: scroll; width: 500px;">
<div style="overflow: hidden; padding: 0 px; text-align: center; width: 100%;">
<ul>
<li><a href="https://segelrusak.blogspot.com/2019/06/panduan-memasang-meta-tag-otomatis-di.html">Panduan memasang meta tag otomatis</a></li>
<li><a href="https://segelrusak.blogspot.com/2019/06/panduan-memasang-meta-tag-otomatis-di.html">Panduan memasang meta tag otomatis</a></li>
<li><a href="https://segelrusak.blogspot.com/2019/06/panduan-memasang-meta-tag-otomatis-di.html">Panduan memasang meta tag otomatis</a></li>
</ul></div></div></td></tr></tbody></table></div>
Keterangan :
- Angka pada height dan width= ukuran panjang dan lebar yang bisa anda sesuaikan sesuai kebutuhan
- Warna Merah = alamat URL yang ingin  Anda masukkan
- Warna Hijau = nama url yang diinginkan (  text )
- Warna Biru = ganti dengan judul yang dikehendaki

*Apabila anda berhasil maka akan ada penampakan seperti di bawah ini:

Blog1
Panduan memasang meta tag otomatis Panduan memasang meta tag otomatis Panduan memasang meta tag otomatis

Masih Banyak lagi kode untuk berkreasi , silahkan di coba. Untuk semua caranya seperti yang sudah di jelaskan tadi di atas.

Kotak Bordir berwarna hijau

<div style="border: 3px #04B45F Double; padding: 10px;background-color:#FFFFFF; text-align: left;">  SEGEL RUSAK </div>

Background biru

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;"> segel rusak</p>

Kotak tabel 4 kolom

<table border="1" style="width: 400px;"> <tbody> <tr> <td align="center">https://segelrusak.blogspot.com/ </td> <td align="center">Segel Rusak </td> </tr> <tr> <td align="center">https://segelrusak.blogspot.com/ </td> <td align="center">Segel rusak </td> </tr> </tbody></table>

segel rusak

Segel Rusak

Segel rusak

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Pastekan Kode script disini</div>

<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">Pastekan kode script disini</div>

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#cccccc; text-align: left;">Pastekan kode script disini</div>

<div class="script" style="background-color: white; border: 3px #1780dd Double; padding: 10px; text-align: left;">Pastekan kode script disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">Pastekan kode script disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Pastekan kode script disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">Pastekan kode script disini</div>

<center><div style="background-color: white; border: 3px double; height: 80px; overflow: auto; padding: 10px; text-align: center; width: 80px;">INI ADALAH CONTOH KOTAK SCROLL. SILAHKAN ANDA GANTI TULISAN INI DENGAN TULISAN ANDA</div></center>

Sekian duru tulisanya , Terima kasih sudah berkunjung.