قائمه جديدة بتقنيه css 2018

السلام عليكم و رحمة الله و بركاته

لاننا نعدكم دائما بالجديد اليوم مع شرح عمل قائمة احترافية بتقنية 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="الرابط "><span class="arabetutorial-icon arabetutorial-icon-home"></span><b>اضافات بلوجر</b></a>   </li>       <li>          <a class="arabetutorial-item" href="الرابط"><span class="arabetutorial-icon arabetutorial-icon-demo"></span><b>قوالب بلوجر</b></a>   </li>       <li>          <a class="arabetutorial-item" href="الرابط"><span class="arabetutorial-icon arabetutorial-icon-service"></span><b>شروحات الربح</b></a>   </li>       <li>          <a class="arabetutorial-item" href="الرابط"><span class="arabetutorial-icon arabetutorial-icon-contact"></span><b>العاب</b></a>   </li>      <li>          <a class="arabetutorial-item"الرابط"><span class="arabetutorial-icon arabetutorial-icon-about"></span><b>اعمالنا</b></a></li>       <li>          <a class="arabetutorial-item" href="الرابط"><span class="arabetutorial-icon arabetutorial-icon-bob"></span><b>الدعم الفنى</b></a>   </li>  </ul>

عدل الروابط كلمة الرابط و الرابط الخاص بك

و غير اسم قائمة بما تشاء