Cara Membuat Kotak Script Dalam Postingan Blog

Cara Membuat Kotak Script Dalam Postingan Blog Ada yang pernah lihat blog tutorial yang di dalam blog tersebut terdapat check box atau Kotak...

Cara Membuat Kotak Script Dalam Postingan Blog


Ada yang pernah lihat blog tutorial yang di dalam blog tersebut terdapat check box atau Kotak Script? Kotak tersebut berguna banget untuk membedakan antara postingan dan script tutorial kalian. Beberapa postinganku juga sengaja aku tambahin kotak script seperti di tutorial di bawah ini : 

Cara Membuat Kotak Script Dalam Postingan Blog


Kotak script seperti ini, tidak disediakan langsung di menu default atau compose blogspot. Jadi untuk membuat kotak script ini, kalian harus menggunakan 'MENU POST  HTLM' dalam blog kalian. Lalu, gimana sih cara untuk membuat kotak script ini? mudah banget, kalian tinggal ikuti cara yang aku post berikut ini. 100%  working karena sudah aku coba. 
  • Login ke blogger dan pilihlah 'Post 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 script 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 mengedit ulang background-color, 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 seperti tampilan ini.
www.zhiangzieyie.com (Jemari Go Blog)

</div>

Itu tadi jika kalian ingin menggunakan Kotak Script dengan berbagai macam garis. Tapi, jika kalian tidak ingin menggunakan Garis dalam kotak tersebut, maka kalian cukup menghilangkan kode yang bertanda merah. Untuk lebih jelasnya silahkan 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 pernah melihatnya 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: auto; height: 100px; width: 520px;
text-align: left;">



Jika kalian 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 like 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,7,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,6,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,5,QQP JASA PAKET,7,QQP JASA PAKET LUAR NEGERI,7,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/2017/12/cara-membuat-kotak-script-dalam.html
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/2017/12/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