زوار ومتابعي المدونة
أسعد الله أوقاتكم بكل خير ومحبة
اليوم سوف نتعرف على إضافة رائعة جدا ، وهذه الإضافة بخمسة الوان مختلفة ، طبعاً ونحن نعلم بأن القائمة في مدونات بلوجر هي عبارة عن المنارة التي يهتدي بها الزائر إلى مواضيع المدونة .
- طريقة تركيب الإضافة :
1- أدخل إلى مدونتك وأختر | لوحة التحكم >> تخطيط >> إضافة أداة : HTML/JavaScript
2- أضف الكود في صندوق الإضافة ثم إحفظ .
ملاحظة : تسطيع أن تضيف الإضافة في أعلى اهيدر المدونة أيضاً عن طريق إضافة الكود تحت الوسم : <body> مباشرة .
وهذا الأمر يرجع لك أين تحب أن تضيف الإضافة .
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>
الكود
<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>
الكود
<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>
الكود
<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>
الكود
<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>
احسنتم اضافه رائعه ولكن هل يمكنني تصغير ارتفاع الشريط وتغيير نوع الكتابه وتغيير اللون الى الاسود
ردحذفأخي صوت الحق سلامٌ لك ، تسطتيع أن تغير في إرتفاع الشريط وذلك عن طريق تغير القيم في ما يلي :
حذف- margin-top: 40px;
- padding: 20px;
- box-shadow: 2px 2px 8px
- font-size: 20px;
- border-top: 4px solid
- border-bottom: 2px solid
- padding: 16px
- margin: 0 20px;
- border-top: 4px solid
- border-bottom: 4px solid
- padding: 6px 0;
ههههههههه يعني بدك تعبلك أشوي تغير في هذه القيم حتى تستقيم معك أرتفاع الإضافة .
أما بالنسبة لتغير نوع الخط إبحث في الكود عن " font-family: " وغيره بالخط الذي يناسبك .
أما بالنسبة تغير خلفية الإضافة إبحث في الكود عن " background: #BE90D4; " ولون الخلفية مثلاً " #BE90D4 " مكرر أكثر من مرة قم بتغيره إلى اللون قيمة اللون الأسود .
مع تمنياتنا لك بالتوفيق .
فريق عمل المدونة :)
شكرا لكم على التوضيح
ردحذفأخي صوت الحق .
حذفأهلاً بك معنا ونتمنى لك قضاء أسعد الأوقات في ربوع مدونتنا .
فريق عمل المدونة (f)