كيفية إضافة القائمة الأفقية العناوين بخاصية SHINING CSS3 للمدونتك blogger
القائمة الأفقية خيار أفضل بديل للتسميات أو أقسام.
أهمية القائمة الأفقية بما في ذلك : الحد من الحيز الذي تشغله الأقسام / التسميات وتشويه مظهر المدونة وتنسيق وتجميل اسلوب المدونة.
تم تصميم هذه القطعة عن طريق التكنولوجيا CSS3، ويمكنك إضافة هذه الأداة إلى بلوق الخاص بك مع طريقة سهلة جدا:
لاضافة هده القائمة إلى مدونتك:
1. اذهب إلى لوحة مدون → التخطيط → انقر على "إضافة أداة".
2. حدد "HTML/JavaScript" وإضافة رمز أدناه:
<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3lw0wskxetnfr9WuNF_h_D1J3bwUCDoGsPrzCPgIgWhs4jVLDn4WtXh-x1HBIAW-JXbek6JyB8tPLYCjqCOyHhH4ppJ-PqMm4CkbnTdBTGMObR7NroYLfX9RyQhquptnQe4ZvlgAa7o0/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://char7.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9fKddyoMy-SXve6NTEQ4CS4zxE9n1U3PKszlFHYb87CkXkoo8GFdQ9Bu0oRi3Mm2U7_deK_IHz2kUZ-BDeWJKR08Mv53-iMdq5t1HjY_hdBs_EcAe9A-MBLPyokXVJvIlZe9j-ZKOv6U/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
<ul class="menu">
<li><a href="http://char7.blogspot.com/">الصفحةالرئيسية</a></li>
<li><a href="http://char7.blogspot.com/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%85%D8%AC%D8%A7%D9%86%D9%8A%D8%A9">البرامج المجانية</a></li>
<li><a href="http://char7.blogspot.com/search/label/%D8%B4%D8%B1%D8%AD%20%D8%A8%D8%A7%D9%84%D9%81%D8%AF%D9%8A%D9%88">شروحات بالفيديو</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Tricks</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
ملاحظة3. - استبدال URL باللون الأزرق بروابط خاصة بك.
- استبدال العناوين باللون الأحمر بنفسك.
4. وأخيرا انقر على حفظ.
الآن يمكنك ان ترى النتيجة
Tags
شروحات بلوجر