Menambah Menu di Bloger

Horizontal Menu and Navigation Bar

Many web designs use horizontal menu bar and navigation lists which allow users to easily access the pertinent information in their website. While Blogger makes it simple for you to create a link list through their “Add a Page Element” function, the list is displayed vertically. We shall discuss how you can change that into a horizontal link list, and more specifically, use that as a navigation bar in your Header. We have also included some examples of how you can make the links dynamic by changing the colors, hover and background effects and customizing them to suit your Blog layout.

Before we proceed, it might be helpful for you to understand something about Numbered List and Bulleted List and the various attributes that can apply to the code.

Horizontal Link Lists

1. Apply to all link lists and label lists

If you want all the link lists and label lists in your sidebar to be displayed horizontally, go to Template -> Edit HTML and scroll to where you see this and insert the code (shown in red):-

.sidebar ul { display:inline; } .sidebar li{ display:inline; }

In some templates, you may insert the code here:-

.sidebar ul li { display:inline; }

Preview the template. This is what you would see.

2. Apply to one specific list

Instead of having a style that applies to all the lists, you may want to have only one of the link lists appear horizontally. First, you need to create that list by going to Template -> Page Elements -> Add a Page Element. Choose “Link List”, add your items and save.

Now is the tricky part. You would have to locate that particular segment of the code where this list appears and find out the widget ID for that list.

For discussion purposes, let us assume that we want the link list titled “My Blogs” in our left sidebar to be displayed horizontally. We go to Template -> Edit HTML, and check the box that says “Expand Widget Templates.”

Next, we searched (Ctrl-F) for “My Blogs” and found this section:-

<b:widget id=”‘LinkList2‘ locked=’false’ title=’My Blogs’ type=’LinkList’>

From here, we know that this link list has been assigned an ID LinkList2. To define a style, we went to the /* Sidebar Content */ portion of our template and included this code (Note: the code can be inserted into any part of the section but for ease of reference we have inserted it here):-

/* Sidebar Content */ #LinkList2 li{ display:inline; }

This is what we got:-

Only this list is displayed horizontally. The other lists are not affected. If you want this style for the labels, do the same. Locate the widget ID which is likely to be id=’Label1′ or id=’Label2′ and then insert the code:-

/* Sidebar Content */ #Label1 li{ display:inline; }

Text Link Menu Navigation Bars

With this basic understanding of how the “display:inline” code works, let us now combine this with hover and link effects to customize our very own horizontal navigation bar. Again, if you are truly keen to do something unique for your Blog, peruse the discussion in Links Hover and Rollover Effects to understand the different styles that can be used to make the links more dynamic.

1. Simple Navigation Bar

We want a row of text links pointing users to certain important parts of the Blog. The links blend into the Header and will look like this:-

In Template ->Edit HTML, insert this style definition under /* Header */:-

/* Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; }

Other than the display:inline style, the other variables can be changed. You can have a larger or smaller font. The margin and padding set the space in between the words and can be changed. If you want a border around the word, set the border value to at least 1px.

Scroll further down the template and check if you see this:-

<b:section class=”‘header'” id=”‘header'” style=”COLOR: rgb(255,0,0)” maxwidgets=”‘3‘ showaddelement=’yes‘>

If the number of maxwidgets is set to “1”, change it to “3”. If the showaddelement is “no”, change it to “yes”.

Save the template. We shall now create the list. Go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The link list code you can add is as follows:-

<a href=”http://www.blogger.com/Home <a href=”http://www.blogger.com/Music <a href=”http://www.blogger.com/Books <a href=”http://www.blogger.com/Hot Links <a href=”http://www.blogger.com/About Me <a href=”mailto:Contact

Insert the relevant words and URL links into the above example. If you want to link to a label, click the label in your sidebar to obtain the URL for insertion into the code (shown in blue). The URL should look like this:-

search/label/Three%20Columns”>Three Column Templates

This link widget can be moved about. Try placing it below the Header and then above the Blog posts to see the difference in the layout. Preview the template and save it if you like the new horizontal navigation bar position.

2. Adding Link and Hover Effects

We have now a simple horizontal navigation list. Let us make it visually attractive and distinguish these links from the other links in your Blog. This is done by introducing the hover and rollover effects. For example, in addition to the above code we added into the template, we can have these as well:-

/* Header */ #newnavbar ul li{ font-size:100%; list-style-type: none; display:inline; padding:0px; margin:10px; border:0px solid; } #newnavbar li a{ color:#dfffed; } #newnavbar li a:visited { color: #57E964; } #newnavbar li a:hover { color: #F88017; background: #ffff66; }

In this example, the links are light green in color, visited links turn into bright green and when you hover your mouse over the link, the text is orange with a yellow background. Try changing to different set of color combination by inserting the appropriate color codes.

The resulting navigation bar will be this:-

3. Menu Bar below Header

As mentioned, the horizontal Navbar can be in the Header or aligned just above the Blog Posts. There is yet another position where you can place it, i.e., below the Header and above the Blog posts and sidebars. In the new Blogger templates, you should see this:-

<b:section class=”‘crosscol'” id=”‘crosscol'” style=”COLOR: rgb(255,0,0)” showaddelement=”‘yes‘/>

Change the showaddelement from “no” to “yes”. In Template -> Page Elements, you should be able to see an additional slot between the Header and the Blog posts where you can insert Page Elements.

Image Link Menu Navigation Bars

1. Simple Navigation Bar

If text links are still too unexciting for you, try having image links instead. Do up some small little images to represent the different parts of your Blog that visitors can go to. You can search the net for free downloadable images, create new ones, or edit and resize current ones with image editors like Picasa. Once you have these images, host them on a free image server and take note of the image URLs.

