شريط علوي وشاحي جميل الشكل لمدونات بلوجر اضافة بلوجر حصريه

السلام عليكم!

يسرني ان اشرح لكم في هذه التدوينيه كيفية اضافة شريط اعلى المدونه 

كما في الصوره اعلاه الموضوع مترجم من الانجليزيه للعربيه من المصدر

الان اترككم مع كيفية التركيب:

1. اذهب للوحة تحكم مدونتك .
2. القالب.
3. تحرير HTML'
4. متابعه و اشر على توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. ابحث عن الوسم التالي:

  ]]></b:skin>

7. قم بلصق الكود التالي فوقه مباشره:

/* The CSS Code for the menu starts here blogger-archive.com */

#navigation_container {
 margin: 0 auto;
 width: 900px;
}
#navigation2 li {
        list-style: none;
        display: block;
        float: left;
  margin: 1em 0.8em;
}
#navigation2 li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0;
        line-height: 28px;
}
#navigation2 li.active a:hover,
#navigation2 li a:hover {
        margin-top: 2px;
}

#navigation2 li.active {
        font-style: italic;
}
#navigation2 li.active a {
}
.rectangle {
   background: #e5592e;
   height: 62px;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   
   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
 border-radius: 2px;
 
   z-index: 500; /* the stack order: foreground */
   margin: 3em 0;
}
.l-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -5px;
   left: -50px;
}

.l-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
   float: left;
   top: -45px;
   left: -150px;
}
.r-triangle-top {
   border-color: #d9542b transparent transparent;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        right: -45px;
        top: -107px;
}
.r-triangle-bottom {
   border-color: transparent transparent #d9542b;
   border-style:solid;
   border-width:50px;
   height:0px;
   width:0px;
   position: relative;
        float: right;
        top: -149px;
        right: -145px;
}

7.الان اضغط حفظ.

8.الان اضغط على تخطيط و اضف اداة "HTML/Javascript"

9.الصق الكود التالي:

الشريط ذا الكتابه البيضاء:

  طبعا في الكود تم استبدال الكتابه الانجليزيه إلى العربيه

فيجب عليك تعديل الروابط.

<div id="navigation_container">

<!-- the left side of the fork effect -->
   <div class="l-triangle-top"></div>
   <div class="l-triangle-bottom"></div>

<!-- the ribbon body -->

   <div class="rectangle">
   
<!-- the navigation links -->
    
  <ul id="navigation2">
       <li><a href="#"> الرائيسيه</a></li>
       <li><a href="#"> عن الموقع</a></li>
       <li><a href="#"> الاتصال بنا</a></li>
       <li><a href="#"> تعدي</a></li>
       <li><a href="www.blogger-archive.com/"> الدعم</a></li>
     </ul>
   
<!-- end the ribbon body -->
   </div>
   
<!-- the right side of the fork effect -->
   <div class="r-triangle-top"></div>
   <div class="r-triangle-bottom"></div>

<!-- end container -->
</div>

الان عدل الكتابه في الازرار و اضف رابط الزر بدل "#"

واضغط حفظ.

و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر 

و الاستراك في المدونه 

تحياتي..