صندوق الإشتراك في قناة يوتيوب YouTube (منــبثق..منـــزلق..و ثابت)
recent
أخبار ساخنة

صندوق الإشتراك في قناة يوتيوب YouTube (منــبثق..منـــزلق..و ثابت)

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

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


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

 

الخطوة الأولى : (التهيئة)

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

الخطوة الثانية : (التركيب)


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

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


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

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

<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='UCTaa5ZWM2JAer5xH7am9Esg' 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:none;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:0 5px 0 20px;font-size:14px;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> فوقه أي قبله قم بوضع الكود التالي :


<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='UCTaa5ZWM2JAer5xH7am9Esg' 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 وهو مصمم بنفس الشكل الأول إلا أنه يأخذ مكان ثابت على أعمدة القالب وأفضل مكان له كما هو معهود في القائمة الجانبية.

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

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


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





ملحق هام
1- الكود التالي هو لمكتبة jquery ، إنسخ الرابط <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> وأضفه فوق </head> إذا كان موجود أو أي إصدار آخر فلا داعي لإضافته .
2- الكود التالي هو لإظهار أيقونات font-awesome ، إنسخ الرابط <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> وأضفه فوق </head> إذا كان موجود فلا داعي لإضافته أو قم بتحديثه (أخر تحديث 4.7.0) .


google-playkhamsatmostaqltradent