مرحبا بكم متابعى مدونة أبو إياد, كما وعدناكم بتقديم كل ماهو حصرى ومفيد بطريقة مبسطة لمدونات بلوجر. نقدم لكم اليوم القائمة الأفقية الأكثر تطورا لمدونات بلوجر بإصدارها الأول وهذا يعنى أننا بصدد إصدار موضوع مستقل لإصدار أخر كما نشرنا صورة للإصدار الثانى بصفحة المدونة على الفيسبوك, القائمة سهلة التركيب وسهل التعامل معها جدا كما أنها مميزة فى شكلها وجذابة إضافة انها تختصر الكثير؟ فما بالك بإصدارها الثانى؟ فقط كن على إطلاع دائم بموضوعات المدونة بالإشتراك خلال صفحتها على الفيسبوك.يمكنك معاينة الإضافة من هنا, فاذا أعجبتك يمكنك اتباع الخطوات التالية.
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/AVvXsEj0sZ8gWDMRO9hGXTqpjMw4ddCBokaEe5VKtVdTt7mDHKzGrIh-Ntc-sO7kAHhm_yd4RIY7_F1zso5nQlxjLpXwGKsfuUb8MI3hs_njKQOUInwfn4ZN1A3U17UITxOVZlgakVijlIh8jOs/s1600/home.png) center 20px no-repeat; } #header_mainmenu a.mm_wishlist { background:#6cbe42 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZPxZk1dpcXdWGjezGq-Sv3CQEbNyaMFKdtFuZYvqc-IONaEBX7-LLOa7lx2IFUaIn0l78NJuAE4RJQzBM05vyumz6RSzLZGlEzfxeVIZbqE42HVUtBLkmhY6-X9K_-u9KDol92GtbkI/s1600/wishlist.png) center 20px no-repeat; } #header_mainmenu a.mm_account { background:#0066B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghady3-hHhOkkxJCFKt8HayPHMgB6Ll46l85KG7vqji8p8jKqrZIZxSWVtGNNQcZuTynwCEDRBeyjyYdDWVoutNxGtdy_lByR45SAmY3J04LJ_E_KOXX7A8CVTfSbjqaeuguQZ6ZzrtAk/s1600/account.png) center 20px no-repeat; } #header_mainmenu a.mm_checkout { background:#6cbe42 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinrYS5sHQSAzS7hS-JuejavyAQmf_uSnEWiISFRy_AbC9rfNSlEAqF1afbIKj2oaj-tJ_Ns02GI6Zgjt3ZDEDzNEnVUbHA48i1Ka72Q-4delMmjdm6cx7LBVHp4wufYKqg0Fp0yYHyb0M/s1600/checkout.png) center 20px no-repeat; } #header_mainmenu .mm_shopcart { background:#58bae9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xYcqY8Im4xAs3ZnxgzLREFNxZTA0eCIFEg3juaraY9Ug6HyyjqX1EXsf-1wcivzT_A0m5iI-5LuB4cqeIrTYnrA-xphZW3fFGPbC4ZSaHCKoYaCt6Jbf8aIZYK3HzepdfDJMNupZd0E/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;
}
ليست هناك تعليقات:
إرسال تعليق