AYM: Web Development

ပတ္လမ္းေၾကာင္း

File လမ္းေၾကာင္းေတြကို တခ်ဳိ႕ေတြက HTML ေတြေလ့လာရင္း ရႈပ္ျပီး နားမလည္တာေတြရိွတယ္...

ဒါေၾကာင့္ ဒီမွာ ထပ္ရွင္းျပပါမယ္..

img/image.jpgအဲဒါကို index.html မွာေရးထားတာဆိုပါဆို႕...

အဲဒီ သေဘာက index.html နဲ႕ img folder နဲ႕က same root ပါ...

ဒါေၾကာင့္ img/image.jpg ဆိုျပီး တဆင့္ေခၚရတာ..

imageindex.jpg

ဒါဆိုရင္ေတာ့ index.html နဲ႕ image.jpg က same root ထဲမွာရိွတယ္လို႕ဆိုလိုပါတယ္..

../imageindex.jpg

index.html က image ဆိုတဲ့ Folder ေအာက္မွာရိွတယ္ဆိုပါဆို႕...သူက ေခၚခ်င္တာက အျပင္တဆင့္ထြက္မယ္..

အျပင္တဆင့္က imageindex.jpg ကို ေခၚမယ္လို႕ဆိုလိုတာပါ...

../../ ဆိုရင္ေတာ့ up level ႏွစ္ခါလုပ္သြားတာေပါ့..

../img/im1.jpg ဆိုရင္ေတာ့ uplevel တစ္ခါလုပ္မယ္... ျပီးရင္ img folder ေအာက္က im1.jpg ဆိုတဲ့

ပံုကို ယူမယ္ဆိုတဲ့ သေဘာပါ..

PHP Code:

<html>

<head>

<style>

.mypadding

{

padding:15px;

border:1px solid #000000;

}

.mymargin

{

margin:15px;

border:1px solid #000000;

}

.normal

{

border:1px solid #FF0000;

}

</style>

</head>

<body>

<div class="normal">

Normal text

<div class="normal">

This is normal div

</div>

</div>

<br>

<div class="normal">

Normal text

<div class="mypadding">

This is padding div

</div>

</div>

<br>

<div class="normal">

Normal text

<div class="mymargin">

This is mymargin div

</div>

</div>

</body>

</html>

padding ဆိုတာ ကေတာ့ အတြင္းအကြာအေ၀းပါ။ေဘာင္နဲ႕ စာနဲ႕ အကြာအေ၀းေပါ့....margin ကေတာ့ အျပင္နဲ႕ ေဘာင္အကြာအေ၀းပါ...အထက္ပါ code မွာဆိုရင္ normal ကေတာ့ ပံုမွန္ပါပဲ..normal ထဲမွာ normal ထည့္ထားလို႕... border က ထူသလိုျဖစ္သြားတာပါ..ေနာက္တစ္ခုကေတာ့ normalအထဲမွာ padding class ကိုထည့္ထားတယ္...

border အနက္ထဲက စာက border နဲ႕ ေ၀းေနတာကို ေတြ႕ရပါမယ္...ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ padding သံုးထားလို႕ပါ..ေနာက္တစ္ခုကေတာ့ normal အထဲမွာ margin class ကိုထည့္ထားတယ္...

border ႏွစ္ခုက ေ၀းေနတာကို ေတြ႕ရပါမယ္...ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့ margin သံုးထားလို႕ပါ..

မိမိစိတ္ၾကိဳက္padding-bottom, padding-top, padding-left, padding-right စတာေတြရိွပါတယ္...

margin လည္းအဲလိုေတြရိွပါတယ္..padding တစ္ခုတည္းကေတာ့ အကုန္လံုးကို ျခံဳေျပာတာပါ...

ဒါမွ မဟုတ္padding: 1px 5px 0px 10px;အ ဲဒါကေတာ့ top 1px right 5px bottom 0px left 10px လို႕ဆိုတာပါ...

margin လည္း အ ဲဒီလို သံုးႏိုင္ပါတယ္...

Finish

ဘာေတြက်န္ေသးလဲေတာ့ မသိဘူး....

ကုန္သေလာက္ေတာ့ ရိွသြားျပီ...

က်န္ေနေသးတာ...

မသိတာေလးေတြ ေမးႏိုင္ပါတယ္ဗ်ာ...

by Saturngod၏ PDFမွ က်ေနာ္သူငယ္ခ်င္းမ်ားအတြက္ ဗဟုသုတအလို႕ငွာျပန္လည္းေဖာ္ျပလိုက္ပါသည္.............
မူရင္းPDF ဖိုင္းကိုေဒါင္လိုလွ်င္....ေအာက္ပါလခ့္မွာ ေဒါင္ႏိုင္ပါတယ္.....

http://www.mediafire.com/?znjmdeh3zkd

Background Image

Background Image

ကဲ..ဒီေန႕ေတာ့ background images ပိုင္းေလးေပါ့...

PHP Code:

<head>

<title>Untitled Document</title>

<style>

body

{

background:url(bg.jpg);

color:white;

}

</style>

</head>

<body>

This is use background Image<br>

New features

Workflow improvements

