Cara Membuat Kotak Script Dalam Postingan Blog

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: 

Cara Membuat Kotak Script Dalam Postingan Blog


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>

  • 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>


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>

<div style="background-color: white; border: 3px #B22222 Solid; 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>

<div style="background-color: white; border: 3px Blue Ridge; 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>

<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>

<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>

<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>

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

<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>


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.

COMMENTS

Nama

ADSENSE,4,AFTER EFFECT,2,BAHASA ASING,2,Bahasa Inggris,1,BLOG,24,BNI,3,Brand Local,1,ceritaku,3,CERPEN,6,CorelDraw,1,Curhat,12,DOKTER,2,Dokter Gigi,1,Dokter Hongkong,2,DOKTER KANDUNGAN,2,Dokter Mata,1,Dokter Umum,1,EKSPEDISI,3,EMAIL,1,ENDORSE,1,FILM PENDEK,2,Flash Fiction,1,Gigi,5,GMAIL,1,Halal,1,Hongkong,14,Ilmu Komputer,3,INDONESIA,1,INFO,6,INFO BMI,20,INFO DOKTER,7,JASA PAKET,3,JP BAI,3,JPBAI,4,Kandungan,3,Kecantikan,1,KESEHATAN,1,KOSMETIK,1,KULINER,2,Kulit,3,Kursus Gratis,1,LAKON,5,Lipstik,1,liputan,1,LUAR NEGERI,4,Masakan,1,Masker,1,Microsoft Excel,1,Microsoft Word,2,MODUS,1,MURAH,1,Opini,1,PAKET,3,PENIPUAN,1,Photoshop,2,Produk Local,1,QQP,3,QQP JASA PAKET,5,QQP JASA PAKET LUAR NEGERI,5,Rambut,1,rubik,1,Seputar BMI,24,Seputar Hongkong,22,Tips & Trik,1,Tips & Trik Blog,7,TRAVELING,4,Tubuh,2,Virus,1,Wardah,1,Widget,2,youtube,1,
ltr
item
Zhiang Zie Yie: Cara Membuat Kotak Script Dalam Postingan Blog
Cara Membuat Kotak Script Dalam Postingan Blog
https://4.bp.blogspot.com/-L4qkxLNRwX0/Wkkbh5n6tFI/AAAAAAAAVfo/ahX2iF-3lFUwo2rtHb-lYI7VkvOcgv26gCLcBGAs/s640/cara.jpg
https://4.bp.blogspot.com/-L4qkxLNRwX0/Wkkbh5n6tFI/AAAAAAAAVfo/ahX2iF-3lFUwo2rtHb-lYI7VkvOcgv26gCLcBGAs/s72-c/cara.jpg
Zhiang Zie Yie
https://www.zhiangzieyie.com/2020/07/cara-membuat-kotak-script-dalam.html
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/2020/07/cara-membuat-kotak-script-dalam.html
true
3263550911380837102
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy