Cara Lengkap Membuat Halaman Navigasi Blog
Setelah sobat membaca artikel persiapan sebelum mendaftar blogger, maka sobat wajib untuk membaca artikel ini. Navigasi pada blog bisa di ibaratkan sebagai papan penujuk arah yang ada di jalan, fungsinya adalah untuk memberi tahu kita agar memilih jalan yang tepat sehingga membuat kita tidak tersesat dan lebih cepat mengarah ke tempat tujuan.
Fungsi navigasi pada blog juga sama seperti papan penunjuk arah di jalan sob, navigasi yang benar pada blog akan membuat pengunjung lebih mudah mencari informasi yang dibutuhkan. Sedangkan jika sebuah blog memiliki navigasi yang tidak jelas, maka pengunjung akan kesulitan mencari informasi yang dicari.
Pada umumnya halaman navigasi sering disimpan pada bagian header dan footer. Namun saat ini banyak template yang membuat menu tersembunyi dan muncul dari samping, tapi itu tak berpengaruh kok sob, jadi bisa juga halaman navigasinya disimpan disana.
Timbal balik dari baik buruknya navigasi pada sebuah blog adalah kenyamanan pengunjung. Semakin baik artikel, semakin cantik tampilan, semakin cepat loading, dan semakin jelas navigasi pada blog, maka itu akan membuat pengujung merasa nyaman dan mungkin saja berlangganan di blog kita.
Sebaliknya jika sebuah blog terkesan acak-acakan seperti artikel yang berantakan karena tidak diberi navigasi yang jelas (label), tampilan template seadanya, dan kecepatan loadingnya lama, maka hal tersebut akan membuat pengunjung tidak nyaman dan akan memilih blog yang lain. Oleh karena itu navigasi pada blog sangatlah penting ya sob.
Berikut ini cara membuat navigasi halaman :
1. Buat Halaman About
Pertama sobat buka blog sobat, lalu pilih bagian halaman. Navigasi pertama yang harus sobat buat adalah halaman about (tentang). Fungsi navigasi ini adalah memberi tahu pengunung tentang apa saja yang ada di blog sobat.
Contoh :
2. Buat halaman contact
Halaman contact atau kontak sangat penting pada sebuah blog. Fungsi dari halaman ini adalah memberi tahu pengunung bahwa mereka bisa menghubungi sobat dengan cara mengirim email, mengirim whatsapp atau yang lainnya, tergantung sobat memberikan informasi kontak pada halaman contact itu sendiri.
Cara membuat halaman contact sama seperti halaman about, hanya saja pada halaman contact informasi yang sobat berikan lebih ke memberi tahu cara pengunung untuk menghubungi sobat.
Sobat juga bisa mencoba membuat custom contact yang membuat secara langsung mengarah ke email dengan menggunakan script di bawah ini.
Pertama buat halaman baru, setelah itu masuk ke mode HTML. Terakhir, copy dan paste kode di bawah ini pada halaman kosongnya, lalu klik publish.
<script>
var blogId = 'MASUKAN ID BLOG';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>Pada bagian Masukan ID Blog, silahkan masukan ID blog sobat.
Baca: Cara Kustom Permalink di Blogger
3. Buat Halaman Disclaimer
Yang harus sobat buat untuk melengkapi navigasi blog selanjutnya adalah disclaimer. Fungsi dari halaman disclaimer adalah pernyataan penyangkalan yang ditujukan untuk melindungi pemilik webiste atau blog. Halaman ini ditujukan untuk memberi tahu bahwa setiap pembaca artikel pada blog dianggap menerima syarat dan ketentuan yang berlaku pada blog secara otomatis.
Cara membuat halaman disclaimer sama seperti membuat halaman about, namun untuk mempercepat proses pembuatannya, sobat tinggal pergi ke website penyedia disclaimer generator.
Sebagai contoh, silahkan masuk ke situs Privacy Policy Generator dan lihatcontoh cara pembuatannya pada nomor 4.
4. Buat Halaman Privacy Policy
Dikutip dari www.qword.com Privacy policy adalah halaman pernyataan terkait seberapa jauh kita menggunakan informasi yang terkumpul dari pengunjung. Baik secara sebagian maupun secara keseluruhan. Informasi yang biasa di ambil website biasanya berupa cookies yang saat ini digunakan sebagai salah satu data distribusi iklan.
Cara membuat nya sama seperti disclaimer, sobat tinggal buat halaman baru, lalu pergi ke website penyedia pripacy policy generator. Isikan informasi yang diminta, setelah selesai sobat tinggal melakukan generat lalu copy & paste di halaman sobat.
Contoh, silahkan masuk situs Privacy Policy Online.
Isi kolom yang tersedia dengan nama blog dan domain blog sobat.
Pilih yes pada setiap pertanyaanm masukan nama negara dan provinsi, setelah itu klik next.
Masukan Email, lalu klik create Privacy Policy.
Pilih Copy to clipboard, lalu pastekan di halaman privacy policy.
5. Buat halaman Sitemap
Cara membuat halaman sitemap sama seperti membuat halaman yang lain, yang membedakan disini sobat akan membutuhkan sedikit code html. Fungsi sitemap adalah untuk memudahkan kita atau pengunjung untuk melihat seluruh postingan pada blog kita.
Untuk cara membuat sitemap sendiri sangat mudah, silahkan copy script di bawah ini, lalu paste di halaman yang akan sobat buat menjadi halaman sitemap.
<link href="https://cdn.rawgit.com/penaindigo/project/d4a73206/penaindigocom.css" rel="stylesheet"></link>
<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "ISI URL BLOG", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' – <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>Kesimpulan
Peran navigasi pada blog sangat penting, jika sobat ingin membuat pengunjung lebih mudah mencari informasi yang ada di blog, maka buat navigasi sejelas mungkin.
Untuk pembahasan cara membuat navigasi blog menu akan saya bahas di artikel selanjutnya...
Semoga bermanfaat dan wasalam.
Posting Komentar