របៀបដាក់ Dropdown Menu ក្នុង blogger

សួរស្តីបិត្តទាំងអស់គ្នាតើបិត្តទាំងអស់គ្នាសុខស្បាយឫទេខ្ញុំសង្ឈឺមថាអ្នកទាំងអស់គ្នាប្រហែល ជា
មិនអីទេដោយសារតែមួរយៈកន្លងមកខ្ញុំមានការ Busy ខ្លះក្នុងជីវៈភាពដោយមិនបានសរសេរអត្ថបទ
ប្រកាសអស់មួយរយៈ។ ឥឡូវនេះ Play Learns នឹងបង្ហាញពីការដាក់ Dropdown Menu ក្នុង blogger លក្ខណៈពិសេសដ៏សំខាន់របស់វាគឺអាចភ្ជាប់ជាមួយនិងតំណភ្ជាប់មេរៀនឫអត្ថបទក្នុងប្លុករបស់អ្នក យើយអាចសរសេរចំណងជើងដាក់ក្នុង Dropdown Menu នោះបានជាមូយនិងការភ្ជាប់ https://
ចំណងជើងអត្ថបទរនស់មេរៀនយើង។ ពេលដែលអ្នកបានបង្កើតប្លុករួចជ្រើសយក Template ដែល
មានស្រាប់នេះភាពច្រើនវាមិនមាន Dropdown Menu នោះទេ ។ប៉ុន្តែបើអ្នកធ្វើការទាញយកនូវ Template ពីវិបផ្សាយនាៗនោះវាប្រហែលជាមានស្រាប់ ប៉ុន្តែTemplate ខ្លះមាននួវ Dropdown Menu
មិនពេញចិត្តយើងៗអាចធ្វើការដោះដូរវាបានខាងក្រោមនេះ Play Learns និងបង្ហាួញ Dropdown Menu មួយចំនួនប្រហែលជាអាចពេញចិត្តខ្លះ។ តោះកុំឲ្យខាតពេលយួរសូមអនុវត្តទាំងអស់គ្នាៈ

ខ្ញុំនឹងបង្ហាញអ្នកពីជំហានងាយស្រួលបំផុតដោយណែនាំជំហានដែលមិនមានគន្លឹះអ្វីទាល់តែសោះអំពីកូដ css ខាងក្រោមៈ

រចនាប័ទ្ម CSS ទី ១

ជំហានទី ១: ការបន្ថែម CSS នេះ

1. Log in ចូលគណនីblogger account រួចចុច Click drop down.

2. ចុចចូល"Template" Like Below.

3., ចុចប៊ូតុង EDIT HTML "

4. ចុចប៊ូតុងProceed .

5. ចុច Ctrl+F ដើម្បីស្វែងរកពាក្យ ]]></b:skin>

6. បន្ទាប់ពីឃើញកូជឈ្មោះនេះ]]></b:skin> សូម Copyកូជខាងក្រោមមកដាក់ខាងក្រោម]]></b:skin> រូច Save Template

#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#abt-nav {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#abt-nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#abt-nav li {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#abt-nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#abt-nav li:hover > a {
    color: #00B4FF;
}
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#abt-nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#abt-nav ul li {
    background: none;
    width: 100%;
}
#abt-nav ul li a {
    float: none;
}
#abt-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('http://www.script-tutorials.com/demos/249/css/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

ជំហានទី ២: ការបន្ថែម HTML ដែលបាន
7. បន្ទាប់មកចូល Layout
8. ចុច Add Gadget និងចុចយក 'HTML/Javascript
9. រួចបិទភ្ជាប់កូដខាងក្រោមនេះ save ធាតុក្រាហ្វិកនេះ។

ឫមួយទៀត ប្រសិនបើអ្នកចង់ដាក់វានូវក្នុង Template HTML

សូមស្វែករកកួដ </header> ចម្លងនិងភ្ជាប់កូដខាងក្រោមនេះពីក្រោមស្លាក </header>

ចម្លងនិងភ្ជាប់កូដខាងក្រោមបិទភ្ជាប់ៈ

<ul id="abt-nav">
    <li><a href="http://playlearns.blogspot.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://playlearns.blogspot.com/">Back</a></li>
    <div id="lavalamp"></div>
</ul>

ត្រង់កន្លែង( # )សម្រាបដាក់ links.
សូមរក្សាទុក (Save Template) របស់អ្នកជាការស្រេច។

រចនាប័ទ្ម CSS ទី២

ជំហានទី ១

1. Log in ចូលគណនីblogger account រួចចុច Click drop down.

2. ចុចចូល"Template" Like Below.

/*-------- Begin Drop Down Menu -------*/

#menubar {
    background-color: transparent;
    width: 840px;
    color: #424338;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid ##8C001A;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0px solid #1A6680;
        border-right:0px solid #1A6680;
        height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFFFFF; /* This changes the text color of visited links. */
    display: block;
   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5;
           /* change margin value to 0 if you want no space between tabs */
           /* change 14 to another number to increase or reduce font size */
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #424338; /* This is the main menu background color when a user hovers. */
    color: #FFFFFF; /* This changes the text color. */
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li

li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #424338; /* This is the background color for the drop down menu. */
    width: 120px;
    color: #FFFFFF; /* This changes the text color. */
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
               /* change 14 to another number to increase or reduce font size */
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #424338; /* This is the background color for the drop down menu when a user hovers. */
    color: #FFFFFF; /* This changes the text color. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

<div id='menubar'>
    <ul id='menus'>
      <li><a href='LINK'>TabName1</a></li>
      <li><a href='LINK'>TabName2</a></li>
      <li><a href='LINK'>TabName3</a></li>
      <li><a href='LINK'>TabName4</a></li>
    </ul>
</div>
<ul>

          <li><a href='LINK'>DropDownName1</a></li>
          <li><a href='LINK'>DropDownName2</a></li>
          <li><a href='LINK'>DropDownName3</a></li>
        </ul>
<div id='menubar'>

    <ul id='menus'>
         <li><a href='LINK'>DropDownName1</a></li>
         <li><a href='LINK'>DropDownName2</a></li>
         <li><a href='LINK'>DropDownName3</a></li>
         <li><a href='LINK'>TabName4</a>
             <ul>
                <li><a href='LINK'>DropDownName1</a></li>
                <li><a href='LINK'>DropDownName2</a></li>
                <li><a href='LINK'>DropDownName3</a></li>
             </ul>
         </li>
    </ul>
</div>

សូមរក្សាទុក (Save Template) របស់អ្នកជាការស្រេច។

រចនាប័ទ្ម CSS ទី៣

១ អនុវត្តតាមជំហានបុនៈ
២ សូមCopyកូជខាងក្រោមមកដាក់ខាងក្រោម]]></b:skin> រូច Save Template

