Menggunakan Expand Sticky Bar di Blogger

Bismillahirrahmanirrahim

MULTI PASTE - Sticky Bar atau notifikasi bar biasanya digunakan untuk memberitahukan adanya update penting kepada pengunjung, seperti berita terbaru, penawaran produk bahkan Anda dapat menambahkan link RSS dan share button di sana.  Sticky bar biasanya ditempatkan di atas header blog atau dibagian bawah footer.

Pada postingan kali ini, saya akan membagikan kepada Anda cara Menggunakan Expand Sticky Bar di Blogger, seperti yang dapat Anda lihat pada bagian bawah footer di blog ini.   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, selebihnya silahkan Anda mencobanya.  Untuk menerapkan dan menggunakan expand sticky bar ini di blogger ikuti langkah instalasi di bawah ini.

Cara Menambahkan Expand Sticky Bar di Blogger

1. Login ke Blogger dengan ID Anda
2. Pada halaman dashboard blogger klik link Title Blog Anda
3. Pilih menu Template >> Edit HTML >> Proceed
4. Pada dokumen HTML cari kode ]]></b:skin> dan tempatkan kode CSS di bawah ini tepat di atas 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/AVvXsEgvMJEVFkazXlj1BwoSyRABS7sF2vzKq-DALcmuBWiRz6kTvQYqjHNC4QSnVyAj840xc_9o_k2Yb1DlulprivXML1e4zW58sYROV4Kcqs1OLXhUe__kkYKsXg-kXyInvM2F1D0xG1tGpx8/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;
}


5. Selanjutnya cari kode </head> dan tempatkan 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'/>


6. Simpan perubahan pada dokumen HTML dengan menekan tombol Save template
7. Kemudian pergi ke menu Layout (Tata Letak), klik Add a Gadget untuk menambahkan gadget type HTML/Javascript, lalu masukkan kode di bawah ini ke dalam kotak Content dan tidak perlu diberi title.


<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>Copyright (c) 2012 ~ MULTI PASTE | Menabur Ketulusan Menuai Kebahagiaan</b></div>

---- Masukkan Konten Anda di Sini -----

</div>


8. Klik tombol Save untuk menyimpan Gadget, dan periksa blog Anda untuk memastikan bahwa widget expand sticky bar telah berhasil diterapkan

Kustomisasi Script Expand Sticky Bar untuk Menyesuaikan dengan Style Blog.

• Untuk menyesuaikan warna, ganti kode warna yang terdapat pada CSS script di atas (poin No.4) dengan kode warna yang diinginkan, Anda bisa menggunakan tool Hex Color Generator pada blog ini

• Masukkan konten Anda ke dalam Expand Sticky Bar, perhatikan kode HTML yang akan dimasukkan ke dalam gadget HTML/Javascript, tempatkan konten Anda di dalam elemen <div> (poin No. 7)
  

• Untuk merubah type expand sticky bar dari mouseover menjadi manual, download script expstickybar.js lalu edit script perhatikan pada bagian akhir ganti kode 'mouseover' menjadi 'manual' potongan script akan terlihat 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 diedit 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> (poin No. 5) pada dokumen HTLM template Anda.

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