ဘေလာ့ဆိုဒ္အလွဆင္ျခင္း

Blog site
www.akarphyoe.com
Page 1
Blog site
1. Blogger > Layout > Edit HTML 2. 3. 3. 4. wrapper'> <div id='sidebar-wrapper-right'> <div id='sidebar-wrapper-left'> 5. <div id='sidebar-
<li><a href="www.akarphyoe.com" >
</a></li>
<li><a href="#2" >Link 2</a></li> <li><a href="#3" >Link 3</a></li> <li><a href="#4" >Link 4</a></li> <li><a href="#5" >Link5</a></li>
www.akarphyoe.com
Page 2
Blog site
Css coad #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s 800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s 800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
HTML Code:
<div id="menu6"> <ul> <li><a href="#1">Link
www.akarphyoe.com
Page 3
Blog site
1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
CSS Code: #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/ s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background:
( ) www.akarphyoe.com Page 4
Blog site
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/ s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML Code:
<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
CSS Code: #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;
Blog site
font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s 800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s 800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML Code:
<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
CSS Code:
Blog site
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s 800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s 800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code: <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a
Blog site
href="#5">Link5</a></li> </ul> </div>
CSS Code: #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s8 00/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s8 00/menu14.gif); padding: 8px 0 0 10px; } HTML Code: <div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul>
www.akarphyoe.com
Page 8
Blog site
CSS Code: #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s 800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s 800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; } HTML Code: <div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
CSS Code:
Blog site
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Duc/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Duc/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Duc/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; } HTML Code: <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
www.akarphyoe.com
Page 10
Blog site
CSS Code: #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIRk/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIRk/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIRk/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; } HTML Code: <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
www.akarphyoe.com
Page 11
Blog site
CSS Code: #menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } HTML Code: <div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
CSS Code: #menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img {

