Cara Membuat Scroll Box Atau Kotak Responsif dalam Posting Blog

Cara Membuat Scroll Box
dalam Posting Blog Responsif
Lengkap dengan Judul

- Cara Membuat Scroll Box

1. Langkah pertama silahkan kalian masuk ke Akun Blogger. 
2. Tekan tombol Entri Baru, dan kalian akan diarahkan ke halaman pembuatan artikel / posting.
3. Untuk bisa menjalankan script atau kode scroll box, kalian harus pindahkan area posting dari mode Compose ke mode HTML . 
4. Setelah kalian berada di halaman mode compose, silahkan kalian copy dan tempelkan salah satu kode scroll box style dibawah ini. Pilih gaya yang kalian inginkan untuk dipasang di blog kalian. Semua Kode Responsif.

- CARA DASAR, Membuat Scroll Box

COPY PASTE Kode Dibawah

<div align="center"> <table border="1" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style="font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style=" font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> TULIS DISINI </div> </div> </td> </tr> </tbody> </table> </div>

- CARA MODIFIKASI, Membuat Scroll Box

COPY PASTE Kode Dibawah

<div align="center"> <table border="0" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style="background-color: #d9da81; border: 2px #6E2222 solid; font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style="background-color: #d9da81; border: 2px #6E2222 solid; font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> TULIS DISINI </div> </div> </td> </tr> </tbody> </table> </div>

COPY PASTE Kode Dibawah

<div align="center"> <table border="0" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> TULIS DISINI </div> </div> </td> </tr> </tbody> </table> </div>

COPY PASTE Kode Dibawah

<div align="center"> <table border="0" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> TULIS DISINI </div> </div> </td> </tr> </tbody> </table> </div>

COPY PASTE Kode Dibawah

<div align="center"> <table border="0" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> TULIS DISINI </div> </div> </td> </tr> </tbody> </table> </div>

COPY PASTE Kode Dibawah

<div align="center"> <table border="0" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> TULIS DISINI </div> </div> </td> </tr> </tbody> </table> </div>

COPY PASTE Kode Dibawah

<div align="center"> <table border="0" style="width: 100%;"> <tbody> <tr> <th colspan="100%" scope="col" style="text-align: center;"> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; font-size: 16px; overflow: hidden; padding: 0px; width: 100%; color: black; "> COPY PASTE Kode Dibawah </div> </th> </tr> <tr> <td> <div style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; font-family: &quot;courier new&quot; , &quot;courier&quot; , monospace; font-size: 12px; font-weight: bold; height: 110px; overflow: scroll; width: 100%;"> <div style="overflow: hidden; padding: 0; text-align: center; width: 100%; color: black; "> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/td&gt;<br /> </div> </div> </td> </tr> </tbody> </table> </div>

Semua Kode tinggal di Copy lalu pastekan di HTML/ JavaScript. Sekian dari tintaQy.com Semoga bermanfaat,.....