Adobe Bridge Simplify file handling in Photoshop and within Adobe Cre

ative Suite with Adobe Bridge, the nextgeneration

file browser. Efficiently browse, tag, search, and process

your images. (See About Adobe Bridge.)

Color management improvements Maintain common color settings througho

ut the Adobe Creative Suite components. Print with the simplified pri

nting interface for color management. (See To synchronize color setti

ngs across Adobe applications.)

Version Cue® 2.0 Manage files and versions as a single user or in a s

mall workgroup. Integrate with Adobe Bridge to manage files for your

Photoshop and Adobe Creative Suite projects. (See Version Cue managed

projects.)

Enhanced photo capabilities

Multiimage

Camera Raw Process an entire photo shoot in a fraction of the t

ime. With support for a comprehensive range of digital cameras, you c

an automatically adjust settings, convert to universal Digital Negati

ve (DNG) format, and apply nondestructive edits to batches of images.

(See The Camera Raw plug-in.)

High Dynamic Range (HDR) Work with images in 32-bits-perchannel,

extended dynamic range. Photographers can capture the full d

ynamic range of a scene with multiple exposures and merge the files i

nto a single image. (See About High Dynamic Range images.)

Optical lens correction Correct for lens aberrations such as barrel a

nd pincushion distortion, chromatic aberration, and lens vignetting.

Easily correct image perspective using the filter’s grid. (See The Le

ns Correction filter.)

Noise reduction Reduce digital image noise, JPEG artifacts, and scan

ned film grain. (See Reducing image noise.)

Smart Sharpen filter Sharpen images with new algorithms for better ed

ge detection and reduced sharpening halos. Control the amount of shar

pening in the highlights and shadows. (See To use the Smart Sharpen f

ilter.)

Spot Healing tool Quickly heal spots and blemishes without selecting

source content. (See To use the Spot Healing Brush tool.)

One-click redeye

correction Fix red eyes with one click. Set options to adjust pup

il size and darkening amount. (See To remove red eye.)

Blur filters Apply blur effects using new blur filters: Box Blur, Sha

pe Blur, and Surface Blur. (See Blur filters.)

Productivity boosters

Customizable menus Set up and save custom menus and workspaces, highl

ight new or commonly used menu items, and reduce onscreen

clutter for easier access to the tools you need. (See To defin

e a set of menus.)

Image Processor Process a batch of files to multiple file formats. (S

ee About the Image Processor.)

All new PDF engine Comprehensive, customizable presets and PDF 1.6/Ac

robat 7.0 compatibility. (See Saving files in Photoshop PDF format.)

Script and action event manager Set JavaScripts and Photoshop actions

to run automatically when a specified Photoshop event occurs. (See T

o set scripts and actions to run automatically.)

UI font size customization Customize the size of text in the options

bar, palettes, and the Layer Style dialog box. (See To change the fon

t size in the work area.)

Update Manager Automatically search for Photoshop updates.

Variables Create datadriven

graphics in Photoshop as you now do in ImageReady. (See About

data-driven graphics.)

Video preview Display your document on a video monitor using a Firewi

re (IEEE1394) link. (See To preview your document on a video monitor.

)

WYSIWYG Font menu Preview font families and font styles directly in t

he Font menu. (See To choose a font family and style.)

Designer enhancements

Vanishing Point Paste, clone, and paint image elements that automatic

ally match the perspective planes in an image. (See About Vanishing P

oint.)

Smart Objects Perform nondestructive transforms of embedded vector an

d of pixel data. Create multiple instances of embedded data and easil

y update all instances at once. (See Smart Objects.)

Multiple layer control Work with layers as objects. Select multiple l

ayers and move, group, align, and transform them. (See Selecting laye

rs and To group and ungroup layers.)

Image Warp Easily create packaging mockups

or other dimensional effects by wrapping an image around any shap

e or stretching, curling, and bending an image using Image Warp. (See

The Warp command.)

Animation Create animated GIF files in Photoshop much as you create a

nimation in ImageReady. (See Creating an animation.)

Japanese type features Format text with new character alignment (Moji

soroe) and more Kinsoku Shori types. (See About Asian type.)

Smart Guides Align the content of layers as you move them using guide

lines that appear only when you need them. (See About guides and the

grid.)

Integrated Adobe Online Services Access and download professional Ado

be Stock Photos and share and print online with Adobe Photoshop Servi

ces. (See About Adobe Stock Photos.)

</body>

</html>

ဒီ code မွာဆိုရင္ scroll bar ကိုဆြဲခ်သြားတာနဲ႕ background ပါ လိုက္လာတာေတြ႕မွာပါ... အဲဒါဆိုျပသနာ တစ္ခုျဖစ္ တတ္ပါတယ္...

ဘာလဲဆုိရင္ ကိုယ့္ရဲ႕ background image က height က 600px ပဲရိွပါတယ္ဆိုပါေတာ့္...ဆြဲခ်လိုက္ရင္ height 600px ေက်ာ္ရင္ ပံုက repeat ျဖစ္သြားလိမ့္မယ္...အဲဒါဆိုရင္ၾကည့္ရဆိုးတာေပါ့....

PHP Code:

