Doce Ut Discas

Highlight a linked list item in blogger

What i will show you here is the result found in this website: http://www.syndesmosnikiforos.gr/p/blog-page_9205.html

The site is in Greek but you can easily see the result if you click any one of the bullets in the main area of the page.

As you see when a link is clicked the same link is highlighted on the right menu. Also the right menu has a mouse over event that works fine. The best thing is that the component on the right is a standard link list that is added from bloggers Layout menu.

The first thing that you want to do is add a linked list in your blogger site.

This is done under the menu Layout, Add a gadget, and then select the Link List.

After the list is added go to Template menu and back up your template.

In the new blogger interface this is done by the Manage button located on the top right section of the page.

Next click the Edit HTML button and on the top check Expand Widget Templates.
Somewhere in the code displayed you will find some lines like these:

1: <b:widget id='LinkList2' locked='false' title='test' type='LinkList'>
2: <b:includable id='main'>
3: <b:if cond='data:title'><h2><data:title/></h2></b:if>
4: <div class='widget-content'>
5:   <ul>
6:     <b:loop values='data:links' var='link'>
7:       <li><a expr:href='data:link.target'><data:link.name/></a></li>
8:     </b:loop>
9:   </ul>
10:   <b:include name='quickedit'/>
11: </div>
12:</b:includable>
13:</b:widget>

TIP: You can easily find the section by searching for the title that you put when inserting the linked list.

The first change is to put an id on the ul tag in order to be able to customize it from CSS.
So line 5 will look something like:

<ul id='my_menu_right'>

Now we go to the main change that is needed. We have to replace line 7 with an if clause saying that when the pages url is the same as the links url then the class if the li element will change.
This is done with the following code (replace line 7):

<b:if cond='data:blog.url==data:link.target'>
<li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
<b:else/>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:if>

 The last part is to add the desired CSS styling to our blog.
Go to the  Template menu and click the customize button. This opens the Blogger Template Designer.
From there click the Advanced menu,scroll down and click Add CSS. There put whatever styling you wish for the selected item, mouse over and the links style (This will overwrite any global settings set for links).
Before i uploaded the CSS code i tested it on Dreamweaver. I suggest that you test it somewhere first because it is a lot easier to locate any problems. Also i have put the comments so i can locate my code in the  html template code witch as you saw earlier is really large.
The CSS code that i wrote is:

@charset "utf-8";
/* My CSS part Marios*/
ul#my_menu_right, ul#my_menu_right ul
{
margin: 0px;
padding: 3px;
list-style-type: none;
background-color: #c2d8fa;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
ul#my_menu_right li, ul#my_menu_right li a
{
color: #666666; padding: 5px;
margin: 5px;
font-weight:bold;
}
ul#my_menu_right li:hover,ul#my_menu_right li:hover a
{
color: #ffffff;
background-color: #4eabff;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
ul#my_menu_right .selected, ul#my_menu_right .selected a
{
color: #ffffff;
background-color: #4eabff;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
/* END my css */