1/06/2021

Cara Membuat Sitemap InsyaAllah Work 99,99% di Blogger

RahmanCyber | Blogger - Peta situs saat ini merupakan hal yang penting, kenapa? karena peta situs bisa memberi tahu pengunjung tentang "ini loh konten kita" , jadi pengunjung bisa menentukan apakah dia akan stay dengan website kita, atau akan berlangganan, atau melakukan bookmarking alamat website kita di browser kesayangan mereka.


Kita tak pernah bisa tahu.. karena itu diluar kuasa kita.. Stay or Leave itu adalah pilihan...


jadi ya sebagai penulis dan pengelola website, suatu bentuk upaya adalah mengelola website sebaik mungkin, senyaman mungkin tidak melulu harus nyaman dalam kaca mata mesin pencari..


Hey


Target kita yang sebenarnya itu bukanlah mesin... SEO itu hanyalah sarana untuk dapat terlihat.. tapi itu bukan yang utama..


Dulu di era lampau, saya sangat suka sekali website dengan tema magazine.. beberapa bahasan terpampang jelas di homepage..


Dan akhirnya di tahun 2016, saya memilikinyua.. rasanya seperti.. wah ternyata bisa..

 

 

 

Era 2019 keatas adalah era merayu Mesin Pencari..


 

 

Tiap Blog dan website berlomba lomba untuk dapat hati sang mesin pencari.. dengan mendapatkan skor tertinggi di     Google Pagespeed. Karena konon dengan website yang super cepat dan nilai 100 dapat menguasai traffic..


Tentu saja..


Hal itu terjadi..


Kebanyakan website memakai template yang sama.. hehe... mungkin kalian udah bisa menebaknya..


Dan banyak blog blog baru yang langsung bertengger di Page One..


Loh kok bisa? Punyakku enggak...


Ya bisa lah, logikanya kalo seseorang sudah punya reputasi yang bagus, mau buat blog baru sekalipun.. akan cepat langsung melejit..


Hal ini sama halnya dengan Youtuber.. ini sama..


Lagi lagi emang harus merayu mesin pencari..


ah..


Ini jadi enggak relevan.. kita kan bahas Sitemap / Peta Situs...



Eits



Relevan dong, kenapa?



Untuk website website dengan standarisasi pribadi seperti RahmanCyber NET Ini yang tetap masih menggunakan slider, magazine dan pernak pernik lainnya... walaupun untuk beberapa web bagian yang saya miliki sudah memakai template yang non slider dan minimalis, tapi di website utama ini.. saya masih sangat suka dengan tampilan magazine..dengan Slider yang begitu Indah


Untuk itu..


Kita bisa memakai strategi,

 

 


Halaman / Page Authority..


 

Itu adalah senjata, mungkin bagi teman teman     Blogger yang memilih jalan seperti saya, 

 

bisa memanfaatkan hal itu...

 

Jadi pernak pernik kita fokuskan di Halaman utama saja.. lalu kita benar benar optimalkan di Halaman halaman lainnya terutama di Halaman Item.. Non Homepage..

 

Udah tau yang saya maksud?

 

Saya membahas detail mengenai Tag Condisional... fungsi tag kondisional tersebut untuk mengkondisikan suatu widget / javascript berjalan hanya di halaman tag tertentu..

 

Misal, homepage saja, atau Item saja atau di halaman index maupun statis..


Bang sekarang kita tidak hanya Optimasi di Desktop saja, melainkan Mobile, yang nyatanya perlu sekali optimasi yang sangat ekstra..


Saya sudah membuat Journal / Panduan atau semacam     Catatan pengembangan dari catatan saya pribadi dalam mengelola website RahmanCyber NET


Panduan Cara Mempercepat Tampilan Mobile Blogger


Silahkan dibaca..artikel panduan itu, diupdate secara berkala ketika sempat.. kalian juga bisa bookmark atau ikuti blog ini agar mendapatkan update lebih awal ketika saya update..


Tapi kelemahannya, karena topik yang dibahas di RahmanCyber NET ini bukanlah topik Niche, melainkan Geneal.. kalian bakalan mendapatkan bacaan yang random sesuai dengan mood menulis saya..


Jika kalian suka yang niche niche, silahkan telusuri web bagian RahmanCyber NET


Oke..

 

 

 

Lalu apa relevansinya dengan Sitemap ini...



Sitemap atau Peta Situs itu layaknya petunjuk.. dan ini sangat berguna sekali untuk Blog Blog General seperti RahmanCyber NET ini.. untuk memberikan panduan kemana pengunjung akan berlabuk.. ke postingan apa saja kah yang akan dituju...

 

Mungkin pengunjung juga bisa ikut melakukan koreksi terhadap artikel artikel yang masih kurang atau masih belum rapi.. kalian juga bisa ikut berkontribusi..

 