background:url(bg.jpg) fixed;လို႕သာျပင္လိုက္ရင္ ကိုယ့္ရဲ႕ background က fixed ျဖစ္သြားမယ္..

scroll ဆြဲခ်တာနဲ႕ မလိုက္ေတာ့ဘူးေပါ့...

PHP Code:

background:url(bg.jpg) repeat-x;အဲဒါဆိုရင္ေတာ့ ကိုယ့္ရဲ႕ Image repeat က horizonal သာျဖစ္ေနမယ္...

scroll ဆြဲခ်လိုက္ရင္ ကိုယ့္ image height ကုန္သာန႕ဲ background color ေပၚလာေရာ..............

PHP Code:

background:url(bg.jpg) repeat-y;အဲဒါဆိုရင္ေတာ့ ကိုယ့္ရဲ႕ image repeat က vertical ပဲျဖစ္ေနမွာ...

PHP Code:

.myclass

{

background:url(bg.jpg) repeat-x;

color:white;

}

#mydiv

{

background:url(bg.jpg) repeat-x;

color:white;

}

class ေတြေရာ div မွာပါသံုးလို႕ရတယ္....

DIV

Div

PHP Code:

<html>

<head>

<title>CSS</title>

<style>

.mydiv

{

background-color:#009966;

color:#FFFFFF;

}

</style>

</head>

<body>

Div tags

<div class="mydiv">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

</body>

</html>

ကၽြန္ေတာ္တို႕ mydiv ဆိုတဲ့ အထဲမွာ background-color ဆိုျပီး background colorကိုထည့္ထားခဲ့တယ္... စာလံုးအ ေရာင္ကိုေတာ့ အ ျဖဴေရာင္ေပါ့... ဒါေပမယ့္ စာေတြဟာ Div tagsေအ ာက္ကိုေရာက္ေနတယ္... ဘာျဖစ္လို႕လည္းဆိုရင္ Div ဟာ page ရဲ႕ width တစ္ခုလံုးကိုယူလိုက္ပါတယ္... သူ႕ဘာသာ သီးသန္႕ အေနနဲ႕ေပါ့... တစ္ေၾကာင္းတည္းျဖစ္ခ်င္ရင္ေတာ့ <div></div>အစား <span></span> သံုးလို႕ရတယ္.. span tag ကေတာ့ တစ္ေၾကာင္းမဆင္းဘူး...

သူ႕ styleကေတာ့ စာလံုးရိွသေလာက္ပဲ effect ျဖစ္မွာပါ... page width တစ္ခုလံုးျဖစ္မွာမဟုတ္ဘူး..

PHP Code:

<html>

<head>

<title>CSS</title>

<style>

.mydiv

{

background-color:#009966;

color:#FFFFFF;

width:100px;

}

.mydiv2

{

position:absolute;

background-color:#006666;

color:#FFFFFF;

width:100px;

top:50px;

left:180px;

}

</style>

</head>

<body>

Div tage

<div class="mydiv">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

<div class="mydiv2">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

</body>

</html>

ဒီ coding မွာဆို div tag ရဲ႕ အသံုး၀င္ပံု အနည္းငယ္ကိုေတြ႕ရမွာပါ... mydiv ရဲ႕ width ကိုကန္႕သတ္လိုက္တယ္.. 100px ပဲေပးေတာ့တယ္...ေနာက္ mydiv2 ေရာက္ေတာ့ postion ဟာ HTML စာေပၚမွာ မူမတည္ေတာ့ဘူး... ကိုယ္ပိုင္

အ ကြာအ ေ၀းေတြထည့္လိုက္တယ္... အ ဲလိုမ်ဳိးကိုယ္ပိုင္ အကြာအေ၀းေတြ သံုးလို႕ရေအာ္ position ကိုabsolute လုိ႕ေျပာင္းထားခဲ့ရတယ္.. ေနာက္ျပီးမွ browser အေပၚကေန အကြာအေ၀းနဲ႕ leftအကြာအ ေ၀းေတြ ထည့္လိုက္ တယ္...ေနာက္ပို ့ေတြမွာ ဆက္ၾကည့္ၾကပါ..

PHP Code:

<html>

<head>

<title>CSS</title>

<style>

.mydiv

{

background-color:#009966;

color:#FFFFFF;

width:100px;

border:#00FF99 1px solid;

}

.mydiv2

{

position:absolute;

background-color:#006666;

color:#FFFFFF;

width:100px;

top:31px;

left:326px;

border:rgb(200,10,30) 5px solid;

}

</style>

</head>

<body>

Div tage

<div class="mydiv">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.

</div>

<div class="mydiv2">

This is div tage using class mydiv and this back ground is 009966 and

font color is white.</div>

</body>

</html>

ကၽြန္ေတာ္တို႕ border ဆိုတာကို ထပ္ျဖည့္လိုက္တယ္...border:#00FF99 1px solid; အဲဒီသေဘာ ကေတာ့ ေရွ႕ကအေရာင္ ေနာက္ျပီးေတာ့ အထူအသံုးျပဳမည့္ပံုစံေတြ႕ေပါ့...အေရာင္ကို ဘယ္လိုသတ္မွတ္လဲဆို hex color ပါ... 0 ကေန F အထိရိွတယ္... 9 ျပီးရင္ A, B, C, D ,E, Fဆိုျပီးေျပာင္းသြားပါတယ္.. အသံုးျပဳတာကေတာ့ RGB ပါ...

