Cara Membuat Halaman Statis (About, Contact, Sitemap) Berada di Bawah Footer Blog

Tidak hanya tampilan bagus atau keren, sebuah situs web atau blog juga harus memperhatikan kebutuhan zaman agar dapat bersaing dengan situs-situs lainnya yang jumlahnya mungkin tiada terkira. Oleh karenanya, tidak henti-hentinya para pakar banyak yang menyarankan tentang pentingnya tampilan blog responsive, loading cepat/ringan, atau tampilan blog yang sederhana agar lebih mudah dalam mendapatkan pengunjung.

Untuk itulah, saya mencoba menghilangkan, lebih tepatnya memindahkan tampilan halaman statis yang awalnya berada di bagian paling atas blog saya pindahkan ke bagian bawah footer blog. Bagi anda yang setia nongkrong di blog ini, mungkin kaget saat halaman about, contact, sitemap atau disclaimer yang tiba-tiba hilang dari atas header blog ini. Ya, karena saya memindahkannya ke bagian bawah dan saya ubah dengan tampilan yang lebih sederhana.

Selain agar tampak lebih simpel, langkah ini sebenarnya juga saya lakukan untuk menghapus beberapa fitur yang tidak terpakai (ikon sosmed atas) agar loading blog lebih ringan dan kode-kode di dalam template menjadi lebih ramping dan mudah untuk diedit. Tapi meskipun kini tampak lebih sederhana, tampilannya tetap keren bukan?. 

Tampilan halaman statis yang berada di bawah footer sebenarnya sudah bukan hal baru di kalangan para pemilik blog. Malahan kayaknya kebanyakan situs blog masa kini memasang halaman about, contact, dll di bagian bawah blog alih-alih memasangnya di bagian atas dan bertumpuk dengan menu navigasi. Caranya pun cukup mudah hanya menggunakan kode html dan CSS untuk mengatur tampilannya. Jika anda ingat, saya juga dulu pernah membuatkan tutorialnya ketika blog ini masih pakai template yang lama. 

Nah, bagi anda yang ingin membuatnya seperti halnya di blog saya ini, silahkan simak dan ikuti langkah-langkah di bawah ini.

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya.

/* Statis Bawah */

#statisbawah{background:#0f6063;font-family:'Open Sans';font-size:13px;font-weight:bold; position:relative;}

#statisbawah a{color:#ddd;text-decoration:none;line-height:25px;margin:5px}

#statisbawah a:hover{color:#ffffe0;text-decoration:underline}

4. Selanjutnya cari kode untuk bagian bawah footer untuk meletakkan kode htmlnya. Agar lebih mudah, anda bisa meletakannya di atas kode Atribusi Blogger atau html Copyright untuk hasil seperti di blog saya ini. Jika sudah ketemu, silahkan pastekan kode berikut ini di atasnya:

<div id='statisbawah'>

<div style='text-align: center;'> <a href='https://contohsajae.blogspot.com/p/about-me.html'>About</a>  <a href='https://contohsajae.blogspot.com/p/contact-us_10.html'>Contact</a>  <a href='https://contohsajae.blogspot.com/p/blog-page_51.html'>Sitemap</a>  <a href='https://contohsajae.blogspot.com/p/privacy-policy.html'>Privacy</a>  <a href='https://contohsajae.blogspot.com/p/blog-page_16.html'>Disclaimer</a></div>

</div>

Keterangan: Ganti dengan masing-masing Link tujuan Halaman Statis di Blog anda. 

5. Simpan kembali template anda dan lihat hasilnya. 

Jika tampilan kurang rapi atau kurang menarik, anda bisa mengaturnya lagi dengan mengganti background, margin, padding, font style, color, size, atau menambahkan efek-efek tertentu pada bagian CSSnya. Sesuaikan dengan style tampilan blog anda. Semoga bermanfaat.

Lokasi:

Berbagi :