របៀបដាក់ Menu តូចៗ នៅក្នុង Blogger

Blogger.com បានអនុញ្ញាតឲ្យប្រើប្រាស់មុខងារជាច្រើននៅលើគេហទំព័ររបស់ខ្លួន ប៉ុន្តែគួរឲ្យសោកស្តាយ Blogger.com មិនមាននូវការដាក់នូវ SubMenu ដូចដែលបានបង្ហាញខាងក្រោមនេះ ។

ដូច្នេះ បើសិនជាលោកអ្នកចង់រចនាប្លក់របស់ខ្លួនជាមួយនិង Menu នេះ សូមអាន និងអនុវត្តដូចតទៅ
+ជំហានទី១៖ Sign In ទៅ Blogger Account របស់អ្នក »» Design »» Edit HTML
+ជំហានទី២៖​ សូមចុច Ctrl+F ដើម្បីស្វែងរកពាក្យ </head>
+ជំហានទី៣៖ ត្រូវ Copy Code ខាងក្រោម នៅពីលើពាក្យ </head> រួចហើយ SAVE TEMPLATE

<!--BR CODE -->
<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #5970B2;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;

/*background color of drop down menu */
background: #FFFFFF;
/*border of the drop down menu*/
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #2875DE;
/*font of each menu element*/
font: 11px arial}

#sddm div a:hover
{
/*background of each element on hover*/
background: #49A3FF;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>
<!-- Finished BR CODE -->



+ជំហានទី៤៖ សូមចូលទៅកាន់ Page Elements រួចហើយ ចុចលើពាក្យ Add a Gadget និង Copy Code ខាងក្រោមនេះ

<!-- BR MENU -->

<ul id="sddm">

<li><a href="http://boursaren.blogspot.com/"

onmouseover="mopen('m1')"

onmouseout="mclosetime()">ទំព័រដើម</a>

<div id="m1"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="#">ប៊ួរ សារេន</a>

<a href="http://limbenyamin.blogspot.com/">លឹម បេនយ៉ាមីន</a>

<a href="#">ព្រះវិហារព្រះគុណ</a>

<a href="#">សន្និបាតយុវជន</a>

<a href="#">ផ្សេងៗ</a>

</div>

</li>

<li><a href="#"

onmouseover="mopen('m2')"

onmouseout="mclosetime()">ទាញយក</a>

<div id="m2"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="#">បញ្ជីទី១</a>

<a href="#">បញ្ជីទី២</a>

<a href="#">បញ្ជីទី៣</a>

<a href="#">បញ្ជីទី៤</a>

</div>

</li>

<li><a href="http://boursaren.blogspot.com/p/blog-page_3053.html">អំពីខ្ញុំ</a></li>

<li><a href="http://boursaren.blogspot.com/#">សម្មភាពផ្សេងៗ</a></li>

<li><a href="http://boursaren.blogspot.com/#">ព្រះវិហារ</a></li>

</ul>

<div style="clear:both"></div>

<br /><br /><br /><br /><br /><br /><br /><br />

<!-- Finished BR MENU -->

 
+ជំហានទី៥៖ ចុងក្រោយសូម ចុចលើពាក្យ SAVE រួចមក SAVE ជាការស្រេច ។

សូមកុំភ្លេច Comment ផង