recent
أخبار ساخنة

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

Ahmed Elsayed
الصفحة الرئيسية

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

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

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




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


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

قم للدخول الى المظهر ومن ثم تحرير HTML
ثم اضغط على CTRL+F

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


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

<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>

ملاحظة هامة : هذا الكود يظهر للزائر مرة واحدة فقط وبامكانك مشاهدة الفيديو لمعرفة كيفية التركيب والتحكم فيه

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



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




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




    

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

  • تقوم بالانتقال الى صفحة التخطيط  ومنها اضافة java scribt ووضع هذا الكود 
    • 





<!--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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwpKNZ6CLt7nFw3SlTFvkvyQEl3TUsLebXvNCRualmVZ6NBxpgqvf7FfyWro6PWn9GwrmjuOaYPce2WWmCWCF-aDmxOB1ghw0pkkJKj0Y1J_sRSJom0NPsXalAquMu8KbgPZHhgd7dqccK/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>


























































google-playkhamsatmostaqltradent