شريط علوي وشاحي جميل الشكل لمدونات بلوجر اضافة بلوجر حصريه
https://www.techpointblog.com/2013/01/modern-ribbon-style-navigation-bar-for.html
![Ribbon+Style+navigation+bar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Fp6QjJHDPVvwOKUfqTukN_7hlKCN8WaRZfgr8n4UzcWYUGCHpj6H5ksTvHpTi_pPjghnHA7M7Tx-G2wbtd05iEA6yEiAG5MqlG4kUAiymD9jpohQHqAcuy95hsI_faGZE-2HecoQykI/s320/Ribbon+Style+navigation+bar.png)
السلام عليكم!
يسرني ان اشرح لكم في هذه التدوينيه كيفية اضافة شريط اعلى المدونه
كما في الصوره اعلاه الموضوع مترجم من الانجليزيه للعربيه من المصدر
الان اترككم مع كيفية التركيب:
- اذهب للوحة تحكم مدونتك .
- القالب.
- تحرير HTML'
- متابعه و اشر على توسيع القوالب.
- اضغط Ctrl+F من لوحة المفاتيح.
- ابحث عن الوسم التالي:
]]></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>
الان عدل الكتابه في الازرار و اضف رابط الزر بدل "#"
واضغط حفظ.
و اي استفسار يمكنك وضعه في تعليق و ايضا ارجو منك متابعتي على تويتر
و الاستراك في المدونه
تحياتي..