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  قم بإستبداله بحساب قناتك.
    الكود المحدد بهذا اللون خاص برابط صورة الخلفية الحمراء تستطيع إستبداله بصورة خاصة بك