Setelah kemarin 2 kali blogger pemula blog inspirasi ini memposting tentang menu/tombol social connect/bookmark yaitu :Widget Floating Social Bookmark (Menggantung), dan Widget Fixed Social Bookmark Hati Terbelah, maka untuk mengganti topik agar tidak bosan, kali ini blog inspirasi akan berbagi tentang bagaimana membuat Menu Auto Scroll Box Elastis, dan untuk Demonya sahabat blogger bisa lihat disini: Demo Scrollbox Elastis
Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Setelah kode ]]></b:skin> di atas ketemu, copy kode di bawah ini dan paste/letakkan tepat di atas/sebelum kode ]]></b:skin> tersebut.
.elastcx { float: left; position: relative; width: 170px; height: 200px; margin: 0 10px 5px 0; } .elastbx { top: 0; left: 0; position: absolute; line-height: 11px;width: 150px; height: 188px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRS13OnPqXuf2MHnV4vIbM_Eliurk9HBGNdX5-PybCQ3IDaLcO-O4Dqv1l2VbTx0kTkxE83tkI9a0E-KEEP7nxUj_u3BHL33Zw0GzQyvKTZFO_XT-joenf4prnjQm99WcHbNeOMEZ363_/s1600/papers.jpg) repeat; 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: trebuchet ms;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; } .elastbx:hover { line-height: 15px;width: 500px; height: 300px; color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRS13OnPqXuf2MHnV4vIbM_Eliurk9HBGNdX5-PybCQ3IDaLcO-O4Dqv1l2VbTx0kTkxE83tkI9a0E-KEEP7nxUj_u3BHL33Zw0GzQyvKTZFO_XT-joenf4prnjQm99WcHbNeOMEZ363_/s1600/papers.jpg) repeat; font-size: 14px;overflow: auto; }
- Save/Simpan Template.
- Dan untuk memanggilnya pada postingan, simpan kode berikut pada mode edit html posting sahabat :
<div class="elastcx"> <div class="elastbx">Masukkan teks nya disini kaw an.........Masukkan teks nya disini kawan.........Masukkan teks nya disini kawan.........Masukkan teks nya disini... </div></div>
- Ganti tulisan yang berwarna kuning dengan text/kode yang ingin sahabat blogger tampilkan di dalam menu auto scrollbox tersebut.
Selesai....
Kali ini sampai disini dulu blog inspirasi ini berbagi, selamat mencoba dan semoga sukses untuk sahabat blogger.
referensi: kang-dadhang.co.cc
Salam Hangat dari blogger pemula blog inspirasi ..
5 komentar:
mantep sob tutorialnya :D ane suka nih
@hzndi: terima kasih sob untuk komentarnya, juga kunjungannya.
nice tips sob.. btw folback sukses #18 thx ya
oke..nice bisa di coba nih
oke sob sama2 :D
Posting Komentar
Attention..!!
Blog ini adalah Blog Dofollow..
Jadi, silahkan berkomentar yang santun dan relevan..
Persyaratan :
1. Follow via Google FriendConnect dulu agar komentar Anda bisa cepat saya balas.
2. Dilarang menyertakan link di dalam komentar, jika ingin menyertakan link sebaiknya pada pilihan Name/URL.
Dan sebagai rasa terima kasih,
saya akan Follow + Berkomentar juga pada blog Anda.