Cara Membuat Kotak Script Dalam Postingan Blog Ada yang pernah melihat tutorial blog yang ada di dalam blog tersebut terdapat kotak cen...
Cara Membuat Kotak Script Dalam Postingan Blog
Ada yang pernah melihat tutorial blog yang ada di dalam blog tersebut terdapat kotak centang atau Kotak Script? Kotak ini berguna banget untuk membedakan antara postingan dan script tutorial kamu. Beberapa postingan saya juga sengaja saya tambahkan kotak naskah seperti di tutorial di bawah ini:
Kotak script seperti ini, tidak disediakan langsung di menu default atau buat blogspot. Jadi untuk membuat skrip kotak ini, kalian harus menggunakan 'MENU POST HTLM' di blog kalian. Lalu, gimana sih cara membuat skrip kotak ini? mudah banget, kalian tinggal ikuti cara aku posting berikut ini. 100% berhasil karena saya sudah coba.
- Login ke blogger dan pilihlah 'Posting atau Entri Baru'
- Lalu pastekan kode script di bawah ini di menu HTML. Contoh Seperti dalam Foto Berikut ini
<div style = "background-color: white; border: 3px # 1780dd double; padding: 10px; text-align: left;">
www.zhiangzieyie.com (Jemari Go Blog) <=== Ganti tulisan yang berwarna merah dengan skrip atau tulisan yang kalian inginkan </div>
www.zhiangzieyie.com (Jemari Go Blog) <=== Ganti tulisan yang berwarna merah dengan skrip atau tulisan yang kalian inginkan </div>
- Maka hasil yang kalian lihat akan seperti di bawah ini.
www.zhiangzieyie.com (Jemari Go Blog)
Mudah sekali kan? Kalian juga bisa mengganti atau mengubah ulang warna latar, ketebalan garis dan lebarnya. Contohnya lihat seperti di bawah ini. Untuk kode warna kalian bisa lihat di sini baca juga
: kode warna html
<div style="background-color: #98FB98 ; border: 1px #1780dd double; padding: 1px; text-align: left;">
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog) <=== Ganti tulisan yang berwarna merah dengan script atau tulisan yang kalian inginkan.
</div>
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog) <=== Ganti tulisan yang berwarna merah dengan script atau tulisan yang kalian inginkan.
</div>
Catatan :
- background-color: #98FB98 (Kalian bisa mengganti warna dengan 'kode warna html'
- border: 1px (Kalian bisa mengganti ketebalan garisnya dengan mengubah angkanya saja)
- #1780dd : Warna Kotak Script. Untuk pilihan warna bisa lihat di 'kode warna html'
- double : Struktur Garis. Kalian bisa mengganti kode garisnya dengan mengganti tulisan 'double' dengan tulisan yang akan aku kasih di kotak script di masing-masing boxnya.
- padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
- text-align:left; = posisi tulisan didalam kotak di kiri
- Copas semua tulisan dalam kotak di atas, untuk mempermudah kalian mengganti di menu compose nantinya.
<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;">
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
<div style="background-color: white; border: 3px #B22222 Solid; padding: 10px; text-align: left;">
www.zhiangzieyie.com (Jemari Go Blog)
</div>
<div style="background-color: white; border: 3px Blue Ridge; padding: 5px; text-align: left;">
www.zhiangzieyie.com (Jemari Go Blog)
</div>
<div style="background-color: white; border: 3px Purple Outset; padding: 5px; text-align: left;">
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
<div style="background-color: white; border: 3px Pink Groove; padding: 5px; text-align: left;">
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
<div style = "background-color: white; border: 3px Red Dotted ; padding: 5px; text-align: left;">
Jika kalian menggunakan kode di atas, maka hasil jadinya akan ditampilkan pada tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
Jika kalian menggunakan kode di atas, maka hasil jadinya akan ditampilkan pada tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
Itu tadi jika kalian ingin menggunakan Script Kotak dengan berbagai macam garis. Tapi, jika kalian tidak ingin menggunakan Garis dalam kotak ini, maka kalian cukup menghapus kode yang bertanda merah. Untuk lebih jelasnya, copas kode di bawah ini.
<div style = "background-color: Green; padding: 10px; text-align: left;"> Jika kalian menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini. www.zhiangzieyie.com (Jemari Go Blog) </div>
Ada juga Kotak Script dengan menggunakan Scrooll Bar. Pasti kalian juga tidak pernah menonton kan? Tenang, aku juga akan memberikan kode scriptnya di bawah ini, biar kalian nggak bingung-bingung nyari di blog lain.
Cara Membuat Kotak Script dengan Scroll di Blogspot
Yee ... Jadi kan? Mau nyoba? udah dipraktekin aja. Kalau kalian suka sama tutorial ini, jangan lupa suka fanspage Blog & Desain Tutorial untuk dapatin update terbaru di blog ini. Selamat mencoba.
<div style = "border: 3px #eeeeee solid; padding: 10px; background-color: #ffffff;
overflow: otomatis; tinggi: 100px; lebar: 520px; perataan
teks: kiri;">
Jika kamu menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)
</div>
overflow: otomatis; tinggi: 100px; lebar: 520px; perataan
teks: kiri;">
Jika kamu menggunakan kode di atas, maka hasil jadinya akan seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog) </div>
COMMENTS