Jun 4, 2010

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

10 comments:

Nipuhawang Blogspot said... [Balas komen ini]

thnks for this blog...betul x 100 sngat mmbantu..slama aku buat blog aku, ni lerr dewa blog aku..makasey bro..

Rajalie Dan Siti said... [Balas komen ini]

mcm mana mau buat post yg lama ngan baru tersenarai mcm yg awk buat dbwh....'anda mungkin juga meminati' tu?

easybiz said... [Balas komen ini]

mcm mne nk masukkn byk link dlm 1 menu tab????

Calipso said... [Balas komen ini]

@easybiz

Kalau nak banyak link bawah satu menu kena buat sub-menu bawah dia. Tunggu nanti kita update cara buat sub-menu dalam panduan ni...

Anonymous said... [Balas komen ini]

sorry. saya still ade perkara yg tak paham.please answer me..saya dah try byk kali.hurm..sgt2 mahu bantuan.code yang diberi nie nak paste kat mane?

Calipso said... [Balas komen ini]

kalau awak pakai template yang baru dari blogger, template ethereal misalnya jangan ikut panduan ni, ikut panduan:

href="http://calipso-tutorialblogger.blogspot.com/2011/02/tab-menu-template-ethereal-blogger.html">http://calipso-tutorialblogger.blogspot.com/2011/02/tab-menu-template-ethereal-blogger.html.

tempat nak letak kod dah dijelaskan di atas, baca dan ikut slowly. harap berjaya.

Calipso said... [Balas komen ini]

http://calipso-tutorialblogger.blogspot.com/2011/02/tab-menu-template-ethereal-blogger.html.

Anonymous said... [Balas komen ini]

terima kasih sangat2 calipso..saya baru faham setelah tengok yang pertama punya tu.

Anonymous said... [Balas komen ini]

free ebook innes http://audiobookscollection.co.uk/de/Microsoft-SharePoint-2010-Building-Solutions-for-SharePoint-2010/p197160/ ebook on micromedia flash [url=http://audiobookscollection.co.uk/es/Beloved/p21467/]la divina comedia free ebook[/url] go ask alice low cost ebook

Anonymous said... [Balas komen ini]

[url=http://certifiedpharmacy.co.uk/products/septilin.htm][img]http://onlinemedistore.com/10.jpg[/img][/url]
out of state pharmacy http://certifiedpharmacy.co.uk/refer-a-friend.htm horizon pharmacy [url=http://certifiedpharmacy.co.uk/products/femara.htm]viagra half price pharmacy[/url]
australian college of pharmacy practice http://certifiedpharmacy.co.uk/catalogue/z.htm duloxetine hcl 20mg canada pharmacy [url=http://certifiedpharmacy.co.uk/products/trazodone.htm]trazodone[/url]
cvs pharmacy boston http://certifiedpharmacy.co.uk/products/triphala.htm prilosec pharmacy online [url=http://certifiedpharmacy.co.uk/products/phenergan.htm]famu college of pharmacy[/url]
billing tips for pharmacy http://certifiedpharmacy.co.uk/products/doxazosin.htm pharmacys in juarez chihuahua mexico [url=http://certifiedpharmacy.co.uk/products/casodex.htm]casodex[/url]

Post a Comment