Showing posts with label statis. Show all posts
Showing posts with label statis. Show all posts

Wednesday, November 30, 2016

Cara Membuat Header Blog Statis Melayang

Cara Membuat Header Blog Statis Melayang


Cara Membuat Header Blog Statis (Melayang)
HEADER blog statis, sticky, atau melayang (floating) merupakan salah satu trend desain website 2015, selain top menu statis.

Header & Top Menu statis maksudnya adalah tetap muncul saat blog di-scroll. (Baca: Top 5 Trending Desain Blog 2015).

Setelah berbagi tentang  Cara Membuat Top Menu Statis di Blog, kali ini CB berbagi tentang cara membuat Header Blog statis. 

Demonya bisa dilihat di CB Blogger Lab. Bisa juga lihat situs Yahoo, Okezone, Vivanews, dan banyak lagi.

Cara Membuat Header Blog Melayang (Floating Header):
1. Template > Edit HTML
2. Cari (tekan Ctrl+F) kode #header , .header, atau yang semisalnya (kode elemen header blog).
3. Tambahkan kode CSS berikut ini di bawahnya, di dalam kode pembuka {

position:fixed; 
z-index:200; 
background-color: #fff;

Kode di atas sudah membuat header blog Anda melayang, statis, sticky, alias tetap muncul saat laman blog di-scroll ke bawah. 

4. Cari kode #main atau yang semisalnya (#main-wrapper, #main-content, #content-area, dll), lalu tambahkan kode berikut ini di dalam kode pembua {

margin-top:200px;

Catatan: Angka 200 bisa dikurang atau ditambah, sesuaikan saja, klik dulu "Preview" sebelum di-save!

5. Save Template!

Selamat, kini header blog Anda sudah "trendy", mengikuti perkembangan desain website modern, yang statis, sticky, atau melayang. Lihat DEMO.

CARA & JENIS LAINNYA
Jika header blognya ingin berukuran kecil, mirip Top Menu, bisa juga menjadi header bar tambahan, maka lakukan langkah berikut ini:

1. Template > Edit Html
2. Copy & Paste kode berikut ini sebelum atau dia atas kode </head>
<style type="text/css">
.fixed-header{
 overflow: hidden;
 position: fixed;
 z-index: 999999;
 top: 0px;
 left: 0px;
 right: 0px;
 height: 76px;
 background: #EEE;
}</style>
2. Copy Paste kode beikut ini di atas kode </body>
<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div>
3. Save Template!

Jika tidak muncul, hapus kode di atas kode </body> tadi, Save Template!

4. Klik "Layout" > Add a Gadget > Pilih "HTML/Javascript"
5. Copas kode berikut ini ke kolom "Content".
<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div>

Jika ingin mengganti huruf dengan logo/gambat, gunakan kode berikut ini:

<div class="fixed-header" >
 <center>
<h1><img src="URL GAMBAR/LOGO" /></h1>
</center> </div>

Demikian Cara Membuat Header Blog Statis, Sticky, alias Melayang sebagaimana trending tampilan header terkini. Good Luck!

Sumber1
Sumber2

Go to link Download

Read more »
Posted by at
Labels: , , , , ,

Thursday, November 10, 2016

Cara Membuat Menampilkan Halaman Statis Blog di Navigasi Menu

Cara Membuat Menampilkan Halaman Statis Blog di Navigasi Menu


Cara Menampilkan Menu Halaman Statis Blog
BAGI newbie, memunculkan atau menampilkan link Halaman Statis (Static Page) di Navigasi Menu Blog bukan perkara gampang --karena belum tahu aja. Nyaris percuma kan, kita bikin halaman statis (page), tapi gak keliatan dan "ditengok" sama pengunjung?

Halaman (Page) atau Halaman Statis (Static Page) adalah jenis halaman yang biasanya berisi konten "statis", jarang sekali diubah. Sekali bikin, ya sudah... begitulah namanya halaman statis, meskipun masih bisa diedit/update kapan saja.

Beda dengan "halaman dinamis", yakni halaman postingan (Posts) yang kita buat setiap kali kita menulis konten blog.

APA SAJA HALAMAN STATISNYA?
Konten blog yang biasanya menjadi halaman statis adalah:
  1. About (Tentang)
  2. Sitemap (Daftar Isi)
  3. Contact (Kontak)
Untuk blog bisnis bisa ditambah dengan halaman:
  1. Privacy Policy/Disclaimer
  2. Services (Layanan)
  3. Products (Produk)
Untuk blog organisasi, bisa ditambah dengan halaman:
  1. Profil
  2. Sejarah
  3. Susunan Pengurus
  4. Visi Misi
  5. Program
  6. Agenda
  7. Galeri Foto
  8. Galeri Video
Nah, halaman-halaman tersebut disebut Halaman Statis (Static Page). 

CARA MEMBUATNYA
"Each blog can have up to 20 pages," kata blogger. Tiap blog maksimal bisa membuat 20 halaman statis. Tidak bis lebih.

Cara membuatnya sudah ada di panduang Blogger: Create a new page on your blog. Ringkasnya:
  1. Klik menu "Pages" (Halaman) di Dashboard Blog.
  2. Klik "New Page" (Halaman Baru)
  3. Silakan Isi "nama halaman" dan "konten halaman".

Cara Menampilkan Halaman Statis di  Menu Navigasi Blog

Nah, sekarang bagaimana cara menampilkannya? Jika template Anda bukan default blogger, artinya template hasil download dari "pihak ketiga", biasanya sudah ada link menu halaman statis di dalam template.

Anda tinggal ganti link dan nama halamannya, misalnya seperti ini:

<div class=Menu>
<ul>
<li><a href=/>Home</a></li>
<li><a href=#>About</a></li>
<li><a href=#>Contact</a></li>
</ul>
</li>

Ganti tanda pagar (#) dengan link halaman Anda, misalnya: 
<li><a href=http://contohblognih.blogspot.com/p/about-cb.html>About</a></li>

Dari mana mendapatkan linknya? Lihat gambar di bawah. Klik kanan di menu "View" dan klik "Copy Link Address".  Coba paste di Notepad. Itulah link halaman statisnya!

Cara Menampilkan Menu Halaman Statis Blog

Cara lainnya, dan ini biasa berlaku di template bawaan blogger, yaitu dengan menambahkan gadget:
  1. Klik "Layout" > "Add a Gadget" 
  2. Pilih "Page List"
  3. Nah... di sinilah halaman statis Anda bermunculan.
Cara Menampilkan Menu Halaman Statis Blog

Demikian Cara Menampilkan Menu Halaman Statis Blog, panduan bagi Newbies alias para blogger baru. Good Luck!

Go to link Download

Read more »
Posted by at
Labels: , , , , , , , ,
Subscribe to: Posts (Atom)