مساعدون الويب

شاطر
اذهب الى الأسفل
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
كود رائع جدا


ملاك ويب لخدمات الويب
http://malak-web.com/vb/index.php
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;
}

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

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


ملاك ويب لخدمات الويب
http://malak-web.com/vb/index.php
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى