Cara Membuat Kotak Script Dalam Postingan Blog Terlengkap

Hallo sobat blogger... ya kali ini saya akan membahas bagaimana cara membuat kotak script dalam postingan blog. Supaya tampilan postingan di blog kita lebih cantik dan menarik. Kebanyakan para blogger biasanya membuat kotak script ini untuk menaruh informasi penting seperti script HTML atau info penting lainya.

Akan tetapi kotak yang disematkan dalam pembuatan postingan ini tidak disediakan secara default oleh blogspot. Maka dari pada itu kita dituntut agar kreatif untuk membuatnya sendiri. Tenang yang masih bingung gimana cara buatnya disini akan saya buatkan tutorialnya.

Baca Juga: 
Caranya cukup mudah kok sobat, simak dan ikuti langkah-langkah berikut ini:

Langkah 1: Login ke blogger pilih menu Postingan dan pilih Entri baru.
Langkah 2: Buat tulisan, contoh seperti gambar dibawah ini. Lihat yang saya tandai kotak berwana merah, posisi tulisan adalah Compose.
Cara membuat kotak script blog
Langkah 3: Setelah itu copy paste script dibawah ini, dan kembali ke postingan Anda di tadi.
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
.nulkharim (ganti tuliasn ini)
</div>
Langkah 4: Selanjutnya pilih HTML ( jelasnya lihat gambar).
Cara membuat kotak script blog

Langkah 5: Pastekan script yang tadi di copy di bawah postingan (terserah mau menaruhnya dimana sesuai keinginan yang di butuhkan).
Langkah 6: Kembali lagi aktifkan Compose dan lihat hasilnya. Taaaraaaaaaa... sudah ada kotak.
Cara membuat kotak script blog

Langkah 7: Selanjutnya Anda slbisa mengganti tulisan "nulkharim (ganti tulisan ini)" dengan tulisan yang ingin Anda taruh disana, bisa berupa script atau tulisan lain. Mudah kan caranya!!!

Untuk kalian yang ingin menggunakan tampilan lain yang lebih berwarna sesuai dengan keinginan Anda. seperti beberapa pilihan di bawah ini

<div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #1780dd groove; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #1780dd inset; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

.<div style="background-color: white; border: 3px #1780dd ridge; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #1780dd solid; padding: 10px; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
.Nulkharim (ganti tulisan ini).</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
.Nulkharim (ganti tulisan ini).</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">.Nulkharim (ganti tulisan ini).</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;">.Nulkharim (ganti tulisan ini).</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">.Nulkharim (ganti tulisan ini).</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;">.Nulkharim (ganti tulisan ini).</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> .Nulkharim (ganti tulisan ini).</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">.Nulkharim (ganti tulisan ini).</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> .Nulkharim (ganti tulisan ini).</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> .Nulkharim (ganti tulisan ini).</div>

Itulah beberapa pilihan tinggal pilih mana yang Anda suka tinggal copas sudah saya sediakan script HTML nya di dalam kotak sesuai dengan gambar. sekian info yang dapat saya sampaikan semoga bermanfaat dan jangan lupa selalu berkunjung untuk mengetahui tutorial blog yang lainya, Terima kasih dan selamat mencoba.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel