السلام عليكم ورحمه الله وبركاتة اللهم صلى على سيدنا محمد وعلى ال محمد
اهلا بكم متابعي مدونة حمزه ويب وزوارة الكرام في هذه تدوينة جديدة وحصرية على مدونة حمزه ويب
راح نقدم لكم اضافة احترافية ورائعة وبتقنية css وهي عبارة عن قائمة
جانبية احترافية ورائعة ويستفاد منة جميع مدونات
معاينة اضافة- لوحة تحكم قالب
- تحرير HTML
- ابحث عن هذا كود </head>
- واضف هذا كود فوقة
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
ثم ابحث عن هذا كود ]]></b:skin>
واضف هذا كود فوقة
.menu-right{top:226px;}}/**/.menu-right{background:none repeat scroll 0 0 #fff;border-left:1px solid #F0F0F0;top:166px;width:41px;position:absolute;z-index:9999999;}.menu-right ul li{border-bottom:1px solid #EBEBEB;box-shadow:0 1px 0 0 #FFFFFF;}.menu-right .na{/**/width:0;right:41px;padding:0;position:absolute;overflow:hidden;/**/font-family:droid arabic kufi;font-size:16px;font-weight:bold;letter-spacing:0.6px;white-space:nowrap;line-height:39px;/**/-webkit-transition:0.25s;/**/-moz-transition:0.25s;transition:0.25s;}.menu-right.ss:hover .ka{color:#FFFFFF;}.menu-right .ss{display:block;height:39px;text-align:center;position:relative;width:41px;z-index:99999;/**/}/**/.menu-right .ss:hover .na{width:auto;padding:0 20px;overflow:visible;}/**/.menu-right .hom:hover{background:none repeat scroll 0 0 #00BAC7;}.menu-right .hom .na{background:none repeat scroll 0 0 #00BAC7;}.fa-home{color:#00BAC7;}/**/.menu-right .win:hover{background:none repeat scroll 0 0 #8F8898;}.menu-right .win .na{background:none repeat scroll 0 0 #8F8898;}.fa-windows{color:#8F8898;}/**/.menu-right .cog:hover{background:none repeat scroll 0 0 #43AF95;}.menu-right .cog .na{background:none repeat scroll 0 0 #43AF95;}.fa-cogs{color:#43AF95;}/**/.menu-right .goo:hover{background:none repeat scroll 0 0 #F3594D;}.menu-right .goo .na{background:none repeat scroll 0 0 #F3594D;}.fa-google-plus{color:#F3594D;}/**/.menu-right .des:hover{background:none repeat scroll 0 0 #5792B2;}.menu-right .des .na{background:none repeat scroll 0 0 #5792B2;}.fa-desktop{color:#5792B2;}/**/.menu-right .unl:hover{background:none repeat scroll 0 0 #F6C231;}.menu-right .unl .na{background:none repeat scroll 0 0 #F6C231;}.fa-unlock-alt{color:#F6C231;}/**/.menu-right .che:hover{background:none repeat scroll 0 0 #C61F89;}.menu-right .che .na{background:none repeat scroll 0 0 #C61F89;}.fa-check-square{color:#C61F89;}/**/.menu-right .thu:hover{background:none repeat scroll 0 0 #F75940;}.menu-right .thu .na{background:none repeat scroll 0 0 #F75940;}.fa-thumbs-o-up{color:#F75940;}/**/.menu-right .dow:hover{background:none repeat scroll 0 0 #4aa3df;}.mdwanblog {margin-top: 0;position: fixed;top: 0!important;z-index: 9999999;}.menu-right .dow .na{background:none repeat scroll 0 0 #4aa3df;}.menu-right .fa-cloud-download{color:#4aa3df;}/**/.menu-right .arc:hover{background:none repeat scroll 0 0 #34495e;}.menu-right .arc .na{background:none repeat scroll 0 0 #34495e;}.arc .fa-archive{color:#34495e;}/**/.menu-right .exc:hover{background:none repeat scroll 0 0 #f1c40f;}.menu-right .exc .na{background:none repeat scroll 0 0 #f1c40f;}.fa-exclamation-triangle{color:#f1c40f;}/**/.menu-right .plu:hover{background:none repeat scroll 0 0 #9b59b6;}.menu-right .plu .na{background:none repeat scroll 0 0 #9b59b6;}.fa-plus{color:#9b59b6;}.fa-minus{color:#9b59b6;}/**/.menu-right .ka{font-size:21px;line-height:36px;transform:rotate(0deg);transition:all 0.5s ease 0s;}.menu-right .na{color:#FFFFFF;}.menu-right .ss:hover .ka{color:#FFFFFF;transform:rotate(360deg);transition:all 0.5s ease 0s;}
ثم ابحث عن هذا كود <body>
واضف هذا كود تحتة مباشرة
<div class="menu-right mdwanblog" style="height: 2681px;"><ul><li><a class="ss hom" href="/"><i class="ka fa fa-home"></i><span class="na">الرئيسية </span></a></li><li><a class="ss win" href="#"><i class="ka fa fa-windows"></i><span class="na">الويندوز </span></a></li><li><a class="ss cog" href="#"><i class="ka fa fa-cogs"></i><span class="na">البرامج </span></a></li><li><a class="ss goo" href="#"><i class="ka fa fa-google-plus"></i><span class="na">جوجل </span></a></li><li><a class="ss des" href="#"><i class="ka fa fa-desktop"></i><span class="na">انترنت </span></a></li><li><a class="ss unl" href="#"><i class="ka fa fa-unlock-alt"></i><span class="na">الحماية </span></a></li><li><a class="ss che" href="#"><i class="ka fa fa-check-square"></i><span class="na">شروحات عامة </span></a></li><li><a class="ss thu" href="#"><i class="ka fa fa-thumbs-o-up"></i><span class="na">مواقع مفيدة </span></a></li><li><a class="ss dow" href="#"><i class="ka fa fa-cloud-download"></i><span class="na">تحميل </span></a></li><li><a class="ss arc" href="/p/archive.html"><i class="ka fa fa-archive"></i><span class="na">الارشيف </span></a></li><li><a class="ss exc" href="/404"><i class="ka fa fa-exclamation-triangle"></i><span class="na">خطا 404 </span></a></li></ul></div>
اذا تريد غيير كلمات واذا تفهم في HTML غيير ايقونات الى الذي يناسبك
واضغط حفظ
وانتهى موضوعنا الى هنا
وانتظروا كل جديد وحصري من حمزه ويب
في امان الله
اهلا بك عزيزي زائر , هنا يمكنك تعليق على موضوع
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r