تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️

U3F1ZWV6ZTQ0OTg0ODg5MzE5X0FjdGl2YXRpb241MDk2MTY3Mjk0NzE=
اخبار انترنت
أخبار تقنية

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

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

  1. طريقة إضافة قائمة جانبية منبثقة إحترافية الإصدار الثاني لمدونات بلوجر 


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

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

أولا إبحث عن وسم  ]]></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://2.bp.blogspot.com/-GsQfvTESyZA/Vz_pQX3IkmI/AAAAAAAAD7A/z4uqNAtlPmMZhho4wbUcyMOFfYckJUQ7ACLcB/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> و ستظهر النتيجة بإذن من الله سبحانه و تعالى .
تعليقان (2)
إرسال تعليق
  1. مشكور على الشرح موقع جميل و عمل احترافي

    ردحذف
  2. تحميل قالب سمارتيك | من افضل قوالب بلوجر مجانية !
    هل تبحث عن قوالب بلوجر مجانية ؟ اقدم لكم اليوم قالب سمارتيك افضل قوالب بلوجر 2019 مجانية, قالب سمارتيك رائع جدا و يمكنك الحصول علي كثير من المميزات عن طريق هذا القالب و سوف يعطي لموقعك جمالية اكبر و يجعلك تظهر في محركات البحث
    مميزات القالب
    تصميم مميز يركز على تجربة المستخدم
    تم تصميم العمل بأحدث التقنيات
    متجاوب مع أغلب المتصفحات
    متجاوب مع جميع الأجهزة
    ألوان مميزة
    يدعم الإتصال المشفر https
    صفحة 404
    رابط تحميل القالب : https://www.almoh3arif.com/2019/05/smartech-blogger-template.html

    ردحذف

إرسال تعليق

الاسمبريد إلكترونيرسالة