حصريا اضافة قائمة احترافية وبتقنية CSS من حمزه ويب

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد

اهلا بكم متابعي مدونة حمزه ويب وزوارة الكرام في هذه تدوينة جديدة

وحصرية على مدونة حمزه ويب

راح نقدم لكم اليوم اضافة احترافية ورائعة وجميلة وبتقنية css 

احترافي جدا حقيقاً جربتها بنفسي وفي مدونتي 

معاينة اضافة

يمكنك معاينتة في مدونتي موجود في اعلى 

طريقة تركيب اضافة .

1. لوحة تحكم 
2. قالب 
3. تحرير HTML
4. ابحث عن هذا كود ]]></b:skin>
5. واضف هذا كود فوقة مباشرة 

 /* CSS Simple Menu */.unstyled-list {padding:0;}.unstyled-list li {list-style:none;margin:0;padding:0;}.nav-menu {position:absolute;right:0;top:0;min-width:140px;opacity:0;backface-visibility:hidden;transform:translate3d(0,20px,0);visibility:hidden;box-shadow:0 3px 8px -3px rgba(0,0,0,0.2);transition:all .2s ease, visibility 0s linear;  }.nav {position:fixed;top:5%;right:2%;z-index:102;}.nav.active .fa-bars {opacity:0;}.nav.active .fa-times {opacity:1;color:#fff;background:#e6ae48; }.nav.active .nav-menu {opacity:1;transform:translate3d(0,50px,0);visibility:visible;transition-delay:0s;}.menu-btn {display:block;width:40px;height:40px;color:#fff;background-color:rgba(0,0,0,0.2);transition:all .2s ease;text-align:center;position:relative;z-index:1;}.menu-btn .fa {position:absolute;top:0;right:0;font-size:24px;line-height:40px;width:40px;vertical-align:middle;transition:opacity .1s linear;}.menu-btn .fa-bars {opacity:1;color:#fff;}.menu-btn .fa-times {opacity:0;}.menu-btn:hover {background-color:#e6ae48;color:#fff;}.nav-item-link {display:block;font-size:13px;color:#999;padding:15px;background-color:#fff;transition:all .2s ease;border-bottom:1px solid #e9e9e9;}.nav-item:last-child .nav-item-link {border-bottom:none;}.nav-item .nav-item-link i.fa.fa-home,.nav-item .nav-item-link i.fa.fa-paper-plane,.nav-item .nav-item-link i.fa.fa-list-alt,.nav-item .nav-item-link i.fa.fa-coffee{margin-right:10px;}.nav-item-link:hover {background-color:#fcfcfc;}a.nav-item-link:hover {color:#1497ec;}.unstyled-list:before {bottom:100%;right:10%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#e6ae48;border-width:8px;margin-left:-8px;}.nav-item:first-child .nav-item-link {border-top:3px solid #e6ae48;}

  

ثم ابحث عن هذا كود 
</head>
واضف هذا كود فوقة 

 <script>(function() {  window.Menu = (function() {    Menu.init = function() {      return $('[data-menu]').each(function(idx, el) {        return new Menu($(el));      });    };
    function Menu($el) {      this.nav = $el;      this.menubtn = $('.menu-btn', this.nav);      this.menubtn.on('click', (function(_this) {        return function(ev) {          _this.nav.toggleClass('active');          return false;        };      })(this));    }
    return Menu;
  })();
  $(function() {    if ($('[data-menu]').length) {      return Menu.init();    }  });
}).call(this);</script> 

ثم اضغط حفظ نموذج 
اذهب الى تخطيط اختار اضافة اداة 
HTML/javascriot 

واضف هذا كود فية 

 <nav class='nav' data-menu=''><a class='menu-btn' href='#'><i class='fa fa-bars'></i><i class='fa fa-times'></i></a><ul class='unstyled-list nav-menu'><li class='nav-item'><a class='nav-item-link' href='http://www.ha1web.blogspot.com/'><i class='fa fa-home'></i> الرئيسية</a></li><li class='nav-item'><a class='nav-item-link' href='http://ha1web.blogspot.com/p/24.html'><i class='fa fa-paper-plane'></i> اتصل بنا</a></li><li class='nav-item'><a class='nav-item-link' href='http://www.ha1web.blogspot.com/'><i class='fa fa-list-alt'></i> الأرشيف</a></li><li class='nav-item'><a class='nav-item-link' href='http://www.ha1web.blogspot.com/'><i class='fa fa-coffee'></i> السجل</a></li><li class='nav-item'><a class='nav-item-link' href='http://ha1web.blogspot.com/2014/07/blog-post_25.html'><i class='fa fa-chain-broken'></i> تبادل اعلاني</a></li></ul></nav> 

غيير الون احمر بروابط الذي يناسبك
وغيير الون اخضر بكلمات الذي يناسبك 
واضغط حفظ 

للتغيير لون قائمة اصفر ابحث عن E6AE48 وغييرة 
بالكود لون الذي يعجبك 


وانتهى موضوعنا الى هنا 
وانتظروا كل جديد وحصري من حمزه ويب
في امان الله 

 انتهى الموضوع ، اتمنى أن تكون الإضافة في متناول الجميع تحياتي