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

Blog site
( ) www.akarphyoe.com Page 1

Blog site

1. Blogger > Layout > Edit HTML
2. -
3.
3.
4. <div id='sidebar-
wrapper'> <div id='sidebar-wrapper-right'>
<div id='sidebar-wrapper-left'>
5.

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

<li><a href="#2" >Link 2</a></li>
<li><a href="#5" >Link5</a></li>

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
Blog site

1</a></li> <li><a href="#2">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:
Blog site

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

HTML Code:

4</a></li> <li><a

CSS Code:
#menu9
none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height:
32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;
Blog site

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);
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s
800/menu9.gif)
0 -32px; padding: 8px 0 0 35px; }

HTML Code:

4</a></li> <li><a

CSS Code:
Blog site

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:
4</a></li> <li><a
Blog site


CSS Code:
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:
4</a></li> <li><a
href="#5">Link5</a></li> </ul>
Blog site

CSS Code:
color: #FFF; display: block; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s
800/menu7.gif);
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s
800/menu7.gif)
0 -32px; padding: 8px 0 0 30px; }
HTML Code:
4</a></li> <li><a

CSS Code:
Blog site

#menu2
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/WkgKyq9Du-
c/s800/menu2.gif);
padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color:
#283A50; background:
c/s800/menu2.gif)
0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50;
background:
c/s800/menu2.gif)
0 -64px; padding: 8px 0 0 10px; }
HTML Code:
4</a></li> <li><a

Blog site

CSS Code:
border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a {
color: #E5E8D4; display: block; background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-
k/s800/menu9.gif);
#725033; background:
k/s800/menu9.gif)
0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff;
background:
k/s800/menu9.gif)
0 -64px; padding: 8px 0 0 10px; }
HTML Code:
4</a></li> <li><a

Blog site

CSS Code:
#menu12
none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height:
32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;
text-decoration: none; } #menu12 li a:link, #menu12 li a:visited {
color: #666; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-
X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif);
padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background:

url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-
X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif)
0 -32px; padding: 10px 0 0 35px; }
HTML Code:
4</a></li> <li><a

CSS Code:
Blog site

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:
4</a></li> <li><a

Blog site

CSS Code:
border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a {
text-decoration: none; height: 32px; font-family: Verdana, Arial,
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);
#257EB7; background:
0/menu8.gif)
0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff;
background:
0/menu8.gif)
0 -64px; padding: 8px 0 0 25px; }
Blog site

HTML Code:
4</a></li> <li><a

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,
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:
/s800/menu1.gif)
0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A;
background:
/s800/menu1.gif)
0 -64px; padding: 8px 0 0 10px; }

HTML Code:
<div id="menu"> <ul> <li><a href="#1">Link
4</a></li> <li><a
Blog site


CSS Code:
#menu2
none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid
none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; }
a:visited { color: #3688BA; display: block; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM-
78iwjzI/s800/menu2.gif);
padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA;
background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM-
78iwjzI/s800/menu2.gif)
Blog site

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

HTML Code:
4</a></li> <li><a

CSS Code:
#menu4
none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid
none solid; border-color: #000; border-size: 1px; border-width: 1px; }
Blog site

a:visited { color: #CCC; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s
800/menu4.gif);
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s
800/menu4.gif)
0 -32px; padding: 8px 0 0 10px; }

HTML Code:
4</a></li> <li><a

Blog site

CSS Code:
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:
Blog site

4</a></li> <li><a

1. Blogger > L
2. Add a Gadget or Add a Page element
3. HTML/JavaScript
4. HTML/JavaScript
5. Save
6. HTML/JavaScript

Blog site

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-
type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-
serif; 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
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; text-
decoration: 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

Blog site

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-
height: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; text-
decoration: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
href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-
height: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; text-
decoration: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 { background-
position: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
Blog site


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;
Blog site

width:520px;
}

#FFFFFF
#008000
1px solid, dashed or dotted border
#008000
comment body 520px

<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'>
Blog site

</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</dd>
</b:if>

8.Save

Blogger Comments "Reply Link"
2. Backup template
3. "Expand widgets Templates" Box
4. ]]></b:skin>
5.

/*--------------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..
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=""
width="200" height="120"
title 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>

Blog site

Blog
2. Backup template
3. Check "Expand Widget Templates" box
4.
<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

Blog site

Blog site

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;
}

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

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

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

Cargado por

Copyright:

Formatos disponibles

Blog site

También podría gustarte