بۆ دروستکردنی لیستی پەیجەکانی ماڵپەڕ بەشێوەیەکی ئاسۆیی بە سیستمی JQuery و CSS3

ڕێگەکانی دانانی :

1.   بچۆ بۆ Blogger Dashboard  پاشان > کلیک Layout بکە
2. کلیک لەسەرAdd a Gadget
3. کلیک لەسەر  Edit HTML
4. پاشان ئەم کۆدەی خوارەوە کۆپی بکە و لە Edit HTML پەیستی بکە

  نموونەی ( ١ ) بۆ سەیرکردنی نموونەکە ڕاستەوخۆ کلیکی ( ئێرە ) بکە  

 

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="widget-content">
<style>

#mbt-menu, #mbt-menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#mbt-menu {

width:960px;

margin: 0px auto;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, right top, right bottom, from(#444), to(#111));

background-image: -webkit-linear-gradient(#444, #111);

background-image: -o-linear-gradient(#444, #111);

background-image: -ms-linear-gradient(#444, #111);

background-image: linear-gradient(#444, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#mbt-menu:before,

#mbt-menu:after {

content: "";

display: table;

}

#mbt-menu:after {

clear: both;

}

#mbt-menu {

zoom:1;

}

#mbt-menu li {

float: right;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;

}

#mbt-menu a {

float: right;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 14px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#mbt-menu li:hover > a {

color: #fafafa;

}

*html #mbt-menu li a:hover { /* IE6 only */

color: #fafafa;

}

#mbt-menu ul {

margin: 20px 0 0 0;

_margin: 0; /*IE6 only*/

opacity: 0;

visibility: hidden;

position: absolute;

top: 0px;

left: 0;

z-index: 9999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,centr bottom,center top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 -1px rgba(255,255,255,.3);

-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#mbt-menu ul ul {

top: 0;

left: 0px;

margin: 0 0 0 0px;

_margin: 0; /*IE6 only*/

-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#mbt-menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0; /*IE6 only*/

-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#mbt-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#mbt-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#mbt-menu ul a:hover {

background-color: #0186ba;