ေရွ႕ႏွစ္လံုးက RED ျပီးေတာ့ Greenေနာက္ဆံုးကေတာ့ Blue ေပါ့... အ ဲဒီလို color ေတြကိုအလြတ္မွတ္စရာမလိုပါ ဘူး... photoshopကေနၾကည့္လိုက္လို႕ရပါတယ္.. hex color ကိုမၾကိဳက္ဘူးဆိုရင္ေတာ့ rgb(255,255,255)

အဲလိုပံုစံသံုးႏိုင္ပါတယ္.. သူကေတာ့ 0 ကေန 255 ထိေပါ့.. hex color မွာ A မည္းက #000000

အျဖဴကေတာ့ #FFFFFF ပါ...rgb မွာကေတာ့ rgb(0,0,0) ကေတာ့ အမည္းျဖစ္ျပီး အျဖဴကေတာ့ rgb(255,255,255) ပါ...border မွာ solid အျပင္ဘာေတြရေသးလဲဆိုရင္ေတာ့ မပူပါနဲ႕ dreamweaver မွာ ေရြးလိုက္ရံုပဲ...

<style> ခ ါတိုင္းဆို style ရဲ႕ေနာက္မွာ "text/css" ဆိုတာပါတယ္.. မထည့္လဲရတယ္ေပါ့...

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

page မွာ အသံုးျပဳမည့္ ပံုစံကိုေျပာတပါ.. charset ဆိုတာက အသံုးျပဳမယ့္ character set ေပါ့.. unicdoe

ဆိုရင္ unf-8 iso ကေတာ့ english စာအတြက္ေပါ့.. dream weaver မွာ page properties -> encoding

မွာ ေရြးလိုက္ရံုနဲ႕ရပါတယ္..အဲဒါမပါလည္း ဘာမွ မျဖစ္ပါဘူး...

<style> လုိ႕ပဲေရးရင္ ရပါတယ္...text/css က မပါရင္ လည္း ရပါတယ္..

Link with CSS

Link with CSS

.link

{

text-decoration:none

}

<a href="test.html" class="link">Home</a>

အ ဲဒါဆိုရင္ ကၽြန္ေတာ္တို႕ သံုးလိုက္တဲ့ Home မွာ ေအာက္မွာ မ်ဥ္းသားထားသာကို

ေတြ႕ရမွာမဟုတ္ေတာ့ဘူး...

ဘာျဖစ္လို႕လည္းဆိုကၽြန္ေတာ္တို႕ttext-decoration:noneလုိ႕ေရးသားထားခဲ့လို႕ပါ..

<html><head><title>CSS</title><head>

<style>

.link , .link:visited

{

text-decoration:none

}

.link:hover

{

color:green;

text-decoration:underline;

}

</style></head>

<body>

<a href="test.html" class="link">Home</a></body>

</html>

ဒါဆိုရင္ေတာ့ တမ်ဳိးဆန္းသြားတာေပါ့...

.link:visited ဆိုတာ ကိုယ္သြားျပီးတဲ့ link လည္း .link နဲ႕ တူတူပဲျဖစ္ခ်င္လို႕ comma

ခံျပီးေရးလိုက္တာပါ...

.link:hover ဆိုတာကေတာ့ mouse တင္လိုက္ရင္ ျဖစ္သြားမယ့္ style ပါ...ဒီမွာဆိုရင္ေတာ့ အအေရာင္က အစိမ္းေရာင္ျဖစ္သြားမယ္... underlineတားမယ္...အဲလိုေလးေပၚလာပါလိမ့္မယ္...

<html><head><title>CSS</title><head>

<style>

a , a:visited

{

text-decoration:none;

}

a:hover

{

color:green;

text-decoration:underline;

}

.link , .link:visited

{

color:green;

text-decoration:underline;

}

.link:hover

{

text-decoration:none;

}

</style></head>

<body>

<a href="test.html">Home</a>

<a href="test.html">Home2</a>

<a href="test.html" class="link">Link</a>

</body>

</html>

ကဲဒါဆိုရင္ေတာ့ a tage မွန္သမွ်ရဲ႕ style ကို တစ္ပံုစံတည္းထားခိုင္းပါတယ္..link မွာေတာ့ style ထည့္ခ့ဲပါတယ္...

class သံုးတဲ့ တစ္ခုပဲပံုေျပာင္းေနပါမယ္.. က်န္တာကေတာ့ a tage style အတိုင္းေပါ့...

h1

{

text-transform:uppercase;

}

အဲလိုေလး style tage ထဲမွာေရးျပီး<h1>hello</h1> လုိ႕ေရးထားခဲ့ရင္ေတာ့ HELLO ဆိုျပီးေပၚေနပါမယ္...

အဲ..အဲဒီလုိ သံုးရမယ့္ function ေလးေတြက ဘယ္လိုသိလဲဆိုရင္ေတာ့ dreamweaver မွာ auto

ပါျပီးသားပါ..

