සුපුෂ්පිත සොෆ්ට්: Multilevel Dropdown Navigation Menu එකක් බ්ලොග් එකට දාගන්න..

මම අද ඔයාලට කියලදෙන්නේ Dropdown Menu එකක් කොහොමද අපේ බ්ලොග් එකට දාගන්නේ කියලයි. Dropdown Menu එකක් දාගැනීමේ වාසිත් ගොඩක් තියනවා. Dropdown Menu එකක් දාගත්තහම බ්ලොග් එකට හොද පෙනුමකුත් එනවා. ඔයාලත් කැමතිනම් මේක බ්ලොග් එකට දාගන්න මේ ලිපිය කියවන්න.

Design > Edit HTML
Expand Widget Templates එක උඩ ක්ලික් කරන්න.
<head/> tag එක හොයාගන්න (සොයාගැනීමට Ctrl+F ඔබලා එන සර්ච් බාර් එකේ <head/> ටයිප් කරන්න)
<head/> ටැග් එක හොයාගත්තට පස්සේ පහල කෝඩ් එක <head/> කෝඩ් එකට යටින් පේස්ට් කරන්න.



<link href='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/ddsmoothmenu-v.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/ddsmoothmenu.js' type='text/javascript'>
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type='text/javascript'>
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
</head>

5. දැන් ටෙම්ප්ලේට් එක සේව් කරන්න.

6. Design > Page element > Add gadget > HTML/JavaScript එකක් ගන්න.
(gadget එක Add කරන්න ඕනෙ පෝස්ට් වලට උඩින් ගැලපෙන තැනකටයි.)
7. දැන් එතන පහල කෝඩ් එක පේස්ට් කරන්න.
(මෙම කෝඩ් එක අදාල ස්ථානයේ පේස්ට් කර පහත අථත්වැඩියා කටයුතු සිදුකරන්න.
වැදගත් : පහල කෝඩ් එකේ <li><a href="#">Folder 0</a> Folder 0 යනු මෙනූ එකේ දිසිවන ප්‍රදාන නමයි. මේ සදහා කැමති නමක් ලබාදෙන්න. # යනු එහි url එකයි.
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li> ආකාරයට පහලට දමා ඇත්තේ Dropdown වන List එකයි.Sub Item 1.1 යන තැනට කැමති නමක් ලබාදී # යන ස්ථානයට එහි url එකලබා දෙන්න.
ගැටලුවක් ඇත්නම් කමෙන්ට් එකක් මගින් දැනුම් දෙන්න.

<h2>Example 1</h2>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://bloggerhowtotips.blogspot.com/"></a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerhowtotips.blogspot.com/">Blogspot How To</a></li>
</ul>
<br style="clear: left" />
</div>
<h2 style="margin-top:200px">Example 2</h2>
<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://bloggerhowtotips.blogspot.com/">Blogger Tips and Tricks</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerhowtotips.blogspot.com/"></a></li>
</ul>
<br style="clear: left" /></div>