Karena memang melakukan pembaharuan untuk postingan postingan masa lampau itu butuh waktu yang disisihkan dari keseharian utama bekerja dan kehidupan normal...

 

Jika merasa topik itu bermanfaat, kalian bisa notif saya melalui komen.. sehingga saya mungkin bisa lanjutkan riset tentang topik tersebut.. :D

 

 

 

 

Blogger beda dengan Wordpress 

 

 

 

Ya blogger itu beda dengan wordpress yang self hosting.. jadi jangan pernah disamakan. Hampir semua pekerjaan di Blogger itu dilakukan secara manual, berbeda dengan wordpress yang menghapus broken link saja bisa memakai Plugin.. bisa melakukan bulk sana sini, dan bisa mendapatkan banyak Tag..

 

Untuk bisa menang SEO, blogger mengandalkan Keyword keyword yang ada di Tulisannya secara manual..

 

Banyak hal juga yang menjadi pembeda, di blogger bahkan untuk kode script di template, terbuka, sedangkan jika kita memakai wordpress.. bisa ditutup atau disembunyikan, sedangkan untuk plugin plugin lainnya ya tinggal instal saja... walaupun sebenarnya banyak di blogger juga tinggal pasang saja.. tapi kalo di wordpress GUI.

 

Blogger ini..

 

Platform yang dapat dinikmati banyak orang hanya dengan modal koneksi internet.. bayangkan jika itu adek adek kita yang kurang mampu, ia bahkan bisa menuangkan pemikirannya di Internet hanya dengan membuka akun Blogger

 

Akun gratis, dan ia bisa memanfaatkan hotspot gratis yang ada atau kuota gratis untuk memulai karir hidupnya..

 

Asalkan ia memegang peranan terhadap kontennya sendiri... saya sangat menghargai hal itu...

 

 

Bagaimana memasang Sitemap? 



Disini saya akan bagikan sitemap yang ada di RahmanCyber NET ini...

Kalian bisa ikut memakainya.. silahkan.. dan ini enggak gampang error walaupun kalian mengganti ganti atau mengupdate halaman sitemap atau peta situs, karena kode javascript dari sitemap sudah di Hosting diluar melalui Github, dan di hubungkan melalui CDN


Apa sih kak itu?


Github itui platform untuk kita bisa naruh kode atau bahkan project web untuk private atau diri sendiri maupun untuk orang banyak.. Kalian bisa pergi ke Github.com

Biasanya programmer web sangat lekat dengan GIT ini..karena memang berurusan dengan kode..


Lalu untuk dapat dipanggil di Blogger, kita perlu convert link RAW nya ke CDN sehiungga bisa di panggil di Blogger


Loh kak, apakah tidak memberatkan     Blog? entar kalo server CDN Down.. gimana? 


Makannya kita menggunakannya bukan di area vital blog atau yang di pasti di load ketika website dikunjungi... di edit template misalnya.. melainkan kita hanya memakai di area tertentu saja..


Walaupun beberapa lainnya seperti JQuery library dan Font awesome kita tetap memakai link dilua, karena saya coba untuk memasukkan semuanya di edit html malah jadi berat.. karena kode CSS Font awesome, dan javascript Jquery itu benar benar panjang bangett..

 

Jadi intinya..

 

Kita hanya meletakkanya di halaman sitemap, artinya kalau halaman peta situs dikunjungi.. barulah kode Javascript atau .Js itu dipanggil..

 

 

 

Penasaran dengan kodenya?

 

 

 

Pertama Tama Silahkan buat dulu halaman baru di Blogger...lalu habis itu dalam mode Tampilan HTML Seperti ini, 

 

 

Tampilan HTML Blogger Page

 

 

 

Style / CSS

 

silahkan letakkan kode CSS yang udah dibungkus dalam Style berikut ini.. ya ini adalah kode CSS, kalo mau bisa di load di Halaman, harus dibungkus dalam tag Style semacam ini

 


  
  <style type="text/css">
#toc{width:99%;margin:20px 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:10px 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;margin-top: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
  
  

 

 Ingat ya, diatas itu adalah kode Style atau CSS yang dibungkus dan diberi deklarasi bahwa itu text/css, kalo udah seperti itu sebenarnya aman mau diletakkan dimanapun, entah itu setelah tulisan maupun sebelum tulisan, yang penting style harus berakhir /style , itu aja... kalo enggak ya.. bakalan error

 

 

Nah, habis itu.. silahkan Copy bagian Javascript yang sudah di Hosting di Git dan di hubungkan melalui CDN ( Cara Convert GIT ke CDN ) dan kode feed javascript pemanggilnya dibawah ini..

 

 

Waiitt!!

 

 

DIV

 

