Blog အတြက္​ Gadget လန္​းလန္​း​ေလးပါ

ဒီ gadget​ေလးက အလြန္​လွပါတယ္​ဗ်ာ သူ႔ကိုထိလိုက္​မွ ​ေအာက္​ကို က်လာတာ လန္​းလန္​း​ေလး​ေပါ့

ကဲ ​ေအာက္​က အဆင္​့အတိုင္​း သြားလိုက္​ပါ

Step 1: Login to your blogger dashboard and Select your blog.
Step 2: Select Layout option.
Step 3: Click on Add a Gadget option and Select HTML/JavaScript widget from the list.
Step 4: In the HTML/JavaScript box paste following code and save the widget.
Step 5: Preview your blog and enjoy.

Layout က​ေန Add a gadget ​​ေရြး ျပီးမွ HTML/JavaScript ကိုထပ္​​ေရြး အဲbox ထဲမွာ

​ေအာက္​ကကုတ္​​ေတြထည္​့လိုက္​ပါ

_____________________________________________

<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
html{
  height: 100%;
background: rgb(234, 246, 243);
}
body{
  text-align:center; 
  vertical-align:middle;
  height:100%;
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.menu{
  vertical-align:middle;
  width:300px;
  display:inline-block;
 font-family: 'Source Sans Pro', sans-serif;
  transform:translate3d(0,0,0);
}
.menu input{
  position:absolute;
  left:-9999px;
}
.menu #togglemenu:checked ~ ul {
  max-height:300px;
  padding-bottom:1em;
}
.togglemenu {
background: #FC634B;
color: white;
display: block;
padding: 0.75em;
text-align: center;
cursor:pointer;
font-family: 'entypo', sans-serif;
}
.togglemenu:before{
  content: "\2630";
  font-size:1.5em;
  vertical-align:middle;
}
.menu ul{
  margin-top:2px;
  text-align:left;
  max-height:0px;
  overflow:hidden;
  padding-bottom:0;
  transition:300ms ease all;
}
.menu li{
  margin-bottom:1px;
  position:relative;
  z-index:10;
  transition:300ms ease all;
}
.menu li a {
display: block;
position:relative;
width:100%;
padding: 1em;
background: rgb(192, 192, 192);
text-decoration:none;
color:white;
box-sizing:border-box;
transition:300ms ease all;
}
.menu li:hover a {
width:99%;
margin-left:1%;
box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
}
.menu li:before {
content: "";
position: absolute;
width: 50%;
height: 30%;
left: 1%;
bottom: 16px;
box-shadow: 10px 0 0px black;
transition:300ms ease all;
transform: rotate(0deg);
}

.menu li:hover:before {
box-shadow: 10px 0 30px black;
transform: rotate(-4deg);
bottom: 6px;
}
.menu li:hover + li{
  z-index:1;
}
</style>
<nav class="menu">
  <input type="checkbox" id="togglemenu" checked />
  <label for="togglemenu" class="togglemenu"></label>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</nav>

_____________________________________

# ကိုအနီ​ေရာင္​​ေလးနဲ႔ ျပထားပါသည္​

အဲ​ေနရာမွာ linkထည္​့​ေပးရပါမယ္​

​ေဘးက link 1 ​ေနရာမွာ ​ေပးခ်င္​တဲ့ နာမည္​ထည္​့

ၿပီး​ေတာ့ save

OK!