Cara Membuat Site Map Keren di Blogger

Cara membuat site map keren di blogger - Untuk memenuhi standar blog yang dianjurkan webmaster, maka sebuah blog harus memiliki peta situs yang jelas. Site map atau peta situs berpungsi untuk memberitahukan kepada para pengunjung mengenai isi blog secara keseluruhannya. Sehingga dengan adanya site map ini para pengunjung dapat memahami apa saja yang disampaikan dalam sebuha blog.

Cara membuat site map keren di blogger kamu ala kerjaku

Untuk kamu para pemula, memang banyak tantangan yang harus dipenuhi ketika kamu ingin memiliki blog. Dan penting untuk di ingat, ada beberapa elemen penting yang harus dicantumkan didalam blog kamu. Elemen-elemen itu terdiri dari, informasi blog (suka dicantumkan dengan "about"), Privacy, contact, site map dan disclaimer. Elemen-elemen itu sebagai bukti legalitas kepemilikan dari sebuah blog. (kayaknya siii..)

Nah kesemua elemen tadi dalam pembuatannya memiliki persamaan yaitu dalam hal memainkan kode HTML, jadi bila kamu sebagai pemula, maka yang paling penting itu adalah mengenal basic html atau dasar-dasar bahasa pemrograman html. Walau selebihnya dalam pembentukan sebuah konten sudah banyak tutorial dan rumus yang bisa kamu kopi paste.
Nah disini saya mengajak kamu untuk membuat SITE MAP keren di blog kamu ala mbak arlina salah satu master blogger  Indonesia. kamu hanya tinggal mengikuti langkah-langkah yang akan saya jelaskan berikut ini;

1. Sekarang kamu masuk dulu ke dashboard blogger kamu (blogger.com)
2. Kemudian pili menu halaman, karena kita akan membuat site map nya di halaman statis
3. Setelah itu, bila sudah ada dihalaman pengeditan, sekarang kamu pilih HTML yang ada di pojok kir atas. Tulisan HTML ini bersebelahan dengan tulisan compose
4. Sekarang kamu pasang kode berikut ini ;

<div id="bp_toc"> Loading Sitemap. Please wait....</div> <script src="https://arlina-design.googlecode.com/svn/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> <b:if cond="data:blog.pageType == &quot;http://www.kerjakusini.com/p/sitemap.html&quot;"> <style scoped="" type="text/css"> #outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} #blog1,#artikel,.blog-posts{background-position:center!important;} .banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;} .post-inner {padding:0 0 0 0;margin:20px auto;} </style> </b:if>

Kamu ganti tulisan yang ditandai dengan warna merah dengan alamat url blog kamu ya.. lalu Publikasikan

5. Sekarang kamu masuk ke halaman template dan pilih EDIT TEMPLATE kemudian tambahkan kode dibawah ini diatas kode </style>


/* CSS Sitemap */
#bp_toc { background: transparent; width: 100%; color: #999; margin-top: 10px; margin: 0 auto; padding: 5px; }
 .toc-header-col1 { padding: 15px!important; line-height: 15px; background-color: #f56954; width: 250px; transition: all 0.3s ease-in-out; }
.toc-header-col2 { padding: 15px!important; line-height: 15px; background-color: #2c323c; width: 75px; transition: all 0.3s ease-in-out; }
.toc-header-col3 { padding: 15px!important; line-height: 15px; background-color: #252a32; width: 125px; transition: all 0.3s ease-in-out; }
 .toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover { opacity: 0.9; } .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: 15px; text-transform: lowercase; text-decoration: none; color: #fff; font-family: 'Viga'; font-weight: 400; letter-spacing: 0.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 { padding: 10px; font-size: 92%; ;transition: all 0.3s ease-in-out; } .toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover { background: #fdfdfd; }
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd),
.toc-entry-col3:nth-child(odd) { padding: 10px; font-size: 92%; }
.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even),
.toc-entry-col3:nth-child(even) { padding: 10px; font-size: 92%; }
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a { text-decoration: none; color: #666; transition: all 0.3s ease-in-out; }
.toc-entry-col1 a:hover,
.toc-entry-col2 a:hover, .toc-entry-col3 a:hover { color: #f56954; } span.toc-note { padding: 10px; margin: 10px 0; display: inline-block; background: #fff; color: #666; }
 #bp_toc table { width: 100%; margin: 0 auto; border-collapse: collapse; border-spacing: 0; border-color: transparent; }
 #bp_toc tr:nth-child(even) { background: #fafafa; }
 #bp_toc tr:nth-child(odd) { background: #f5f5f5; }

Kemudian simpan template dan lihat hasilnya. Bila langkah-langkah diatas dilakukan dengan benar, maka pasti dijamin berhasil and work. Keren bukan?...


Demikian tips kali ini, semoga bermanfaat. Tetap semangat dan wassalam.

Posting Komentar untuk "Cara Membuat Site Map Keren di Blogger"