Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru - KakaKiky | Blog Edukasi
News Update
Loading...

6/17/2016

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru | Tips Dan Trik

Indonesia Ku – hai sobat! Kali ini iky mau nge post tentang Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive. Meskipun diluar sana udah ada banyak artikel semacam ini, tapi iky mau mengemasnya dalam hal yang sedikit berbeda.

Bedanya apa sih? Ya mungkin artikel diluar sana cuman kasih 1 atau 2 script doang, nah kalau iky mau kasih nih lebih dari 2 script. Postingan kali ini bertujuan untuk membantu newbie newbie blogger yang kurang tau atau bahkan tidak tau sama sekali tentang cara membuat kotak script (hahahaha sok jago nih adminnya padahal masih newbie juga :D)

Oke gausah banyak cingcong lagi langsung aja yuk kita cari tau gimana caranya. Nah sobat bisa ikutin cara yang dibawah ini

1| Pastikan dulu kalau sobat itu punya blog! Apa? Gapunya? Jadi ngapain elu baca postingan ini!?

2| Oke sekarang sobat coba untuk membuat entri atau artikel baru seperti biasanya

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru | Tips Dan Trik


3| Setelah masuk ke Menu pembuatan artikel, silahkan sobat pilih mode HTML. Ingat jangan pilih mode Compose!!! Nanti scriptnya tidak bisa work (bekerja)

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru | Tips Dan Trik


4| Copy Scriptnya dan pastekan di mode HTML tersebut. lihat gambar di bawah ini :

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru | Tips Dan Trik

 Nah sobat setelah kamu pastekan scriptnya tadi di mode HTML, sekarang coba lihat hasilnya akan seperti ini :

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru | Tips Dan Trik


Berikut adalah kumpulan Kotak Script Text Yang Unik, Keren, Dan Responsive. Nah sobat bisa mengganti kode yang berwarna merah dengan script ataupun text sobat sendiri. Atau sobat bisa mengetiknya langsung di kota text tersebut.

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Disini
</div>


<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Di sini
</div>

<div style="background-color: #ccffff; border: 3px #ccff00 double; padding: 10px; text-align: left;">
Kode Script Sobat Disini</div>

<div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</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;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #33ff99; border-radius: 10px; border: 2px dashed #ffff99; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 4px double #ccff00; padding: 10px;">
Kode Script Sobat Disini</div>

<div style="border: 2px #ff0066 dashed; padding: 10px; background-color:#ffccff; tex>t-align: left;">Kode Script Sobat Disini</div>

Kotak Script Blog Dengan Scroll

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">
kode script Sobat di sini</div>


Note :
1. Sobat Bisa mengkreasikan warna dari setiap Kotak Script Yang ada dengan cara merubah kode warna html nya.
> Untuk merubah warna background sobat bisa merubah kodenya seperti background-color:#ffccff (Ganti kode merah tersebut dengan kode warna yang sobat inginkan)
> Untuk merubah warna garis bordernya silahkan ganti kode border: #cccccc (Ganti kode yang berwarna merah)


Berikut Kumpulan Kode Warna HTML

Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive Terbaru | Tips Dan Trik


2. Untuk Kotak berbentuk scrool sobat bisa merubah ketinggian dan lebar dari kotak tersebut dengan cara merubah height: 100px; width: 520px;

3. Sobat bisa mengganti text "Kode script Sobat Disini" sesuka hati sobat.

Sekian dulu ya sobat tentang artikel "Kumpulan Cara Membuat Kotak Script Unik, Keren, Dan Responsive" Semoga bermanfaat buat sobat sobat semua :D kalo ada yang kurang jelas boleh ditanyakan langsung di form komentar.

Jangan lupa di share kalo sobat berkenan Wassalam.


Share with your friends

23 komentar

  1. wah harus dicoba. Makasih kak..

    BalasHapus
  2. waaah keren nih artikelnya,

    saya nulis banyak make ini...

    lanjutkan broooo....

    BalasHapus
  3. Warna ijo keren gan, ijin praktek

    BalasHapus
  4. Kalo desain web sekarang itu lagi tren flat design, jadi contoh script nomor 5 itu yang pas untuk tren sekarang. Thanks gan, buat referensi

    BalasHapus
  5. keren nih gan work di templateku, req kotak script Jalantikus

    BalasHapus
  6. wahh keren nih kotak script, thanks gan :D

    BalasHapus
  7. mantap tutorialnya, terimakasih ya de,,, keren.

    BalasHapus

Notification
KakaKiky.id Adalah sebuah blog yang bergerak di bidang pendidikan, khususnya pendidikan kepramukaan. KakaKiky update postingan setiap harinya, bagi kamu yang tidak ingin ketinggalan informasi update terbaru, jangan lupa untuk subscribe menggunakan email kamu. Salam Pramuka and Be Prepared!
Done