Cara Buat Sitemap V1 Dan V2 Di Blog

Assalamualaikum dan salam sejahtera.


Haa, nampak tak tajuk posting dan apa agaknya yg aku nak ajar kat korang hari nie? Orait, tanpa membuang masa, meh aku terangkan korang tentang Sitemap nie.. 

Sebenarnya, Sitemap atau Daftar Isi ini berfungsi untuk tunjukkan kesemua post-post korang yg lama dan yg baru sekali pun, dalam 1 halaman.. Dengan adanya Sitemap nie, korang dan pengunjung blog korang lebih mudah untuk cari post-post korang yg lain..

Dan apa pulak yg dimaksudkan dengan V1 dan V2 nie pulak? Haa, untuk V1 nie aku akan ajar korang Sitemap yg diinspirasikan oleh Abu Farhan dan yg V2 nie pulak diinspirasikan oleh DeejayHan, dalam 1 entri nie.. Kalau korang nak tahu, V1 dan V2 nie ada perbezaannya, macam V2 nie dia nampak menarik sikit sebab dia macam dalam susunan rak buku dan V1 nie pown okay jugak sebab aku guna sitemap V1.. Korang boleh tengok contoh Sitemap V1 dan V2 nie dekat gambar bawah:

V1
[+] Klik untuk dapatkan tampilan yang lebih jelas.

V2

[+] Klik untuk dapatkan tampilan yang lebih jelas.
[ Sitemap Kredit kepada Kuntoro Cyber ]

Okay, dah tengok gambar kat atas nie dan dah dapat bezakan kan? Jadi, aku rasa korang pun tak sabar nak belajar kan, jadi jom start!

1. Login akaun Blogger korang dulu.

2. Pergi ke Pages dan buat New Pages.

[+] Klik untuk dapatkan tampilan yang lebih jelas.

3. Bila korang dah siap bukak dan tulis tajuk apa semua tuh, korang pergi ke bahagian HTML, sebelah Compose.

[+] Klik untuk dapatkan tampilan yang lebih jelas.

4. Kemudian, korang paste kod V1 atau V2 dekat dalam kotak HTML tuh..

Korang boleh pilih sama ada nak letak kod V1 atau V2.

V1


<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://pengembara-awan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script></div>

Dekat perkataan berwarna Merah tuh, korang tukar kepada URL blog korang.

V2
*UPDATED CODE!



#daftar-isi-body
{
         width:530px!important;
         height:600px!important;
         padding:30px 40px;
         margin:0 auto;
}
 #daftar-isi-wrap
{
         margin: 0 auto;
}
 .box-posting
{
         background-image:url(http://2.bp.blogspot.com/--BFLnpEqqJo/T29UMckXRKI/AAAAAAAAHp4/Fv2ND6h5E10/s1600/bg-box.png);
         background-position:bottom center;
         background-repeat:no-repeat;
         overflow:hidden;
         cursor:pointer;
         float:left;
         height:140px;
         width:248px;
         margin:-50px 0 0 0;
}
 .box-posting img
{
         height:46px;
         width:46px;
         float:left;
         margin:16px 0 0 25px;
         background-color:#2E0700;
         border:1px solid #2E0700;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 50%;
}
 .box-posting .judul-posting
{
         float:left;
         height:35px;
         margin:0;
         width:220px;
}
 .box-posting
.judul-posting a {
         font-family: arial,Serif !important;
         color: #774A34!important;
         text-shadow: 0 0 1px rgba(0,0,0,0.9);
         margin: -52px 0 0 95px;
         display: block;
         font-size: 13px !important;
         line-height: 18px!important;
         font-weight: bold !important;
}
 .box-posting .judul-posting a:hover
{
         color:#333!important;
}
 .box-posting:hover
{
         border-left-color:#C6EB04;
}
 #totales
{
         text-align:center;
         color:#774A34 !important;
         text-shadow:0 1px rgba(0,0,0,0.2);
}
 #loadingscript
{
         color:#444;
         font-family:Century Gothic;
         font-size:100px;
         letter-spacing:-10px;
         text-align:center;
         text-shadow:-5px 0 1px #444;
}
 #paginacion
{
         color:#BBB;
         font-size:24px;
         font-weight:bold;
         height:35px;
         line-height:28px;
         padding:0;
         margin:0 auto;
         text-align:center;
}
 #paginacion span,#paginacion a
{
         display:inline-block;
         font-size:13px !important;
         line-height:24px;
         font-weight:bold;
         margin:0 1px;
         width:25px;
         height:25px;
}
#paginacion a, #paginacion span.actual
{
         background-image:url(http://1.bp.blogspot.com/-0u7I-EN6dZ8/T29UNSCkOZI/AAAAAAAAHqI/oA09qcWANNs/s1600/page-link.png);
         background-position:top center;
         background-repeat:no-repeat;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
 #paginacion span.actual
{
         color:#774A34 !important;
}
 #paginacion a:hover
{
         color:#FFF !important;
}
 #paginacion .nextprev-link,
 #paginacion span.nextprev-link
{
         border:none;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
         width:100px;
         background-image:url(http://3.bp.blogspot.com/-qbK0wwxnWu4/T29UM7vOfFI/AAAAAAAAHqA/-CK44ujORw8/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
                  var jumlahposting = 12;
                  var urlblog = "http://www.pengembara-awan.my";
                  var minpaginas = 5;
                  var maxpaginas = 10;
                  var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";
                                            </script>
<script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>


Untuk perkataan berwarna Merah, korang gantikan dengan URL blog korang dan perkataan berwarna Biru pulak, korang gantikan dengan gambar yang korang nak. Itu pun kalau korang nak ubah lah.. Dan nombor berwarna ungu tuh, korang boleh ubah saiz lebar sitemap korang tuh dan yg berwarna oren tuh lak ketinggian sitemap tuh..

Sekarang korang daa faham kan? Menjadi takk? Kalau menjadi, cer try komen ya..

Hari ini, mungkin ini sahaja tutorial yg dapat aku ajarkan dekat korang semua dan semoga tutorial hari nie berguna untuk korang...

Sekian sahaja dari aku, Assalamualaikum..

2 orang pengomen yang tercomel ! :

Qimie. Macam mana nak betulkan width?
Okay, dah update. Lupa lak nak cakap pasal width.. Hehe!

Post a Comment

Cancel Reply

Welcome to my paradise. I hope you all supported my blog and enjoy with my posted!

Followers

Ping Widget

Page Rank
DMCA.com
Kartikel Ping

Alexa Widget