[حصريا]قائمة جانبية احترافي عائمة بتقنية css من مهووسين الويب

الكاتب بتاريخ عدد التعليقات : 6


السلام عليكم ورحمة الله وبركاته معكم من ةجديد على مدونة مهووسين الويب مدونة كل شخص محترف ومدونة كل شئ حصري اليوم لدينا رائعة مكونة عن قائمة جانبية عائمة بالايقونات  الحاصة بها ويمكنك تبديلها في اي شئ تريد فلنذهب الان الى 



  • معاينة

  • الان نذهب الى 
    شرح تركيب الاضافة

    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>

      وغير الروابط واذا اردت غير الايقونات والاسماء واضغط حفظ واستمتع بالاضافة الجديدة لديك مع تحياتي 

    6 تعليقات على موضوع " [حصريا]قائمة جانبية احترافي عائمة بتقنية css من مهووسين الويب "

    أنا أدمين مدونة مذهل ويب :

    www.modhilweb.blogspot.com

    كلمني على الخاص :

    idrissiyassine8@gmail.com

    أرجو الرد على الرسالة


    سيتم عرضه اخي بأكثر من لون قريبا...

    اضافة رائعة وجميلة اخي شكرا لك :D

    ████ شروط التعليق ████
    1- يجب على التعليق أن يكون بلا روابط إشهارية
    2- أن يكون التعليق خاص بمحتوى التدوينة
    3- لإضافة كود حوله أولاً بمحول الأكواد
    4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
    5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
    6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

    الإبتسامات إخفاء