قائمه احترافيه بتقنيه css الانيقه ركبها على المدونه بلوجر او اى موقع

السلام عليكم ورحمه الله وبركاته
اليكم اعزائى القائمه الجديده يمكنك تركبها اينما شئت يمكنك ايضاً التعديل على الروابط وتغير الاشكال و التعديل على الالوان قائمه اكثر من رائعه قريباً ستكون على مدونتى للتركيب على مدونات بلوجر فقط قم بوضع الكود با الاسفل فى اداه جافا اسكريبت وضعها اعالى او اسفل المدونه اينما شئت اليك الكود اخى الكريم .

قائمه احترافيه بتقنيه css الانيقه ركبها على المدونه بلوجر او اى موقع

<style>

.arabetutorial-menu{

position:relative;

}

.arabetutorial-menu li{

float:right;

width:100px;

height:100px;

margin:5px;

list-style:none;

}

.arabetutorial-menu li a{

display:block;

overflow:hidden;

background:#EAEAEA;

color:#fff;

text-align:center;

height:100%;

width:100%;

position:relative;

-moz-box-shadow:1px 1px 2px #ddd;

-webkit-box-shadow:1px 1px 2px #ddd;

box-shadow:1px 1px 2px #ddd;

text-decoration:none;

border:1px solid #D5D5D5;

transition:1s;

}

.arabetutorial-menu li b{

display:block;

overflow:hidden;

background:#444;

color:#fff;

text-align:center;

margin-top:60px;

padding:5px 0 5px 0;

position:relative;

text-decoration:none;

border-top:1px solid #565656;

border-bottom:1px solid #565656;

transition:1s;

}

.arabetutorial-menu li b:hover{

background:#EAEAEA;

color:#444;

transition:1s;

border-top:1px solid #00A6FF;

border-bottom:1px solid #00A6FF;

}

.arabetutorial-menu li a:hover{

background:#00A6FF;

transition:1s;

}

.arabetutorial-icon{

width:80px;

height:80px;

position:absolute;

background-position:top left;

background-repeat:no-repeat;

background-color:transparent;

left:35px;

top:20px;

}

.arabetutorial-icon-home{

background-image:url(http://im31.gulfup.com/FRbbn.png);

}

.arabetutorial-icon-contact{

background-image:url(http://im31.gulfup.com/jtNtX.png);

}

.arabetutorial-icon-about{

background-image:url(http://im31.gulfup.com/b5PQM.png);

}

.arabetutorial-icon-demo{

background-image:url(http://im31.gulfup.com/iAJ1W.png);

}

.arabetutorial-icon-service{

background-image:url(http://im31.gulfup.com/qnT2q.png);

}

.arabetutorial-icon-bob{

background-image:url(http://im31.gulfup.com/UQ7Wo.png);

}

</style>

<ul id="arabetutorial-menu" class="arabetutorial-menu">

<li>

<a class="arabetutorial-item" href="http://tamancenter.blogspot.com/ ">اضافات بلوجر</a>

</li>

<li>

<a class="arabetutorial-item" href="http://tamancenter.blogspot.com/">قوالب بلوجر</a>

</li>

<li>

<a class="arabetutorial-item" href="http://tamancenter.blogspot.com/">شروحات الربح</a>

</li>

<li>

<a class="arabetutorial-item" href="http://tamancenter.blogspot.com">العاب</a>

</li>

<li>

<a class="arabetutorial-item"http://tamancenter.blogspot.com/">اعمالنا</a></li>

<li>

<a class="arabetutorial-item" href="http://tamancenter.blogspot.com/">الدعم الفنى</a>

</li>

</ul>