السلام عليكم و رحمة الله تعالى و بركاته , إخواني الكرام زوار و متتبعي مدونة محمد. في هذا الموضوع سوف أتطرق إلى شرح كيفية إضافة قائمة أفقية جميلة تحتوي على ألوان مختلفة حيث أن كل زر فيها له لونه الخاص, هاته القائمة قد تم تخصيصها من طرف MBT عن طريق أكواد JQuery , و قد قمت بتطبيق بعض التعديلات عليها لتصبح جاهزة للتركيب في المدونات العربية. 
يمكنك مشاهدة مثال مباشر لهذه القائمة عبر الرابط التالي : Colorful Tabs
إذا أعجبتك هاته القائمة و تريد إضافتها إلى مدونتك كل ما عليك فعله هو تتبع الخطوات التالية :
- توجه إلى لوحة التحكم في مدونتك => اختر تصميم => ثم تحرير HTML. هذا بالنسبة لواجهة البلوجر القديمة.
- أما بالنسبة لواجهة البلوجر الجديدة فتوجه إلى => لوحة التحكم في مدونتك => ثم قالب=> بعد ذلك اختر تحرير HTML => ثم اضغط على متابعة.
- قم بتوسيع القالب.
- مستعينا بلوحة التحكم (Ctrl+F) ابحث عن الكود التالي : <head>
- بعد إيجاد الكود السابق قم بوضع الكود التالي أسفله مباشرة :
<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script>
- بعد ذلك توجه مرة أخرى إلى لوحة التحكم في مدونتك و اختر => عناصر الصفحة => ثم إضافة أداة HTML/javascript. و قم بنسخ ثم لصق الكود التالي داخل الأداة.
<!--START OF COLOURFUL TABS-->
<style>
/*------- Colourful Tabs Menu -------*/
.Nav-container {
border: 1px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-B2wfCbyzhD89G9zIO1XDNK0ikLF44kO_-ANVtkRm82As3v_Wm4vuj3oXwy9uMPXVUBKVT-NqOFMRv6RGdZaS6im9D32yHISujCRGrrvHerlnIs8bugEDqPmavwAxRR9DmuRk8F58Q_g/s400/menu-bgd.png) bottom right repeat-x;
position: relative;
margin: 0; padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
border-left: 1px solid #cfcfcf;
border-right: 0px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-B2wfCbyzhD89G9zIO1XDNK0ikLF44kO_-ANVtkRm82As3v_Wm4vuj3oXwy9uMPXVUBKVT-NqOFMRv6RGdZaS6im9D32yHISujCRGrrvHerlnIs8bugEDqPmavwAxRR9DmuRk8F58Q_g/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
font-size: 16px; font-family: arial, sans-serif;
list-style: none; margin: 0 auto; padding: 0;
width: 750px;
}
#nav ul {
margin: 0;
}
:focus {
outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
display: block;
float: right;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
line-height: 33px;
padding: 0 13px 0 10px;
color: #333;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdf7JXyiLBAuhVMyX8JupaufCbDB5WZqWWMbJ_X4IYgKS2NUdbfbjFHURFvVdZ-nU1E_xhn84jyESaNFxzYCfSBBxBM999qTEFwBNUXawYx6WOCkFH7ILD0inEnzMjziZWziqjNbEd-0/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: right; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: right; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }ul#nav li#link-home a {
padding: 0 33px 0 10px;
text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmahNIHuzYFQmsltIrPSaI048wJi9q8ogtbe5n_PFZs1o26rG4znuVwg5R0ETqK9MPzsbqkfhHpKFvAqoZVPY0XEc4mCjeem5Kn9ZrlZgsCjZpb6S0IRVjGWqYshXNdQhqwSf3Lo1-vFM/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmahNIHuzYFQmsltIrPSaI048wJi9q8ogtbe5n_PFZs1o26rG4znuVwg5R0ETqK9MPzsbqkfhHpKFvAqoZVPY0XEc4mCjeem5Kn9ZrlZgsCjZpb6S0IRVjGWqYshXNdQhqwSf3Lo1-vFM/s400/home-icon.png) right -33px no-repeat; }ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLgnkJgbyEnsVre8ErhjKIetucd087j9OlE4PtThJ2rzNMl9Dwe-MduZovbtyqq-rJUSVET01OKMeuYHfv3PzCjpoFfcEuH7KSglVmyGgqcmOpuPBoPX8K47BwMQJfuGCTplOHfoK8nc/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqf_mgLvbYUNWR8nLsm3a6vAOOIL-Q66Z_0fx7-vaXIfNVjW_0rMLl-hnAsy0WipI2JD9uq1aRhby_E6_xD5cakOTHxvNhBY_E3IQEKn2BWIQOgzfpuYMgmMe009ANsMVCXVt6pRLb_o/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZ-tJ9gU3O-FQK4YgA93nFivIGuTnJBNHWjpAwyD_HLEKlGBMRWlN77UdhSGBMrTvnjgQPynsuqpG1ykHFPevsNeQyMkAi2JQiOCm4qw9etgoj2LjzkV4af9Bg7qn1FMg5o76gJjhsu8/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVXEWBYQ0LNy7_aZWlVdzd6YP03OWN2pivimT7EgEgjv8lSskXljQh58gFR3Xz_0UF0yT2gKbooAreGsARh7nBXMkS48Jm1D2wWO4XHHRJ6b2bHYVFNM2nZERyKVScFI2x2Ea6LGuY4c/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRkK53h4pTR0OgxzxOv9a5Gmh6utZT-ClqBoWGKCPYZxhXgajGS_8gwiW5e28lO5ipxUskkCQmfDCBeuz5aj7mAD3xpeRzt4Mj5FlDc_Mhs85zd_h68-ufKo0jkl2lt_0Q8DyT43Fa9nY/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left; }
ul#nav li ul.sub-nav li a {
float: none;
background: none;
font-size: 11px;
text-transform: none;
color: #fff;
line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='Nav-container'>
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li><li class='top-link' id='mbt'><a href='#'>الصفحة الرئيسية</a>
</li><li class='top-link' id='link-entertainment'><a href='#'>إضافات البلوجر</a>
</li><li class='top-link' id='link-news'><a href='#'>فهرس المدونة</a>
</li><li class='top-link' id='link-life'><a href='#'>مواقع صديقة</a>
</li><li class='top-link' id='link-technology'><a href='#'>جوجل أدسنس</a>
</li><li style='clear: both;'/>
</li></ul>
</div>
<!--END OF COLOURFUL TABS—>
التعديل على الكود :
- غير # بروابط صفحاتك و غير أسماء الصفحات المشار إليها باللون الأزرق بما يناسبك.
- و لتغيير حجم القائمة ابحث عن الكود التالي 750px و غيره بما يناسب مدونتك.
» أي استفسار أنا رهن الإشارة :)
هذا كل شيء أتمنى أن تنال إعجابكم و إلى اللقاء في تدوينة أخرى إن شاء الل
بقلم حسن مرغادي
حسن مرغادي 19 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بالحماية المعلوماتية
هل أعجبك الموضوع ...؟
|
|
|
|
اشترك معنا و تابع جديد المدونة :) |
كن من متابعينا 
|
ليست هناك تعليقات:
إرسال تعليق