Tampilkan Navbar Blogger di Halaman Bawah Blog

Melihat navbar blogger di blog pada ujung teratas adalah hal yang lumrah karena posisi yang disediakan oleh desain templatenya memang di situ. Melihat blog tanpa navbar juga bukan lagi barang aneh karena memang bisa tidak ditampilkan (dihilangkan). Bagaimana seandainya navbar ini tetap kita tampilkan atau kita manfaatkan namun posisinya kita pindah di halaman terbawah blog. Navbar kita buat selalu terlihat biar halaman digulung naik ataupun turun, tetapi dibuat terlihat samar-samar (transparan) dan baru tampak jelas ketika tersentuh cursor? Biar sedikit efek membuat tampilan navbar lebih cantik, bagaimana kalau kode CSS3 kita dayagunakan? Lebih menarikkan blog jadinya? Bagaimana kalau kita coba saja dan lihat hasilnya? Perlu demo? He ... eh .... Sebaiknya nggak usah, ya .... He ... he ... Biar makin penasaran dengan gaya navbar yang sedikit lain dari biasanya ini!

Untuk membuatnya silahkan copy paste kode CSS berikut di atas kode ]]></b:skin>

Kode CSS


#navbar-iframe{
       display:block;
       position:fixed;
       bottom:0;
       left:0;
       opacity:0.2;
      -o-transition:opacity 1s ease-in;
      -moz-transition:opacity 1s ease-in;
      -webkit-transition:opacity 1s ease-in;
       filter:alpha(opacity=20);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
#navbar-iframe:hover{
       opacity:1.0;
       filter:alpha(opacity=100);
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

  • Login ke Blogger.
  • Setelah menuliskan Email Address, Password dan KLIK "Login", maka halaman "Dasboard (Dasbor)" akan terlihat. KLIK "Design/Rancangan".
  • KLIK "Edit HTML".
  • KLIK "Download Full Templates/Download Template Lengkap" untuk back-up templates.
  • Simpan file template di folder PC.
  • Kembali ke "Edit HTML" dan cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode tersebut supaya lebih mudah dan cepat.
  • Copy-paste kode CSS dan letakkan di atas kode ]]></b:skin>.
  • KLIK "SAVE Templates/Simpan Template".


Keterangan/Catatan:
  • Buka Special Tutorials di menu Accordiaon sebelah kiri untuk mengikuti tutorial cara cepat mencari kode HTML di template dengan Ctrl+F dan untuk mengetahui pentingnya serta cara back-up template.
  • Karena efek opacity telah dipadukan dengan kode CSS3 transition maka desain ini akan terlihat efeknya dengan sempurna hanya di browser yang telah support dengan CSS3. Silahkan download melalui link download browser di menu sebelah kiri di atas spesial tutorials.


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

Comments

Post a Comment