1- الدخول الى قالب ثم تحرير HTML ونقوم بالبحث (CTRL+F) عن الكود التالى
]]></b:skin>
2- نضع الكود التالى (الكود الخاص بالـCSS) فوق السابق أو قبله
/* Header------www.abu-iyad.com----------------- */ #header_mainmenu { margin-bottom:10px; } #header_mainmenu a { float:right; display:block; color:#fff; text-decoration:none; } #header_mainmenu .mm_logo, #header_mainmenu .mm_home, #header_mainmenu .mm_wishlist, #header_mainmenu .mm_account, #header_mainmenu .mm_checkout, #header_mainmenu .mm_shopcart { margin-right: 3px; width:265px; height:150px; } #header_mainmenu a.mm_home, #header_mainmenu a.mm_wishlist, #header_mainmenu a.mm_account, #header_mainmenu a.mm_checkout, #header_mainmenu a.mm_shopcart { margin-right: 3px; width:100px; padding-top:115px; padding-left:20px; padding-right:20px; height:35px; } #header_mainmenu .mm_logo { background:#FFB200 no-repeat center center; } #header_mainmenu a.mm_home { background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQC5wNorfczim9al29saWOlqR5N45Ec3CHdbk1_in1AqQUT8-dyMS56Daa8EYx0rTZ0rUh4z27-AEGI_8E1pOjh0leNWJ-BNLzFOhFjWIddlerZY1CBTP-zRiZ4KubXVIJrW1eyUBkyY/s1600/home.png) center 20px no-repeat; } #header_mainmenu a.mm_wishlist { background:#6cbe42 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7EEkAOAlHqC6o10od6atE1yB-epzomN35niI9NYLsqO9ugF8fEOOZ0gwT7HWZjrphuDWDu1zjGtqv4vT4f2lHdfGOT45nVfXaj186zkxGVX_ObSxiyf7GXQHFYTFGt6qhHOnP8J1fN-k/s1600/wishlist.png) center 20px no-repeat; } #header_mainmenu a.mm_account { background:#0066B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cy-vz_2MX_EmzURO9R-EA9cmablIAKWZGS2p4TUu8-ELaYAzV1JfWbkdVc8Jp1npQ11ZSj1I0WMwsRNYXB5EDMwhGvPL-xGHrfxBXvbd8inE2xwW3c5YYuG3bSQpzoMg5hAZ4crIVnc/s1600/account.png) center 20px no-repeat; } #header_mainmenu a.mm_checkout { background:#6cbe42 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYRFkrX_N3Wcw75vePdRyuzrEOeZILfyvsme6TnjcmnGv-odaZetjAZ2fxGbJyOxgA3P5gBhRAjX1bud-7ZPoTj2SGMAr26PIqNMX0ZkwxCtMZBpItFplN3D2YdJSJn4eD3MfBBkFOf4/s1600/checkout.png) center 20px no-repeat; } #header_mainmenu .mm_shopcart { background:#58bae9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7E0wFY3XeZURyyEwufERJgX5XT5yYewiGjs53tIeWeFoSaU1WnG3we9u0odNDK6WbUXtell704NtiwPBMp3Fpc78wkhn_LNWZS6MGiz_iFCBhXAYXjA7njdNNcUP7spl1angrOu8H8Q/s1600/cart.png) center 20px no-repeat; float:left; display:block; text-decoration:none; margin-right: 0px; width:100px; padding-top:110px; padding-left:20px; padding-right:20px; height:40px; position:relative; }
/* Nav Bar----------------------------------------------- */
.nav-container { } #nav { margin-bottom:10px; } #nav li { float: left; padding: 12px 0px 12px 15px; } #nav li a { color: #4B4747; } #nav li a { text-transform: uppercase; border-right:1px solid #E0E0E4; padding-right:15px; } #nav li:hover { background: #008c8d; } #nav li:hover a { color:#fff; border-right: 1px solid #008c8d; } #nav li.over, #nav li:hover, #nav li.active { } #nav li a span { } #nav li.over.parent { } #nav .homelink { } #nav .custommenuitem { float: right; } #nav .custommenuitem a { border-right:none; } #nav li.custommenuitem { } #nav li.block_li a span, #nav li.block_li a { cursor: default; } #nav li div.custom_menu_item { position: absolute; z-index: 1500; width: 950px; margin-left: 0px; top:42px; }
/* Animation---------------------------------------------- */
a, a:visited, a b {
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-o-transition: color 200ms linear;
-ms-transition: color 200ms linear;
transition: color 200ms linear;
}
a:hover {
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-o-transition: color 200ms linear;
-ms-transition: color 200ms linear;
transition: color 200ms linear;
}
#header_mainmenu a {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#header_mainmenu a:hover {
-webkit-transform: scale(0.95,0.95);
-moz-transform: scale(0.95,0.95);
-o-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
}
#header_mainmenu a {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}
3- نقوم بالبحث عن content.width ونقوم بتغيير عرض الصفحة لـ 1130 وهذا
لنضمن ظهور الاضافة بكامل محتوياتها بشكل سليم واذا لم تفضل تغيير عرض
الصفحة لمدونتك يمكنك الاستغناء عن جزء من الإضافة مثلا. كما تحب! - اذا
واجهت مشكلة ما ضعها فى تعليقك وسنساعدك إن شاء الله -
4- نقوم بحفظ القالب
5- نذهب الأن الى تخطيط Layout ثم نضيف أداة Java Script تحت هيدر المدونة
تماما كما بالصورة التالية ونضع بداخلها الكود التالى - لا تنسى يمكنك
بسهولة التعديل عليه من حيث الكلمات مثل الرئيسية أو فيسبوك وغيرها -
ويمكنك أيضا تغيير رمز # بالرابط المراد توجيه الزائر اليه.
<div class='header-container'>
<div class='header'>
<div class='clearfix' id='header_mainmenu'>
<!-- Logo -->
<a class='mm_logo' expr:href='data:blog.homepageUrl' style='background-image: url(http://i59.tinypic.com/2mnoyg3.png);'/>
<!-- Header Nav-->
<a class='mm_home' href='#'>الرئيسية</a>
<a class='mm_wishlist' href='#' id='wishlist-total'>مفضلاتي</a>
<a class='mm_account' href='#'>فيسبوك</a>
<a class='mm_checkout' href='#'>بحث</a>
<a class='mm_account' href='#'>اتصل بنا</a>
</a></div>
</div>
</div>
6- قم بحفظ الأداة وقم بمعاينة قالبك الأن.
لاحظ: يمكنك التعديل على ألوان القائمة بكل سهولة عن طريق الكود الخاص بالـ
CSS.
مدونة سمارت بلوجر اضافات دروس شروحات تعديل برامج حماية تحميل
0 التعليقات