Membuat kategori pada labels

Meletak label pada setiap kali posting adalah merupakan satu perkara yang selalu kita laksanakan.Tetapi lama kelamaan label tersebut menjadi banyak dan sudah tentu memakan ruangan pada sidebar.Walaupun ada pilihan untuk kita pasang scroll bagi menjimatkan ruangan.Tetapi label label tadi perlu kita digabungkan dengan membuat satu kategori.Tujuan berbuat demikian adalah bagi memudahkan pengunjung mencari artikel tertentu dengan mudah.

contohnya dalam artikel saya berkenaan shoubox ada bermacam tajuk seperti :

• membuat kotak shoutbox
• Pasang shoutbox tersembunyi
• cara pasang shoutbox melayang
• Cara tukar smiley pada cbox dan shoutmix

Jadi keempat tajuk ini tentunya saya letak label berlainan dan disini kita boleh gabungkan menjadi satu kategori yang sesuai iaitu shoutbox.Oleh itu bila pengunjung klik pada kategories shoutbox ,akan keluar keempat empat tajuk diatas.

Cara membuat kategories:

masuk kedesign:
posting..edit posts

kemudian akan terpapar senarai posting yang ada

dari senarai yang ada pastikan tajuk artikel yang hendak digabungkan
kemudian tandakan pada bahagian kotak edit artikel yang hendak digabungkan menjadi satu kategories

kemudian setelah ditandakan klik pada kotak label action
 




kemudian pilih new label

dan masukkan nama kategori kata tetingkap yang muncul dan klik ok

kemudian masuk semula kedesign
Page elements..pergi kewidget label yg telah kita masukkan pada bahagian ini dan klik edit

pada title ubahkan menjadi kategories
kemudian pada show pilih selected labels

kemudian klik pada edit
kekalkan tick pada bahagian label yang hendak dipaparkan

kemudian klik done

Menu horizontal dengan fungsi search

Menu yang akan saya terangkan dalam tutorial ini telah pun saya masukkan pada posting dengan tajuk  menu bar tanpa hack template.Tetapi menu ini cuma menggunakan warna sebagai latar belakang.Menu horizontal kali ini lebih menarik sedikit kerana menggunakan imej sebagai background dan juga mempunyai fungsi search .

Untuk membuatnya:

Masuk ke design--edit HTML--Page elements
Add a gadget-HTML/javascript

masukkan kod ini pada bahagian bawah header.

<center><table width="800" height="40" cellspacing="1" cellpadding="1">
<tr>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbveviIcLLHh2d7AqL5Nj5GLGiDNJdr53Cnld7LxAef-OjSAjVXJ6Sg9xg-b5qe8IL6Pxf06dyzbA2l_pACU1X5InJV9hMkVmsjOE5SUTmKBnQGIOTXyH4qM3h33wQ-HfVOuXPJimLGU/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbveviIcLLHh2d7AqL5Nj5GLGiDNJdr53Cnld7LxAef-OjSAjVXJ6Sg9xg-b5qe8IL6Pxf06dyzbA2l_pACU1X5InJV9hMkVmsjOE5SUTmKBnQGIOTXyH4qM3h33wQ-HfVOuXPJimLGU/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/p/site-map.html"><font size="2" color="white"><center><b>SITE MAP</b></center></font></a></td>

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbveviIcLLHh2d7AqL5Nj5GLGiDNJdr53Cnld7LxAef-OjSAjVXJ6Sg9xg-b5qe8IL6Pxf06dyzbA2l_pACU1X5InJV9hMkVmsjOE5SUTmKBnQGIOTXyH4qM3h33wQ-HfVOuXPJimLGU/s1600/menu.JPG"><div align="center"><span class="style2"><a href="http://teknikbuatblog.blogspot.com/p/link-exchange.html
"target="_blank"><font size="2" color="white"><center><b>LINK EXCHANGE</b></center></font></a></span></div></td>

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbveviIcLLHh2d7AqL5Nj5GLGiDNJdr53Cnld7LxAef-OjSAjVXJ6Sg9xg-b5qe8IL6Pxf06dyzbA2l_pACU1X5InJV9hMkVmsjOE5SUTmKBnQGIOTXyH4qM3h33wQ-HfVOuXPJimLGU/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="GO" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>
</table></center>

Ubahsuai pada kod diatas:

Kelebaran dan ketinggian menu:
<center><table width="800" height="40" cellspacing="1" cellpadding="1">
width: ubah pada saiz mengikut kelebaran template
height:ketinggian menu yang dikehendakki

Masukkan link dan imej pada menu:

