Cara Membuat dan Memasang Halaman Navigasi Sederhana Di Blogger

Dalam postingan ini anda akan belajar cara membuat dan memasang halaman navigasi sederhana di blogger seperti about, contact, disclaimer, privacy policy dan sitemap.

Ikuti terus kursus selengkapnya dibawah ini.

Sebelum memulai untuk melakukan caranya ada baiknya jika anda memahami tentang halaman navigasi terlebih dahulu.

Bagian ini juga merupakan syarat yang sangat penting dan akan anda butuhkan nanti saat anda ingin menghasilkan uang lewat blog.

Apa Yang Dimaksud Halaman Navigasi Blog?

Halaman navigasi adalah halaman yang bisa menghubungkan pengunjung ke konten yang mereka cari. Pengunjung jadi lebih mudah menemukan konten yang mereka cari dalam suatu blog.

Dengan adanya halaman navigasi pada blog membantu pengunjung menjelajah konten-konten yang kita tandai, misalnya konten yang ditandai dalam label.

Pengunjung juga bisa melihat beberapa informasi dengan cepat melalui halaman navigasi blog.

Blog yang memiliki halaman navigasi juga akan dianggap serius dan benar-benar sedang dikelola.

Kenapa dianggap serius?

Bisa anda buktikan sendiri bahwa untuk mendaftarkan blog anda ke google adsense blog anda harus memiliki navigasi halaman yang baik.

Maka dari itulah halaman navigasi memiliki peran yang sangat penting. Sekarang disini kita akan memulai membuat halaman navigasi pada blog.

Membuat Halaman About Me

Halaman About Me berguna memperkenalkan semua tentang anda atau semua tentang blog anda ke pengunjung. Mulai dari awal pembuatan dan tujuan dari membuat blog tersebut.

Halaman ini sangat penting dan harus kamu buat agar pengunjung bisa tahu apa tujuan dari blog anda, kapan blog anda dibuat dan lain-lain.

Berikut ini langkah membuat halaman About Me di Blogger.

1. Untuk membuat halaman About Me di blogger, silahkan anda masuk ke blog anda.

2. Dalam dashboard blog anda pilih Halaman.

3. Pilih buat Halaman Baru.

4. Kemudian anda bisa isikan tentang halaman About Me untuk blog anda.

5. Berikan judul halaman dengan About.

6. Jika sudah, publikasikan.

Memang sangat singkat dalam membuat halaman tersebut. Hanya menulis seperti biodata saja tidak apa-apa.

Setelah halaman About Me, anda harus membuat halaman lainnya, yaitu Contact Me.

Membuat Halaman Contact 

Untuk halaman Contact Me bisa anda buat melalui situs-situs untuk membuat halaman tersebut. Tapi untuk mempernudah pekerjaan, kita akan membuat halaman Contact dengan bawaan blog.

Berikut cara membuat halaman Contact Me di Blogger.

1. Copy kode dibawah ini

<style type="text/css">

#ContactForm1,#ContactForm1 br{display:none}

</style>

<form name="contact-form">

<div class="formcolumn1">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />

</div>

<div class="formcolumn2">

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

</div>

<div class="formcolumn3">

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="7"></textarea>

</div>

<div class="formcolumn4">

<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />

</div>

<div style="max-width: 100%; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

<style scoped="" type="text/css">

#ContactForm1,#comments{display:none}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}

#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}

#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}

.formcolumn4{position:relative}

.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_OYuImNmgr1FhUrzUBU1KfgYri-yvilIMrSSfeoyxGdC6K0hEs9Si113pR_4b1bCb98abf-rAc4OFkOBi10oF1ubOY4ABbWnqGtdlBuGSzGJ5POK5SYIRfnZIFsD12g9uerVdaL6XQvbH/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}

#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}

#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}

form{color:#888}

.formcolumn1,.formcolumn2{float:left;width:50%}

.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}

.formcolumn2{padding:0 0 0 10px}

@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}

</style>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4503790436212648199';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x4503790436212648199','//kursusbebas.blogspot.com/','4503790436212648199');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4503790436212648199', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script>

2. Seperti biasa masuk ke blog.

3. Pilih halaman dan buat Halaman Baru.

4. Disini anda paste kode yang sudah anda copy. Tapi anda harus mempastekannya dalam mode HTML. Jangan anda meletakan dalam mode compose karena kita hanya akan meletakan kode script, bukan tulisan atau teks.

5. Kemudian anda harus mengganti URL blog dan ID blog seperti yang sudah saya tandai dengan URL dan ID blog anda sendiri.

6. Berikan judul halaman dengan Contact.

7. Jika sudah, anda langsung bisa mempublikasikannya.

Untuk mengetahui ID dari blog anda sendiri caranya cukup mudah. Silahkan menuju ke dashboard blog anda dan salin url dari dashboard blog anda.

