قبل أن نبدأ في طريقة التركيب للأداة هناك خطوة بسيطة لابد ان تقوم بها لتهيئة معرّف القناة الخاصة بك لكي تقوم بتشغيل زر الإشتراك لقناتك .. ما ستشرع بالقيام به هو التوجه إلى إعدادات القناة عبر هذا الرابط account advanced ونسخ شفرة معرف القناة الخاصة بك كما هو مبين في الصورة التالية (إضغط على الصورة للعرض بالحجم الكامل)
طريقة تركيب الإضافة
الخطوة الثانية : (التركيب)
الشكل الأول : زر الإشتراك منــبثق
زر إشتراك القناة منبثق داخل صندوق يعمل بتأثير Lightbox يتميز هذا الشكل بسكريبت حصري يجعل النافذة المنبثقة تظهر مرة واحدة لكل مستخدم وهذه التقنية تجنب إرتداد الزوار بسبب النوافذ المتكررة و المملة فالمفتاح المشغل مهيء لمرة واحدة كل 15 يوماً أو كلما حذف الزائر الملفات المؤقتة (الكوكيز) من متصفحة...ولو أمعنت النظر في الكود القادم فستلاحظ توقيت ظهور الرسالة بهذا الشكل1000*60*60*24*15 تعني ( يوم* ساعة* دقيقة* ثانية* ميللي ثانية ) ، وبالتالي لتغير التوقيت من 15 يوم إلى أسبوع مثلا .. غير الـ (15) إلى (7) وهكذا لن تظهر للمستخدم في نفس اليوم إلا في حال قام بتنظيف المتصفح من ملفات الإرتباط cookie
خطوة تركيب زر الإشتراك منبثق :
قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع الكود التالي :
<b:if cond='data:blog.pageType == "item"'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbNbz0rCx5rjtI2xq4YCUunsXMA0Mi5WtP3rcsSivUNH8k4s0KMH_u6Tdkryb7NDUu7U7G6t0g7RqFCBC0BoejXmXvdmHjFAdWwZ2Ovw7JHTteFmQ9zNh7ko3OCyRlyvpYEiH2e9lEoVJ/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>
معلومات عن الكود
ملاحظة مهمة
كما أشرت سابقا أن هذا الزر يظهر للزائر مرة واحدة فقط إلى غاية مدة يحددها السكريبت او في حالة قام الزائر بتنضيف المتصفح من ملفات الإرتباط لذلك في حالة أردت أن يظهر الزر بالشكل المتكرر إستبدل كود 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>
الشكل الثاني : زر الإشتراك منـــزلق
هذا الزر خلاف الأول لا يتبع تواجد ملفات التعريف بالمدونة على المتصفح لأنه مصمم بطريقة بحيث لا تشوش على الزائر كما انه يأخذ مكان جانبي في أقصى يمين القالب مع إمكانية الفتح او الإغلاق للصندوق .
خطوة تركيب زر الإشتراك منــزلق:
<b:if cond='data:blog.pageType == "item"'> <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='' 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>UCTaa5ZWM2JAer5xH7am9Esg
معلومات عن الكود
الشكل الأخير : زر الإشتراك ثابت
وأخير هذا الشكل لايحتوي على اي من أكواد javascript وهو مصمم بنفس الشكل الأول إلا أنه يأخذ مكان ثابت على أعمدة القالب وأفضل مكان له كما هو معهود في القائمة الجانبية.خطوة تركيب زر الإشتراك منــزلق:
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbNbz0rCx5rjtI2xq4YCUunsXMA0Mi5WtP3rcsSivUNH8k4s0KMH_u6Tdkryb7NDUu7U7G6t0g7RqFCBC0BoejXmXvdmHjFAdWwZ2Ovw7JHTteFmQ9zNh7ko3OCyRlyvpYEiH2e9lEoVJ/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>
