Sunday, November 18, 2018

Cara Terbaru Membuat Scroll Box Menarik Dengan Macam Bentuk dan Warna Di Blog

1. Login ke blogger sobat. Disini 2. Pada Dashboard blog sobat, klik “New Entry/Posting Baru (yang bergambar pensil)” – pilih mod... thumbnail 1 summary

1. Login ke blogger sobat. Disini

2. Pada Dashboard blog sobat, klik “New Entry/Posting Baru (yang bergambar pensil)” – pilih mode HTML (sebelah mode compose)

3. Pilih sesuai selera sobat script dibawah - lalu Copy Paste script dibawah pada mode HTML.

Letakkan Kode Script Sobat Disini 1


Letakkan Kode Script Sobat Disini 2


Letakkan Kode Script Sobat Disini 3


Letakkan Kode Script Sobat Disini 4


Letakkan Kode Script Sobat Disini 5


Letakkan Kode Script Sobat Disini 6


Letakkan Kode Script Sobat Disini 7


Letakkan Kode Script Sobat Disini 8


Letakkan Kode Script Sobat Disini 9


Letakkan Kode Script Sobat Disini 10


Letakkan Kode Script Sobat Disini 11

Nah itu adalah gambarannya, lalu bagaimana untuk scriptnya. Saya cantumkan di bawah ini sesuai dengan nomor urutnya :


    1. <div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Letakkan Kode Script Sobat Disini</div>
    2. <div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    3. <div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    4. <div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    5. <div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    6. <div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    7. <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    8. <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; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    9. <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    10. <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>
    11. <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Letakkan Kode Script Sobat Disini</div>

    NB : silahkan sobat bisa ganti pada :
    • * background-color:#... (untuk mengganti latar kotaknya) 
    • * text-align: … (untuk mengatur letak tulisannya) 
    • * height: …px (untuk mengatur tinggi kotak, jika tidak ingin memakai scroll, hapus saja kode ini) 
    • * span style="color: …;" (untuk warna tulisan) 
    • * solid #... (untuk warna batas kotaknya) * Ganti “Letakkan Script Sobat Disini” dengan script-nya.

    No comments

    close