اعلان الهيدر

أضافة قائمة جانبية احترافية وبتقنية ccs



السلام عليكم ورحمه الله وبركاتة اللهم صلى على سيدنا محمد وعلى ال محمد

اهلا بكم متابعي مدونة هاي بلوجر وزوارة الكرام في هذه تدوينة جديدة وحصرية على مدونةهاي بلوجر

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

معاينة اضافة






شرح طريقة التركيب



  1. لوحة تحكم قالب 
  2. تحرير HTML
  3. ابحث عن هذا كود </head> 
  4. واضف هذا كود فوقة 


<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 غيير ايقونات الى الذي يناسبك

واضغط حفظ 

mohamed-alaa
كاتب المقالة
كاتب ومحرر اخبار اعمل في موقع هاي بلوجر .

جديد قسم : اضافات بلوجر

إرسال تعليق

اعلان اول الموضوع
اعلان اخر الموضوع
اعلان فوق مقالات ذات صله