10/06/2017

settings_overscan print announcement
صندوق الإشتراك في قناة يوتيوب YouTube (منــبثق ..منـــزلق..و ثابت) كلها أشكال تناسب جميع الاذواق متوفرة بأبسط طريقة تخصيص تحتوي على أكواد منسقة نضيفة وبدون ترميز أو تشفير كما أن الأداة بمجملها متوافقة مع سياسة الأرشفة ومتجاوبة مع أجهزة العرض الذكية ..ستجد المعاينة مع كل طريقة تركيب و شرح مختصر لميزة كل شكل.





قبل أن نشرع في طريقة تركيب الأداة هناك خطوة مهمة وبسيطة في نفس الوقت لابد ان تقوم بتهيئة معرّف قناة YouTube الخاص بك لكي تقوم بتشغيل زر الإشتراك لقناتك .. ما ستقوم به هو التوجه إلى إعدادات القناة عبر هذا الرابط   account advanced  ما ستقوم به هو فقط نسخ شفرة معرف القناة الخاصة بك كما هو مبين في الصورة التالية (إضغط على الصورة للعرض بالحجم الكامل)



طريقة تركيب الإضافة


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب



الشكل الأول : زر الإشتراك منــبثق


زر إشتراك القناة منبثق داخل صندوق يعمل بتأثير Lightbox  يتميز هذا الشكل بسكريبت حصري يجعل النافذة المنبثقة تظهر مرة واحدة لكل مستخدم وهذه التقنية تجنب إرتداد الزوار بسبب النوافذ المتكررة و المملة  فالمفتاح المشغل مهيء لمرة واحدة كل 15 يوماً أو كلما حذف الزائر الملفات المؤقتة (الكوكيز) من متصفحة...ولو أمعنت النظر في الكود القادم فستلاحظ   توقيت ظهور الرسالة بهذا الشكل1000*60*60*24*15 تعني ( يوم* ساعة* دقيقة* ثانية* ميللي ثانية ) ، وبالتالي لتغير التوقيت من 15 يوم  إلى أسبوع مثلا .. غير الـ (15) إلى (7) وهكذا لن تظهر للمستخدم في نفس اليوم إلا في حال قام بتنظيف المتصفح من ملفات الإرتباط cookie



لاتنسى أخذ نسخة إحتياطية من القالب

