Learn And Share With Faried

Cara Membuat Menu Auto Scrollbox Elastis

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 :

  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. 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://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/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://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/s1600/papers.jpg) repeat; font-size: 14px;overflow: auto; }


  4. Save/Simpan Template.
  5. 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>

  6. 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:

hzndi mengatakan... balas

mantep sob tutorialnya :D ane suka nih

Faried Blogger mengatakan... balas

@hzndi: terima kasih sob untuk komentarnya, juga kunjungannya.

SMPN7 mengatakan... balas

nice tips sob.. btw folback sukses #18 thx ya

beoding mengatakan... balas

oke..nice bisa di coba nih

Tutorial Blog and SEO mengatakan... balas

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.