› › ›

Cara Lengkap Membuat Kotak Script Dan Kotak Sroll Dalam Postingan Blog

Tuesday, February 19, 2019 13 Comments
Membuat Kotak Script Dan Kotak Scroll
- Penggunaan Kotak Script ini sangat cocok sekali dengan Blog yang membahas tentang kode script html, CSS dan tutorial agar bacaan yang di sampaikan lebih rapih dan tidak bercampur dengan text lainnya, biasanya konten yang di tampilkan jadi profesional dengan embel-embel Script Box, jadi tidak berantakan. Namun sayangnya fitur kotak script dan kotak scroll ini juga sangat jarang dipakai untuk artikel blog yang membahas perihal Gosip, Tips, Kuliner, Pendidikan, Olahraga. 

Ada beberapa contoh Kotak Script dan Kotak Scroll atau nama kerennya itu Scroll Box. Dibawah ini Saya telah merangkum semua kode-kode untuk membuat Kotak Script dan Scroll Box, yang mungkin sangat membantu dalam membuat artikel yang membahas kode-kode script, content, atau hal-hal penting lainya, supaya kelihatan lebih rapi dan mengagumkan dengan variasi quot ini, sangat cocok untuk pemakaiannya di Blog sobat.

 Kelebihan Dan Kegunaan
* Dengan memakai kotak script akan lebih rapi alasannya yaitu mampu memisahkan antara text biasa dan script html, tersusun didalam satu kotak atau box area. Apa bila artikel sobat membahas tutorial yang harus menampilkan Script Html.

 * Akan lebih menarik jika sebagai kawasan konten pilihan post terkait, tombol download, atau yang lainnya. Script Box ini cocok digunakan dalam membuat rumah bagi Script Html agar terlihat lebih rapih dan elegan.

* 25 Jenis Kotak Script ini tidak akan membuat lambat Loading blog alasannya yaitu arahan yang digunakan sangat minimal dan memakai kode yang ringan.

 Cara pemasangannya sangat mudah dan tentu sobat semua sudah paham, atau mungkin sudah sudah sering membuat dengan cara versi dan bentuk yang berbeda. Berikut langkah-langkah 25 Jenis Dan Cara Lengkap Membuat Kotak Script Dan Scroll Box Dalam Postingan Blog

  • Silahkan LOGIN ke Blogger/Wordpress.
  • Buat postingan baru atau bisa juga mengedit artikel lama.
  • Sobat bisa menggunakan mode Html pada kolom postingan nya.
  • Copy dan Pastekan arahan scriptnya pada tempat sesuai yang di inginkan, (edit Ukuran dan Warna sesuai selera)
  • Setelah selesai, silahkan kembali pada mode Compose, isi kotak dengan konten tulisan sobat.
  • DONE! lanjut membuat artikelnya.

 Langsung saja berikut kumpulan Kotak Script yang Saya rangkum, secara sederhana, tinggal pilih dan sangat cocok dipasang di Blog sobat. Semua arahan berada dalam kotak masing-masing script, sobat tinggal mengcopynya saja.

 1. Kotak script border-top
👇Copy Script nya👇
---------------------------------
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">MASUKAN TEXT DISINI</div>
____________________

 2. Kotak script radius 40px - 60px
👇Copy Script nya👇
--------------------------------
<div br="" gt="" style="background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 60px; border: 4px double #fff9j99; padding: 10px; t-align: center; t-color: #CCFFFF;">MASUKAN TEXT DISINI</div>
____________________

 3. Kotak script warna Green (t-align -left)
👇Copy Script nya👇
--------------------------------
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solidgreen; padding: 20px; t-align: left;"><span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;"> MASUKAN TEXT DISINI</span></div>
_____________________

 4. Kotak background biru text-center/ tulisan di tengah (bayang-bayang)
👇Copy Script nya👇
---------------------------------
<div style="background-color: deepskyblue; border-radius: 7px; box-shadow: 10px 10px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">MASUKAN TEXT DISINI</div>
____________________

 5. Kotak background biru text center bayang-bayang rendah.
👇Copy Script nya👇
---------------------------------
<div style="background-color: deepskyblue; border-radius: 5px; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">MASUKAN TEXT DISINI</div></div>
_____________________

 6. Kotak solid-samping kiri/t-align left)
👇Copy Script nya👇
---------------------------------
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;"><span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;"> MASUKAN TEXT DISINI</span></div>
_____________________

 7. Sederhana dengan ghostwhite
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 7px solid rosybrown; padding: 20px; t-align: left;"><span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;"> MASUKAN TEXT DISINI</span></div>
_____________________

 8. Kotak script tanpa lis border-left (warna mampu disesuaikan)
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: turquoise; border-left: 10px solid #4fee0f; border: 10px; padding: 10px; t-align: left;"> MASUKAN TEXT DISINI</div>
_____________________

 9. Kotak radius 10px webkit-border-doble 4px
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightskyblue; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">MASUKAN TEXT DISINI</div>
_____________________

 10. Kotak dengan border padding outset/t-align 10px
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: darkturquoise; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">MASUKAN TEXT DISINI</div>
_____________________

 11. Kotak script radius sudut 10px - 10px
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">MASUKAN TEXT DISINI</div>
______________________

 12. Kotak doble-bolder >> vertical/tinggi, responsive
👇Copy Script nya👇
----------------------------------
<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;">MASUKAN TEXT DISINI<br /></div> </div>
______________________

 13. Kotak dengan single padding border black
