تغيير شكل القائمة الرئيسية الجانبية لقالب سيوبلس المجاني

السلام عليكم, في هذا المقال سنشرح طريقة تركيب القائمة الرئيسية الجانبية في قالب سيوبلس المجاني (مثل قالب سيو بلس المدفوع).مراعي لسرعة المدونة لانني استخدمة سكربت ب 5 اسطر فقط اي انه قصير لن يأتر على سرعة المدونة.فقط تابع الشرح معي.

1-تركيب السكريبت:

إذهب إلى صفحة تخطيط قالبك HTML ثم إ ذهب إلى اقصى أسفل التخطيط ثم قم بإزالة السكربت المشار في الصورة .

قم بنسخ هذا السكربت اسفله وضعه في مكان السكريبت الذي ازلناه سابقا.

<script>/*<![CDATA[*/
var olderLink;
$('.Posts-byCategory,.page-navigation,.PagePrakediv').length ? ($('body *').remove(), $('body').addClass('RE').append('<style>body.RE {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpm-FRfmAQA2dQoIZJWjKGl696Cx7zPnKxKx-lgXzUrPKJDlgWSWPdmTxZFLlWgEAsd2ectI8CUNcLXSYVg4DF0lQ62Pu70868RO565zsKudneSEqC-oG413Z3HtqE5hADZeKQ6MwKC9e/s1600/p_1395kyrbm1.png) no-repeat center #eee;background-position: center center;height: 98vh;}</style>')) : ($('#LinkList22 li').each(function () {
    var _0x5a2c07; - 0x1 == $(this).text().indexOf('+') ? $(this).addClass('ma').append('<ul/>') : (_0x5a2c07 = $(this).find('a').text().replace('+', ''), $(this).find('a').text(_0x5a2c07), $(this).prev('.ma').addClass('pluselink').find('ul').addClass('nav-d').append($(this))), $('#LinkList22').fadeIn(0x0);
}), $($('<span class=\'icon\'>' + ArrowIcon + '</span>')).insertAfter('li.ma.pluselink ul:not(.ma2ul), .pluselink2 ul'), $('.search a').click(function () {
    $('.search-box').fadeIn(0x0), $('.stxk').fadeIn(0xc8);
}), $('.search-submit2, .stxk').click(function () {
    $('.search-box').fadeOut(0x0), $('.stxk').fadeOut(0x64);
}), $('a.op-one').click(function () {
    $('.sidenav').addClass('open'), $('.pos-t-t').fadeIn(0x12c);
}), $('.pos-t-t, a.closebtn').click(function () {
    $('.sidenav').removeClass('open'), $('.pos-t-t').fadeOut(0xc8);
}), $my_menu = $('.nav-par').html(), $('.mop-links').html($my_menu), $my_icon = $('#top-social-L').html(), $('.mop-icon').html($my_icon), $('.mop-links').html($my_menu), $my_tre = $('#pages').html(), $('.mop-pages').html($my_tre), $('.mop-links').html($my_menu), function (_0x33e9c4) {
    function _0x2955ce() {
        $('img[' + _0x33e9c4 + ']').each(function (_0x448f37) {
            var _0x255703, _0x5ba4c6, _0x47fdb6 = this.getBoundingClientRect().top - document.querySelector('body').getBoundingClientRect().top;
            window.pageYOffset + window.innerHeight > _0x47fdb6 && (_0x255703 = Math.ceil(this.parentNode.offsetWidth) + 0x32, _0x5ba4c6 = function (_0x244a87) {
                try {
                    _0x244a87 = -0x1 !== _0x244a87.indexOf('img.youtube.com') || -0x1 !== _0x244a87.indexOf('ytimg.com') ? _0x244a87.replace('/default', '/mqdefault') : _0x244a87.replace(/\/(s72\-c|s40\-c|s1600\-c|s72\-rc|s220|s640|s113|s0-rw-e90|s1600-rw-e90|w1600)\//, '/s' + parseInt(_0x255703) + '/');
                } finally {
                    return _0x244a87;
                }
            }(this.getAttribute(_0x33e9c4)), this.setAttribute('src', _0x5ba4c6), this.removeAttribute(_0x33e9c4), this.parentElement.classList.toggle('PLHolder', !0x1), this.parentElement.classList.toggle('not-pl', !0x0));
        });
    }
    window.addEventListener('load', _0x2955ce), document.addEventListener('scroll', _0x2955ce);
}('data-src'), console.log(`%cSeoplus v5.3\
`, 'font-weight: 700;color: #3560ab;font-size:21px', `Blogger Template\
------------------\
>> Programmed by : Seoplus developers\
>> Information   : https://www.seoplus-template.com\
`), (olderLink = $('.blog-pager-older-link').attr('href')) && $('.loadMorePosts').show(), $('.loadMorePosts a').on('click', function (_0x57ce3a) {
    $('.loadMorePosts').hide(), $.ajax({
        'url': olderLink,
        'success': function (_0x49584a) {
            var _0x4403fa = $(_0x49584a).find('.blog-posts');
            _0x4403fa.children('.status-msg-wrap').remove(), $('.blog-posts').append(_0x4403fa.html()), (olderLink = $(_0x49584a).find('.blog-pager-older-link').attr('href')) ? $('.loadMorePosts').show() : $('.noMorePosts').show();
        },
        'beforeSend': function () {
            $('.loadMore > #loader').show();
        },
        'complete': function () {
            $('.loadMore > #loader').hide();
        }
    }), _0x57ce3a.preventDefault();
}), $('#StopSitkyHeadar').length || jQuery(document).ready(function (_0x3a0190) {
    var _0x4c870e = _0x3a0190('.par-tp, .head-pz, .par-bottm');
    _0x3a0190(window).scroll(function () {
        0x63 <= _0x3a0190(this).scrollTop() ? _0x4c870e.show(0xa).animate('.par-tp, .head-pz, .par-bottm').addClass('active') : _0x4c870e.animate('.par-tp, .head-pz, .par-bottm').removeClass('active');
    });
}), $('.bottom-footer .yemen:eq(0)').length && ($('.yemen').css({
    'display': 'flex',
    'visibility': 'visible',
    'width': 'auto',
    'height': 'auto',
    'opacity': '1',
    'transform': 'initial'
}), $('.yemen img[alt="SeoPlus Template"], .yemen a[title="SeoPlus Template"]').css({
    'display': 'block',
    'visibility': 'visible',
    'width': '27px',
    'height': '27px',
    'opacity': '1',
    'transform': 'initial'
})), $($('<a href="https://www.seoplus-template.com" rel="nofollow noopener" target="_blank" title="SeoPlus Template" style="display: block; visibility: visible; width: 27px; height: 27px; opacity: 1; transform: initial;"><img alt="SeoPlus Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nf5p3uoHcdKYrGFz48cl7KhqJKSd_jU7z0A1n2UTnwZIVC4I2SWhx7J4GA6Kg5132AY7l0Nx2mpzBX4CfMiMApycJDzKiLbrEfSDVyn0ivldE7cu9XsHXsaoXPDD7U3rAfBzkJAJKGnI/w27-h27-p-k-nu/256-256.png" style="display: block; visibility: visible; width: 27px; height: 27px; opacity: 1; transform: initial;"></a>')).insertBefore('.yemen span'));

$(function() {
  var html = $('html, body'),
    navContainer = $('.nav-c'),
    navToggle = $('.nav-toggle'),
    navDropdownToggle = $('.pluselink');

  // Nav toggle
  navToggle.on('click', function(e) {
    var $this = $(this);
    e.preventDefault();
    $this.toggleClass('is-active');
    navContainer.toggleClass('is-visible');
    html.toggleClass('nav-open');
  });
  
  // Nav dropdown toggle
  navDropdownToggle.on('click', function() {
    var $this = $(this);
    $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
  });
  
  // Prevent click events from firing on children of navDropdownToggle
  navDropdownToggle.on('click', '*', function(e) {
    e.stopPropagation();
  });
});
/*]]>*/</script>

2-تركيب التنسيق الخاص به style :

قم بنسخ الستيل الخاص به اسفله وضعه اسفل السكريبت الذي قمنا سابقا بتركيبه.

<style>
.nav-c.is-visible {visibility: visible;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
.pluselink {position: relative;cursor: pointer;}
.pluselink > .menu-link { display: inline-block; }
.pluselink:after {font-size: 25px;position: absolute;top: 0;left: 0;bottom: 0;content: "+";color: #222;height: 41px;font-weight: 700;border-right: 2px solid #bbb;padding: 0px 10px;}
.pluselink.is-active:after { content: "\2013";}
.sidenav .nav-d {display: none;background-color: #c0c0c0bf !important;position: relative!important;top: auto!important;transform: none!important;visibility: visible!important;opacity: 1!important;list-style: none !important;right: 0 !important;width: 100% !important;padding: 0;}
.sidenav .nav-d li {border: 2px solid #777;border-bottom: 0;} 
.sidenav .nav-d li:last-child {border-bottom: 2px solid #777;} 
.pluselink.is-active > .nav-d { display: block;}
.nav-par .pluselink:after {display: none;}
.nav-par .nav-d {display: block;}
.sidenav .nav-c .icon {display: none;}
.sidenav .nav-menu {background-color: #dedede;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;list-style: none !important;padding: 0}
.sidenav .ma {list-style: none !important;border: 2px solid #bbb;margin: 0 !important;border-bottom: 0;}
.sidenav .ma:last-child {border-bottom: 2px solid #bbb;} 
.sidenav .ma a {color: #131313;display: inline-block !important;border: 0 !important;padding: 12px 16px !important;margin: 0 !important;background: none !important;width: 100%;}
.sidenav li.ma.pluselink li a:before {display: none ;}
</style>

الصورة اسفله توضح مكان وضع التنسيق.