Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Widget Sticky Bar Pada Blog

by Irsyad Aslam , at 4/23/2013 , has 14 komentar
Sticky Bar adalah salah satu widget yang berisi text atau pengumuman yang ditunjukan pada pengunjung blog melaluli widget ini.

Sticky Bar ini sama fungsi dengan panel name, yang sebelumnya saya bahas. Sticky Bar ini memang sudah ada web penyedia layanan widget ini, yaitu Hellobar, melainkan membuatnya di Hellobar anda perlu mendaftarkannya terlebih dahulu, meikuti langkah demi langkah, dan mengeditnya pada panel pengaturan dan tentu lebih sulit lagi untuk menginstalnya.

Beda Dengan  Sticky Bar berikut anda hanya perlu menyalin kode-kode, dan mengedit informasi hanya perlu mengedit htmlnya saja tanpa harus menggunakan panel pengaturan. Widget ini dilengkapi dengan fitur tutup sehingga tidak mengganggu pengunjung. Berikut Dibawah adalah cara untuk memasangnya.
  • Silahkan Masuk Ke Blogger Anda.
  • Setelah itu, Klik Menu Tata Letak,--> Klik Tambahkan Widget, --> Tambahkan Widget HTML.
  • Masukan Kode Berikut ini :
<style>
/*---Sticky Bar YBB Start---*/
#YBB-stickybar {
width:100%;
height:200px;
position:fixed;
top:0;
left:0;
z-index:100;
}

#YBB-stickybtm {
border-bottom:3px solid #BFBFBF;
background-color:#474244;
overflow:none;
width:100%;
height:30px;
position:fixed;
top:0;
left:0;
}

#YBB-stickybarbtmdata {
color:#fff;
padding:5px;
}

#YBB-stickybarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}

#YBB-stickybarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#474244;
padding-top:5px;
border-bottom:3px solid #BFBFBF;
border-left:3px solid #BFBFBF;
border-right:3px solid #BFBFBF;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

.YBB-stickybarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #BFBFBF;
}

.YBB-stickybarbtmblock {
width:8px;
height:10px;
background-color:#BFBFBF;
}

.YBB-stickybarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #BFBFBF;
}
</style>
<div id="YBB-stickybar" >
<center id="YBB-stickybarbtmshow" onmouseup="document.getElementById('YBB-stickybtm').style.display='block'"><div class="YBB-stickybarbtmblock"></div><div class="YBB-stickybarbtmdownarrow"></div></center>
<div id="YBB-stickybtm" >
<center id="YBB-stickybarbtmhide" onmouseup="document.getElementById('YBB-stickybtm').style.display='none'"><div class="YBB-stickybarbtmuparrow"></div><div class="YBB-stickybarbtmblock"></div></center>
<center id="YBB-stickybarbtmdata"><b>Deskripsi Informasi Anda</b> <a href="URL Blog Anda">Nama Blog Anda</a></center>
</div>
</div>


Keterangan:
  1. Ganti Kode Yang Berwarna Merah dengan deskripsi informasi anda.
  2. Ganti Kode Yang Berwarna Kuning dengan URL Blog Anda.
  3. Ganti Kode Yang Berwarna Hijau dengan nama Blog anda.

  • Setelah itu, Klik Tombol Simpan.

Selamat Mencoba,
Salam Sukses,




Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Widget Sticky Bar Pada Blog - written by Irsyad Aslam , published at 4/23/2013, categorized as Widget . And has 14 komentar
14 komentar Add a comment
bagaimana cara buat kotak hitam yang ada di bawah blog km bro yg berisi follower, random post dan profile sm copyright,trimakasih. bt blog ane, tlg dibls di email ya, masmoeis@gmail.com, trims
Reply Delete
THANKS WAT WIDGAED STIKINYA BRO KEREN...
Ok Sip,
Makasih..,


Salam Sukses,
Your-BelajarBLOG
Delete
Reply Delete
Tq banget gan, di Blog saya sudah berhasil....
salam sukses.... :v
OK Sip,

Salam Sukses,
Your-BelajarBLOG
Delete
Reply Delete
gan, gimana cara membuat kotak Sticky Barnya ke bagian bawah blog gan, bukan di atas,...!1
*trimakasih , mohon pencerahannya gan,...
Untuk Sticky Bar Agar Dibawah Silahkan Masukan Kode Berikut ini:

<style>
#YBB-stickybar {
width:100%;
height:200px;
position:fixed;
bottom:0;
left:0;
z-index:100;
}

#YBB-stickybtm {
border-top:3px solid #BFBFBF;
background-color:#474244;
overflow:none;
width:100%;
height:30px;
position:fixed;
bottom:0;
left:0;
}

#YBB-stickybarbtmdata {
color:#fff;
padding:5px;
}

#YBB-stickybarbtmhide {
position:absolute;
bottom:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}

#YBB-stickybarbtmshow {
position:absolute;
bottom:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#474244;
padding-top:5px;
border-top:3px solid #BFBFBF;
border-left:3px solid #BFBFBF;
border-right:3px solid #BFBFBF;
border-top-right-radius:5px;
border-top-left-radius:5px;
}

.YBB-stickybarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #BFBFBF;
}

.YBB-stickybarbtmblock {
width:8px;
height:10px;
background-color:#BFBFBF;
}

.YBB-stickybarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #BFBFBF;
}
</style>
<div id="YBB-stickybar" >
<center id="YBB-stickybarbtmshow" onmouseup="document.getElementById('YBB-stickybtm').style.display='block'"><div class="YBB-stickybarbtmdownarrow"></div><div class="YBB-stickybarbtmblock"></div></center>
<div id="YBB-stickybtm" >
<center id="YBB-stickybarbtmhide" onmouseup="document.getElementById('YBB-stickybtm').style.display='none'"><div class="YBB-stickybarbtmblock"></div><div class="YBB-stickybarbtmuparrow"></div></center>
<center id="YBB-stickybarbtmdata"><b>Deskripsi Informasi Anda</b> <a href="URL Blog Anda">Nama Blog Anda</a></center>
</div>
</div>

Selamat Mencoba,
Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
Nice share bro, jadi pengen banyak belajar ni..
jangan lupa mampir ke blog saya ya semua. masih newbie ni butuh banyak pencerahan. thanks
click here : http://punya-andi.blogspot.com/
Reply Delete
thank gan infonya salam kenal kampungjasa[dot]com
Reply Delete
makasi gan, sngt brmanfaat buat yang suka ngedit" blog,:)
kunjungannya gan : http://bisnisonlinestiforp99.blogspot.com/
Reply Delete
Wah bermanfaat ini gan.Semoga sukses selalu
Reply Delete
This comment has been removed by the author.
Delete
gan, klw stick bar nya bergerak bagaimana? thanks
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger