اهلين اخي
اول شىء با مكانك الحصول عالى قوالب جاهزة بدون ماتتعب نفسك بها كل الاضافات
ثانيا :
شرح كيفية إضافة قائمة أفقية جميلة تحتوي على ألوان مختلفة حيث أن كل زر فيها له لونه الخاص, هاته القائمة قد تم تخصيصها من طرف MBT (http://mybloggertricks.com/) عن طريق أكواد JQuery , و قد قمت بتطبيق بعض التعديلات عليها لتصبح جاهزة للتركيب في المدونات العربية.
http://lh3.ggpht.com/-LP96RmNhSHg/UE9Q9BmnbMI/AAAAAAAABng/ZH6NVzy4pc0/colorfultabsforblogger_thumb5.jpg?imgmax=800 (http://lh4.ggpht.com/-7kfwVqBpa88/UE9Q5Dps3gI/AAAAAAAABnY/V_KbSqyZpCA/s1600-h/colorfultabsforblogger7.jpg)
http://lh6.ggpht.com/-7Ud5SeUUqFw/UE9RGJxu8TI/AAAAAAAABnw/fGPa1FNN4tI/separator1_thumb2.png?imgmax=800 (http://lh3.ggpht.com/-u93Ab8NKnkE/UE9Q_0VAziI/AAAAAAAABno/C68psFVmaM8/s1600-h/separator14.png)
http://lh5.ggpht.com/-08Ap-NbE3-E/UE9RT-lqqMI/AAAAAAAABoA/i7nTBOKXHIA/Sanstitre1_thumb9.gif?imgmax=800 (http://lh3.ggpht.com/-zMWRx1XDBcg/UE9ROJDTINI/AAAAAAAABn4/0ZDNaJ1I2QY/s1600-h/Sanstitre113.gif)
إذا أعجبتك هاته القائمة و تريد إضافتها إلى مدونتك كل ما عليك فعله هو تتبع الخطوات التالية :
توجه إلى لوحة التحكم في مدونتك => اختر تصميم => ثم تحرير 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(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/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(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/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(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/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(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/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(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right -33px no-repeat; }
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/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 و غيره بما يناسب مدونتك.
الموضوع منقول للمساعدة
بالتوفيق