h1 { ျပီးေတာ့ space ျခားလိုက္တာနဲ႕ ေပၚလာပါမယ္... ေရြးလိုက္ရံုပဲ...ကဲဒါဆိုရင္ HTMLTage ေတြမွာသံုး လို႕ရ တာသိေလာက္ျပီထင္တယ္...ဒီထက္နည္နည္းျမင့္တဲ့ အပိုင္းေလးေတြ မၾကာခင္သြားေတာ့မယ္...

}

HTML Tag ႏွင့္ CSS

HTML Tag ႏွင့္ CSS

ကၽြန္ေတာ္တို႕ CSS ကို html tag ေတြမွာလည္း ေရာသံုးလို႕ရပါတယ္...

ကၽြန္ေတာ္ဆိုလိုတာက body , a , td အ ဲလို tage ေတြအ တြက္ပါ...

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

body

{

font-family:Zawgyi-one;

color:green; // not a name of sone ma :)

}

.myhead

{

font-family:verdana;

color:red;

}

#myid

{

font-family:verdana;

color:blue;

}

</style>

</head>

<body>

This is green color

<span class="myhead">This is span tag class</span>

<span id="myid">This is span tag id</span>

This is body message

</body>

</html>

ဒါဆိုရင္ေတာ့ This is green color နဲ႕ This is body message ေတြက အစိမ္းေရာင္အ ေနနဲ႕ေပၚေနပါမယ္...

Css ဆိုတာ

အခုေလ့လာၾကရမယ့္ CSS ဆိုတာ ကိုေရးသားထားသူကေတာ႕ ကို Saturngod ျဖစ္ပါတယ္ . http://www.mysteryzillion.com/forum/showpost.php?p=80&postcount=10မွာဆက္ဖတ္ႏိုင္ၾကပါတယ္ . .

ပညာလိုလားၾကတဲ့ သူငယ္ခ်င္းမ်ားအားလံုး ကို္ယ္စိတ္ႏွလံုးေအးခ်မ္းရႊင္လန္းျပီး ယခုထက္ပိုျပီးေလ႕လာ

သင္ယူႏိုင္ရင္း တိုင္းျပည္နဲ႕လူမ်ဳိးအက်ဳိးကို ဆထက္ထမ္းပိုး တိုးတက္ထမ္းေဆာင္ႏိုင္ၾကပါေစလို႕

ဆုမြန္ေကာင္းေတာင္းေပးလိုက္ပါတယ္ ခင္ဗ်ာ . . .

Css ဆိုတာ

CSS ဆိုတာ Cascading Style Sheets ပါ။ သူက web design Aတြက္သံုးပါတယ္..ဘယ္လိုသံုးလဲဆိုရင္ သူ႕ကို external File Aေနနဲ႕ေရာ ၊ HTML ထဲလည္း ေရာျပီးသံုးႏိုင္ပါတယ္...

Adding Style to a selection of Text

<p>This is normal styleing

<p style="font-family:Verdana">This is Verdana

အဲဒါကေတာ့ ရိုးရိုးေလးသံုးတာေပါ့...

Style ရဲ႕ Font ကို ေျပာင္းလိုက္တာပါ...

The <span>Tag

<span> tage ကိုေတာ့ HTML ပဲသံုးတဲ့သူေတြ သံုးတာရွားတယ္..သူက စာတစ္ေၾကာင္းတည္းမွာပဲ style ေတြေျပာင္းခ်င္လို႕သံုးတာမ်ားတယ္...

<p>This is normal style, this selection use span tag <span style="font-family:verdana">This

is verdana</span>

ကဲ...အ ဲဒါေလးကို run လိုက္ရင္သိမွာပါ... This is verdan တစ္ခုပဲ စာလံုးေျပာင္းသြားမွာပါ..

Using Internal Style Sheet

Class

class ကေတာ့ element အမ်ဳိးအ စားမ်ားၾကီးအတြက္ style တစ္ခုပဲသံုးခ်င္ရင္ အသံုးျပဳပါတယ္... <span

class="myhead"> ဆိုျပီးအသံုးျပဳႏိုင္ပါတယ္..

.myhead

{

font-family:verdana;

color:red;

}

ID

ID ကေတာ့ class အတိုင္းပါပဲ... ဒါေပမယ့္ သူ႕ကို သံုးခ်င္ရင္ေတာ့ id="myhead" ဆိုျပီးသံုးရပါတယ္...

#myhead

{

font-family:verdana;

color:red;

}

ကဲ..အခု internal သံုးပံုေလးစလိုက္ရေအ ာင္

<style type="text/css">

</style>

အ ဲလိုမ်ဳိးေရးရပါတယ္..

Uပမာ

<style type="text/css">

.myhead

{

font-family:verdana;

color:red;

}

</style>

ဆိုျပီးေရးသားရပါတယ္..

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

.myhead

{

font-family:verdana;

color:red;

}

#myid

{

font-family:verdana;

color:blue;

}

</style>

</head>

<body>

<span class="myhead">This is span tag class</span>

<span id="myid">This is span tag id</span>

</body>

</html>

အ ဲလိုဆိုရင္ this is span tag class က verdana font အနီေရာင္ျဖစ္ေနလိမ့္မယ္...