<td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbveviIcLLHh2d7AqL5Nj5GLGiDNJdr53Cnld7LxAef-OjSAjVXJ6Sg9xg-b5qe8IL6Pxf06dyzbA2l_pACU1X5InJV9hMkVmsjOE5SUTmKBnQGIOTXyH4qM3h33wQ-HfVOuXPJimLGU/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

teks berwarna merah masukkan link imej bagi menu
warna hijau pula ialah link untuk halaman yang nak dimasukkan.Ubahkan pada link halaman korang
Manakala teks berwarna oren pula masukkan nama menu pada link

diatas saya tunjukkan tiga contoh kod yang dimasukkan untuk membuat menu pada halaman sepert contoh pada gambar diatas..Jika ada lebih cuma tambahkan saja kod lagi dan ubah mengikut kesesuaian seperti yang saya terangkan diatas.

Bahagian search:

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbveviIcLLHh2d7AqL5Nj5GLGiDNJdr53Cnld7LxAef-OjSAjVXJ6Sg9xg-b5qe8IL6Pxf06dyzbA2l_pACU1X5InJV9hMkVmsjOE5SUTmKBnQGIOTXyH4qM3h33wQ-HfVOuXPJimLGU/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="SEARCH" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>

teks merah masukkan link imej sama seperti bahagian menu yang lain.
teks hijau tukar kepada alamat blog korang
dan bahagian teks oren ubah lah warna yang sesuai dengan imej/warna yang dimasukkan pada menu.
teks  biru boleh diubah pada perkataan yang lain.
 ubahkan saiz pada witdh agar dapat ruangan yang bersesuaian jika ruangannya terlalu luas.
dah selesai masukkan jangan lupa save terlebih dahulu..kemudian lihat hasilnya.

menghapus paparan attribution pada template

Attribution adalah widget yang berada dibahagian bawah template kita.Ia memaparkan nama template dan perekanya.Ia tidak membawa kesan apa apa cuma mungkin ada yang ingin paparan ini ditiadakan.Jika ingin menghapuskan paparan ini,Caranya adalah seperti berikut:

Masuk ke design-edit HTML
tandakan expand widget templates
dan cari kod ini:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>

jika sudah jumpa hapuskan kod tersebut

pada sesetengah template tiada kod tadi,tapi mempunyai kod seperti ini:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Delete semua kod diatas
kemudian klik save tempale
paparan berikut akan muncul

Pilih delete widgets
Kemudian lihat hasilnya.

CARA LETAK BORDER,BACKGROUND & SCROLL PADA WIDGET

cara letak border,background dan scroll pada widget

Dalam artikel cara letak border pada widgetsebelum ini terdapat masaalah dimana border ini juga mengelilingi  pada tajuk widget.Ia  hanya sesuai digunakan pada widget widget tertentu sahaja(yang tidak memerlukan tajuk widget).Bila terjadi begini nampak janggal terutamanya pada yang telah menghias tajuk widget dengan begitu cantik,tapi border pula berada disampingnya. Selain dariborder,background dan scroll juga dimasukkan sekali pada kod ini.Jadi untuk artikel kali ini saya akan tunjukkan cara bagi mengatasinya:

Sebagai contoh untuk tutorial ini saya pilih widget Archives:

Masuk ke design-pilih edit html--klik pada expand template widget
kemudian gunakan fungsi carian Ctrl+F dan taipkan perkataan archive

tekan butang next sehingga jumpa kod seperti ini:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

letakkan setelah kod: <div class='widget-content'>
dan sesetengah widget seperti ini

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

kemudian letakkan kod ini dibawahnya:

<div style='width: 190px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnrbQ6iwDTzrZo6H8cUe8vqL1aZMlMWrgYJal0z8P7hVqqc_FY_XRfYtStuII4vmHbw76yo-hbr7K-_twWGq-Jm_eumYo5Cl5mbnRtQkgHGRYEAktsSVuNY8BI-WdF8HY-gMkdAYMioo/s1600/black.png&quot;) repeat scroll 0% 0% transparent; overflow: auto; height: 100px; border: 1px solid rgb(206, 206, 246); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px; margin: 3px 0pt 0pt;'> 

kemudian scroll perlahan lahan lagi kebawah hingga jumpa kod

<b:include name='quickedit'/>
 

dan letakkan kod dibawah ini  selepasnya:

</div>
 

kalau nak letak background gantikan url imej pada teks berwarnamerah.Ubahkan lebar dan tinggi yang bersesuaian pada teks berwarnahijau.
kemudian preview dan save template .

Saya juga telah cuba untuk widget bloglist ,categories dan berhasil.Untuk widget yang lain rasanya tiada masaalah.Untuk widget lain cuma kenal pasti tajuk widget dan cari kod pada template seperti contoh yang diatas

Contoh kod yang dibuat untuk widget bloglist:

klik untuk besarkan gambar

Selamat mencuba