طريقة إضافة قائمة جانبية منبثقة على مدونات بلوجر بشكل إحترافية

يوليو 27, 2017 0

طريقة إضافة قائمة جانبية منبثقة على مدونات بلوجر بشكل إحترافية

السلام عليكم ،
الكثير من متتبعي موقع و قناة اَمني يعشقون ركن البلوجر ، و اليوم جئت أعطيكم قائمة جانبية أكثر من رائعة لتضيفوها على مواقعكم بإحترافية ، طبعا يمكنك وضع زر أخراج هاته القائمة في الاعلى في موقعك في اي مكان ترديه فالاضافة ستتعلمها معنا في هذا الدرس المبسط .

يمكنك في البداية و قبل كل شيء معاينة هاته الاضافة على الموقع التالي :

طريقة التركيب :

أولا إبحث عن وسم ]]></b:skin> ثم ألصق قبله الكود التالي :

.toggleMenu{margin-left: -12px;color:#fff;padding:22px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{;background:#fff;overflow:auto;position:fixed;z-index:9999999999999999999;bottom:0;width:300px;right:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{right:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}

بعدها قم بالبحث عن وسم <body> أو <body ثم ضع الكود التالي أسفله 'بعده' :

<div class='darkshadow'/>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSN6nTRPNyKgtpiar9iLGdZtPy_6Xq_voX89iu-A_dvIO9hH5eHiZpq09ZgYB0dJ4D7KQz1885CW6viy_qIT10xxCxeWirggc6b9TPOpkXMWzT5fEC0KeHDwO-1Rgr9kKROBOei2SjRU/s1600/noimage.png' title='Admin'/>
<h3>اَمني8</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'/></a>
<p> support@amni8.com </p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>انستجرام</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>فيسبوك</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>سنابشات</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' expr:title='data:blog.title' href='/' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> الصفحة الرئيسية</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'/> اَمني8</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>جديد</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>الربح</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>حلقات</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'/> تصاميمي</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'/> مشاريع</span></a></li>
<h2>تواصل معي</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'/> حل مشاكل</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'/>إبلاغ عن رابط</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'/> الإعلان على موقعي</span></a></li>
</ul>
</div>
</nav>

بعدها إبحث عن /head و ضع الكود التالي قبله

<script>
/* <![CDATA[ */
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
$(function() {
var ink, d, x, y;
$(".ripple").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
});
/* ]]> */
</script>

ملاحظة : الكود الاخير ان لم ينجح معك حاول وضعه قبل وسم </body> و ستظهر النتيجة بإذن من الله سبحانه و تعالى .

ليست هناك تعليقات

الاشتراك في: تعليقات الرسالة ( Atom )