The modification to the template is similar to that of text links. In Template ->Edit HTML, insert this style definition:-

/* Header */ #newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:30px; border:0px solid; }

The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.

To add the horizontal row of navigation image links, go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The image link list code you can add is as follows:-

<a href=”http://www.blogger.com/<img src=”http://www.blogger.com/ <a href=”http://www.blogger.com/<img src=”http://www.blogger.com/ <a href=”http://www.blogger.com/<img src=”http://www.blogger.com/ <a href=”http://www.blogger.com/<img src=”http://www.blogger.com/ <a href=”http://www.blogger.com/<img src=”http://www.blogger.com/ <a href=”mailto:<img src=”http://www.blogger.com/

The portions of the code in blue are the addresses where you want the users to be directed to. The parts in red are where your images are hosted on an image server.

This is how the neat horizontal picture navigation bar can look:-

2. Adding Link and Hover Effects

We can throw in some effects into the picture links. Just to give you an example, we added this hover links code in addition to the above:-

/* Header */ #newnavbar ul li{ list-style-type: none; display:inline; margin:0px; padding:30px; border:0px solid; } #newnavbar li a img{ height:30px; width:30px; } #newnavbar li a:hover img{ height:40px; width:40px; background: #ffff66; } #newnavbar li a:visited img{ height:40px; width:40px; background: #6D7B8D; }

What we had done was to fix the navigation bar image link size at 30px by 30px. There is no border around the image. When the mouse cursor hovers over the image link, the image is enlarged to 40px by 40px with a yellow background. Any visited links will have a grey background behind the image.

While this looks interesting to have, do note that any change in image size also affects the surrounding text alignment. You can reverse it. Change the hover and image sizes to smaller values so that the images ‘shrink’ when the mouse hovers over them.

Update:

Navigation Bar within Header Image

A number of us have uploaded background images into the Blogger Header. After adding a Text Link or Image Link menu bar, you may notice that it is positioned either on top or below the Header image. You may have designed the image with a space reserved for the Navbar, either at the top, bottom or to the side. To adjust the position of the Navigation Bar and have it within the Header Image, refer to our article Add Navigation Bar in Header Image.

There are numerous dynamic styles that you can try. If you have followed our guides, you would at the least have an idea how you can tailor-make yours. This is an introductory article. We may follow up with another one on multi-level tabs.

In designing your layout, avoid having too many gimmicks. Stick to one or two nice hover effects and if you’d like, change the color scheme every few months so as not to bore your regular readers. Go ahead, try it and have fun creating your own Navigation bar

Pendidikan tidakkah penting…?

Pendidikan (Education) Network is an attempt to bring together information related to current education developments and to serve as a general resource and communication link (forum) for school administrators, educators, and other interested parties. The primary objective of this network is to act as a interactive medium for collaboration between the main education sectors.

HE INDONESIAN EDUCATION SYSTEM

In Indonesia Basic Education consists of nine years of compulsory education. However, in many provinces some students still do not attain an education beyond Primary School. While the number of students attending Primary Schools is high the standards of the schools themselves vary greatly. Building maintenance is a major issue. Communities generally don’t appear to exhibit a “sense of ownership” and schools sometimes have gaping holes in walls and flooring. The two main determining factors that greatly affect a student’s prospects for an education beyond Primary School are socio-economics and availability of places. After six years of Primary Education, at the age of about 12, students should enter Junior Secondary School (SLTP). Many Junior Secondary Schools are now developing very helpful intra and extra-curricular activities including some vocational training. You can visit the SD/SLTP homepage at http://SLTP.Net.	After three years at SLTP the Indonesian education system requires students to complete a further three years at a Senior Secondary School (SLTA) before they can participate in formal Tertiary Education at University level. There are many types of Senior Secondary Schools (SMA, SMUN, SMK, MAN, etc.) including; Public, Vocational, and Religious. It is probably important to note that in Indonesia the public school sector maintains dual vocational (SMK) and professional streaming (SMU). However, while the number of places in tertiary institutions remains inadequate and education is relatively expensive only a small proportion of SMU students actually participate. This poses some major questions as to the relevence of a purely academic SMU curriculum and the effeciency of a dual system. You can visit the the Senior Secondary Education Homepage at http://SLTA.Net.
Higer Education (Perguruan Tinggi) includes all forms of education after students graduate from Senior Secondary School (private and public). Higher Education is responsible for guaranteeing that students will achieve success in their future vocational and social activities. Effective communication between all parties; Higher Education, Senior and Junior Secondary Education is currently more important than ever so as to ensure that teacher training needs (which are rapidly changing) are being addressed. You can visit the Higher Education Homepage at http://PTHP.Net.	Generally it is accepted that there are two forms of education; Vocational Education and General or Professional Education. However, it is the opinion of the writer of this homepage that only one form exists because all education is geared towards employment (regardless of whether you graduate from technical school or medical school). IndoJobs Homepage was created in order to provide another link in the education chain and help achieve more Global Outcomes for our students and educators. Visit http://Indo-Jobs.Com
Because of the large distances between the provinces in Indonesia opening up communication between the various educational sectors will be difficult. The Internet offers an option for addressing this issue. What is the Internet? What do we need to connect to the Internet? How can our school finance connecting to the Internet? What about computer and Language Laboratories? How can we get Free E-Mail and Free Homepages? These and many other questions are answered at Language-Laboratory.Com..	During this Era of Educational Reform and Development how can Principals, Teachers, Students, and their Communities work together to assure the future development of “quality” education in schools (quality itself needs to be defined and may well bring about a new paradigm)? “The keys to this development are open communication and transparency.” The objective of this homepage is to provide curent information and links to articles that will assist schools and communities achive quality and meaningful outcomes for their students http://SchoolDevelopment.Net .