حصريا: اضافة قائمة عمودية احترافية في السايدبار !


السلام عليكم و رحمة الله و بركاته
اليوم نقدم لكم اضافة من اعتقادنا ان الجميع يبحث عنها 
هي اضافة قائمة في السايدبار شكلها احترافي حقا ! 

------------------------------------------------------------------------

قم بالبحث عن < /head> باستخدام Ctrl+F و ضع الكود الاتي فوقها

<style>
.sidebarmenu {
width: 100%;
margin-bottom: 20px;
float: right;
box-shadow: 0px 0px 5px -3px #000;
}
.sidebarmenu h2 {
text-align: right;
border-bottom: 3px solid #112B47;
font-size: 20px;
line-height: 28px;
padding: 5px 20px 6px 36px;
color: #112B47;
float: right;
width: 100%;
background: #FFF;
}
.sidebarmenu .sidebarmm {
display: block;
height: 40px;
line-height: 40px;
width: 31px;
text-align: center;
font-size: 18px;
color: #D0D0D0;
float: left;
margin-right: -36px;
position: relative;
}
.sidebarmenu .sidebarmm:hover {
color: #FF0000;
}
.sidebarmenu ul li {
float: right;
width: 100%;
margin: 0px 0px 0px 0px;
background: #FFFFFF;
border-bottom: 1px solid #E8F4FE;
}
.sidebarmenu ul li:last-of-type {
border-bottom: none;
}
.sidebarmenu ul li:hover {
background: #fff;
}
.sidebarmenu ul li a {
display: block;
padding: 3px 10px;
font-size: 15px;
color: #2A4057;
line-height: 30px;
}
.sidebarmenu ul li a:hover {
color: #FF0000;
}
.sidebarmenu ul li a:hover i{
color: #FF0000;
}
.sidebarmenu ul li i {
line-height: 30px;
width: 30px;
text-align: center;
font-size: 17px;
color: black;
}
</style>

ضع الكود الاتي في المكان الذي تريده من خلال التخطيط او الHtml

<div class="sidebarr">
<div class="sidebarmenu">
<h2>جديد 2016</h2><a class="sidebarmm" href=""><i class="fa fa-arrow-left"></i></a>
<ul>
<li><a href="/search/label/أخبار"><i class="fa fa-globe"></i>آخر الأخبار</a></li>
<li><a href="/search/label/مقالات"><i class="fa fa-files-o"></i>مقالات</a></li>
<li><a href="/search/label/تسريبات"><i class="fa fa-user-secret"></i>تسريبات</a></li>
<li><a href="/search/label/براءات%20الإختراع"><i class="fa fa-files-o"></i>براءات الإختراع</a></li>
</ul>
</div>
<div class="sidebarmenu">
<h2>المواقع</h2><a class="sidebarmm" href="/search/label/مواقع"><i class="fa fa-arrow-left"></i></a>
<ul>
<li><a href="/search/label/مواقع%20البرمجة"><i class="fa fa-pencil"></i>مواقع البرمجة</a></li>
<li><a href="/search/label/مواقع%20التصميم"><i class="fa fa-pencil"></i>مواقع التصميم</a></li>
<li><a href="/search/label/مواقع%20التحميل"><i class="fa fa-download"></i>مواقع التحميل</a></li>
<li><a href="/search/label/مواقع%20الترفيه"><i class="fa fa-pencil"></i>مواقع الترفيه</a></li>
</ul>
</div>
<div class="sidebarmenu">
<h2>التطبيقات و البرامج</h2><a class="sidebarmm" href="/search/label/التطبيقات%20و%20البرامج"><i class="fa fa-arrow-left"></i></a>
<ul>
<li><a href="/search/label/تطبيقات%20أندرويد"><i class="fa fa-android"></i>أندرويد</a></li>
<li><a href="/search/label/تطبيقات%20أي%20أو%20إس"><i class="fa fa-apple"></i>أي أو إس</a></li>
<li><a href="/search/label/برامج%20ويندوز"><i class="fa fa-windows"></i>ويندوز</a></li>
<li><a href="/search/label/تطبيقات%20ويندوز%20فون"><i class="fa fa-windows"></i>ويندوز فون</a></li>
</ul>
</div>
<div class="sidebarmenu">
<h2>إضافات البرامج</h2><a class="sidebarmm" href="/search/label/إضافات%20البرامج"><i class="fa fa-arrow-left"></i></a>
<ul>
<li><a href="/search/label/إضافات%20جوجل%20كروم"><i class="fa fa-chrome"></i>جوجل كروم</a></li>
<li><a href="/search/label/إضافات%20موزيلا%20فايرفوكس"><i class="fa fa-firefox"></i>موزيلا فايرفوكس</a></li>
</ul>
</div>
<div class="sidebarmenu">
<h2>أنظمة التشغيل</h2><a class="sidebarmm" href="/search/label/أنظمة%20التشغيل"><i class="fa fa-arrow-left"></i></a>
<ul>
<li><a href="/search/label/أندرويد"><i class="fa fa-android"></i>أندرويد</a></li>
<li><a href="/search/label/أي%20أو%20إس"><i class="fa fa-apple"></i>أي أو إس</a></li>
<li><a href="/search/label/ويندوز"><i class="fa fa-windows"></i>ويندوز</a></li>
<li><a href="/search/label/لينكس"><i class="fa fa-linux"></i>لينكس</a></li>
</ul>
</div>
<div class="sidebarmenu">
<h2>الأجهزة</h2><a class="sidebarmm" href="/search/label/الأجهزة"><i class="fa fa-arrow-left"></i></a>
<ul>
<li><a href="/search/label/حواسيب"><i class="fa fa-desktop"></i>حواسيب</a></li>
<li><a href="/search/label/هواتف%20ذكية"><i class="fa fa-mobile"></i>هواتف ذكية</a></li>
<li><a href="/search/label/حواسيب%20لوحية"><i class="fa fa-tablet"></i>حواسيب لوحية</a></li>
<li><a href="/search/label/ساعات%20ذكية"><i class="fa fa-clock-o"></i>ساعات ذكية</a>
</li>
</ul>
</div>
</div>
</div>
يمكن معاينة القائمة من خلال الرابط الاتى ..
يمكنك تحميل الشرح من الزر الاتى ..
نرجو منكم ترك تعليق به بريدكم لارسال الباسورد الخاص بلملف لنمنع الاضافات الخاصة بنا للوصول للنصابين و السارقين..
يتضمن الملف " كود الاضافة ,, شرح الاضافة بالفيديو و شرح نصي .. "
نتمني ترك تعليق لتشجيعنا على نشر المزيد ^^



Mostlzmat-Banner9e83d.gif

هناك 5 تعليقات

  1. الردود
    1. من فضلك اترك بريدك لارسال باسورد فك الضغط لاننا حظرنا بعض الاشخاص من الحصول علي قوالبنا و اضافتنا لانهم سرقة و نصابين مثل امني المعلوميات ..

      حذف
  2. باسورد فك الضغك
    www.mostlzmat.com

    ردحذف

سوف يتم ارسال ما تريد من معلومات او قوالب خلال يوم قم بمتابعة بريدك ^^.

المتابعون

تابعنا علي مواقع التواصل الاجتماعي

جميع الحقوق محفوظة لـ مستلزمات ©2017