Cara membuat Kotak Script scroll di blogger

Bagaimana menempatkan kode di artikel blog agar terbungkus dengan kotak script scroll? Berikut ini akan saya berikan tutorial yang mudah dan simpel meski blogger pemula sekalipun.

Kotak HTML CSS yang keren ini biasanya sering digunakan bagi yang akan membuat artikel tutorial terutama soal coding - coding. Namun seorang blogger pemula tidak tau bagaimana membuatnya, karena ini diterapkan secara manual, yaitu anda harus menempatkan sebuah kode ke dalam template blog, dan setelah itu anda tinggal memanggilnya ketika anda membutuhkan. 

Mungkin anda tidak asing, alias sering melihat kotak Script dengan scroll seperti ini.

Saya sendiri lebih menyukainya, ketimbang model kotak script yang FLAT. Terlebih jika saya ingin berbagi script panjang, tentu sangat lebih rapih menggunakan kotak script model scroll seperti ini, pasalnya, yang model scroll seperti ini itu seperti halnya; kita menulis kode di Notepad++.

Oke jika kalian ingin membuat, mari mulai dengan langkah-langkah dibawah ini:

Cara membuat Kotak Script dengan Scroll di blogspot

• Masukkan kode CSS di bawah ini ke dalam HTML blog
• Dasboard blogger -> Tema -> Edit HTML

.post-body pre code, #comments pre code {
    display: block;
    background: #363636;
    border-left: 5px solid #008c5f;
    color: #ffffff;
    font-size: 13px;
    max-height: 250px;
    padding: 10px 15px;
    line-height: 1.5em;
    white-space: pre;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

• Letakkan di atas tag </style> atau </b:skin> . Jika anda memakai template seperti contempo itu biasanya ditempatkan di atas </b:skin>

• Selanjutnya simpan perubahan dan kita tinggal memanggilnya/menampilkan.
  
  
• Untuk menampilkan kotak script scroll tersebut pada postingan blog, tinggal ketik saja <pre><code>kode anda</code></pre> pada "HTML artikel".
• Selesai.

Gambar di bawah ini Contoh penempatan <pre><code> pada Artikel Mode HTML:

Bagaimana.. cukup mudah bukan?

Kesimpulannya, saat anda membuat artikel yang membutuhkan Kotak script scroll tersebut, tinggal ubah ke tampilan HTML, lalu masukkan kode yang akan anda bagikan dengan diawali <pre><code> lalu di akhiri dengan </code></pre>. Jangan lupa beri tambahan <div></div><br/>untuk menutup, agar selanjutnya anda bisa menulis teks di luar kotak tersebut.

 

Anda juga bisa mengubahnya untuk color background dan teks Skripnya sesuai selera anda.

Itulah cara membuat kotak script scroll di artikel blog yang keren dan sangat mudah.