السلام عليكم , اليوم اقدم لكم قائمة منسدلة وتابتة لمدونات بلوجر , وهي جد احترافية ورائعة بحيت لا تأخد اي مساحة في القالب لانها بصيغة جيكوير jQuery , طريقة التركيب سهلة تابع الشرح ,
بعد دالك ابحث عن
واضف فوقه كود css
الخطوة الاخيرة وهي وضع اكواد html
إبحث عن
ثم اضف فوقه هدا الكود وغير الروابط بما يناسبك
هدا ما في الامر ادا واجهت اي مشكلة لا تتردد نحن في الخدمة -_-
معاينة للاضافة
اولا توه الى لوحة تحكم بلوجر اختر المدونة تحرير القالب ثم ابحث عن
ثم اضف تحته هذا الكود , وادا وجد كود مشابه له فلا داعي لإضافته
الحين تبحث عن
ثم تضع فوقه هدا الكود
<head>ثم اضف تحته هذا الكود , وادا وجد كود مشابه له فلا داعي لإضافته
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
الحين تبحث عن
</body>ثم تضع فوقه هدا الكود
<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>
بعد دالك ابحث عن
]]></b:skin>واضف فوقه كود css
/* 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: #f56954;
}
.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: #f56954;
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: #f56954;
border-width: 8px;
margin-left: -8px;
}
.nav-item:first-child .nav-item-link {
border-top: 3px solid #f56954;
}
a.nav-item-link {
text-decoration: none;
font-family: inherit;
}
الخطوة الاخيرة وهي وضع اكواد html
إبحث عن
<div id='outer-wrapper'>ثم اضف فوقه هدا الكود وغير الروابط بما يناسبك
<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="/"><i class="fa fa-home"></i> الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/p/contact.html"><i class="fa fa-paper-plane"></i> راسلني</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/p/blog-index.html"><i class="fa fa-list-alt"></i> الفهرس</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/2014/07/blog-post.html"><i class="fa fa-coffee"></i> اعلن لدينا</a>
</li>
</ul>
</nav>
هدا ما في الامر ادا واجهت اي مشكلة لا تتردد نحن في الخدمة -_-
:-d :-d :-d
ردحذفلم تنجح الطريقة :(
اخي انها تعمل يمكنك ارسال القالب لاضيفها لك
ردحذفاخي ممكن تشرح لي كيف احذفه من المدونة
ردحذفالامر بسيط اخي توجه الى لوحة تحكم بلوجر ثم القالب تحرير ثم ابحث عن الاكواد المسؤولة عن الاضافة وقمبحدفها وافظ القالب او يمكنك ارسال القالب وسأحدفها لك
حذف