background-image: -moz-linear-gradient(#04acec, #0186ba);

background-image: -webkit-gradient(linear, center top, center bottom, from(#04acec), to(#0186ba));

background-image: -webkit-linear-gradient(#04acec, #0186ba);

background-image: -o-linear-gradient(#04acec, #0186ba);

background-image: -ms-linear-gradient(#04acec, #0186ba);

background-image: linear-gradient(#04acec, #0186ba);

}

#mbt-menu ul li:first-child > a {

-moz-border-radius: 3px 3px 0 0;

-webkit-border-radius: 3px 3px 0 0;

border-radius: 3px 3px 0 0;

}

#mbt-menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 0px;

top: -6px;

border-left: 0px solid transparent;

border-right: 0px solid transparent;

border-bottom: 6px solid #444;

}

#mbt-menu ul ul li:first-child a:after {

left: -6px;

top: 100%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#mbt-menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#mbt-menu ul li:last-child > a {

-moz-border-radius: 0 0 3px 3px;

-webkit-border-radius: 0 0 3px 3px;

border-radius: 0 0 3px 3px;

}


</style>


<br />
<ul id="mbt-menu">
<li><a href="http://www.blogger.com/your%20page%20link">ناوی پەیج</a></li>
<li>
<a href="http://www.blogger.com/your%20page%20link">ناوی پەیج</a>

</li>
<li><a href="http://www.blogger.com/your%20page%20link">ناوی پەیج</a></li>
<li><a href="http://www.blogger.com/your%20page%20link"> ناوی پەیج</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=281632855791414698#"></a></li>
</ul>
</div>
</div>

نموونەی ( ٢ ) بۆ سەیرکردنی نموونەکە ڕاستەوخۆ کلیکی ( ئێرە ) بکە

<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<div class="widget-content">
<style>

#mbt-menu, #mbt-menu ul {

margin: 0;

padding: 0;
font
list-style: none;

}

#mbt-menu {

width:950px;

margin: 0px auto;

border: 1px solid #222;

background-color:#D41212;

background-image: -moz-linear-gradient(#D41212, #111);

background-image: -webkit-gradient(linear, right top, right bottom, from(#D41212), to(#111));

background-image: -webkit-linear-gradient(#D41212, #111);

background-image: -o-linear-gradient(#D41212, #111);

background-image: -ms-linear-gradient(#D41212, #111);

background-image: linear-gradient(#D41212, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#mbt-menu:before,

#mbt-menu:after {

content: "";

display: table;

}

#mbt-menu:after {

clear: both;

}

#mbt-menu {

zoom:1;

}

#mbt-menu li {

float: right;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #D41212;

-webkit-box-shadow: 1px 0 0 #D41212;

box-shadow: 1px 0 0 #D41212;

position: relative;

}

#mbt-menu a {

float: right;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 14px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#mbt-menu li:hover > a {

color: #fafafa;

}

*html #mbt-menu li a:hover { /* IE6 only */

color: #fafafa;

}

#mbt-menu ul {

margin: 20px 0 0 0;

_margin: 0; /*IE6 only*/

opacity: 0;

visibility: hidden;

position: absolute;

top: 0px;

left: 0;

z-index: 9999;

background: #D41212;

background: -moz-linear-gradient(#D41212, #111);

background: -webkit-gradient(linear,centr bottom,center top,color-stop(0, #111),color-stop(1, #D41212));

background: -webkit-linear-gradient(#D41212, #111);

background: -o-linear-gradient(#D41212, #111);

background: -ms-linear-gradient(#D41212, #111);

background: linear-gradient(#D41212, #111);

-moz-box-shadow: 0 -1px rgba(255,255,255,.3);

-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#mbt-menu ul ul {

top: 0;

left: 0px;

margin: 0 0 0 0px;

_margin: 0; /*IE6 only*/

-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#mbt-menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0; /*IE6 only*/

-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#mbt-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#mbt-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#mbt-menu ul a:hover {

background-color: #0186ba;

background-image: -moz-linear-gradient(#04acec, #0186ba);

background-image: -webkit-gradient(linear, center top, center bottom, from(#04acec), to(#0186ba));

background-image: -webkit-linear-gradient(#04acec, #0186ba);

background-image: -o-linear-gradient(#04acec, #0186ba);

background-image: -ms-linear-gradient(#04acec, #0186ba);

background-image: linear-gradient(#04acec, #0186ba);

}

#mbt-menu ul li:first-child > a {

-moz-border-radius: 3px 3px 0 0;

-webkit-border-radius: 3px 3px 0 0;

border-radius: 3px 3px 0 0;

}

#mbt-menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 0px;

top: -6px;

border-left: 0px solid transparent;

border-right: 0px solid transparent;

border-bottom: 6px solid #D41212;

}

#mbt-menu ul ul li:first-child a:after {

left: -6px;

top: 100%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#mbt-menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#mbt-menu ul li:last-child > a {

-moz-border-radius: 0 0 3px 3px;

-webkit-border-radius: 0 0 3px 3px;

border-radius: 0 0 3px 3px;

}


</style>


<ul id="mbt-menu">
<li><a href="your page link">ناوی پەیج</a></li>
<li>
<a href="your page link">ناوی پەیج</a>

</li>
<li><a href="your page link">ناوی پەیج</a></li>
<li><a href="your page link"> ناوی پەیج</a></li>
<li><a href="#"></a></li>
</ul>
</div>

width:960px; بۆ گۆڕینی درێژی لیستەکە

border: 1px solid #222; بۆ گۆڕینی چوارچێوەی لیستەکە

background-color:#D41212; بۆ گۆڕینی باگراوندی لیستەکە

بگۆڕە بە لینکی پەیجەکەی خۆت   your page link  

ناوی پەیج بگۆڕە بە ناوی پەیجی خۆت

لە کۆتاییدا

کلیک لەسەر حفظ ( SAVE ) بکە