this is span tag id ကေတာ့ အျပာေရာင္ေပါ့...

အားလံုးနားလည္ႏိုင္ၾကပါေစ..

Learning CSS pdf

http://www.mediafire.com/?znjmdeh3zkd

How to Add your Blog Open Curtrin

မိမိတို ့ဘေလာ့မွာ လိုက္ကာ အဖြင့္ အပိတ္ေလး တပ္ခ်င္ၾကရင္ေတာ့ ေအာက္မွာပါ .. လိုက္လုပ္ၾကည့္လို္က္ပါ..
Design > Edit Html > ကိုဝင္ပါ ၿပီးရင္ ကုဒ္ေတြထဲက <head> သို ့မဟုတ္ </head> ကိုရွာပါ.. ၿပီးရင္
<head> ရဲ႕ ေအာက္ </head> ရဲ႕ အေပၚမွာေပါ့ သူတို ့၂ ခုရဲ႕ အတြင္းျဖစ္ရင္ ရပါၿပီ..အဲ့မွာ ေအာက္က ကုဒ္ကို ထည့္ပါ..

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/><script src='http://joomlamyanmar.net/c1/jquery.easing.1.3.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $curtainopen = false; $(".rope").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'50%'}, 2000 ); $(".rightcurtain").stop().animate({width:'51%'}, 2000 ); $curtainopen = false; } return false; }); }); </script>

အေပၚကကုဒ္ေတြထဲကမွ က်ေနာ္ အျပာေရာင္နဲ ့ျပထားတဲ့ေနရာေတြမွာ စိတ္ႀကိဳက္ ျပင္ဆင္ႏို္င္ပါတယ္
' ေလးတခုကစ က်န္ခဲ့လို ့မရပါဘူး ဂရုစိုက္ပါေနာ္.. ၿပီးၿပီဆိုရင္ေတာ့ ေနာ္ကတဆင့္အေနနဲ ့ Css ထည့္ပါမယ္
<body> ကိုရွာပါ ၿပီးရင္ အဲ့ေအာက္မွာ ထည့္ပါမယ္ ပံုထဲက အတိုင္းေပါ့ လြတ္တဲ့ၾကားတေနရာရာမွာ ထည့္ပါ

ၿပီးရင္ေတာ့ ေအာက္က ကုဒ္ကို ထည့္ပါဗ်ာ..

/***************** Curtrin **********************/

.leftcurtain{ width: 50%; height: 100%; top: 0px; left: 0px; position: fixed; z-index: 10002; } .rightcurtain{ width: 51%; height: 100%; right: 0px; top: 0px; position: fixed; z-index: 1003; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; z-index: 100000; } .rope{ position: fixed; top: -40px; left: 90%; z-index: 1004; }

ဒါဆိုရင္ေတာ့ မၿပီးေသးပါဘူးဗ်ာ တဆင့္က်န္ပါေသးတယ္.. အဲ့တာကေတာ့
Design > Page Elements > HTML/Javascript
ကိုယူပါ ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ထည့္ၿပီး သိမ္းလိုက္ေတာ့ဗ်ာ ၿပီးပါၿပီ..

<div class="leftcurtain"><img src="http://joomlamyanmar.net/c1/images/frontcurtain.jpg"></div><div class="rightcurtain"><img src="http://joomlamyanmar.net/c1/images/frontcurtain.jpg"></div><a class="rope" href="#"> <img src="http://joomlamyanmar.net/c1/images/rope.png"> </a>

အဲ က်န္ေသးတယ္..
အခုလို ထည့္ရင္ Html/Javascript ေဘာက္ကိုယူၿပီးထည့္တဲ့အခါ ေခါင္းစဥ္မတတ္ပါနဲ ့ေခါင္းစဥ္တတ္လိုက္ရင္
သူ ့ကိုထည့္ထားမွန္းသိသာတယ္ ၿပီးေတာ့ Widgets ရဲ႕ Header ကေပၚေနေတာ့ ၾကည့္မလွေတာ့ဘုူးေပါ့..
အဆင္ေျပၾကပါေစ..အားလံုးၿပီးၿပီဆိုရင္ေတာ့ ေအာက္ကလို ရၿပီေပါ့ေနာ္..

How to Add Facebook Like Buttom

မိမိတင္သမွ် ပို ့ေတြတိုင္းရဲ႕ ေအာက္ေျခမွာ Facebook Like Buttom , ေလးထည့္ခ်င္ၾကရင္ျဖင့္ ...

ေအာက္မွာ က်ေနာ္ျပထားေပးပါတယ္..
အရင္ဆံုး Design > Edit HTML > Edit Template > Expand Widget Templates (ကိုကလစ္ေပးထားလိုက္ပါ)
ၿပီးရင္ေတာ့ HTML ထဲက မိမိသိလိုေသာ code ကိုရွာဖို့အတြက္ Ctrl+F ကိုနိပ္ေပးလိုက္ၿပီးေအာက္က အကြက္ထဲမွာ </head> ဆိုတာကိုရွာလိုက္ပါ။ၿပီးရင္ ေအာက္က ကုဒ္ေလးကို ထည့္ပါ..

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript">
</script>

