كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس

 أصحبت القوالب العربية و الأجنبية تعتمد بشكل كبير في ترويج المحتوى الخاص بها بالعديد من الطرق. ومن بين هاته الطرق تثبيت الشريط الجانبي من أجل الترويج للمقالات الخاصة بهم.

 وبالتالي الحفاظ على الزائر أكبر مدة ممكنة في الموقع عن طريق عرض المزيد من المقالات التي سوف يقوم الزائر بتصفحها.

كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس
كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس

ولاكن في درس اليوم سوف أقدم لك بعض الأكواد البرمجية  التي من خلالها سوف نزيد ارباح ادسنس من خلال تثبيت اعلانات أدسنس عند نزول الزائر لقراءة المقال،

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

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

ما هو Sticky sidepar

التنقل الثابت هو مصطلح يستخدم لوصف قائمة تنقل ثابتة على صفحة ويب تظل مرئية وفي نفس الموضع الذي يقوم فيه المستخدم بالتمرير لأسفل والتنقل حول الموقع. أصبحت أشرطة التنقل الدائمة أو الرؤوس الثابتة الآن معيارًا لتصميم الويب.

لهاذا أرجو إضافة هاته الإضافة في مواقعكم لزيادة ارباح اعلانات جوجل ادسنس و إبقاء الزائر لأكبر فترة ممكنة.

هل إنشاء شريط تنقل مثبت في قسم sidepar أمر جيد؟

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

  • جعل المحتوى مرئي للزائر طوال الوقت وبالتالي جذب الزائر تجاهه
  • يحصل على المزيد من الانطباعات
  • سوف يجذب المزيد من نقرات اعلانات adsense
  • يمكن زيادة مشاهدات الصفحة وأكثر من ذلك بكثير
  • يمكن زيادة المبيعات / التحويل
  • ترويج الحمله الاعلانيه المدفوعة في موقعك
  • إنخفاض معدل الإرتداد وإنخفاض ترتيبك في اليكسا
  •  اذا سألت يوما كيف ازيد مشتركين في اليوتيوب فهاته الإضافة سوف تكسبك مشتركين حقيقيين وغيرها الكثير ...
وهنا يجب ان تستفيد من هاته الإضافة من أجل كسب ثقة الزائر و الإحتفاظ به  او حتى كسب المال و زيادة ارباح ادسنس بلوجر نعم با صديقي.

كيفية إنشاء شريط تنقل مثبت في قسم sidepar

  • أول خطوة عليك أن تذهب الى التنسيق ← ثم الى القائمة الجانبية في القالب الخاصة بك إختار إضافة اداة، ثم تضغط على HTML/JavaScript.

في العنوان تكتب : ولموك ويب

كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس

وتنقر على حفظ.

وتقوم بإنزال الإضافة الى أسفل القائمة الجانبية بهاذا الشكل

كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس


  • الأن أنقر على المظهر في منصة بلوجر ← تعديل HTML، نبحث عن قسم </body> ستجده أسفل القالب ونلصق هاذا الكود أعلاه، ونقوم بالحفظ.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
 </script>

  • هل كتبت في الخطوة الأولى كلمة ولموك ويب ؟؟؟ الأن إبحث عنها داخل القالب  وعندما تجدها اضغط على الرأس المثلث الموجود أمام رقم الكود من أجل تصغير الكود وجمعه في سطر واحد.
كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس
وقم بإستبدال الكود كاملا بالكود التالي وقم بحفظ التغيرات
<b:widget id='HTML32' locked='false' title='ولموك ويب' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>

ملاحظة: الان سوف يصبح اعلان ادسنس مثبت أثناء مرور الزائر لأسفل المقال الخاص بك.

كيفية تثبيت قسم sidepar بالكامل أثناء التمرير


في الاول عليك عزيزي ان تبقي على الكود الذي وضعناه فوق قسم body وأن تبحث عن ID قسم sidepar عن طريق الضغط على زر الفأرة الأيمن،  ثم الضغط على فحص.
مثلا أنا في قالب سيو بلس المجاني وجدت id هو "sidepar"
كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس


انت مهما كان اسم الوسم اعمل له نسخ وابحث عنه في داخل اكواد القالب في خانة تعديل HTML، وتقوم بغلق الأكواد عبر الضغط على المثلث الصغير من أجل نجاح الطريقة.
انسخ هاذين الكودين

<div id='mblfloater'>
</div>

الكود الأول قبل وسم sidepar والثاني بعد وسم sidepar بهاذا الشكل
كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس


والى هنا نكون قد إنتهينا من شرح كيفية إنشاء شريط تنقل مثبت في قسم sidepar و زيادة ارباح ادسنس.
تعليقات