Blog site
border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s8 00/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s8 00/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code: <div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
www.akarphyoe.com
Page 13
Blog site
CSS Code: #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6vCsjMXI/AAAAAAAACqY/iRErP3OUIiE/s80 0/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6vCsjMXI/AAAAAAAACqY/iRErP3OUIiE/s80 0/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6vCsjMXI/AAAAAAAACqY/iRErP3OUIiE/s80 0/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
Blog site
CSS Code: #menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li
Blog site
a:link, #menu li a:visited { color: #5E7830; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY /s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY /s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY /s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML Code: <div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a
www.akarphyoe.com
Page 16
Blog site
href="#5">Link5</a></li> </ul> </div>
CSS Code: #menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM78iwjzI/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM78iwjzI/s800/menu2.gif)
www.akarphyoe.com
Page 17
Blog site
0 -32px; padding: 8px 0 0 32px; }
CSS Code: #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica,
Blog site
sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s 800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s 800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
www.akarphyoe.com
Page 19
Blog site
CSS Code: #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze76mVADoI/AAAAAAAACrw/wjRC9Z4jrP4/s 800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze76mVADoI/AAAAAAAACrw/wjRC9Z4jrP4/s 800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML Code: <div id="menu10"> <ul> <li><a href="#1">Link
www.akarphyoe.com
Page 20
Blog site
1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
1. Blogger > L 2. Add a Gadget or Add a Page element 3. HTML/JavaScript 4. HTML/JavaScript 5. Save 6. HTML/JavaScript
www.akarphyoe.com
Page 21
Blog site
<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-styletype: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sansserif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; textdecoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
www.akarphyoe.com
Page 22
Blog site <style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; lineheight:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhG GOk3E/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; textdecoration:none; } #tabsI a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWO FI_3AgE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; lineheight:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0ja r62Q/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; textdecoration:none; } #tabsF a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSR UoYes/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { backgroundposition:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a ( ) www.akarphyoe.com Page 23
Blog site href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Change Author Comments Color Style In Blogger
Highlight and Customize Comments in Blogger 1. Blogger > Design > Edit HTML 2. Backup 3. "Expand widget templates" Box 4.
]]></b:skin> 5. .mbt-comment-body { background: #FFFFFF; color: #008000; border: 1px solid #008000; margin:0; padding:0 0 0 10px;
www.akarphyoe.com
Page 24
Blog site
width:520px; }
#FFFFFF #008000 1px #008000 comment body 520px solid, dashed or dotted border
<data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>
<data:commentPostedByMsg/> </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='mbt-comment-body'>
www.akarphyoe.com
Page 25
Blog site
<p><data:comment.body/></p> </dd> <b:else/> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> </b:if>
8.Save
Blogger Comments 1. Blogger > Design > Edit HTML 2. Backup template 3. "Expand widgets Templates" Box 4. ]]></b:skin> 5.
"Reply Link"
/*--------------MBT Reply Link --------------*/ .MBT-replycomments{ background:#ECEAEA; cursor:pointer; color:#fff; margin:5px 0;

Blog site
float:right; border:none; padding:4px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:10px sans-serif; } .MBT-replycomments:hover{ background:#E7E7E7; }
<dd class='comment-footer'> or just this, class='comment-footer'
<div class='MBT-replycomments'><a expr:href='"https://www.blogger.com/comment.g?blogID=******************* &postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D %22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height =650"); return false;'>Reply..</a></div>
Reply.. ( ) www.akarphyoe.com Page 27
Blog site
*******************
ID
address bar
6. Save
<a href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height="" alt="" title="" border="0" /></a>
IMAGE LINK
width="" and height="" title width="200" height="120" alt=" "
<a href="http://www.akarphyoe.com" target="_blank"><img src="IMAGE LINK" width="240px" height="180px" alt="Clickable Koala image" title="Clickable Koala image" border="0" /></a>
www.akarphyoe.com
Page 28
Blog site Blog 1. Blogger > Design > Edit HTML 2. Backup template 3. Check 4. "Expand Widget Templates" box
<span class='post-labels'>
<b:if cond='data:blog.url != "URL OF Selected Post"'> URL OF Selected Post 6. 6-7 l
Blogger Comment Form
www.akarphyoe.com
Page 29
Blog site
www.akarphyoe.com
Page 30
Blog site
www.akarphyoe.com
Page 31
Blog site
. 1. Blogger > Layout > Edit HTML 2. Check The Box Expand Widget Templates 3. <div class='comment-form'>
<div id='mbt-form'> 5. ]]></b:skin>
6. ]]></b:skin> #mbt-form iframe{ background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0e tM/s400/plz-do-not-spam1.gif) no-repeat bottom right; border:7px solid #C7C7C7; padding:5px;
Blog site
font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; } #mbt-form iframe:hover{ background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS 0/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC; } #mbt-form a{ color:#7EB2AC; }
www.akarphyoe.com
Page 33

ဘေလာ့ဆိုဒ္အလွဆင္ျခင္း

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

ဘေလာ့ဆိုဒ္အလွဆင္ျခင္း

Hochgeladen von

Copyright:

Verfügbare Formate

Blog site

<li><a href="www.akarphyoe.com" >

<div id="menu6"> <ul> <li><a href="#1">Link

url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/ s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

href="#5">Link5</a></li> </ul> </div>

CSS Code: #menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img {

a:link, #menu li a:visited { color: #5E7830; display: block; background:

href="#5">Link5</a></li> </ul> </div>

0 -32px; padding: 8px 0 0 32px; }

HTML Code: <div id="menu10"> <ul> <li><a href="#1">Link

Change Author Comments Color Style In Blogger

<data:commentPostedByMsg/> </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='mbt-comment-body'>

/--------------MBT Reply Link --------------/ .MBT-replycomments{ background:#ECEAEA; cursor:pointer; color:#fff; margin:5px 0;

<dd class='comment-footer'> or just this, class='comment-footer'

Reply.. ( ) www.akarphyoe.com Page 27

<b:if cond='data:blog.url != "URL OF Selected Post"'> URL OF Selected Post 6. 6-7 l

Blogger Comment Form

<div id='mbt-form'> 5. ]]></b:skin>

Das könnte Ihnen auch gefallen