Scrollbox yang elastis

Kali ini ane mau berbagi tentang bagaimana membuat scrollbox yang elastis seperti punya ane yang ada disebelah sms gratis. Berikut Langkah-langkahnya



Langkah pertama, sudah pasti kamu dalam kondisi login di blogger.com
Setelah itu klik Rancangan / Design, dan pilih Edit HTML
cari kode ]]></b:skin>
dan letakkan kode berikut diatasnya

.elastisc{
float: $startSide;
position: relative;
width: 170px;
height: 200px;
margin-top:50px;
margin-left:10px;
}
.elastisb{
top: 0; left: 0; position: absolute;
line-height: 11px;width: 170px; height: 200px;
/*background: rgba(0,0,0, 0.1);*/
border: 2px solid #999999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;font-size: 9px;
padding: 8px 8px 15px;
overflow: hidden;-o-transition: all 0.9s ease-out;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.9s ease-out;
}
.elastisb:hover {
line-height: 15px;width: 170px; height: 485px;
color: #eee;
text-shadow: 1px 1px 1px #000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkpKCbxbIiaCAiV5fg_sbTMB-PrqLjTEmPVM54BFIopfXI8SzgKJTM6RaXXFg4_I6xOlaDBzK44kVPz0Z8sH9S38mu41ggmYN49Lcp8_hcGAQZ-CGCLanNoaD6GmIPMYtUmkDcuYhBEmX/s1600/widgetputih.png); repeat-x top left;font-size: 14px;overflow: auto;
}


Nah,. berikut akan ane jelaskan perbagian, agar kode diatas bisa kamu sesuaikan dengan template diblog kamu...


.elastisc{
float: $startSide;
position: relative;
width: 170px; → bagian ini untuk lebar scrollbox
height: 200px; → bagian ini untuk tinggi scrollbox
margin-top:50px; → bagian ini untuk mengatur, berapa jarak margin paling atas
margin-left:10px; → bagian ini untuk mengatur, berapa jarak margin paling kiri
}

.elastisb{
top: 0; left: 0; position: absolute;
line-height: 11px;width: 170px; height: 200px; → fungsi width dan heightnya sama dengan diatas
/*background: rgb(0,0,0);*/ → memberi warna background, hilangkan /* */ jika ingin memberi warna, atau bisa ganti dengan gambar, contohnya ada dibawah
border: 2px solid #999999; → menentukan lebar dan warna garis tepi
border-radius: 6px; → efek sudut lengkung bisa disesuaikan (kode banyak silahkan dicari)
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;font-size: 9px;
padding: 8px 8px 15px;
overflow: hidden;-o-transition: all 0.9s ease-out;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.9s ease-out;
}

.elastisb:hover {  → bagian ini akan aktif ketika mouse diarahkan ke scrollbox
line-height: 15px;width: 170px; height: 485px; → Saat Mouse diarahkan kescrollbox jika ingin memanjang(height)/melebar(width), bedakan height/width dengan ukuran yang ditentukan sebelumnya,
color: #eee; → memberi warna pada tulisan
text-shadow: 1px 1px 1px #000; → memberi efek shadow pada tulisan
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkpKCbxbIiaCAiV5fg_sbTMB-PrqLjTEmPVM54BFIopfXI8SzgKJTM6RaXXFg4_I6xOlaDBzK44kVPz0Z8sH9S38mu41ggmYN49Lcp8_hcGAQZ-CGCLanNoaD6GmIPMYtUmkDcuYhBEmX/s1600/widgetputih.png); repeat-x top left;font-size: 14px;overflow: auto;
}

untuk memberi warna background, gunakan kode
background: rgb(0,0,0); → hasilnya menjadi warna hitam
untuk memberi gambar background, gunakan kode
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkpKCbxbIiaCAiV5fg_sbTMB-PrqLjTEmPVM54BFIopfXI8SzgKJTM6RaXXFg4_I6xOlaDBzK44kVPz0Z8sH9S38mu41ggmYN49Lcp8_hcGAQZ-CGCLanNoaD6GmIPMYtUmkDcuYhBEmX/s1600/widgetputih.png); repeat-x top left;
tinggal ganti URL diatas dengan URL gambar yang kamu inginkan

Nah,. sekarang bagian peletakkannya, tentukan tempat yang kamu inginkan,
dan copy kode dibawah ini
<div class='elastisc'>
<div class='elastisb'>
Bagian ini tempat kode yang kamu inginkan
</div></div>

Jika kamu ingin menjadikan kode diatas menjadi tempat widget, kamu bisa menambahkan kode ini
<b:section class='elastis' id='elastis' preferred='yes'>

dibawah <div class='elastisb'>

dan ganti  </div></div> dengan </b:section></div></div>

Sehingga akan menjadi seperti ini
<div class='elastisc'>
<div class='elastisb'>
<b:section class='elastis' id='elastis' preferred='yes'>
Bagian ini tempat kode yang kamu inginkan
</b:section></div></div>


Nah,. sekarang coba disave, dan sebelumnya buka dulu Elemen Laman/Page Elements apakah sudah ada tambahan kotak "Add a Gadget"
Jika ada, maka tinggal kamu klik tulisan tersebut dan menambahkan widget yang kamu inginkan, dan widget tersebut akan berada di ScrollBox Elastis yang sudah kamu sesuaikan sebelumnya..

Bila kamu tidak menambahkan script <b:section maka kamu harus memasukkan sendiri kode html didalam halaman Edit HTML...

Nah,. cukup sekian sharing ane kali ini, Update blog ini sekarang sedikit tertunda karena aktivitas ane, jadi mohon maaf sekali lagi, tapi ane akan terus pantau blog ane, dan berusaha mencari waktu untuk menambah posting lagi, Terima Kasih..