Menggunakan Expand Sticky Bar

Expand Sticky Bar adalah notifikasi bar yang dapat diperluas setelah pengunjung menggulir pointer mouse ke arah sticky bar atau dapat juga dibuat manual dimana sticky bar baru akan diperluas setelah pengunjung menekan tombol yang telah disediakan.

Expand Sticky Bar ini dibuat menggunakan CSS script dengan "position: fixed" dikombinasikan dengan jQuery plugin dan javacript serta kode HTML yang berguna untuk menampilkan informasi tambahan yang dimasukkan ke dalam expand sticky bar. 
Widget ini kompatibel dengan browser Firefox 1.0 ke atas , IE 5.0 ke atas , Google Chrome , Opera 7 ke atas.

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode ]]></b:skin>
6. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>
.expstickybar{
position:fixed;
color: white;
padding: 5px;
right:0;
left:0;
visibility:hidden;
background:#222222 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3cohfl0Nes8GMJcStRJ36JLfGSjENBtXB_tzrLG9cke2Q312k65Niq1V73Bwhxc6fbiSCaGQh8OH5LHjrYopBtDBnEq_eh3GqLk5KwYZIA9bVA8t5x5Uastz4VT2qXsfacAr0XXWcWvo/s400/stickybar.png') repeat-x; border-top: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 10000;
width:auto;
}
.expstickybar a{
color: white;
}
7. Kemudian cari kode </head>
8. Masukkan script di bawah ini tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/mplabsblog/expstickybar.js'/>
9. Klik simpan template
10. Selanjutnya pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
11. Masukkan script dibawah ini
<div id="stickybar" class="expstickybar">
<a href="#togglebar"><img src="https://sites.google.com/site/mplabsblog/open.gif" data-closeimage="https://sites.google.com/site/mplabsblog/close.gif" data-openimage="https://sites.google.com/site/mplabsblog/open.gif" style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px"><b>Faceblog © 2012-2013 ( Tempat Ngeblog Ala Facebook ) Design by <a href="http://dhecun.blogspot.com" target="_blank" title="Kumpulan script untuk mempercantik tampilan blogspot">Dhecun Blog</a></b></div>
Simpan konten anda disini
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/12/menggunakan-expand-sticky-bar.html" target="_blank" title="Menggunakan Expand Sticky Bar"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></a></div>
</div>
12. Klik simpan

Catatan :
- Ganti tulisan warna merah sesuai keinginan anda.
Untuk merubah type expand sticky bar dari mouseover menjadi manual , silahkan download script expstickybar.js lalu edit script dan perhatikan pada bagian akhir ganti kode 'mouseover' menjadi 'manual' , potongan scriptnya seperti di bawah ini.
var mystickybar=new expstickybar({
    id: "stickybar",
    position:'bottom',
    revealtype:'mouseover',
    peekamount:35,
    externalcontent:'',
    speed:200 //duration of animation (in millisecs)
})
Simpan kembali script yang telah anda edit ke tempat hosting script seperti Google Code atau Google Sites , ambil URL script yang telah disimpan pada tempat hosting script dan ganti URL script pada kode yang akan ditempatkan di atas kode </head>.

Silahkan anda bereksperimen dan mengembangkan metode ini dan jika anda berhasil Menggunakan Expand Sticky Bar , ucapkanlah Alhamdulillah.
Saya akan sangat berterima kasih jika anda turut berkontribusi dan memberikan masukkan pada kolom komentar di bagian bawah artikel ini.

Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers