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

زوار ومتابعي المدونة

أسعد الله أوقاتكم بكل خير ومحبة

اليوم سوف نتعرف على إضافة رائعة جدا ، وهذه الإضافة بخمسة الوان مختلفة ، طبعاً ونحن نعلم بأن القائمة في مدونات بلوجر هي عبارة عن المنارة التي يهتدي بها الزائر إلى مواضيع المدونة .

- طريقة تركيب الإضافة :

1- أدخل إلى مدونتك وأختر | لوحة التحكم >> تخطيط >> إضافة أداة : HTML/JavaScript

2- أضف الكود في صندوق الإضافة ثم إحفظ .

ملاحظة : تسطيع أن تضيف الإضافة في أعلى اهيدر المدونة أيضاً عن طريق إضافة الكود تحت الوسم : <body> مباشرة .

وهذا الأمر يرجع لك أين تحب أن تضيف الإضافة .

أنقر للمعاينة

click to view

1- الشكل الأول :

الكود

<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- الشكل الثاني :

الكود

<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- الشكل الثالث :

الكود

<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- الشكل الرابع :

الكود

<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- الشكل الخامس :

الكود

<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>

قوالب بلوجر

آخر الأخبار

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

هناك 4 تعليقات: