မဂၤလာပါ။ ကြ်န္ေတာ္က ဦးဦး DC
ပါ။ အခု ကြ်န္ေတာ္ Drop down menu ေလး share ပါမယ္။ အခု Drop down menu က
Blogger အတြက္ပါ။ ထည့္ပံုထည့္နည္းပါေျပာပါမယ္။ အျခား vista dropdown menu
မ်ားလည္း ဆက္ဆက္တင္ေပးပါအံုးမယ္။ အခုေအာက္ပါပံုေလးက Drop down
menu နမူနာပံုေလးပါ။
ထည့္နည္း
1) သင့္ Blogger account ကို Sign in လုပ္ေပးပါ။
2) သင့္ Blogger Dashboard ကေန Layout ကိုကလစ္ရပါ့မယ္
3) Page Elements ကိုကလစ္ပါ
4) Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
5) HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ ေအာက္ပါေပးထားတဲ့ code ေတြကို Copy ယူ ထည့္လိုက္ပါ။
<style>
@charset "utf-8";
#swimbi{
padding: 20px 0px 0 0px;
position: absolute;
width: 100%;
text-align: center;
z-index: 9999;
font-style: normal;
font-variant: normal;
font-weight: normal;
left: 0px;
}
#swimbi>ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijcMMqT2Zhuwk9uX1wDrJjQpo7nqHwch6-UeUD4MbaYug45vOx2nVlUL4xfQmFWL1pF67VsHEetkQ5tmXdbiYwJJzyXgxjehkLzLiHeDftrdlxWBg8ELPR0pwN6vYTkDdHohXVO83eExQ/s1600/DC+1.png);
padding: 0 0px 0 0px !important;
border-radius: 0px;
box-shadow: 0px 2px 6px 0px rgba(85,85,85,.55);
width: auto;
text-align: none;
list-style: none;
position: relative;
white-space: nowrap;
display: inline-table;
font-size: 0px;
}
#swimbi ul, #swimbi li, #swimbi a{
font-family: Arial, Helvetica, sans-serif !important;
margin: 0;
padding: 0;
}
#swimbi>ul>li{
display: inline-block;
vertical-align: top;
font-size: 15px;
position: relative;
}
#swimbi ul li:hover>ul, .hvr>ul{
display: block !important;
}
#swimbi>ul>li:hover>a, .hvr>a{
color: #ffffff !important;
border-radius: 0px;
z-index: 9;
}
#swimbi ul li a{
display: block;
text-decoration: none;
white-space: nowrap;
}
#swimbi>ul>li>a{
padding: 0px 30px;
line-height: 32px;
height: 32px;
color: #ffffff;
}
#swimbi ul ul{
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: normal;
display: none;
background: #131313;
border-radius: 0px;
width: auto;
list-style: none;
min-width: 150px;
padding: 0px 2px 2px 2px;
position: absolute;
z-index: 8;
margin-top: 0;
box-shadow: 0px 0px 0px 0px rgba(85,85,85,0);
top: 32px;
}
#swimbi ul ul li{
float: none;
position: relative;
width: 100%;
text-align: left;
}
#swimbi ul ul li a{
padding-left: 15px;
padding-right: 61px;
line-height: 25px;
height: 25px;
color: #ffffff !important;
text-shadow: 0px 0px 1px rgba(0,0,0,0);
}
#swimbi ul ul li>a:after{
content: '';
position: absolute;
right: 10px;
top: 50%;
width: 0;
height: 0;
margin: -4px 5px;
border-left: 5px #ffffff solid;
border-top: 4px dashed transparent;
border-bottom: 4px dashed transparent;
border-right: none;
display: inline-block;
overflow:hidden;
}
#swimbi ul ul li>a:only-child:after{
display: none;
}
#swimbi ul ul li:hover>a{
border-radius: 0px;
color: #ffffff !important;
}
#swimbi ul ul li:hover>a:after{
border-left: 5px #ffffff solid;
}
#swimbi ul ul li a:hover{
border-radius: 0px;
background: #424242;
}
#swimbi ul ul li a:hover:after{
border-left: 5px #ffffff solid;
}
#swimbi canvas{
position: absolute;
width: 1px;
height: 1px;
}
canvas noscript{
display: none;
}
#swimbi ul ul ul{
position: absolute;
z-index: 8;
left: 100%;
top: 0;
}
#ie_message{
display:none;
}
@media screen and (min-width:0\0){
#ie_message{
display: block;
margin-top: 10px;
background: #ecc;
}
#swimbi ul>li>a:before, #swimbi>ul>li>a:after{
color: #ffffff;
font-family: ifont;
pointer-events: none;
line-height: 32px;
font-size: 18px;
padding: 0 14px 0 0;
font-style: normal;
font-variant: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: left;
content: attr(data-icn);
visibility: hidden;
}
#swimbi>ul>li>a:after{
visibility: visible;
position: absolute;
z-index: 7;
top:0;
left: 30px;
padding: 0;
text-shadow: -1px -1px 0 rgba(85,85,85,0);
transition: all .12s ease-out;
}
#swimbi ul>li>a:before, #swimbi>ul>li>a:after{
width: 18px;
}
#swimbi>ul>li>a[data-icon]:before{
height: 18px;
}
#swimbi>ul>li>a.empty:before, #swimbi>ul>li>a.empty:after{
padding: 0;
}
#swimbi>ul>li:hover>a:after, #swimbi>ul>li.hvr>a:after{
color: #ffffff;
font-size: 23px;
left: 27.5px;
text-shadow: -1px -1px 0 rgba(0,0,0,0);
}
#swimbi ul ul li a:before{
visibility: visible;
float: left;
color: #ffffff;
line-height: 25px;
font-size: 14px;
width: 14px;
height: 14px;
padding: 0 8px 0 0;
}
#swimbi ul ul li:hover>a:before{
color: #ffffff;
}
@media (max-width: 768px) {
#swimbi>ul{
min-width: 300px !important;
width: 100%;
height: 32px;
padding: 0 !important;
}
#swimbi ul li{
float: none;
display: block;
position:relative;
}
#swimbi>ul>li{
width: auto !important;
margin: 0 4px 0 4px;
}
#swimbi>ul>li>a{
display:none;
}
#swimbi>ul:hover>li>a, .hvr>li>a{
display:block !important;
}
#swimbi>ul>li:hover, .hvr{
z-index: 9 !important;
}
#swimbi>ul:after {
line-height: 30px;
content: 'Menu';
font-family: Arial, Helvetica, sans-serif !important;
font-size: 15px;
color: #ffffff;
float:right;
padding-right: 15px;
}
#swimbi>ul:hover:after {
display: none;
}
#swimbi>ul:before {
float: right;
line-height: 32px;
content: '';
margin: 9px 22px 9.875px 0;
width: 17px;
height:2.625px;
border-top: 7.875px double #ffffff;
border-bottom: 2.625px solid #ffffff;
}
#swimbi>ul:hover:before {
opacity: 0;
}
#swimbi ul ul {
left: 25px !important;
}
#swimbi ul ul ul{
margin-top: 25px;
}
}
</style>
<div id="swimbi">
<ul>
<li><a href='/'><span>Home</span></a></li>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a>
<ul>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a>
<ul>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
</ul>
</li>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a>
<ul>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a></li>
<li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a></li>
</ul>
</div>
<script src="https://googledrive.com/host/0B77Xgi6Vh9YVczB4dGNZWjJob28/"></script>
# က သင္ထည့္လိုတဲ့ Website လင့္ေတြထည့္ပါ။
ထည့္ရမည့္ေနရာ မွာေတာ့ သင္လိုအပ္တာနာမည္ တိုတုိေပးၿပီးထည့္ႏိုင္ပါတယ္။
ထည့္ရမည့္ ေနရာ အခြဲ မွာေတာ့ ထည့္လိုတဲ့နာမည္ထည့္ပါ။ (ဥပမာ - Android -> Android app, Android game စသျဖင့္ ... Android သည္ ထည့္ရမည့္ေနရာျဖစ္ၿပီး Android app ႏွင့္ Android game တို႕ သည္ ထည့္ရမည့္ေနရာခြဲတြင္ ထည့္ရပါမည္)။
မိတ္ေဆြတို႕အဆင္ေျပပါေစ။ ထည့္ရတာ အဆင္မေျပခဲ့ဘူးဆိုရင္ေတာ့ http://droidchitthu.blogspot.com သို႕သြားၿပီး ေမးျမန္းႏိုင္ပါတယ္။ Blogger ခ်စ္သူမ်ားအားလံုး နည္းပညာျပန္လည္မွ်ေ၀ျခင္း ကို LIKE ေပးျခင္းျဖင့္ သင့္ Blog ကိုအားျဖည့္ေပးႏိုင္တဲ့ Blogger နည္းပညာမ်ား ရရွိမွာျဖစ္ပါတယ္။ အားလံုးပဲ က်န္းမာခ်မ္းသာၾကပါေစ။
Download ဆြဲနည္း အျပည့္အစံု ကို ဖတ္မယ္ဆိုရင္ ဒီကိုကလစ္ၿပီး ဖတ္ပါ။ အားေပးမွုအတြက္ ေက်းဇူးတင္ပါတယ္။
Droid ခ်စ္သူ ႏွင့္ အျခား ဘေလာ့(စ္)မွ နည္းပညာမ်ား ရယူလိုလွ်င္
နည္းပညာျပန္လည္မွ်ေ၀ျခင္း LIKE လုပ္ေပးျခင္းျဖင့္ ရယူႏိုင္ပါတယ္။ LIKE လုပ္ခ်င္က https://www.facebook.com/DroidChitThu မွာ LIKE လုပ္ေပးျခင္းျဖင့္ အားေပးႏိုင္ပါတယ္။
နည္းပညာျပန္လည္မွ်ေ၀ျခင္း LIKE လုပ္ေပးျခင္းျဖင့္ ရယူႏိုင္ပါတယ္။ LIKE လုပ္ခ်င္က https://www.facebook.com/DroidChitThu မွာ LIKE လုပ္ေပးျခင္းျဖင့္ အားေပးႏိုင္ပါတယ္။
Credit
0 comments:
Post a Comment