Senin, 16 Januari 2017

Membuat Form Kontak Pada Blogger

Gambar 1. Panduan lengkap membuat form konta pada blogger

Ada dua cara yang bisa digunakan untuk membuat form kontak pada blogger, yakni dengan menggunakan jasa layanan pihak ketiga atau dengan menggunakan fitur bawaan dari blogger.

Layanan pihak ke-3 yang bisa anda gunakan diantaranya :
  • FOXYFORM
  • 123 Contact Form
  • FormSpring
  • Kontactr
  • PagePow
  • My Contact Form
  • Email Me Form
  • etc

Tapi pada kesempatan ini, Lombok blogger akan membahas bagaimana membuat form kontak pada blogger menggunakan fitur bawaan dari blogger.

Pada postingan sebelumnya, Lombok blogger pernah membahas Bagaimana Membuat Formulir online menggunakan google form, silahkan anda lihat postingannya melalui link berikut : Membuat formulir online menggunakan google form.

Membuat form kontak diperlukan ketika anda membuat halaman statis seperti “contact us” atau “hubungi kami” yang didalam halaman statis tersebut anda ingin menampilkan formulir kontak agar pengunjung bisa lebih mudah menghubungi anda via email langsung dari blogger. Atau anda yang memiliki blog jualan, dan ingin menampilkan form kontak pada postingan jualanan anda.

Anda juga bisa menampilkan form kontak langsung pada widget blog anda, dengan langsung menambahkan widget “formulir kontak”, maka formulir kontak akan langsung tampil pada bar sisi Blog. Jika nantinya pengunjung mengisi formulir tersebut, blogger akan langsung mengirimkan email ke email yang anda gunakan untuk login ke blogger.com

formulir kontak
Gambar 2. Menampilkan formulir kontak pada widget blogger


Cara Membuat Form Kontak pada Blogger


Untuk menampilkan formulir kontak pada halaman statis blogger, atau pada halaman postingan, Langkah pertama anda harus menambahkan widget “formulir kontak” terlebih dahulu seperti pada gambar.2 diatas.

Setelah anda berhasil  mendambahkan widget Formulir kontak pada bar sisi, langkah selanjutnya adalah menyembunyikan widget formulir kontak tersebut.

Cara menyembunyikan formulir kontak dari bar sisi adalah dengan menambahkan kode css berikut pada css template blog Anda.

Kode.1 css :

#ContactForm1,#ContactForm1 br{display:none;visibility:hidden}

Bagi anda yang belum terbiasa bongkar pasang kode css pada template, silahkan ikuti langkah berikut. Login ke Blogger Anda, Masuk ke menu TEMPLATE + EDIT HTML

Selanjutnya klik pada kode template, tekan  tombol Ctrl+f pada keyboard dan temukan kode berikut  

]]></b:skin> 


Setelah kode tersebut anda temukan, tepat diatasnya, pasang Kode.1 css untuk menyembunyikan formulir kontak dari bar sisi blog anda.

Kenapa disembunyikan?

Karna kita ingin menampilkan formulir kontak pada halaman statis dan postingan, maka jika kita biarkan terlihat di bar sisi blog, maka akan terdapat double formulir kontak dalam satu halaman.

Kita akan menampilkan formulir kontak pada halaman statis dan postingan, kenapa harus menambahkan widget terlebih dahulu, lantas setelahnya disembunyikan?

Jika kita hanya menambahkan kode formulir kontak saja, tanpa menambahkan widget pada bar sisi,
maka formulir kontak pada halaman statis atau pada postingan tidak akan bekerja, sehingga pesan yang dimasukkan pengunjung tidak akan terkirim.

Langkah kedua, pasang kode formulir kontak dibawah berikut ini pada halaman statis atau postingan. Misalkan anda ingin memasang formulir kontak pada halaman "kontak" blog anda.

Silahkan buat halaman baru, beri nama halaman "hubungi kami" atau "contact", aktifkan mode pengeditan HTML, kemudian pasang kode formulir kontak dibawah ini.