👇Copy Script nya👇
----------------------------------
<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">MASUKAN TEXT DISINI</div>
_____________________

 14. Kotak dengan radius border 4px >> ukuran dan warna bisa disesuaikan.
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: aliceblue; border-radius: 8px; border: 4px solid #999; padding: 10px; t-align: left;">MASUKAN TEXT DISINI</div>
_____________________

 15. Kotak border-dotted 2px, warna bisa disesuaikan
👇Copy Script nya👇
----------------------------------
<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">MASUKAN TEXT DISINI</div>
______________________

 16. Kotak border-dashed 2px
👇Copy Script nya👇
----------------------------------
<div style="background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;">MASUKAN TEXT DISINI</div>
_____________________

 17. Kotak border radius 20px, border left-right 10px, background
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">MASUKAN TEXT DISINI</div>
_____________________

 18. Kotak dashed coral, radius 10px, background border 4px.
👇Copy Script nya👇
----------------------------------
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightsteelblue; border-radius: 10px; border: 4px dashed coral; padding: 6px; t-align: left;">MASUKAN TEXT DISINI</div>
_____________________

 19. Kotak padding 3px responsive
👇Copy Script nya👇
----------------------------------
<div style="background-color: #ffebcd; border: 3px #5f200e double; padding: 10px; text-align: left;">MASUKAN TEXT DISINI</div>
_____________________

 20. Kotak double
👇Copy Script nya👇
---------------------------------
<div br="" gt="" style="background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 70px; border: 4px double #fff999; padding: 10px; t-align: center; t-color: #CCFFFF;"><div br="" gt="" style="border-radius: 60px; border: 4px double rgb(255, 249, 153); padding: 10px;">MASUKAN TEXT DISINI</div></div>
_____________________

 [ Artikel Populer Lainnya ]
- Cara Mudah Membuat Software Portable
- Cara Membuat Background Di Folder
- Cara Memasang Ads.txt Pada Blogger
- Cara Membuat Website Gratis Untuk Bisnis Online
- Cara Memasang / Mengaktifkan Ads.txt Pada Blogger
- Cara Aktivasi Anonymox FREE Menjadi PREMIUM
Selanjutnya Kotak script versi scroll vertical dan scroll horizontal

 1. Scroll box Vertical+Horizontal (background)
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

👇Copy Script nya👇
---------------------------------
<div style="background-color: antiquewhite; border: 2px solid brown ; height: 150px; overflow-x: scroll; overflow-y: scroll; width: auto;"><div style="width: 2500%;">MASUKAN TEXT DISINI</div>
---------------------------------

2. Scroll box vertical simple responsive, background, polos, tinggi 200px
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

 👇Copy Script nya👇
---------------------------------
<div style="background-color: white; border: 2px solid gray; height: 200px; overflow: auto; padding: 5px; width: auto;">MASUKAN TEXT DISINI</div>
---------------------------------

 3. Scroll box horizontal simple responsive, background, polos, tinggi 200px
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

 👇Copy Script nya👇
---------------------------------
<div style="background-color: antiquewhite; border: 2px solid blue; height: 200px; overflow: auto; padding: 5px; width: auto;">MASUKAN TEXT DISINI</div>
----------------------------------

 4. Scroll box up-down dan vertical-horizontal (polos)
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

 👇Copy Script nya👇
---------------------------------
<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">MASUKAN TEXT DISINI</div></div>
----------------------------------

 5. Scroll box vertical+horizontal 100px
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI
MASUKAN TEXT DISINI

 👇Copy Script nya👇
---------------------------------
<div style="border: 2px solid; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;"> <div style="width: 2500%;">MASUKAN TEXT DISINI</div>
----------------------------------
Semua arahan untuk membuat Kotak Script diatas, sudah tertera di bab tengah kotak masing-masing sesuai model + variasi, tinggal di copy saja. Semua script sudah sering digunakan dalam postingan semua lancar tidak ada yang eror dan dapat digunakan, kalau ada kendala mungkin terjadi karena kasalahan penempatan pada pemasangan.
Semoga bermanfaat bagi sobat semua, salam sukses para blogger blogger indonesia maupun mancanegara :D
Source : Bacarial.Com

13 Responses to "Cara Lengkap Membuat Kotak Script Dan Kotak Sroll Dalam Postingan Blog"

  1. AdminWednesday, February 20, 2019

    Wah lengkap step by stepnya gan dan sangat jelas pembahasannya. Sukses selalu hehe

    ReplyDelete
    Replies
    1. Biant SastraSunday, February 24, 2019

      terima kasih sudah berkunjung:) salam sukses kembali gan.

      Delete
  2. Biant SastraWednesday, February 20, 2019

    This comment has been removed by the author.

    ReplyDelete
  3. UnknownSunday, February 24, 2019

    Artikel bagus mas, lengkap penjelasannya.

    ReplyDelete
  4. fewgwgwSunday, February 24, 2019

    bikin blog lebih rapih nih hhehe

    ReplyDelete
    Replies
    1. Biant SastraSunday, February 24, 2019

      cihuuuuy,, mantep dongs sukses selalu. terimakasih sudah berkunjung

      Delete
  5. Kang KusoySunday, February 24, 2019

    sangat lengkap dan jelas. kunjungi blog saya juga

    ReplyDelete
  6. UnknownSunday, February 24, 2019

    keren keren script box nya

    ReplyDelete
    Replies
    1. Biant SastraSunday, February 24, 2019

      alhamdulilah... semoga membantu, terimakasih sudah berkunjung:)

      Delete
  7. Nasyifa PutriSunday, February 24, 2019

    bagus bagus kak kotak script nys

    ReplyDelete
    Replies
    1. Biant SastraSunday, February 24, 2019

      hehe terimakasih mbak Nasyifa Putri. Jangan lupa Follow ya :D

      Delete

Subscribe to: Post Comments (Atom)