Anda akan mendapatkan url panjang, namun yang harus anda ambil adalah ID=0000XXXXXX.

Sampai disini anda sudah memiliki 2 halaman navigasi pada blog anda. Kita akan lanjut membuat halaman navigasi berikutnya, yaitu Disclaimer.

Membuat Halaman Disclaimer Dan Privacy Policy

Berbeda dengan halaman About Me dan Contact Me. Untuk membuat halaman navigasi Disclaimer dan privacy policy, anda akan membuatnya menggunakan suatu situs.

Sebenarnya halaman tersebut bisa kita buat tanpa situs seperti pada halaman About Me. Tapi kita tidak akan menghabiskan banyak waktu untuk membuat halaman navigasi Disclaimer dan Privacy Policy.

Itulah sebabnya kita akan menggunakan suatu situs untuk membuat halaman navigasi Disclaimer dan Privacy Policy agar pekerjaan kita menjadi lebih ringan.

Untuk membuat halaman Disclaimer dan Privacy Policy, silahkan anda ikuti petunjuk berikut ini.

1. Masuk ke situs privacypolicyonline.

2. Dalam situs tersebut anda akan melihat 4 kotak yang harus anda isi, yaitu Your Site Title, Your Site URL, Contact Link dan Email Address.

3. Isikan informasi ke dalam 4 kotak yang saya sebutkan. Untuk bagian Contact Link anda bisa isi Privacy Policy.

4. Jika sudah, klik tombol Generate Policy.

5. Salin privacy policy yang sudah dibuat.

6. Masuk ke blog dan klik halaman.

7. Pilih buat Halaman Baru.

8. Paste teks yang sudah anda copy. Masukan dalam mode compose.

9. Beri judul Privacy Policy.

10. Jika sudah, publikasikan.

Lakukan cara yang sama seperti diatas saat anda ingin membuat halaman Disclaimer. Tapi anda harus memilih Generate Disclaimer dalam situs tersebut.

Dan untuk halaman Disclaimer anda harus mengisi Disclaimer di bagian Contact Link.

Sekarang kita lanjut ke pembuatan halaman selanjutnya, yaitu Sitemap.

Membuat Halaman Sitemap

Sitemap atau Peta Situs pada blog memudahkan pengunjung melihat semua isi konten dalam blog anda.

Postingan yang sudah anda publikasikan nantinya akan terpajang dalam Sitemap blog dengan label atau tanpa label.

Lebih tepatnya Sitemap ini merupakan daftar dari semua postingan yang dipublikasikan di blog anda.

Untuk membuat halaman Sitemap atau Peta Situs, silahkan anda ikuti langkahnya berikut ini.

1. Copy kode dibawah ini

<style type="text/css">

#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;

padding:1px 0 2px 11px;background: #3498DB;

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}

.labl a{color:#fff;}

.labl:first-letter{text-transform:uppercase;}

.new{color:#FF5F00;font-weight:bold;font-style:italic;}

.postname{font-weight:normal;background:#fff;margin-left: 35px;}

.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}

</style> <div id="toc">

<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script> <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

2. Masuk ke blog dan pilih Halaman.

3. Buat Halaman Baru

4. Pastekan kode yang sudah anda salin ke kotak mode HTML.

5. Beri judul halaman tersebut Sitemap.

6. Publikasikan.

Sampai disini cara membuat halaman navigasi blog sudah selesai. Anda sudah memiliki 5 halaman navigasi, yaitu About, Contact, Disclaimer, Privacy Policy dan Sitemap.

Kita tidak akan membiarkan halaman navigasi blog terpajang begitu saja. Tapi kita akan memasangnya dalam template blog kita.

Memasang Halaman Navigasi Blog

Agar halaman tersebut benar-benar terpasang dalam blog, anda harus memasang tiap link dari halaman tersebut ke HTML template anda.

Untuk mengetahui link halaman yang sudah anda buat, anda bisa masuk ke daftar halaman di dashboard blog kemudian klik Lihat dan copy URL halaman tersebut.

Untuk memasang halaman ke menu navigasi bisa anda ikuti caranya berikut ini.

1. Cari kode berikut dalam HTML template anda

<ul>

  <li><a href='#'>About </a></li>

  <li><a href='#'>Contact</a></li>

  <li><a href='#'>Disclaimer</a></li>

  <li><a href='#'>Privacy Policy</a></li>

  <li><a href='#'>Sitemap</a></li>

</ul>

2. Hapus tanda # dan pastekan url dari tiap halaman yang sudah anda buat.

Saya pastikan anda memasang semua link aktif yang menuju ke halaman anda. Pastikan juga tidak ada error.

Selesai. Pada langkah cara membuat dan memasang halaman navigasi sederhana di blogger sudah anda selesaikan.

Jadi begitulah cara membuat dan memasang halaman navigasi sederhana di blogger.

Share this post