Cara Membuat Halaman Kontak & Daftar Isi di Blogger

Komunikasi Praktis

Cara Membuat Form Kontak & Daftar Isi (Sitemap) di Halaman Statis Blogger


HALAMAN kontak sangat penting dipasang di blog. Blogger menyediakan widget Contact Form untuk dipasang di sidebar atau footer blog.

Form kontak ini untuk memudahkan pengunjung menghubungi admin blog.

Selain menggunakan widget, formulir kontak (contact form) juga bisa dibuat di halaman statis (static page), lalu ditampilkan di navigasi menu atau di footer. Berikut ini caranya.

Di bagian bawah juga ada panduan membuat halaman statis berisi daftar isi postingan blog, semacam peta situs (sitemap). Biasanya linknya dipasang di menu atas (topbar menu) atau di footer.

Cara Membuat Form Kontak di Halaman Statis Blogger

1. Tema > Edit HTML

2. Copas kode CSS berkut ini di atas kode ]]></b:skin>

.sidebar #ContactForm1 {display:none}

3. Save! Simpan template!

4. Klik Layout > Add a Gadget > pilih Contact Form > klik tanda plus (+)

Add a Gadget > pilih Contact Form

5. Membuat Halaman Kontak

– Klik  Pages (Halaman)
– Klik New Page (Buat Halaman)
– Isi judul halaman dengan Kontak
– Klik Mode HTML (di samping Compose)
– Copas kode berikut ini:

<div class=”contact-form”>
<div class=”contact section” id=”contact” style=”display: block;”>
<div class=”widget ContactForm” id=”ContactForm1″>
<div class=”contact-form-widget”>
<div class=”form”>
<form name=”contact-form”>
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” placeholder=”Name” size=”30″ type=”text” value=”” />
                                <input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email” size=”30″ type=”text” value=”” />
                                <textarea class=”contact-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Message” rows=”5″></textarea>
                                <input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” type=”button” value=”Send” />
                                <br />
<div style=”text-align: center; width: 100%;”>
<div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”>
</div>
<div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

5. Langsung klik Publish (Publikasikan)

Selesai.

Demikian Cara Membuat Halaman Kontak di Blogger. Nanti, jika ada yang mengisi form kontak itu otomatis terkirim ke email admin blog. Biasanya masuk di kategori Social.

Cara Membuat Halaman Daftar Isi (Sitemap, Peta Situs)

Selain halaman kontak, kita juga bisa membuat halaman daftar isi (table of content), halaman indeks postingan, atau dikenal juga dengan sebutan sitemap (peta situs). Lihat Demo.

Cara membuatnya sebagai berikut:

  1. Klik  Pages (Halaman)
  2. Klik New Page (Buat Halaman)
  3. Isi judul halaman dengan Kontak
  4. Klik Mode HTML (di samping Compose)
  5. Copas kode berikut ini:

<script>
var numposts = 1000;
var showpostdate = true;
</script>
<script>
function boss(json) {
document.write(‘<ul>’);
for (var i = 0; i < numposts; i++) {
document.write(‘<li>’);
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
posttitle = posttitle.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = “Jan”;
monthnames[2] = “Feb”;
monthnames[3] = “Mar”;
monthnames[4] = “Apr”;
monthnames[5] = “May”;
monthnames[6] = “Jun”;
monthnames[7] = “Jul”;
monthnames[8] = “Aug”;
monthnames[9] = “Sep”;
monthnames[10] = “Oct”;
monthnames[11] = “Nov”;
monthnames[12] = “Dec”;
}
}
document.write(posttitle);
if (showpostdate == true) document.write(‘ ‘ + cdday + ‘ – ‘ + monthnames[parseInt(cdmonth,10)] + ‘ – ‘ + cdyear);
(‘</li>’);
}
(‘</ul>’);
}
</script>
<script src=”/atom.xml?redirect=false&amp;start-index=1&amp;max-results=1000&amp;orderby=published&amp;alt=json-in-script&amp;callback=boss”></script>

Catatan: Angka 1000 adalah jumlah postingan, sesuaikan dengan jumlah postingan blog Anda, atau biarkan jika masih kurang dari 1000 postingan.

6. Langsung klik Publish (Publikasikan)

Demikian Cara Membuat Halaman Kontak  & Daftar Isi di Blogger. Wasalam. (www.komunikasipraktis.com).*

Discover more from Komunikasi Praktis

Subscribe now to keep reading and get access to the full archive.

Continue reading