/* The CSS Code for the menu starts here sombokrean.com */

.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:906px;
}

ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}

ul.menu a {
text-decoration:none;
color:#fff;
padding-left:5px;
}

ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background::#e81717 url() no-repeat left bottom;
}

ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url();
background-repeat:no-repeat;
background-position:left top;
}

ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background:#e81717;
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}

ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}

ul.submenu li a.endlist {
background:url();
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url();
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#e81717;
margin-right:1px;
}
-->
.menu {
width: 300px;
background: #00199E;
margin: 10px;
padding: 0;
border: 1px solid black;
cursor: pointer;
}

សូមCopyកូជខាងក្រោមមកដាក់ខាងក្រោមដាក់ 'HTML/Javascript ឫ </header>

សូមចុច (Save Template ឫ HTML/Javascript'. ) របស់អ្នកជាការស្រេច។

រចនាប័ទ្ម CSS ទី៤

បន្ថែមម៉ឺនុយទម្លាក់ចុះក្រោមខៀវ

     ចូលទៅកាន់ Blogger> Dashborad
     ចុចលើម៉ឺនុយទម្លាក់ចុះក្រោមនិងជ្រើសប្លង់
     បន្ថែមជា HTML / JavaScript ដែលបច្ចេកវិទ្យា
     បិទភ្ជាប់កូដខាងក្រោមនៅក្នុងការវា។ជាការស្រាចៈ

ចុច Save 'HTML/Javascript ជាកាស្រាច។

រចនាប័ទ្ម CSS ទី៥

១ អនុវត្តតាមជំហានបុនៈ
២ សូមCopyកូជខាងក្រោមមកដាក់ខាងក្រោម]]></b:skin> រូច Save Template

* CSS3 Drop Down Menu By BloggingTuition.org */
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) );
background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );
background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );
box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav ul li {
float: left;
}

#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) );
background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );
background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );
box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;
border-left: 1px solid rgbaundefined255, 255, 255, 0.05);
border-right: 1px solid rgbaundefined0,0,0,0.2);
text-shadow: 0 -1px 1px rgbaundefined0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) );
background: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );
background: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );
text-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.17, rgbundefined61,111,177)), color-stopundefined0.51, rgbundefined80,136,199)), color-stopundefined1, rgbundefined92,154,205)) );
background: -moz-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% );
background: -o-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% );
border-bottom: 1px solid rgbaundefined0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgbaundefined255, 255, 255, 0.3);
}
#nav li ul {
background: #3C4042;
background-image: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) );
background-image: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );
background-image: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;
border: 1px solid rgbaundefined0, 0, 0, 0.5);
}

#nav li:hover ul {
left: auto;
}

#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}

.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}

.nav ul li ul li {
    display: list-item;
    float: none;
}

.nav ul li ul li ul {
    top: 0;
}

.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}

#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}

#nav li li:hover ul {
visibility: visible;
}
/* CSS3 Drop Down Menu By BloggingTuition.org */<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span>

ចូលទៅកាន់ Blogger> Dashborad ចុចលើម៉ឺនុយទម្លាក់ចុះក្រោមនិងជ្រើសប្លង់

បន្ថែមជា HTML / JavaScript ដែលបច្ចេកវិទ្យា
បិទភ្ជាប់កូដខាងក្រោមនៅក្នុងការវា។ជាការស្រាចៈ

div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a>
<ul>
   <li><a href="#">Sub Page #1</a></li>
   <li><a href="#">Sub Page #2</a></li>
   <li><a href="#">Sub Page #3</a></li>
   <li><a href="#">Sub Page #4</a></li>
   <li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Create This</a></li>
</ul>
</div><span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span>

ចុច Save 'HTML/Javascript ជាកាស្រាច។
ខ្ញុំសង្ឃឹមថាអ្នកនឹងធ្វើបានដោយជោគជ័យ Play learns និងខិតខំស្វែងរក
នូវអ្វើដែលថ្មីៗមកប្រែជាភាសារខ្មែរដើម្បើងាយស្រួលដល់ការរចនាប្លុក
សូមអសគុណសូមមានសំណាល្អ៕

របៀបដាក់ Dropdown Menu ក្នុង​ blogger

របៀបដាក់ Dropdown Menu ក្នុង​ blogger

Related Post

របៀបដាក់ Dropdown Menu ក្នុង blogger

របៀបដាក់ Dropdown Menu ក្នុង blogger