Sebelumnya, silahkan beri dulu pembungkus div sekaligus pemanggil CSS Style diatas

 
  
  <div id="toc">
  
  

itu ada toc , yang merupakan kode pemanggil style css, coba deh tengok dibagian style, ada #toc ... ya itulah.. jadi kode name "toc" yang ada di div, fungsinya untuk memanggil atribut #toc yang ada di style / css 

 

 

Nah ini adalah kode javascrip sitemap / peta situsnya..

 

 

Kalo udah barulah kita copy kode Script yang kita taruh di Github, lalu kita hubungkan melalui CDN dibawah ini..

 

 

 


<script src="https://cdn.jsdelivr.net/gh/rahmancyber/rahmancyber@master/sitemaprahmancybernet.js" type="text/javascript"></script>

 

 

 

jadi sengaja saya pisa pisah semacam ini, biar kita sambil belajar ya di kursus blog gratis ini.. ya gratis! kalian bisa menikmati konten kursus di kategori blog yang sudah saya susun sedemikian rupa, saya juga sudah merangkumnya di halaman khusus untuk memudahkan teman teman, khususnya pemula, mungkin kalo bagi kalian yang seplantaran sama saya, ya untuk mengingat ingat aja ya, karena saya buat ini juga sebagai catatan pribadi saya kalo sewaktu waktu butuh.. hehe

 

 

Summon Feed!

 

 

Setelah kalian meletakkan kode javascript tersebut tepat dibawah tag div diatas, setelah itu kalian perlu memanggil / melakukan summon! hehe, kalian perlu melakukan pemanggilan menggunakan feed default... lah? iya feed default, jadi peta situs ini memanfaatkan fasilitas bawaan dari blogger yaitu feed..  dimana dalam kode javascript diatas, hanya memanggil link titlenya saja, tidak dengan desktipsi, tanggal dan apalagi gambar..


Jadi hanya judulnya saja / kumpulan judulnya saja..





<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>




itu adalah kode feed pemanggilnya, itu kodenya kalian tidak perlu menambah nama situs, karena kode feed semacam itu dia akan memanggil feed website sesuai dengan peletakkannya.. dalam hal ini saya meletakkan itu di blog rahmancyber, berarti secara defaultnya dia akan memanggil feer dari rahmancyber.net

Jika kalian pengen memanggil feed dari blog lain.. tinggal ubah kodenya jadi seperti ini



<script src="https://genbisoft.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Sudah paham ke? perbedaannye? oh iya diatas itu ada callback=loadtoc , itu apa sih bang? itu adalah variabel yang dibuat di kode javascript yang saya hosting di github, jadi variabel itu bisa diubah apapun.. yang jelas harus samad dengan variabel yang ada di javascript pemanggil sitemap yang telah dihosting tadi.. kalo beda ya.. errorrr alias joko sembung mangan jagung, gak nyambung bung... loadtoc ini beda dengan yang di style, jadi gak ada hubungannya.

 

Nah, kalo udah... yang perlu kalian lakukan adalah...

 

 

memberikan tag penutup div!

 

Setiap tag itu harus ditutup, kalo gak ditutup bakalan kemana mana dan tidak jelas utuk siapa..

 

Jadi kalo kamu mencintai seseorang, orang itu harus menutup hatinya untuk orang lain.. jika enggak maka, berarti itu membingungkan untukmu, apakah ia juga mencintaimu atau enggak...

 

haha

 

ini dia kode nya

 

 


</div>

 

Nah, itulah gan cara untuk membuat Sitemap atau Peta Situs yang isnyaAllah work 99,99% , dan bisa di implementasikan hampir semua blog dengan template yang bervariasi alias sitemap bisa dijalankan di berbagai template blog entah itu responsive maupun enggak..

 

Kalo sekarang sih kebanyakan template blog itu udah pada responsive ya, agak jarang saya menemukan blog dengan template yang enggak responsive..

 

 

Bang ini ko di blog saya enggak work? katanya work..

 

 

Pastikan kamu pakai kode

 

 



<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

 

 

Kode yang ini.. karena kalo kode pemanggil feed yang kedua, kamu harus pastikan sama, kalo blog kalian udah pakai https ya pakai https jangan http, entar di block! dan enggak ditampilkan, karena ada elemen jaringan yang tidak aman, jika blog kalian enggak pakai https, ya jangan pakai..

 

Jelas... Gak nyambung..

 

 

 

 

 

Penutup

 

Ini dia Hasilnya...

 

sitemap

 

 

Sekian panduan membuat Sitemap / peta situs responsive terbaru di RahmanCyber NET..

SEMOGA DAPAT MEWARNAI HARI HARIMU 



hehe





F.NA - RED



Posting Komentar

Follow by Email

Whatsapp Button works on Mobile Device only