Top Menu Link Pada Label

Panduan bagaimana menyediakan top menu dilink pada Label tidak pada pos. Panduan ini khusus untuk yang menggunakan template dari pyzam.com - Blogger Template Style. Asasnya adalah sama boleh juga digunakan untuk template yang lain-lain.

Log masuk kedalam Blgger melalui Blogger in Draft.

Pastikan semua pos-pos telah diberi label. Ikut panduan Bagaimana Menyediakan Label Untuk Pos.

 

Kemudian pilih Edit dalam ruangan Blog Posts:

Tik tandakan kotak untuk Labels dan klik SAVE:

Jika senarai Label telah ditunjukkan dalam sidebar, klik satu-satu pada nama Label untuk mendapatkan alamat URL Label:

Blogger akan buka muka label yang diklik dan juga membuka semua pos-pos yang terdapat dibawah label ini.  Salin dan simpan alamat URL Label yang ditunjukkan di bahagian atas dalam ruangan Address Bar pelayar internet yang digunakan:

Ulang buka nama Label yang lain pula sehingga semua alamat URL Label diperolehi.

Contoh satu alamat URL Lablel:

http://calipso-tutorialblogger.blogspot.com/search/label/menu navigasi

Kod CSS Top Menu dan Kod Pautan Untuk Dimasukkan Dalam Kod Template

Salin kod CSS topmenu berikut untuk dimasukkan ke dalam kod template pyzam (gunakan program Notepad):

/* ----------- Top Menu ------------- */ #topmenu { font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif; position: left; top: 230px; left: 0%; width: 760px; margin: 0 54px 0 0px; padding: 5px 16px; /* duplicate the tab size */ text-align: left; display: block; } #topmenu li { margin: 0; padding: 0; text-transform: none; display: inline; } #topmenu a { color: #000; background: #FFFFFF; font-weight: normal; height: 19px; padding: 5px 16px; } #topmenu a:hover { color: #000; background: #F9F9F9; text-decoration: none; } #topmenu .current_page_item a { color: #cdd; background: #cda; text-decoration: none; }

Masukkan kod CSS di atas di antara #header img {... dengan #outer-wrapper {... dalam kod template seperti berikut (save template selepas masuk):

#header img { margin-left: auto; margin-right: auto; } /* ----------- Top Menu ------------- */ #topmenu { font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif; position: left; top: 230px; left: 0%; width: 760px; margin: 0 54px 0 0px; padding: 5px 16px; /* duplicate the tab size */ text-align: left; display: block; } #topmenu li { margin: 0; padding: 0; text-transform: none; display: inline; } #topmenu a { color: #000; background: #FFFFFF; font-weight: normal; height: 19px; padding: 5px 16px; } #topmenu a:hover { color: #000; background: #F9F9F9; text-decoration: none; } #topmenu .current_page_item a { color: #cdd; background: #cda; text-decoration: none; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Salin kod pautan TopMenu berikut untuk dimasukkan dalam template kod. Gantikan pautan warna merah dengan pautan Label sendiri dan gantikan nama label dengan nama label sebenar:

<ul id='topmenu' style='list-style-type:none'> <li><a href='http://calipso-tutorialblogger.blogspot.com/' style='text-decoration: none;'>Utama</a></li> <li><a href='http://calipso-tutorialblogger.blogspot.com/search/label/image' style='text-decoration: none;'>Label1</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label2</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label3</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label4</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label5</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label6</a></li> </ul>

Bila dah siap masukkan kod di atas di bawah <div id='header-wrapper'> seperti berikut (PREVIEW | pratonton dulu template jika semua ok baru SAVE TEMPLATE:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Calipso Test Blog (Header)' type='Header'> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "REPLACE"'> <!--Show just the image, no text--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> </div> <b:else/> <!--Show image as background to text--> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </div> </b:if> </b:includable> </b:widget> </b:section>> </div>> <ul id='topmenu' style='list-style-type:none'> <li><a href='http://calipso-tutorialblogger.blogspot.com/' style='text-decoration: none;'>Utama</a></li> <li><a href='http://calipso-tutorialblogger.blogspot.com/search/label/image' style='text-decoration: none;'>Label1</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label2</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label3</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label4</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label5</a></li> <li><a href='http://nama-blog.blogspot.com/search/label/nama-label' style='text-decoration: none;'>Label6</a></li> </ul>

Contoh blog dengan top menu link pada Labels. Jika diklik salah satu Menu Blogger akan membuka semua pos-pos bawah Label berkenaan:

RALAT

Terdapat sedikit kesilapan dalam kod pautan Top Menu di atas sebelum ini. Sesiapa yang telah menyalin kod ini sebelum tarikh 8 Jun 2010 sila buat sedikit pembetulan. Terdapat tanda ">" yang perlu dibuang selepas <li><a href='http://calipso-tutorialblogger.blogspot.com/ sebelum tag ' style='text-decoration: none;'>Utama</a></li>, seperti berikut:

Kesilapan amat dikesali.


Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot