Cara Membuat Sitemap SEO Keren di Blogger | HaxorWorld

Cara Membuat Sitemap SEO Keren di Blogger | HaxorWorld

Welcome back to HaxorWorld, 

dikesempatan kali ini, Gue ingin membagikan trik & tips mudah yaitu cara mudah membuat sitemap keren versi HaxorWorld, sebelum kita mulai kepembahasan, alangkah baiknya, agan harus tahu, Apa sih Sitemap itu?


Apa itu Sitemap?

Sitemap/Peta Situs merupakan sebuah file tempat Agan, mendaftarkan halaman web situs Agan untuk memberi tahu Google dan mesin pencari lainnya tentang konten situs Agan. Dengan adanya sitemap, blog Agan akan lebih cepat di index oleh Search Enggine salah satunya seperti Googlebot


Selain itu, peta situs Agan dapat memberikan metadata berharga yang terkait dengan laman yang Agan cantumkan di sitemap tersebut: Yang masih kurang tahu, apa itu Metadata. Metadata merupakan informasi tentang laman web, seperti saat laman terakhir diperbarui, seberapa sering laman diubah, dan pentingnya laman relatif terhadap laman lain URL di situs Agan. So, jadi sangat penting sekali jika Agan menggunakan Sitemap.


Sitemap di sebuah website emang sudah menjadi kewajiban, namun tampilan sitemap nya juga harus keren dan Responsive. 

Ouh ya, gue belum jelasin tentang Responsive, Responsive adalah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna berdasarkan ukuran layar, platform, dan orientasi atau dengan kata lain menarik, keren, unik, tidak berat, ringan, simple dan enak untuk dilihat.

Okelah, langsung aja terus kepembahasan. Here we go!


Cara Membuat Sitemap Keren

Jadi, yang harus agan siapin code html dibawah ini:

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #222222;
-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: #2C323C;
border:1px solid #222222;
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>

<br />
<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.haxorworld.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Jika sudah copas semua code tersebut ke halaman baru Agan, caranya itu:


Buka blogger Agan, click Halaman/Page >>> Halaman Baru. 


Buat title/judulnya dengan Sitemap, lalu ubah mode nya dari Compose ke Html, paste kode tadi halaman baru tersebut.

Sebelum ngePublish, ubah link https://www.haxorworld.com/  menggunakan link agan. Jika sudah Publish.


Jadinya kaya gini.

Cara Membuat Sitemap Resposive

Cara mudah agar membuat template menjadi responsive itu dengan cara mengubah warna sitemap dengan warna template bawaan Agan.


Cara mengubah warna Sitemaps menjadi warrna template biasanya Gue menggunakan Eyeddroper, dimana tools ini dapat mengambil/melihat kode  warna hanya dengan mengarahkan Eyeddroper ke tempat yang ingin diambil warnanya.

Cara pakenya juga simple,

Pertama tama install dahulu aplikasinya, kalian bisa download Eyeddroper dibawah ini:

 Download Eyeddroper

Jika sudah di install tekan kombanasi tombol Alt + ` secara bersamaa atau click logo eyeddroper di taskbar.





Barusan ada temen gue yang kepusingan cara pencet ALT + `. Jadi cara pencetnyakaya gini nih:


Kalu udah muncul si Toolsnya, arahkan si Eyeddroper ke arah warna template atau sitemap yang pengen diganti, lihat kodenya tulis di notepad. 

Kalau udah, coba agan tentuin dulu warna yang agan inginkan menggunakan eyeddroper dan simpan dulu di notepad, kalau udah di tentuin warnanya, coba agan masuk ke Halaman >>> Sitemaps, dan cari kode warna yang tadi pengen diganti. dengan menekan CTRL + F.


Kan ada tuh yang ke Bolt, langsung ubah kodenya pake warna yang agan suka.

Oke, sekian bacotan dari saya. Jika ada kata kata yang salah, itu mah sudah biasa tapi jangan dibiasakan, jika ada yang wow  semoga bisa lebih wow lagi. Jangan lupa kalau ada pertanyaan seputat blogger jangan sungkan untuk komentar dibawah.

LOGIKANYA GINI...!!!

"Buat Apa Gue Nulis Kalau Nggak Ada yang Baca...!"

Siapa aja yang datang kesini, tolong tinggal kan jejak dengan menekan tombol "F", terima kasih.

Akhir coretan dari gue, See You Next Time...

Terkait:


 http://www.haxorworld.com/p/ask.html

Share This :
avatar

Keren nih bro artikelnya, ijin sedot kode nya ya. Trims.

Delete 2 November 2018 22.08
avatar

Oke, sippp. Sama sama Breyy, heheh

Delete 21 November 2018 09.07