ၿပီးၿပီဆိုရင္ ေနာ္ကတဆင့္သြားပါမယ္.. <data:post.body/> အဲ့ဒါကို ျပန္ရွာေပးပါ။ ေတြ႕ရင္ေတာ့ <data:post.body/> ရဲ့ေအာက္မွာ ေအာက္က code ေတြကိုယူထည့္ေပးရပါမယ္။ ဒီေနရာမွာေျပာစရာ
ရွိပါတယ္ တခ်ိဳ႕က Template ေတြ ေျပာင္းထားရင္ ရွာရခက္ေနမယ္ အဲ့ေတာ့ <div class='post-share-buttons'> ဆိုတာကို ရွာလိုက္ပါ ဒါမွမဟုတ္ <div style='clear: both;'/> ေတြ ့ၿပီဆိုရင္ ေအာက္ကပံုကို
ၾကည့္ပါ အဲ့တိုင္ေလး ေပးထားတဲ့ကုဒ္ကို ထည့္လိုက္ပါ..

ကုဒ္ကေတာ့ ေအာက္ကဟာေလးပါ ကူးထည့္လိုက္ေပ့ါေနာ္..

<div>
<fb:like action="like" colorscheme="light" font="verdana" href="data:post.url" layout="standard" send="true" show_faces="false"></fb:like>
</div>

ကဲ ဒါဆိုရင္ေတာ့ အားလံုးပဲအဆင္ေျပေလာက္ပါၿပီေနာ္..

Learning CSS ျမန္မာလိုစာအုပ္

Adding Read More Link Icon For Blogger

How to do ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

You can use (Ctrl+F) to find easily

If you can not find it, find code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

You can use (Ctrl+F) to find easily

4. Remove it (which one you can find) with code of HTML below :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img alt='read more' src='Your Read More Link Icon URL'/></a>
</div>
</b:if>

NOTES :
a. Change Your Read More Link Icon URL

Example : http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif

b. The result is :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img alt='read more' src='http://lh6.ggpht.com/_OzNnI7Y03Iw/S3jOUa4I81I/AAAAAAAAA90/eLAtlSQuH4w/7-large-allblogtools.gif'/></a>
</div>
</b:if>

5. Click Save Template and Done.

Now you've already Added Read More Link Icon For Blogger.

Google Custom Search Box in Blogger

How to do :

First Step

1. Use account of Gmail

2. Visit http://www.google.com/cse site.

3. Click Create a Custom Search Engine

Like this below :

4. Fill the Form : (Example)

search engine name : ayeyarmyae Search Engine
search engine description : A search engine for ayeyarmyae
search engine language : choose English
what do you want to search ? : Only sites I select
sites to search : ayeyarmyae.blogspot.com/* (see Tips on formatting URLs)
editions : Standard Edition
click I have read and agree to the Term of Service

5. Click Next

6. Click Send confirmation email to accountname@gmail.com

7. Click Finish

8. Click Control Panel

9. Click Get Code

Second Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML provided by Google Custom Search into 'HTML/JavaScript'

Example of code of HTML provided by Google Custom Search below :

<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="004009945176770424364:Example7m8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=id"></script>

4. Click Save and Done.

Now you've already added Google Custom Search Box in Blogger.

Create Related Posts with Scroll in Blogger

How to Create Related Posts with Scroll in Blogger ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

<data:post.body/>

You can use (Ctrl+F) to find easily

4. Right After <data:post.body/> place code of HTML below :

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

NOTES :Related Post : you can change it with any word-phrase you like.

5. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

6. Right Before ]]></b:skin> place code of HTML below :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f2f2f2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

NOTES :
background-color : #f2f2f2; it's a background color, you can change it with any HTML color code you like.

7. Click Save Template and Done.

Now you've already Created Related Posts with Scroll in Blogger.

Top Commentators Widget in Blogger

How to add Top Commentators Widget in Blogger ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

NOTES :

You can change :

ayeyarmyae.blogspot.com with your blog URL.
15 number of commentators displayed.
Blogfuel an author of blog.

4. Click Save and Done.

Now, you've already added Top Commentators Widget in Blogger.

HTML Color Code Table in Blogger

How to add HTML Color Code Table in Blogger ? ...

First Step

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below :

</head>

you can use (Ctrl+F) to find easily

3. Right Before </head> place code of HTML below :

4. Click Save Template.

Second Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click 'HTML/JavaScript'

3. Place code of HTML below into 'HTML/JavaScript'

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody>
<tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr>
<tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr>
<tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody>
<tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>
Selected Color Code: <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p>
</td></tr>
</tbody></table>
</form>
</center>

NOTES : Selected Color Code : you can change it with any word-phrase you like.

4. Click Save and Done.

Now, you've already added HTML Color Code Table in Blogger.

Created Horizontal Tabs Menu in Blogger

For Example picture

how to Create Horizontal Tabs Menu in Blogger ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

]]></b:skin>

you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> - place code of HTML below:

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvvTgDqoMAUDF-E2876ASEluH7-y-I8aM-1veYWIq8qGabAOCC79H-ZPysTt-J5gldJgfsDYT8797Ru5Q0O72if_KcGjc6q4CSIO1Vg52wMmPiGBO2b5uyzxmSqOs9KBcma2FjRULAXqI/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeL_7pDWuzcgIV2uU8VFwG-sbrKy4CGKvihyphenhyphenB55sx1_mhfQkOHmnrx2Gven2BfixJSdWMixhFhqlTZks8K8cY64Nxt3KdgtjB8_oe_hBKBIoP6oo1p84Hdq8BNY2fMAh7cSV7tx0HZIzU/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

4. Find code of HTML below:

you can use (Ctrl+F) to find easily

5. Right after it - place code of HTML below:

Notes:
You can change:
# http://ayeyarmyae.blogspot.com
# Add link title
# Name
6. Click Save Template and Done.

Now, you've already Created Horizontal Tabs Menu in Blogger.

Drop Down Menu Widget in Blogger

This is Drop Down Menu. Drop Down Menu displays huge lists of links of a blog.

How to add Drop Down Menu Widget in Blogger ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>The Main Title</option>


<option value="http://linkofsite.com">First Title</option>
<option value="http://linkofsite.com">Second Title</option>
<option value="http://linkofsite.com">Third Title</option>
</select></form>

NOTES :

The Main Title: It's a main title, you can change it as you like. Example: Favourite Sites
http://linkofsite.com : It's URL of link, you can change it with your URL of link. Example : http://www.google.com, http://www.yahoo.com
First Title, Second Title, Third Title: These are title of URL of Links, you can change these with your title of URL of links. Example: Google, Yahoo, Youtube

4. Click Save and Done.

Now you've already displayed Drop Down Menu Widget in Blogger.

Installing Google Translate Widget

How to Install Google Translate Widget ? ...

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

NOTES :
'en' means blog language is english, you can change it to your blog language. Example: 'fr' for french, 'de' for german, 'it' for italian and 'id' for indonesian.

4. Click Save and Done.

Now you've already Installed Google Translate Widget.

Numbered Page Navigation Blogger

Let's review a topic about how to add Numbered Page Navigation Blogger. Have you ever seen Numbered Page Navigation ? ...

Like this below :

Numbered Page Navigation Blogger means a Page Navigation by Numbers in Blogger. The function of Numbered Page Navigation is to navigate your blog friendly for visitor or viewers.

How to add Numbered Page Navigation Blogger ? ...

First Step

1. Go to Dashboard, click Design, click Add a Gadget

2. Click HTML/JavaScript

3. Place code of HTML below into HTML/JavaScript

4. Click Save.

Second Step

1. Go to Edit HTML

2. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> place code of HTML below :

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Third Step

1. Find code of HTML below :

</body>

you can use (Ctrl+F) to find easily

2. Right Before </body> place code of HTML below :

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

NOTES :

Var pageCount=2 means 2 posts would be shown in each page, you can change it as you like.
Var displayPageNum=5 means 5 numbers would be displayed in Numbered Page Navigation, you can change it as you like.
Var upPageWord ='Previous' you can change word 'previous' in to other words, such as 'before' or 'newer' or, anything you like.
Var downPageWord ='Next' you can change word 'Next' in to other words, such as 'older' or, anything you like.

3. Click Save Template and done.

Now you've already Added Numbered Page Navigation Blogger.

Thumbnail Related Post With Marquee

Let's review a topic about how to create Thumbnail Related Post With Marquee. Have you ever seen Thumbnail Related Post With Marquee ? ...

Like this below :

This can display you 10 (Ten) Thumbnail Related Posts in each post of blog and it is moved by marquee.

How to create Thumbnail Related Post With Marquee ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

</head>

you can use (Ctrl+F) to find easily

4. Right Before </head> place code of HTML below :

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. Find code of HTML below :

you can use (Ctrl+F) to find easily

If you can not find it, find code of HTML below :

you can use (Ctrl+F) to find easily

6. Right After <div class='post-footer-line post-footer-line-1'> Or, <p class='post-footer-line post-footer-line-1'>
(which one you can find)

Place code of HTML below :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://ayeyarmyae.blogspot.com' style='display:none;'>Blogfuel</a>
</b:if>
</b:if>

NOTES :
var maxresults=10; means 10 Thumbnail Related Posts displayed, you can change it. Example : var maxresults=5; or, anything you like.

7. Click Save Template and Done.

Now, you've already created Thumbnail Related Post With Marquee.

AYM

Technology

Breaking News

ပတ္လမ္းေၾကာင္း

Background Image

DIV

Link with CSS

HTML Tag ႏွင့္ CSS

Css ဆိုတာ

Learning CSS pdf

How to Add your Blog Open Curtrin

How to Add Facebook Like Buttom

Learning CSS ျမန္မာလိုစာအုပ္

Adding Read More Link Icon For Blogger

Google Custom Search Box in Blogger

Create Related Posts with Scroll in Blogger

Top Commentators Widget in Blogger

HTML Color Code Table in Blogger

Created Horizontal Tabs Menu in Blogger

Drop Down Menu Widget in Blogger

Installing Google Translate Widget

Numbered Page Navigation Blogger

Thumbnail Related Post With Marquee

MKRdezign

Contact Form