Kode.2 Formulir Kontak :

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

Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" /> 
<br />
<div style="max-width: 222px; 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">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
.post-body input {width:initial;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>


Demo bisa anda lihat pada halaman kontak lombok blogger. Email yang dikirim dari kontak formulir akan masuk ke email pada tab Sosial.

Bagi yang masih kurang jelas bagaimana membuat formulir kontak pada blogger, berikut video tutorialnya.


Video Tutorial Cara Membuat Form Kontak Pada Blogger



Jika sobat blogger menyukai apa yang kami tulis di blog ini, jangan lupa untuk like fanpage facebook Lombok blogger, sekian terimakasih.

Kamis, 12 Januari 2017

Cara Mengganti Alamat Url Fanpage Facebook


Kebijakan terbaru dari facebook, alamat url fanpage facebook otomatis akan menjadi username dari fanpage facebook tersebut. Maka pastikan anda sudah  membuat username dari fanpage facebook yang anda kelola, sebuah nama unik dan benar-benar mewakili thema dari fanpage, agar memudahkan siapa saja untuk menemukan fanpage tersebut.

Contoh jika Url facebook Anda : https://web.facebook.com/username

Jadi pengguna facebook bisa menemukan, atau memberi tag ke fanpage facebook Anda dengan mengetikkan @username  pada sebuah status facebook.

Bagi sobat blogger yang belum memiliki fanpage facebook, silahkan dibaca postingan Lombok blogger sebelumnya tentang Cara membuat fanpage facebook, dan kelebihan apa yang bisa didapatkan.

Cara Membuat Username Fanpage Facebook


Bagi yang baru membuat fanpage facebook, sosial media facebook tidak secara otomatis membuat username fanpage tersebut. Dibutuhkan tindakan dari admin fanpage tersebut untuk memberikan username.

Silahkan buka fanpage yang baru saja anda buat, tepat dibawah photo profile fanpage klik link create page @username, silahkan  klik dan ikuti petunjuk selanjutnya.

Gambar 1. Membuat username fanpage facebook

Perhatikan gambar di Atas!,

Gambar di atas adalah contoh fanpage facebook dengan nama Berita positif indonesa. Bisa diperhatikan, fanpage ini belum memiliki username.

Untuk membuat username, silahkan isikan usernama pada kolom isian Username diawali dengan tanda @. Maksimal isian 50 karakter.

Setelah anda mendapatkan nama yang cocok, klik tombol create username. Facebook akan memberikan notifikasi jika nama yang anda ajukan diterima atau ditolak. Jika ditolak silahkan pilih usernme yang lain, dan ulangi langkah seperti yang disebutkan diatas.

Cara Mengganti Alamat url Fanpage faceboook [Mengganti username]


Bagi sobat blogger yang sudah memberikan nama pada fanpage facebook sebelumnya, jika ingin mengganti username atau url dari fanpage facebook, silahkan masuk ke fanpage.

Tepat dibawah gambar cover fanpage, klik tombol MORE untuk memunculkan pilihan yang disediakan.

Kemudian klik pada pilihan, edit page info. Selanjutnya akan muncul window pengaturan. Kemudian Scroll kebawah sampai terlihat tombol See All Information.

Selanjutnya Anda akan dibawa ke kehalaman pengeditan informasi dasar fanpage facebook Anda.

Gambar 2. Mengganti Url/Username fanpage facebook

Perhatikan gambar diatas!

Arahkan kursor/pointer anda pada menu username. Klik tombol edit, selanjutnya akan muncul window seperti pada gambar 1.

Isikan username yang ingin anda gunakan. Facebook akan melakukan review beberapa saat pada username baru yang anda gunakan, 1-10 menit.

Anda akan mendapatkan notifikasi, apakah diterima atau ditolak. Jika ditolak silahkan ulangi menggunakan username yang baru.

Penutup

Bagi sobat blogger yang ingin serius menekuni blogging atau dunia internet marketing, keberadaan fanpage menjadi suatu keharusan untuk bisa mengembangkan bisnis lebih cepat, lebih luas dan tentunya jauh lebih hemat.

Itu dia tutorial membuat dan mengganti url/username fanpage facebook, jika masih ada yang kurang jelas dan perlu ditanyakan, silahkan tinggalkan pesan anda pada kolom komentar. Terimakasih

Selasa, 10 Januari 2017

Membuat Formulir Online menggunakan Google Form

membuat formulir online menggunakan google form

Bagi pengguna platform blogger.com, membuat formulir online menggunakan Google form merupakan salah satu cara terbaik untuk membuat formulir seperti menu booking, registrasi atau berbagai macam formulir lainnya pada blog.

Bagi pengguna CMS wordpress, ada banyak sekali plugin yang bisa digunakan untuk membuat formulir online secara cepat dan instan, diantaranya yang paling terkenal adalah contact form 7, ninja form, jatpack form, dan lain sebagainya.

Bingung memilih platform blog? Blogger.com atau wordpress, silhakn baca selengkapnya pada tulisan perbedaan wordpress dengan blogger.com

Kelebihan Membuat Formulir online menggunakan Google Form

  • Mudah digunakan : Membuat formulir menggunakan google form bisa dibilang sangat mudah. Semua konfigurasi sudah berbasis GUI yang sangat user friendly.
  • Tampilan Custom : Anda bisa mengganti warna, dan merubah background formulir Google form, untuk mempercantik tampilan formulir pada blog.
  • Database tersimpan di Google drive : Setiap pengunjung yang mengisi formulir, maka Anda akan mendapatkan notifikasi pada akun google anda, baik email maupun google drive. Dan database formulir tersebut akan tersimpan dengan aman pada akun googe drive anda.
  • Data Bisa disimpan ke dalam dokumen Spreadsheet /Excel : Data pengisian formulir bisa anda export kedalam dokumen spreadsheet atau Excel sehingga akan memudahkan anda membaca data masukan dari formulir. 

Cara Membuat Formulir dengan Google Form 


Berikut adalah video tutorial panduan lengkap cara membuat formulir online menggunakan Google Form. Tapi sebelum itu pastikan anda sudah memiliki akun gmail untuk digunakan login ke Google drive dan Google Form.

Silahkan login ke Google drive, selanjutnya ikuti tutorial pada video dibawah berikut




Berikut adalah salah satu contoh Formulir yang dibuat menggunakan Google Form, ketika pengunjung mengisikan formulir dan menekan tombol kirim, maka notifikasi akan langsung terlihat pada halaman Google form. Masukan dari user tersebut selanjutnya bisa di simpan ke dalam file spreadsheet atau excel.





Jika ada yang kurang jelas dengan tutorial Cara membuat formulir online menggunakan Google form ini, silahkan tinggalkan pesan anda pada kolom komentar. Jangan lupa untuk like fanpage facebook Lombok blogger, dan dapatkan informasi up2date seputar dunia blogger. Saalam blogger dan terimakasih

Selasa, 27 Desember 2016

Percepat Loading Blog dengan Optimasi CSS Delivery


Bagi pengguna flatform blogger kecepatan loading blog dari sisi server memang tidak perlu diragukan lagi. Walaupun gratis, akan tetapi perusahaan raksasa seperti google tentu memiliki kualitas server yang terjamin, dan ini terbukti. 

Berbeda jika anda menggunakan self hosting, dan menggunakan CMS seperti Wordpress, anda harus mebayar biaya cukup mahal untuk bisa mendapatkan kualitas server yang bagus.

Untuk memaksimalkan kecepatan loading blog pada blogger lebih jleb lagi, ada beberapa hal penting yang harus dilakukan, dua diantaranya pernah dibahas pada postingan sebelumnya.
  1.  Remove Render Blocking Javascript
  2. Cara Mengoptimalkan Gambar, dapatkan lampu Hijau pada Google Page Speed Insight

Silahkan dibaca terlebih dahulu kedua postingan tersebut. Masih berkaitan erat dengan kedua postingan diatas, berikut ini akan dibahas cara yang tak kalah penting untuk meningkatkan kecepatan akses blog dengan mengoptimlkan CSS Delivery.

Ok, sebelum pembahasan ini lebih jauh, silahkan cek speed blog anda terlebih dahulu pada Google Page Speed Insight, Jika hasil test terdapat laporan seperti gambar dibawah berikut ini, maka anda membaca tutorial yang tepat untuk menyelesaikan permasalahan tersebut.
Pada gambar diatas kita bisa perhatikan text yang berwarna biru " Optimize CSS delivery" yakni untuk file CSS Bundel (pada kotak warna merah).

CSS bundel merupakan file css yang dimiliki oleh template blogger yang secara default sudah terpasang. Salah satu fungsi utamanya adalah untuk mereset tampilan blog ke format standar blogger. 

Untuk memperbaiki error yang tampak pada gambar diatas, ternyata kita harus me-remove css bundle tersebut dari template blog yang anda gunakan.

Berikut 3 alasan kenapa sebaiknya anda me-remove CSS bundle dari template anda.
  1. Jika anda menggunakan custome template, tidak ada alasan bagi anda untuk tidak menghapus CSS bundel dari blog anda.
  2. Jika anda anda adalah seorang Template Designer atau bagi anda yang hoby edit template blogger, pekerjaan anda akan menjadi lebih sulit dengan adanya CSS bundle, karna jika tidak sesuai maka tampilan akan diresete ke tampilan standar blogger.
  3. Ini akan mempercepat loading blog anda cukup signifikan, buktikan setelah anda menghapus CSS bundel, lakukan pengecekan ulang pada Google page speed insight.

 Cara Me-Remove CSS Bundel


Silahkan login ke Blog anda, setelah anda berada pada halaman dashboard silahkan buka menu Template + Edit HTML. 

Cari code <head>, Kemudian ganti dengan kode &lt;head&gt;

Setelah itu cari lagi kode </head> Kemudian ganti dengan Kode &lt;/head&gt;&lt;!--<head/>--&gt;

Terakhir, simpan perubahan. Sekarang silahkan anda periksa kembali speed blog anda pada google page speed insight, dan lihat hasilnya.

Senin, 26 Desember 2016

Cara Mengoptimalkan Gambar, dapatkan lampu Hijau pada Google Page Speed Insight


Postingan Cara mengoptimalkan gambar untuk mendapatkan lampu hijau pada Google page speed insight ini merupakan pembahasan lanjutan dari postingan sebelumnya yaitu Cara Remove render Blocking Javascript, silahkan anda baca terlebih dahulu. Serial postingan ini khusus membahas bagaimana meningkatkan speed blog pada blogger guna mendapatkan ranking yang lebih bagus pada mesin pencari.

Gambar merupakan media pendukung postingan yang sangat efektif untuk SEO. Dengan gambar anda bisa meningkatkan trafik kunjungan dan mengurangi nilai Bounce rate dari blog atau website yang anda kelola.

Bagaimana gambar bisa meningkatkan trafik kunjungan?

Melalui mesin pencari, jika gambar pada postingan anda menarik dan cukup sesuai dengan keyword yang dicari, maka mesin pencari akan menampilkan gambar anda pada hasil pencarian, kemungkinan besar orang yang mencari gambar tersebut juga akan membuka blog atau website anda.

Melalui social media, ketika anda atau orang lain share tulisan blog anda ke sosial media, social media tersebut secara otomatis akan menampilkan feature image  dari postingan tersebut, semakin menarik gambar yang anda tampilkan, maka semakin besar pula peluang tulisan anda dibuka oleh para pembaca.

Bagaimana gambar bisa mengurangi nilai Bounce rate (Nilai pentalan)?

JIka halaman dibuka dalam rentang waktu yang singkat, kemungkinan besar akan dinilai sebagai Pentalan, semakin tinggi nilai Pentalan, maka semakin buruk pulau nilai sebuah website pada mesin pencari. Jadi dengan menyuguhkan gambar ilustrasi yang menarik tentu pengunjung juga akan lebih betah membaca sebuah halaman dibandingkan dengan halaman yang tidak memiliki gambar sama sekali.

Bagaimana Cara Mengoptimalkan Gambar Untuk Mempercepat Loading Blog pada Blogger


Cara Mengoptimalkan Gambar Untuk mendapatkan lampu Hijau pada Google Page Speed Insight, GTmetrix atau Pada Pingdom Tool pada blogger memang agak sedikit manual dibandingkan dengan wordpress. Pada wordpress terdapat Plugin Wp-Smush yang bisa mengerjakan pekerjaan Optimasi gambar secara otomatis. Saya pernah membahas ini pada postingan di website sasambo design, silahkan cek tulisannya di sini Optimalkan gambar otomatis dengan wp smush.

Untuk di blogger, berikut beberapa langkah untuk mengotimalkan gambar agar loading website menjadi lebih cepat.
  •  Pertama Ukuran panjang dan lebar Gambar.  Untuk ukuran panjang dan lebar gambar, sesuaikan dengan lebar kolom postingan blog anda, ukuran gambar jangan melebihi ukuran lebar kolom postingan, karna akan merusak tampilan halaman postingan yang akan berpengaruh langsung pada user experience.  Hindari melakukan scaling gambar, selalu tampilkan ukuran original gambar pada postingan, karna faktor ini yang nantinya sangat berpengaruh pada kecepatan loading website.
  • Kedua Ukuran Besar gambar. Selalu usakan ukuran gambar dibawah 50 KB, semakin kecil semakin bagus. Gunakan software seperti Phostoshop untuk melakukan kompresi secara maksimal tapi dengan resolusi gambar yang masih bagus. Pada photoshop anda bisa memanfaatkan fitur "save for web" fitur ini sangat powerfull untuk menghasilkan gambar dengan kompresi maksimal.
Untuk kompresi gambar dengan hasil yang bagus tapi dengan ukuran yang kecil memang sulit dilakukan. Semakin kecil ukuran gambar biasanya akan berbanding lurus dengan kualitas gambar.  Setelah mencoba beberapa software image processor, software edit gambar Photoshop ternyata memberikan hasil yang maksimal.

Video Tutorial Kompresi Gambar dengan Photoshop


 

Gambar pada Blog Lombog blogger saya kompres sampai ukuran dibawah 10Kb, kecuali pada postingan tertentu. Ukuran gambar yang kecil ini memang sangat berpengaruh pada peningkatan kecepatan loading blog.

Penutup

Jika masih ada yang kurang jelas dalam pembahasan Cara Mengoptimalkan Gambar Untuk mendapatkan lampu Hijau pada Google Page Speed Insight ini, silahkan didiskusikan pada kolom komentar. Salam Lombok Blogger, terimakasih

Cara Remove Render Blocking Javascript


Ketika anda memeriksa kecepatan akses blog atau website anda pada tool seperti Google page speed insight, biasanya anda akan mendapatkan warning "should fix!" Eliminate render-blocking JavaScript and CSS in above-the-fold content, ternyata ini merupakan salah satu faktor yang sangat berpengaruh pada kecepatan akses dari blog atau website anda. Pada tulisan ini Lombok blogger akan membahas bagaimana cepat mengatasi permasalahan ini.

Sebelum browser menampilkan sebuah halaman website, terlebih dahulu script yang ada pada website tersebut akan di-parse/diuraikan (Javascript dan css) baru kemudian ditampilkan. Jadi selama proses penguraian tersebut, jika ditemukan script yang dipanggil dari sumber external, maka proses penguraian akan dihentikan untuk mendownload script terlebih dahulu, baru kemudian proses penguraian dilanjutkan kembali. Ternyata proses ini sangat berpengaruh pada kecepatan blog atau website ketika diakses.
Kecepatan loading website merupakan salah satu faktor utama website layak berada pada halaman pertama pada hasil pencarian. Perusahaan Search engine tentu tidak ingin mengecewakan user dengan menampilkan website yang memiliki loading halaman lambat pada halaman pertama hasil pencarian.

lombok blogger
Lombok blogger pada page speed insight, setelah dilakukan pengoptimalan Javascript dan css.
Blog lombok blogger (sebelum menambahkan beberapa gambar dengan ukuran diatas 100KB) mendapatkan lampau hijau pada Google page speed insight, baik pada versi desktop maupun versi  mobile. Tapi setelah menambahkan postingan yang mengharuskan untuk menggunakan gambar dengan ukuran yang cukup besar, maka sekarang berada dilevel 80-an/100.

Perlu diketahui, selain javascript dan css external, gambar juga memiliki pengaruh yang cukup besar pada kecepatan loading website. Pastikan anda menggunakan gambar dengan kompresi maksimal, dan selalu tampilkan gambar pada halaman dengan ukuran original ( tidak dikecilkan atau dibesarkan).

Cara Menghilangkan Render-blocking JavaScript and CSS in above-the-fold content


Untuk mengatasi masalah ini, caranya sebenarnya cukup sederhana, masalah ini mucul karna anda memanggil script javascript dan css dari sumber luar atau eksternal, maka untuk mengatasinya, kita hanya perlu memasang script tersebut pada blog atau website anda, caranya.

Remove Render Blocking JavaScript pada Blogger



Perhatikan gambar diatas, pada text yang berwarna biru "Remove render-blocking Javascript" terdapat link javascript yang dipanggil ketika browser menguraikan halaman website, jadi kode javascript ini tidak terdapat pada website, akan tetapi terdapat pada sumber luar, dan akan dipanggil jika browser menguraikan halaman website untuk ditampilkan.

Silahkan copy link javascript tersebut, kemudian buka tab baru pada browser anda, selanjutnya paste dan tekan enter untuk melihat isi dari script tersebut. Maka akan terlihat seperti gambar dibawah berikut.


Langkah selanjutnya, copy semua baris script pada browser, dengan menekan tombol ctrl+a pada keyboard. Code Javascript yang sudah di Copy selanjutnya anda pasang diantara kode berikut  

<script type="text/javascript"> Pasang kode javascript disini </script>

Ganti text yang berwarna merah dengan kode javascript yang sudah anda kopy sebelumnya. Selanjutnya kopi semua code setelah digabungkan.

Masuk kehalaman dashboard blogger, kemudian pilih menu Tata Letak, lalu tambahkan widget HTML/Javascript, kemudian paste kode javascript yang sudah anda kopi pada widget tersebut, Pada kolom judul dikosongkan saja, kemudian tekan tombol save.

Sekarang coba anda lakukan pengetesan pada google page speed insight,  error render blocking javascript seharusnya tidak muncul lagi.

Penutup

Untuk Optimasi CSS Delivery, akan dibahas pada postingan berikutnya, jika ada yang masih kurang jelas dan perlu ditanyakan pada postingan cara remove render blocking javascript ini, silahkan tinggalkan pesan pada kolom komentar. Suka dengan postingan ini, silahkan like fapage facebook kami Lombok Blogger, dapatkan informasi terupdate tentang tutorial SEO dan Blogger, terimakasih

Rabu, 21 Desember 2016

Cara Cepat Membuat halaman Sitemap Blog

membuat halaman sitemap blog

Sitemap atau peta situs merupakan sebuah halaman pada blog atau website yang berisi postingan lengkap dari blog tersebut, dari postingan paling awal sampai postingan terbaru, guna memudahkan pengunjung untuk menemukan konten yang mereka cari. Pada kesempatan ini Lombok Blogger akan membahas cara cepat membuat halaman sitemap pada blogger.

Jadi halaman sitemap lebih seperti daftar isi, yang akan memudahkan para pembaca blog untuk melihat keseluruhan isi dari sebuah blog atau website. Sebagai contoh anda bisa melihat sitemap dari blog Lombok blogger pada halaman sitemap blog ini, Lihat sitemap lombok blogger melalui link berikut ini Lombok Blogger Sitemap

Keuntungan Membuat Halaman Sitemap

  • Ternyata selain memudahkan pengunjung untuk memetakan situs kita, menampilkan halaman sitemap pada blog juga bisa berpengaruh langsung pada SEO, karna dengan adanya halaman sitemap, Robot google akan lebih mudah membaca konten yang ada pada suatu blog atau website.
  • Bagi blogger yang ingin menampilkan iklan goolge adsense pada blog mereka, membuat halaman sitemap juga bisa menjadi faktor penting agar bisa cepat diterima jadi publisher google.

Cara Membuat Halaman Sitemap


Untuk membuat sitempa pada blog sebenarnya sangat sederhana, anda tinggal membuat sebuah halaman baru pada blog anda. Login ke www.blogger.com, kemudian klik menu Page/Laman + New Page/ Laman Baru. Selanjutnya isikan judul halaman dengan judul "sitemap" atau "peta situs". Selanjutnya kopikan kode dibawah berikut. Pastikan anda sudah mengaktifkan mode pengeditan HTML

<script type="text/javascript">
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
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;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>
');
}
</script>

<ul>
<script src="https://nama-blog.blogspot.co.id/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</ul>
Ganti alamat blog pada text yang berwarna merah dengan alamat blog anda. Selanjutnya simpan perubahan, klik tombol "Pratijau" untuk melihat halaman sitemap, apakah sudah bisa menampilkan daftar isi postingan blog anda atau belum. Jika sudah, silahkan klik tombol "Publikasikan" untuk menerbitkan halaman sitemap yang anda buat.

Lihat juga tulisan cara Terbaru submit sitemap Blog ke Google dan Bing

Demikian tadi tutorial blogger, cara cepat membuat halaman sitemap pada blogger, jika ada yang masih kurang jelas dan perlu ditanyakan, silahkan tinggalkan pesan pada kolom komentar. Jika anda suka dengan tulisan ini, silahkan like fanpage Lombok Blogger,dan dapatkan update informasi terbaru seputar blogger informasi menarik lainnya, terimakasih.