مساعدون الويب
شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
 
 
ذكر
عدد المساهمات : 151
نقاط النشاط : 207
تقييمك : 2
تاريخ التسجيل : 03/10/2016
معاينة صفحة البيانات الشخصي للعضو

سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 01.11.16 10:21
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

بمناسبة ذكرى الثورة 1 نوفمبر
أقدم لكم كود شريط التنقل HTML و CSS
صورة للكود :

الكود :
HTML :

الكود:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> </link>
<div class="icon-bar">
        <center>
  <a class="active" href="#"><i class="fa fa-home"></i></a>
          <a href="http://arabi.123.st/forum"><i class="fa fa-comments-o"></i></a>
  <a href="http://arabi.123.st/search"><i class="fa fa-search"></i></a>
          <a href="http://arabi.123.st/privmsg?folder=inbox"><i class="fa fa-envelope"></i></a>
        <a href="http://arabi.123.st/profile?mode=editprofile"><i class="fa fa-users"></i></a>
        <a href="http://arabi.123.st/register"><i class="fa fa-user-plus"></i></a>
        <a href="http://arabi.123.st/login?logout=1"><i class="fa fa-power-off"></i></a>
        <a href="http://arabi.123.st/login?logout=1"><i class="fa fa-sign-in"></i></a>
        </center>
      </div>

مع استبدال
arabi.123.st
برابط منتداك
و CSS :

الكود:
.icon-bar {
           position:fixed;
           top:0%;
    width: 100%;
    text-align: center;
    background-color: #555;
    overflow: auto;
}

.icon-bar a {
    width: 12%;
    padding: 12px 0;
    float: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #4CAF50;
}

نرجو منك أخي الكريم ردًا إذا كنت عضوًا
ولو بابتسامة فقط
فهذا يعني لنا الكثير
دمتم في رعاية الله وحفظه




                  
                  
سبحان الله الرحيم سبحان الله وبحمده


avatar
 
 
انثى
عدد المساهمات : 109
نقاط النشاط : 165
تقييمك : 5
تاريخ التسجيل : 27/02/2016
معاينة صفحة البيانات الشخصي للعضوhttp://www.t3qnyiat.com

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 02.11.16 18:24
رائع يعطيك العافية على الموضوع دمت بخير
avatar
زائر
زائر

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 02.11.16 21:59
كوود روووووعة
avatar
 
 
ذكر
عدد المساهمات : 151
نقاط النشاط : 207
تقييمك : 2
تاريخ التسجيل : 03/10/2016
معاينة صفحة البيانات الشخصي للعضو

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 03.11.16 13:43
أخت جوري إن شاء الله علي وعليك وعلى كل المسلمين




                  
                  
سبحان الله الرحيم سبحان الله وبحمده


avatar
 
 
ذكر
عدد المساهمات : 151
نقاط النشاط : 207
تقييمك : 2
تاريخ التسجيل : 03/10/2016
معاينة صفحة البيانات الشخصي للعضو

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 03.11.16 13:44
أخي أمير مجروح
جزاك الله خيرًا




                  
                  
سبحان الله الرحيم سبحان الله وبحمده


 
 
ذكر
عدد المساهمات : 17
نقاط النشاط : 29
تقييمك : 0
تاريخ التسجيل : 27/02/2016
معاينة صفحة البيانات الشخصي للعضو

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 13.11.16 9:26
بارك الله فيك
avatar
الإدارة العليا
الإدارة العليا
ذكر
عدد المساهمات : 89
نقاط النشاط : 109
تقييمك : 2
تاريخ التسجيل : 12/10/2016
معاينة صفحة البيانات الشخصي للعضو

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 01.12.16 22:14
كود رائع جدا


ملاك ويب لخدمات الويب
avatar
المراقب العام
المراقب العام
ذكر
عدد المساهمات : 586
نقاط النشاط : 813
تقييمك : 32
تاريخ التسجيل : 14/12/2014
العمر : 22
معاينة صفحة البيانات الشخصي للعضو

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 03.12.16 0:13
شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك



لكل ناجح ألف تقليد ، تقليد الشكل سهل ، أما المضمون فمن المستحيل تقليده 

avatar
الإدارة العليا
الإدارة العليا
ذكر
عدد المساهمات : 89
نقاط النشاط : 109
تقييمك : 2
تاريخ التسجيل : 12/10/2016
معاينة صفحة البيانات الشخصي للعضو

رد: سلسلة الأول نوفمبر - كود شريط التنقل على أحلى منتدى

في 10.12.16 22:43
Monday كتب:
بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

بمناسبة ذكرى الثورة 1 نوفمبر 
طريقة التركيب - لوحة الادارة - مظهر المنتدى - القوالب والتومبيلات - قالب overall_header بعد الكود الاصلي للتومبيلات  و CSS
صورة للكود :

الكود :
HTML :

الكود:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> </link>
<div class="icon-bar">
        <center>
  <a class="active" href="#"><i class="fa fa-home"></i></a>
          <a href="http://arabi.123.st/forum"><i class="fa fa-comments-o"></i></a>
  <a href="http://arabi.123.st/search"><i class="fa fa-search"></i></a>
          <a href="http://arabi.123.st/privmsg?folder=inbox"><i class="fa fa-envelope"></i></a>
        <a href="http://arabi.123.st/profile?mode=editprofile"><i class="fa fa-users"></i></a>
        <a href="http://arabi.123.st/register"><i class="fa fa-user-plus"></i></a>
        <a href="http://arabi.123.st/login?logout=1"><i class="fa fa-power-off"></i></a>
        <a href="http://arabi.123.st/login?logout=1"><i class="fa fa-sign-in"></i></a>
        </center>
      </div>

مع استبدال
arabi.123.st
برابط منتداك
و CSS :

الكود:
.icon-bar {
           position:fixed;
           top:0%;
    width: 100%;
    text-align: center;
    background-color: #555;
    overflow: auto;
}

.icon-bar a {
    width: 12%;
    padding: 12px 0;
    float: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #4CAF50;
}

نرجو منك أخي الكريم ردًا إذا كنت عضوًا
ولو بابتسامة فقط
فهذا يعني لنا الكثير
دمتم في رعاية الله وحفظه

تم التعديل على قالب الكود 


ملاك ويب لخدمات الويب
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى