إعلانات
أكتب ملاحظاتك هنا
قائمة أصدقائك

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



استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف Monday في 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;
}

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




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



Monday
 
 

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

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 02.11.16 18:24

رائع يعطيك العافية على الموضوع دمت بخير

JAR7
 
 

الجنس : انثى
الدولة :
عدد المساهمات : 108
نقاط النشاط : 163
تقييمك : 4
تاريخ التسجيل : 27/02/2016

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في 02.11.16 21:59

كوود روووووعة

زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Monday في 03.11.16 13:43

أخت جوري إن شاء الله علي وعليك وعلى كل المسلمين




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



Monday
 
 

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

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Monday في 03.11.16 13:44

أخي أمير مجروح
جزاك الله خيرًا




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



Monday
 
 

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

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف عاشق النيل في 13.11.16 9:26

بارك الله فيك

عاشق النيل
 
 

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

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ساحر الابداع في 01.12.16 22:14

كود رائع جدا


ملاك ويب لخدمات الويب

ساحر الابداع
المشرف العام


الجنس : ذكر
الدولة :
عدد المساهمات : 73
نقاط النشاط : 94
تقييمك : 3
تاريخ التسجيل : 12/10/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Lord CODES في 03.12.16 0:13

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



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


Lord CODES
مشرف المنتديات العامة


الجنس : ذكر
الدولة :
عدد المساهمات : 514
نقاط النشاط : 732
تقييمك : 31
تاريخ التسجيل : 14/12/2014
العمر : 21

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ساحر الابداع في 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;
}

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

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


ملاك ويب لخدمات الويب

ساحر الابداع
المشرف العام


الجنس : ذكر
الدولة :
عدد المساهمات : 73
نقاط النشاط : 94
تقييمك : 3
تاريخ التسجيل : 12/10/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى