چۆنیەتی دروست دوگمە بەشێوازی ڕەنگا و ڕەنگ بە سیستمی CSS3

 نمونەی زیندووی کارەکە

دوگمەی قەبارە گەورە LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE  دوگمەی قەبارە مام ناوەند LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE LINK TEXT HERE  

قۆناغی یەکەم :

1. بچۆرە ‌حسابەکەت لە بلۆگەر  و بلۆگەر داش بۆرد بکەرەوە.

2. کلیک لەسەر Template بکە  .

3. کلیک لەسەر   EDIT HTML بکە .
4. کلیک لەسەرProceed بکە .  
5.Ctrl+F  بکەو    ]]></b:skin>  بدۆزەرەوە .
6.  ئەم کۆدەی لای خوارەوە کۆپی بکە و ڕاستەوخۆ لەبەشی سەرەوەی ]]></b:skin پەیستی بکە و سەیڤی بکە . 

.button, .button:visited {
 background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}

.button:hover {
 background-color: #111;
 color: #fff;
}

.button:active {
 top: 1px;
}

.small.button, .small.button:visited {
 font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
 background-color: #e22092;
}

.pink.button:hover {
 background-color: #c81e82;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}

.green.button:hover {
 background-color: #749a02;
}

.red.button, .red.button:visited {
 background-color: #e62727;
}

.red.button:hover {
 background-color: #cf2525;
}

.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}

.orange.button:hover {
 background-color: #d45500;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}

.blue.button:hover {
 background-color: #2575cf;
}

.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}

.yellow.button:hover {
 background-color: #fc9200;
}

 قۆناغی دووەم: 

1 . بچۆرە ‌حسابەکەت لە بلۆگەر و Layout بکەرەوە  

2.  کلیک لەسەر Add Gadget and select بکەو  HTML/Javascript’ هەڵبژێرە ‘

3. پاشان ئەم کۆدەی لای خوارە کۆپی بکە و لەوێ پەیستی بکە و پاشان کلیک لەسەر  Save arrangement بکە  واتە سەیڤی بکە .

 

نمونەی ( ١ )  بۆ دوگمەی قەبارە گەورە

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>

 نمونەی ( ٢ ) بۆ دوگمەی قەبارەمام ناوەند

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

تێبینی :
1- لە جێگەی ( LINK TEXT HERE ) ناوی پەیج یان ماڵپەڕەکەت بنوسە .
2- لە جێگەی ( LINK HERE ) لینکی پەیج یان ماڵپەڕەکەت بنوسە .