الرئيسية إضافات تحسين المواقع تصنيفات تكنو ستيشن محطة التقنية محطة التقنية | Techno station all

الأربعاء، 29 يوليو 2015

✔ مجو

إضافة قائمة أفقية بتقنية Css3 بخمسة الوان مختلفة لمدونات بلوجر

زوار ومتابعي المدونة
أسعد الله أوقاتكم بكل خير ومحبة 
اليوم سوف نتعرف على إضافة رائعة جدا ، وهذه الإضافة بخمسة الوان مختلفة  ، طبعاً ونحن نعلم بأن القائمة في مدونات بلوجر هي عبارة عن المنارة التي يهتدي بها الزائر إلى مواضيع المدونة . 
- طريقة تركيب الإضافة :
1- أدخل إلى مدونتك وأختر | لوحة التحكم >> تخطيط >> إضافة أداة : HTML/JavaScript
2- أضف الكود في صندوق الإضافة ثم إحفظ .
ملاحظة : تسطيع أن تضيف الإضافة في أعلى اهيدر المدونة أيضاً عن طريق إضافة الكود تحت  الوسم : <body>  مباشرة .
وهذا الأمر يرجع لك أين تحب  أن تضيف الإضافة .

1- الشكل الأول :
الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<nav id="homeblog7-nav">
<!--homeblog7.blogspot.com nav starts-->
  <a class="homeblog7-link" href="#">الرئيسية</a>
  <a class="homeblog7-link" href="#">من نحن</a>
  <a class="homeblog7-link" href="#">سياستنا</a>
  <a class="homeblog7-link" href="#">اتصل بنا</a>
  <a class="homeblog7-link" href="#">الدعم الفني</a>
<!--homeblog7.blogspot.com nav ends-->
</nav>
<style>/*homeblog7.blogspot.com designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#homeblog7-nav {
  background: #52B3D9;
}
#homeblog7-nav a { color:#fff; text-decoration:none;}
.homeblog7-link {
  transition: 0.3s ease;
  background: #52B3D9; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #52B3D9;
  border-bottom: 4px solid #52B3D9;
  padding: 16px 0;
  margin: 0 20px;
}
.homeblog7-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*homeblog7.blogspot.com designing ends*/</style>

2- الشكل الثاني :

الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<nav id="homeblog7-nav">
<!--homeblog7.blogspot.com nav starts-->
  <a class="homeblog7-link" href="#">الرئيسية</a>
  <a class="homeblog7-link" href="#">من نحن</a>
  <a class="homeblog7-link" href="#">سياستنا</a>
  <a class="homeblog7-link" href="#">اتصل بنا</a>
  <a class="homeblog7-link" href="#">الدعم الفني</a>
<!--homeblog7.blogspot.com  nav ends-->
</nav>
 
<style>/*homeblog7.blogspot.com designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#homeblog7-nav {
  background: #36D7B7;
}
#homeblog7-nav a { color:#fff; text-decoration:none;}
.homeblog7-link {
  transition: 0.3s ease;
  background: #36D7B7; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #36D7B7;
  border-bottom: 4px solid #36D7B7;
  padding: 16px 0;
  margin: 0 20px;
}
.homeblog7-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*homeblog7.blogspot.com designing ends*/</style>

3- الشكل الثالث :

الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<nav id="homeblog7-nav">
<!--homeblog7.blogspot.com nav starts-->
  <a class="homeblog7-link" href="#">الرئيسية</a>
  <a class="homeblog7-link" href="#">من نحن</a>
  <a class="homeblog7-link" href="#">سياستنا</a>
  <a class="homeblog7-link" href="#">اتصل بنا</a>
  <a class="homeblog7-link" href="#">الدعم الفني</a>
<!--homeblog7.blogspot.com nav ends-->
</nav>
<style>/*homeblog7.blogspot.com designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#homeblog7-nav {
  background: #BE90D4;
}
#homeblog7-nav a { color:#fff; text-decoration:none;}
.homeblog7-link {
  transition: 0.3s ease;
  background: #BE90D4; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #BE90D4;
  border-bottom: 4px solid #BE90D4;
  padding: 16px 0;
  margin: 0 20px;
}
.homeblog7-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*homeblog7.blogspot.com designing ends*/</style>

4- الشكل الرابع :

الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<nav id="homeblog7-nav">
<!--homeblog7.blogspot.com nav starts-->
  <a class="homeblog7-link" href="#">الرئيسية</a>
  <a class="homeblog7-link" href="#">من نحن</a>
  <a class="homeblog7-link" href="#">سياستنا</a>
  <a class="homeblog7-link" href="#">اتصل بنا</a>
  <a class="homeblog7-link" href="#">الدعم الفني</a>
<!--homeblog7.blogspot.com nav ends-->
</nav>
<style>/*homeblog7.blogspot.com designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#homeblog7-nav {
  background: #F89406;
}
#homeblog7-nav a { color:#fff; text-decoration:none;}
.homeblog7-link {
  transition: 0.3s ease;
  background: #F89406; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #F89406;
  border-bottom: 4px solid #F89406;
  padding: 16px 0;
  margin: 0 20px;
}
.homeblog7-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*homeblog7.blogspot.com designing ends*/</style>

5- الشكل الخامس :

الكود
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<nav id="homeblog7-nav">
<!--homeblog7.blogspot.com nav starts-->
  <a class="homeblog7-link" href="#">الرئيسية</a>
  <a class="homeblog7-link" href="#">من نحن</a>
  <a class="homeblog7-link" href="#">سياستنا</a>
  <a class="homeblog7-link" href="#">اتصل بنا</a>
  <a class="homeblog7-link" href="#">الدعم الفني</a>
<!--homeblog7.blogspot.com nav ends-->
</nav>
<style>/*homeblog7.blogspot.com designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#homeblog7-nav {
  background: #BDC3C7;
}
#homeblog7-nav a { color:#fff; text-decoration:none;}
.homeblog7-link {
  transition: 0.3s ease;
  background: #BDC3C7; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #BDC3C7;
  border-bottom: 4px solid #BDC3C7;
  padding: 16px 0;
  margin: 0 20px;
}
.homeblog7-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*homeblog7.blogspot.com designing ends*/</style>


زيارة الموضوع الأصلي

مواضيع ذات الصلة

إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً

الموضوع التالي
الموضوع السابق

الاشتراك في: تعليقات الرسالة (Atom)