CARA MENERAPKAN FULL SITEMAP KE DALAM TEMPLATE BLOGGER VARIAN TERBARU

Hampir semua blogger terutama pasti yang senior pernah mendengar sitenya Arlina Design, Dia ini adalah salah seorang blogger senior dan mungkin sangat bersinar pada masanya. Sebagai blogger pemula tentu kita harus berterimakasih kepada para Blogger ini yang sedikit banyaknya telah berkonstribusi terhadap dunia blogging.

Dan apa yang telah mereka 'wariskan' kepada kita para pendatang baru yang datang pada zaman yang telah jauh berbeda sungguh sangat berharga.

Berikut juga adalah nama nama yang mungkin bagi kita yang baru dilahirkan setelah tahun 2000-an masih belum terlalu akrab sebut saja:

• Bung Franki
• Sugeng.id
• Arlina Design
• Kang Ismet
• Kompi Ajaib
• Igniel.com

Dan masih banyak lagi. Mereka adalah para blogger senior, mendesain template dan memperjual belikannya. Jujur saya baru benar benar mulai mengenal mereka dalam satu tahun terakhir. Terutama Arlina saya masih bimbang mau panggil mbak atau 'agan' saja ya...Tapi selamat buat para master Blogger ini saya ucapkan selamat Hari Raya dan salam dengan seluruh rasa kagum saya yang tidak dapat saya katakan dengan panjang lebar.

Jujur saja mungkin diantara daftar di atas halamannya mbak igniel-lah yang paling sering saya kunjungi, karena saya tahu persis Mbak Igniel adalah seorang wanita cerdas dan hebat. Lagi pula saya suka dengan penjabaran mbak igniel yang terkesan logis dan sederhana. Mudah di cerna oleh nalar saya yang masih baru bertumbuh kembang.

Tidak terasa ya waktu telah berlalu, dan akan terus bergerak searah jarum jam searah putaran bumi, mengikuti putaran galaksi dan terpintal dalam pusaran pulsar semesta kita. Dalam waktu akhirnya saya mengenal kalian semua meskipun hanya melalui catatan pada platform blogger. Saya ingin dunia juga tahu.

Nah dalam kesempatan ini saya ingin berbagi sebuah cara membuat 'Full sitemap' buatan Arlina Design yang sangat cocok di terapkan ke dalam template blogger varian terbaru seperti:

Contempo

Emporio

Soho

Notable

Essential

Saya mempelajarinya melalui Codepen Arlina , kode kodenya sederhana saja:

See the Pen Full Sitemap by Arlina Code (@arlinacode) on CodePen.

Pada tampilan editor di atas hanya berisikan kode kode HTML dan CSS, namun tentu saja dengan pemanggilan untuk librari online milik Arlina sendiri, yakni:

<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script

Kita tentu saja dapat membuat dan menyimpan sumber kita sendiri. akan tetapi selanjutnya mendesain sebuah elemen adalah hal yang jauh berbeda. Butuh talenta seperti yang di miliki oleh para master. Dan tentu saja pula setiap orang dapat melakukannya, namun di butuhkan kerja keras. 

CARA MENERAPKAN FULL SITEMAP ARLINA KE DALAM TEMPLATE TERBARU BLOGGER

1. Masuk ke pengaturan blogger
2. Pilih halaman atau page blogger
3. buka postingan 
4. Pilih opsi HTML view alih alih compose view

Pada halaman HTML view yang kosong masukan seluruh kode berikut:

<div id="wrapper">

<div id="bp_toc">

</div>

<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script src="https://takbernam4.blogspot.com//feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

  </div>

<style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{

  background:#FFCCFF;

  font-family:'Open Sans';

  color:#444;

  line-height:normal;

}

#wrapper{

  margin:30px auto;

  max-width:600px;

}

a:link {

color:#fc4f3f;

text-decoration:none;

outline:none;

transition:all .25s;

}

a:visited:hover {

color:#fc4f3f;

text-decoration:none;

}

a:visited,a:link:hover {

color:#444;

text-decoration:none;

}

table {

max-width:100%;

width:100%;

margin:1.5em auto;

}

table td,.post-body table caption {

border:1px solid #d9d9d9;

text-align:left;

vertical-align:top;

padding:10px;

}

table th {

border:1px solid #009abf;

text-align:left;

vertical-align:top;

padding:10px;

}

table.tr-caption-container {

border:1px solid #eee;

}

th {

font-weight:700;

}

table caption {

border:none;

font-style:italic;

}

td:hover {

background:#fafafa;

}

#bp_toc {

background:#555;

color:#666;

margin:0 auto;

padding:5px;

}

span.toc-note {

display:block;

text-align:center;

color:#fff;

font-family:'Open Sans';

font-weight:700;

text-transform:uppercase;

font-size:30px;

line-height:normal;

margin:0 auto;

padding:20px;

}

.toc-header-col1 {

background-color:#fff;

width:250px;

padding:10px;

}

.toc-header-col2 {

background-color:#fff;

width:75px;

padding:10px;

}

.toc-header-col3 {

background-color:#fff;

width:125px;

padding:10px;

}

.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited {

font-size:13px;

text-decoration:none;

color:#aaa;

font-family:'Open Sans';

font-weight:700;

letter-spacing:.5px;

}

.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover {

text-decoration:none;

}

.toc-entry-col1,.toc-entry-col2,.toc-entry-col3 {

background:#fdfdfd;

font-size:89%;

padding:5px;

}

.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a {

color:#666;

font-size:13px;

}

.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover {

color:#e76e66;

}

#bp_toc table {

width:100%;

counter-reset:rowNumber;

margin:0 auto;

}

.toc-entry-col1 {

counter-increment:rowNumber;

}

#bp_toc table tr td.toc-entry-col1:first-child::before {

content:counter(rowNumber);

min-width:1em;

margin-right:.5em;

}

td.toc-entry-col2 {

background:#fafafa;

}</style>

Robah link warna merah dengan alamat atau URL halaman blog kalian sendiri.

Save halaman postingan. Lihat DEMO

Demikian cara membuat Full sitemap buatan Arlina ke dalam template terbaru blogger

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: