Anda dapat menambahkan Sticky Bar di blog blogger untuk menampilkan panel di bagian atas header atau tepat di bawah footer. Sebuah Sticky Bar sekarang dapat digunakan secara luas oleh semua blog dan situs untuk memberitahukan kepada pengunjung tentang update terakhir postingan anda atau penawaran sekalipun. Anda juga dapat menambahkan link RSS Feed situs anda kepada pengunjung blog anda untuk berlangganan update terbaru dari blog anda.
Dalam tutorial kali ini saya akan mencoba untuk membuat hal-hal sederhana dan akan berbagi cara untuk membuat semacam Sticky Bar Widget dengan text sederhana dan gambar. Disini saya coba memakai Efek Drop Shadow dengan menggunakan CSS3. Widget ini sangat kompatibel dengan semua browser baik itu Mozilla atau Google Chrome. Untuk contoh Sticky Bar-nya anda bisa lihat di bagian atas blog ini.
Berikut langkah-langkah yang harus anda lakukan untuk membuat Sticky Bar :
1. Masuk ke Blogger --> Template --> Edit HTML
2. Backup dulu Template anda
3. Centang kotak Expand Widget Template
4. Cari kode berikut (tekan ctrl + f untuk pencarian lebih cepat)
]]></b:skin>
5. Copy paste-kan kode dibawah ini persis diatas kode ]]></b:skin>
Anda bisa mengganti warna background #000000 dengan warna pilihan anda (saya memakai program Photoshop untuk meng-generate kode warna)
6. Selanjutnya cari kode ini
<body>
7. Copy Paste-kan kode dibawah ini dibawah kode <body>
Catatan : sekarang ganti # dengan text link anda dan tulisan ADD TEXT HERE ganti dengan deskripsi dari link anda
8. Simpan Template anda dan lihat hasilnya.
Selamat mencoba dan semoga bermanfaat buat blog anda***
Dalam tutorial kali ini saya akan mencoba untuk membuat hal-hal sederhana dan akan berbagi cara untuk membuat semacam Sticky Bar Widget dengan text sederhana dan gambar. Disini saya coba memakai Efek Drop Shadow dengan menggunakan CSS3. Widget ini sangat kompatibel dengan semua browser baik itu Mozilla atau Google Chrome. Untuk contoh Sticky Bar-nya anda bisa lihat di bagian atas blog ini.
Berikut langkah-langkah yang harus anda lakukan untuk membuat Sticky Bar :
1. Masuk ke Blogger --> Template --> Edit HTML
2. Backup dulu Template anda
3. Centang kotak Expand Widget Template
4. Cari kode berikut (tekan ctrl + f untuk pencarian lebih cepat)
]]></b:skin>
5. Copy paste-kan kode dibawah ini persis diatas kode ]]></b:skin>
#mbt-stickybar{
background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2YrzWVYFUPM48H9OCw5DYgVRL6syohvFBKe1DuHOkD1noWAKYrEyhDPR-yeH5n8KiuBI0icbTgp-6NHMipvj0c2crZUwmM-2SKbhy8lbdJfWaaMXhVhjCbGeq9tiLmm7W3v2MzpoCY5s/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 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: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}
6. Selanjutnya cari kode ini
<body>
7. Copy Paste-kan kode dibawah ini dibawah kode <body>
<div id='mbt-stickybar'>
<a href='#'>ADD TEXT HERE</a>
</div>
Catatan : sekarang ganti # dengan text link anda dan tulisan ADD TEXT HERE ganti dengan deskripsi dari link anda
8. Simpan Template anda dan lihat hasilnya.
Selamat mencoba dan semoga bermanfaat buat blog anda***
seep, di coba dulu gan....
BalasHapustengkyu seblumnya
makasih gan, izin nyoba ya,,
BalasHapus