Kursus ICT hari kedua 16 Jun 2011

Kursus ICT di PKG Chabang Empat pada 16 Jun 2011 - Hari kedua

kod menu blog

Tambah Menu

1. Add Css To Your Template

Go To your Blogger Dashboard, Layout >> Edit HTML >>
And find This code

</b:skin>

And before it add next code.

/*URL: http://www.AllBlogTools.com/ */

.basictab{

padding: 3px 0;

margin-left: 0;

font: bold 12px Verdana;

border-bottom: 1px solid gray;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.basictab li{

display: inline;

margin: 0;

}

.basictab li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid gray;

border-bottom: none;

background-color: #f6ffd5;

color: #2d2b2b;

}

.basictab li a:visited{

color: #2d2b2b;

}

.basictab li a:hover{

background-color: #DBFF6C;

color: black;

}

.basictab li a:active{

color: black;

}

.basictab li.selected a{ /*selected tab effect*/

position: relative;

top: 1px;

padding-top: 4px;

background-color: #DBFF6C;

color: black;

}

that’s it, and now let’s add the menu it self to our template.

2. Add The Menu To Our Template

Go To your Blogger Dashboard, Layout >> Page Elements >>
and now above blog posts area, click add gadget,

And choose Add HTML/JavaScript
Leave the title empty and at the content area add this code

<ul class="basictab">

<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>

<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>

<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>

<li><a href="#">Edit</a></li>

<li><a href="#">Edit</a></li>

<li><a href="#">Edit</a></li>

<li><a href="#">Edit</a></li>

</ul>

Now Click Save and check your blog,

3. Customize Your Menu

Now you have to change the menu links for your own links and titles, and you may want to change the menu colors as well.

3.1 Change The Menu Links

In step 2 you’ll find this words in the code

<li><a href="#">Edit</a></li>

change The symbol # to your link, and change the word Edit to your title.
you can repeat this part of code as you like,
every time you add this part of code again to your menu code, a new link will be added to your menu.

3.2 Change The Menu Colors

To change your menu colors you have to edit the css code in step 1 before you add it to your template. So Copy and past it in new text -notepad- file to edit it there.
We’ll use AllBlogTools.com html Colors Code Generator to edit this menu colors.
in step one code find this codes and change it’s color codes to your favorite, you can grab your favorite color code here.
AllBlogTools.com html Colors Code Generator
To change the main background color.
Find

 background-color: #f6ffd5; 

and change f6ffd5 to your favorite color.
To change the selected and hover background color.
Find

 background-color: #DBFF6C; 

and change DBFF6C to your favorite color.
To change the text color 
Find

 color: black;

and change black to #xxxxxx and xxxxxx should be your new color code
you are done, and you have got your own customized code, now use it as we used the code in step 1.

Bengkel Pembinaan Laman Blog Dan Web Sekolah

Benngkel pembinaan laman blog dan web sekolah-sekolah kelompok Pusat Kegiatan Guru Chabang Empat
Pada : 15 dan 16 Jun 2011.

Jamuan Makan Malam BERKAT

Jamuan Makan Malam Kelab BERKAT

Majlis Sambutan Pengetua SMS Machang

Majlis Perpisahan Pengetua

Majlis Perpisahan Pengetua

Majlis Perpisahan Cikgu Nazam

Sambutan Majlis Perpisahan Sempena Persaraan Cikgu Mohd Nazam Abd. Ghani
yang diadakan di SMK Berangan pada hari Khamis 22 Mei 2008.

Sambutan Hari Guru 2008

Sambutan Hari Guru Peringkat Sekolah Menengah Kebangsaan Berangan 2008
Pada Ahad 18 Mei 2008.

Sambutan Maulidur Rasul SMK Berangan 2008

Gambar-gambar sambutan Maulidur Rasul SMK Berangan 2008
boleh dilihat melalui pautan
http://maulidur08.smkberangan.com

Lawatan Pegawai Penilai Anugerah Pemimpin ICT

Lawatan Pegawai Penilai Anugerah Pemimpin ICT ke SMK Berangan pada 23 Mac
2008
Gambar lengkap boleh dilihat melalui pautan
http://lawatanpemantau.smkberangan.com

Blog SMK Berangan

Laman Blog SMK Berangan dihasilkan bertujuan untuk mengongsi maklumat
semasa tentang pendidikan.

Blog ini adalah pelengkap kepada laman web http://www.smkberangan.com ,
forum serta egroups SMK Berangan.

Warga SMK Berangan boleh menempatkan artikel atau tulisan yang berkaitan
dari masa ke semasa.