Dark Style Vertical Menu For Blogger

                   Blogger ညီကိုမ်ားအတြက္ ေနာက္ထပ္ Menu Bar အလန္းေလးတစ္ခု မွ်ေ၀ေပးလိုက္ပါတယ္
ဗ်ာ။ အရင္တုန္းကေတာ႕ Horizontal Menu ေတြကိုဘဲ တင္ေပးေနက်ပါ။ အခုမွ တမ်ိဳးေျပာင္းျပီး vertical
Menu ေလးကို တင္ေပးလိုက္ပါတယ္ဗ်ာ။ ေအာက္မွာလည္း သူငယ္ခ်င္းမ်ား အဆင္ေျပေျပနဲ႕ လိုက္လုပ္
ႏိုင္ေအာင္လို႕ Code ေတြကို ပံုနဲ႕တကြ အေသးစိတ္ရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္လြယ္ေလးပါ။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 

ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

 

 

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 

 

အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

 

<ul class="vertical-list">
        <li><a href='#' class='button'">Home</a></li>
        <li><a href='#' class='button'">Our Studio</a></li>
        <li><a href='#' class='button'">Portfolio</a></li>
        <li><a href='#' class='button'">Our Team</a></li>
        <li><a href='#' class='button';">About US</a></li>
</ul>

 

 

ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။

 

အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။

 

 

/* The CSS Code for the menu starts here bloggertrix.com */
.button {
  outline: 0;
  padding: 5px 12px;
  display: block;
  color: #9fa8b0;
  font-weight: bold;
  text-shadow: 1px 1px #1f272b;
  border: 1px solid #1c252b;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #232B30; /* old browsers */
  background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
 }
 .button:hover {
  color: #fff;
  background: #4C5A64; /* old browsers */
  background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
 }
 .button:active {
  background-position: 0 top;
  position: relative;
  top: 1px;
  color: #fff;
  padding: 6px 12px 4px;
  background: #20282D; /* old browsers */
  background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
  -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
  -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
  box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
 }
 
 /* Other stuff: */
 .button-list { list-style: none; padding: 0; margin: 0; width: 100%; float: left; display: block; margin: 0 0 30px; }
 .button-list li { float: left; margin: 0 10px 0 0; }
 .button-list li.search { border-left: 1px solid #273137; padding-left: 18px; margin-left: 10px; position: relative; }
 
 /* Vertical List: */
 .vertical-list {
  list-style: none;
  padding: 10px;
  width: 200px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #20282D; /* old browsers */
  background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
  -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
  -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
  box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
 }
 .vertical-list .button {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #515B62; /* old browsers */
  background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */
 }
 .vertical-list .button:hover {
  background: #5F6B72; /* old browsers */
  background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54',GradientType=0 ); /* ie */
 }
 .vertical-list .button:active {
  padding: 5px 12px;
  top: 0;
  background: #515B62; /* old browsers */
  background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */  -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
}
 .vertical-list li { margin: 0 0 5px; }
 .vertical-list li:last-child { margin: 0; }

 

 

အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။