السلام عليكم ورحمه الله وبركاته
اهلا بكم متابعي مدونة برو يونس وزوارها الكرام في هذه التدوينة الجديدة والحصرية على مدونة برو يونس
سوف اقدم لكم اضافة احترافية ورائعة وبتقنية 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>
و بهدا تكون قد حصلت على قائمة جانبية احترافية لمدونتك
0 التعليقات Blogger 0 Facebook