خطوة تركيب زر الإشتراك منبثق

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

  • 
     <!--subscription button style no:01 by ba88-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='subscription-button'>
    <div class='sub-box-ba'>
    <a class='ysclose' href='javascript:void(0);'></a>
    <h1>بضغطة زر تدعمنا وتشارك الفائدة</h1>
    <div class='btn-ytsubscribe'>
    <script src='https://apis.google.com/js/platform.js' type='text/javascript'></script>
    <div class='g-ytsubscribe' data-channelid='F8F5ObbE1ujMjHbKXO-t5A' data-count='default' data-layout='full'></div>
    </div>
    </div>
    </div>
    <style type='text/css'>
    #subscription-button{overflow:hidden;z-index:9999;position:fixed!important;top:-1000px;left:0;right:0;padding:50px 0;display:block;width:100%;height:100%;background-color:rgba(0,0,0,0.49);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
    #subscription-button .sub-box-ba{position:relative;padding:1em;margin:0 auto;max-width:250px;width:100%;background:#FFFFFF;}
    #subscription-button .sub-box-ba:before{content:'';position:absolute;top:0;right:0;width:100%;height:45%;background:#e62117 url(https://3.bp.blogspot.com/-tphCZuxmiVs/WdTtBWr8S-I/AAAAAAAABxI/ZCz_hkPtoccH7fOVw7yqFC-WTEeTrgVXACLcBGAs/s1600/pattern-you-tube.png);}
    #subscription-button a.ysclose{overflow:hidden;position:absolute;top:0;right:0;text-align:center;color:#FFFFFF;cursor:pointer;padding:5px;line-height:1;margin:0;}
    #subscription-button a.ysclose:before{content:'\f00d';font-family:FontAwesome;font-size:17px;position:relative;}
    #subscription-button a.ysclose:hover:before{content:"\f068";}
    #subscription-button h1{position:relative;line-height:normal;text-shadow:none;margin:15px 0;padding:5px;font-size:12px;text-align:center;display:block;font-weight:700;color:#ffffff;z-index:2;text-decoration: none;letter-spacing: normal;font-family: inherit;}
    .btn-ytsubscribe{position:relative;overflow:hidden;margin:5px 10px;z-index:2;}
    .yt-username{display:block;height:23px;color:#ffffff;font-weight:700;white-space:nowrap;}
    </style>
    <script type="text/javascript">
        //<![CDATA[ 
    $(document).ready(function() {  
        if (document.cookie.indexOf('visited=true') == -1) {
                var fifteenDays = 1000*60*60*24*15;
                var expires = new Date((new Date()).valueOf() + fifteenDays);
                document.cookie = "visited=true;expires=" + expires.toUTCString();
                var id = '#subscription-button';
                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();
                //Set heigth and width to mask to fill up the whole screen
                $('#subscription-button').css({'width':maskWidth,'height':maskHeight});
                //transition effect     
                $('#subscription-button').fadeIn(1000);    
                $('#subscription-button').fadeTo("slow");  
                //Get the window height and width
                var winH = $(document).height();
                var winW = $(window).width();
                //Set the popup window to center
                $(id).css('top',  winH/2-$(id).height()/2);
                $(id).css('left', winW/2-$(id).width()/2);
                //transition effect
                $(id).fadeIn(2000);
                //if close button is clicked
                $('a.ysclose').click(function (e) {
                    //Cancel the link behavior
                    e.preventDefault();
                    $('#subscription-button').fadeOut();
                });         
        }   
    });
        //]]>  
        </script> 
    </b:if> 
    

    معلومات عن الكود
    الكود المحدد بهذا اللون يجعل الزر لايظهر إلا في صفحة التدوينة بالعلم أن حذفه يجعل الأداة تظهر في أي مكان..وللتخصيص أكثر إستعمل أداة العلامة الشرطية
    الكود المحدد بهذا اللون خاص برقم معرّف قناة YouTube  قم بإستبداله بحساب قناتك.
    الكود المحدد بهذا اللون خاص برابط صورة الخلفية الحمراء تستطيع إستبداله بصورة خاصة بك 
    الكود المحدد بهذا اللون كودjavascriptالمسؤول عن عمل الصندوق منــبثق
    ملاحظة مهمة
    كما أشرت سابقا أن هذا الزر يظهر للزائر مرة واحدة فقط إلى غاية مدة يحددها السكريبت او في حالة قام الزائر بتنضيف المتصفح من ملفات الإرتباط لذلك في حالة أردت أن يظهر الزر بالشكل المتكرر إستبدل كود javascript المحدد باللون بالكود التالي
    
    <script type='text/javascript'>
    //<![CDATA[
    $(window).bind("load",function(){$("#subscription-button").show("slow").animate({top:"0"},500),$("a.ysclose").click(function(){$(this).parent(),$("#subscription-button").fadeOut()})});
    //]]>
    </script> 
    



الشكل الثاني : زر الإشتراك منـــزلق


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


لاتنسى أخذ نسخة إحتياطية من القالب

خطوة تركيب زر الإشتراك منــزلق

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

  • 
     <!--subscription button ba88-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='subscription-button'>
      <div class='yt-hide' onclick='close_yt()'></div>
        <h1>بضغطة زر تدعمنا وتشارك الفائدة</h1>
      <center>
       <script src='https://apis.google.com/js/platform.js' type='text/javascript'></script>
       <div class='g-ytsubscribe' data-channelid='F8F5ObbE1ujMjHbKXO-t5A' data-count='default' data-layout='full'></div>
      </center>
    </div>
    <style>
    #subscription-button{position:fixed;bottom:25%;right:0;width:250px;z-index:9999;height:150px;background:#ffffff;-webkit-transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
    #subscription-button .fluid-width-video-wrapper{padding:10px!important;background-color:#ffffff;width:200px;}
    #subscription-button .yt-hide{background:#e62117;color:#FFFFFF;float:left;width:30px;height:100%;cursor:pointer;text-align:center;line-height:9em;display:flex;justify-content:center;align-items:center;}
    .yt-hide:before{font-family:'FontAwesome';content:'\f105';font-size:22px;}
    .myClass .yt-hide:before{content:"\f167";}
    #subscription-button h1{line-height:normal;text-shadow:none;margin:15px 0;padding:0 5px 0 30px;font-size:13px;text-align:center;display:block;font-weight:700;color:#2d2d2d;text-decoration: none;letter-spacing: normal;font-family: inherit;}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    function close_yt(){!1===yt_check?(yt_frame.style.right="-225px",yt_check=!0,yt_frame.className="myClass"):(yt_frame.style.right="0px",yt_check=!1,yt_frame.className="noClass")}var yt_check=!1,yt_frame=document.getElementById("subscription-button");
    //]]>
    </script>
    </b:if>
    

    معلومات عن الكود
    الكود المحدد بهذا اللون يجعل الزر لايظهر إلا في صفحة التدوينة بالعلم أن حذفه يجعل الأداة تظهر في أي مكان..وللتخصيص أكثر إستعمل أداة العلامة الشرطية
    الكود المحدد بهذا اللون خاص برقم معرّف قناة YouTube  قم بإستبداله بحساب قناتك.




الشكل الأخير : زر الإشتراك ثابت 


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

لاتنسى أخذ نسخة إحتياطية من القالب

خطوة تركيب زر الإشتراك منبثق

  • إنتقل لصفحة تخطيط >> ثم قم بإضافة أداة HTML/javascript  جديدة >>  في المكان المناسب ضع داخلها الكود التالي

  • 
     <!--subscription button ba88-->
    <div id='subscription-button'>
    <div class='sub-box-ba'>
    <h1>بضغطة زر تدعمنا وتشارك الفائدة</h1>
    <div class='btn-ytsubscribe'>
    <script src='https://apis.google.com/js/platform.js' type='text/javascript'></script>
    <div class='g-ytsubscribe' data-channelid='F8F5ObbE1ujMjHbKXO-t5A' data-count='default' data-layout='full'></div>
    </div>
    </div>
    </div>
    <style type='text/css'>
    #subscription-button{overflow:hidden;position:relative!important;height:auto;padding:10px;background-color:#efefef;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
    #subscription-button .sub-box-ba{position:relative;padding:10px 0;margin:0 auto;max-width:250px;width:100%;background:#FFFFFF;}
    #subscription-button .sub-box-ba:before{content:'';position:absolute;top:0;right:0;width:100%;height:45%;background:#e62117 url(https://3.bp.blogspot.com/-tphCZuxmiVs/WdTtBWr8S-I/AAAAAAAABxI/ZCz_hkPtoccH7fOVw7yqFC-WTEeTrgVXACLcBGAs/s1600/pattern-you-tube.png);}
    #subscription-button a.ysclose{overflow:hidden;position:absolute;top:0;right:0;text-align:center;color:#FFFFFF;cursor:pointer;padding:5px;line-height:1;margin:0;}
    #subscription-button a.ysclose:before{content:'\f00d';font-family:FontAwesome;font-size:17px;position:relative;}
    #subscription-button a.ysclose:hover:before{content:"\f068";}
    #subscription-button h1{position:relative;text-decoration:none;line-height:normal;text-shadow:none;margin:0 0 20px 0;padding:0 5px;font-size:14px;text-align:center;display:block;font-weight:700;color:#ffffff;z-index:2;}
    .btn-ytsubscribe{position:relative;overflow:hidden;margin:5px 10px;z-index:2;}
    .yt-username{display:block;height:23px;color:#ffffff;font-weight:700;white-space:nowrap;}
    </style> 
    

    معلومات عن الكود
    الكود المحدد بهذا اللون خاص برقم معرّف قناة YouTube  قم بإستبداله بحساب قناتك.
    الكود المحدد بهذا اللون خاص برابط صورة الخلفية الحمراء تستطيع إستبداله بصورة خاصة بك 





add_commentإرسال تعليق

  1. شكرا لك أخي ♥
    هده افضل مدونة وجزاك الله خيرا لتلبية طلبي

    ردحذف
    الردود
    1. لا شكر على واجب أخي ..اتمنى ان تكون الإضافة قد نالت إعجابك ..بالتوفيق للجميع

      حذف
  2. السلام عليكم لدي سؤال من فضلك

    عند دخول الى تدوينة أريدان تتغير خلفية المدونة body بنفس صورة التدوينة
    وجدت إضافة جافاسكربت تغير الخلفية في كل مرة يدخل الشخص الى التدوينة
    لكن برابط صورة تختاره انت وليس برابط صورة التدوينة

    <script type="text/javascript">
    var banner= new Array()
    banner[0]="االصورة الاولى"
    banner[1]="الصورة الثانية"
    var random=Math.floor(1*Math.random());
    document.write("<style>");
    document.write("body {");
    document.write(' background:url("' + banner[random] + '") no-repeat top left;');
    document.write(" }");
    document.write("</style>");
    </script>

    هل يمكن تعديل علية ليصبح يغير الخلفية وفق صورة المدونة
    علما ان كود صورة التدوينة يظهر في قالبي كالاتي

    <b:if co<div class='item_image'><img class='item_thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></div>

    وشكرا

    ردحذف
  3. أسف لا تأخذ سؤالي سابق بعين الاعتبار فقد وجدته الحل في مواضيعك الرائعة
    http://www.blogg-code.tk/2017/09/switching-jquery-to-set-image-src.html
    علما انني وجدت بها خلل بسيط قمت بصلاحه عبر حذف جزء من الجافاسكربت

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

      حذف
    2. نسيت أن أقول لك على تعديل بسيط إذا قمت بإجرائه ستحصل على نتيجة رائعة ودرجة وضوح ممتازة بالنسبة لصور مدونتك
      بالنسبة للكود المسؤول عن عرض الصور في مدونتك
      expr:src='data:post.thumbnailUrl'
      إستبدله بالآتي
      expr:src='data:post.firstImageUrl'
      وستلاحظ الفرق الكبير ..ما قمنا به هو إستدعاء أول صورة في التدوينة وهذا يعطل التحكم الألي في قياس الصورة وغالبا ما يجعل الصور الخاصة بنا صغيرة الحجم ..مع العلم انك عند تضمين صورة في مواضيعك حاول أن تجعلها بالحجم الكبير او الحجم الأصلي

      حذف
  4. بالنسبة للشكل الأول قد أزلت هذا الكود

    هل توجد طريقة بأن لا يظهر الصندوق لمن اشترك بالقناة

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

      حذف
  5. احب اشكرك علي مدونتك المميزة اللي فعلاً متأكد اني هستفاد منها في اشياء كتير خاصة ببلوجر
    لك مني كل التقدير علي المعلومة القيمة دي

    ردحذف
    الردود
    1. الإحترام والتقدير متبادل اخي العزيز :) ..نتمنى أن يكون مانقدمه عند حسن الظن
      بالتوفيق في أعمالكم.

      حذف