MEMBUAT WIDGET SITEMAP TERBARU

Usep Suryana 6 Okt 2013 0 comments
Bisa dikatakan sitemap merupakan daftar isi dari sebuah blog atau website yang digunakan untuk menampilkan apa saja yang terdapat pada blog atau website. Dan tak jarang kita sering menemui sitemap di beberapa website atau blog ternama yang begitu tertata rapi dan begitu bermanfaat bagi para visitor. Begitupun juga kita juga menemui sitemap pada blog yang menggunakan platform blogger atau blogspot. Meskipun sitemap pada blogger tak sehebat sitemap blog berplatform lainnya, namun juga tak jarang beberapa teman blogger yang menggunakan widget sitemap tersebut dan tentunya untuk mempermudah para visitor dalam hal navigasi konten blog.

Dalam kesempatan kali ini saya ingin berbagi dengan Anda para blogger mania dalam membuat widget sitemap untuk blog Anda. Meskipun sudah banyak yang membahas tentang pembuatan sitemap pada blogger, namun sitemap kali ini yang akan kita bahas sedikit berbeda. Selain tetap masih mengandalkan fitur json feed, sitemap ini dilengkapi dengan css dan jquery sehingga akan terlihat berbeda dan lebih menarik tentunya. Untuk demonya bisa Anda lihat pada link berikut ini.
 
site map
site map
Jika Anda penasaran dan tertarik untuk membuat sitemap atau daftar isi blogger tersebut, bisa langsung mengikuti langkah-langkah berikut ini:

  1. Masuk ke akun blogger Anda dan pilih Template - Edit HTML - Lanjutkan.
  2. Masukan kode css dibawah ini pada template blog Anda, dengan cara copy paste kode css tersebut sebelum kode ]]></b:skin>
    .sitemapnav{width:100%;padding:0;margin:0;font:normal 12px arial} ul.sitemapnav{padding:0;margin:0;line-height:0.5em;list-style:none} ul.sitemapnav li{list-style:none;} ul.sitemapnav li a{line-height:10px;padding:8px 5px;color:#000;display:block;text-decoration:none;font-weight:bold}
    ul.sitemapnav li a:hover{background-color:#666;color:white}ul.sitemapnav ul{margin:0;padding:0;display:none}
    ul.sitemapnav ul li{margin:0 0 0 34px;padding:0;clear:both;list-style-type:decimal;}
    ul.sitemapnav ul li a{font-weight:normal;outline:0}
    ul.sitemapnav ul li a:hover{background-color:#999;color:#fff}
    ul.sitemapnav ul ul li a{color:silver;padding-left:40px}
    ul.sitemapnav ul ul li a:hover{background-color:#999;color:#fff}
    ul.sitemapnav span{float:right}
  3. Simpan template Anda. 
  4. Langkah selanjutnya adalah membuat halaman static dengan cara masuk ke menu Laman dan pilih Laman baru - Laman kosong. 
  5. Beri judul halaman Anda(ex: Sitemap, Daftar isi) dan setelah itu masukan kode script berikut ini di dalam halaman tersebut:
    <script src='http://ibd.googlecode.com/files/jquery-1.5.2.min.js' type='text/javascript'></script><script src="http://ibd.googlecode.com/files/sitemap.js" type="text/javascript"></script><script src="http://www.idblogdesign.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Ganti warna merah dengan url blog Anda kemudian simpan dan terbitkan halaman Anda.

Widget sitemap blogger tersebut sudah dilakukan uji coba menggunakan browser firefox versi terbaru, internet explorer 8, opera mini dan bekerja dengan baik, namun untuk jenis browser yang lainnya belum dilakukan uji coba. Selamat mencoba dan semoga berhasil dalam membuat widget sitemap versi terbaru untuk blogger kesayangan Anda.

Sumber :  http://www.blog.idblogdesign.com/2013/04/membuat-widget-sitemap-atau-daftar-isi.html

Artikel Terkait

    TERIMA KASIH ATAS KUNJUNGAN SAUDARA
    thumbnail Judul: MEMBUAT WIDGET SITEMAP TERBARU
    | Twitter | Facebook Page
    Published :6 Okt 2013 Jam 13.00
    Rating: 4.5 Reviewer: 7
    Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.

    Pin It

    Silahkan tentukan pilihan komentar anda!



    atau

    Tidak ada komentar:

    Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih

    Pasang Iklan

    Pengikut

    Blogger Copast
    Designed by Bamz
    Untuk SEO lebih lanjut kunjungi
    Trik SEO terbaru

    Statistik

    Page Rank
    blogger-copast.blogspot.com Webutation

    ping fast  my blog, website, or RSS feed for Free Blog Directory & Search engine blog search directory Personal Blogs - Blog Rankings Technology Blogs Blog Directory My Zimbio My Ping in TotalPing.com I ♥ Validator GeoURL Blogger Copast Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Personal - Top Blogs Philippines Blog Search: The Source for Blogs
    Link Centre Directory and Search Engine
    Active Search Results blogger-copast.blogspot.com trustrank blogger-copast.blogspot.com Real PageRank

    http://blogger-copast.blogspot.com$3,065$3,065How much is yours?

    Waudit score SEO Reports for blogger-copast.blogspot.com Top SEO Sites Blogarama - The Blog Directory IndoUrl - indonesian directory, webmaster friendly
    dirbit.com free search engine submission Link Exchange with BLOGGER COPAST how to create a website AskDirectory.com - FREE Web Directory Blog Directory Blog Search Links Exchange Blog Directory | Submit to Directories and Promote your Blogs Frety Webengine bloggercopast's Profile on Ping.sg  Ping Url ping.sg - the community meta blog for singapore bloggers blogger-copast.blogspot.com-Google pagerank and Worth Personal Blogs
    Online Marketing
    Feedage Grade B rated
    eXTReMe Tracker
    Amfibi Web Search & Directory Sistema Enlaces Reciprocos Search Engine Submission and Marketing Services ExactSeek: Relevant Web Search waplog
    blognation.com
    Submit Blog Directory Situs Monitor Backlinks Site Meter

    Enter your email address:

    Delivered by FeedBurner