JQUERY: چۆنیەتی دروست کردنی لیستی پەیجەکان بەشێوازی ڕەنگا و ڕەنگ بە سیستمی CSS3

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

NAME NAME NAME NAME NAME NAME NAME NAME

NAME NAME NAME NAME NAME NAME NAME NAME

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

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

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

3. کلیک لەسەر   EDIT HTML بکە .

4. کلیک لەسەرProceed بکە .

5.Ctrl+F بکەو    ]]></b:skin> بدۆزەرەوە .

6. ئەم کۆدەی لای خوارەوە کۆپی بکە و ڕاستەوخۆ لەبەشی سەرەوەی ]]></b:skin پەیستی بکە و سەیڤی بکە .

.awesome, .awesome:visited {
    background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFiOaMDlvmIWr3hLtYGdY0C2BRfYx0ch_KWmcwwESAB23eh8WUFpwDJdwfvyhCgqSdhrRj09_S07NzYl7bSOWAnxORJOM3hRiL1t3RFqYSEbxjFAo_XzfmUFui3CImDFvpPKoAv6c0WQk/s1600/overlayy.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    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, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }
   
    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }

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

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

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

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

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

<a href="LINK" class="large awesome">NAME</a>
<a href="LINK" class="large blue awesome">NAME</a>
<a href="LINK" class="large pink awesome">NAME</a>
<a href="LINK" class="large magenta awesome">NAME</a>
<a href="LINK" class="large green awesome">NAME</a>
<a href="LINK" class="large red awesome">NAME</a>
<a href="LINK" class="large orange awesome">NAME</a>
<a href="LINK" class="large yellow awesome">NAME</a>

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

<a href="LINK" class="small awesome">NAME</a>
<a href="LINK" class="small blue awesome">NAME</a>
<a href="LINK" class="small pink awesome">NAME</a>
<a href="LINK" class="small magenta awesome">NAME</a>
<a href="LINK" class="small green awesome">NAME</a>
<a href="LINK" class="small red awesome">NAME</a>
<a href="LINK" class="small orange awesome">NAME</a>
<a href="LINK" class="small yellow awesome">NAME</a>

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

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

ليست هناك تعليقات:

إرسال تعليق