bloggerarchive
247125322047940
تحميل

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






Ribbon+Style+navigation+bar


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

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

الان اترككم مع كيفية التركيب:
  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>
الان عدل الكتابه في الازرار و اضف رابط الزر بدل "#"
واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر 
و الاستراك في المدونه 
تحياتي..



ما رأيك: 
ويب 3095667098493572225

إرسال تعليق تعليقات الموقع

  1. تعجبني طريقة جلبك للحصريات وامتناعك عن النسخ واللصق وهذه علامة علا قوة عزيمتك على الاستمرار واصل يا فتى...
    chatolk

    ردحذف

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!