إضافة زراشتراك يوتيوب في نافذة منبثقة داخل مواضيع بلوجر

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

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

شرح طريقة إضافة زر اشتراك يوتيوب في نافذة منبثقة داخل مواضيع بلوجر 2022

أولا نبدأ بأكواد CSS  تبحث عن الكود التالي: ]]></b:skin>

فوقه مباشرة تضع الكود التالي:

  /* Widget jistweb.com */
#chslidingbox{background:#fff;width:100%;max-width:285px;height:120px;position:fixed;overflow:hidden;border:none;left:-360px;z-index:99;text-align:left;box-shadow:var(--widget-shadow);transition:all .4s ease-out;border-radius: var(--border-radius);}
.chslidingbox-title{background:#f50000;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:left;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-left:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px;text-align: right;}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
.chslidingbox-container ul li:before {margin: 0 0 0 -3px!important;visibility: hidden;}
.shower{bottom:60px}
.hide{bottom:-145px}
.jistwebsub {width: 100%;text-align: center;padding-top:25px;font-size: 18px;font-weight: 700;}
.jistwebsub a {color: white;border: 1px solid red;padding: 5px 15px;border-radius: 5px;background: red;vertical-align: middle;font-weight: 300;}
.jistwebsub a:after {content: '\f167';font-family: 'Font Awesome 5 Brands';padding-right: 5px;}
.jistwebsub a:hover {text-decoration: none;background: #c80000;border-color: #c80000;}
https://copper-info.blogspot.com/

تقوم بتغيير رابط https://copper-info.blogspot.com برابط مدونتك كاملا.

تبحث مرة أخرى عن الكود التالي :(ستجد اثنين والتاني هو المقصود وإذا لم تشتغل جرب الأول)<data:post.body/>

أسفل الكود مباشرة تضع الكود التالي:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shower' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:right;margin:0 15px;'>اشترك في قناتنا على اليوتيوب &#10084;</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
    </div>
<div class='jistwebsub'><a href='https://www.youtube.com/channel/UCAw8_TDr7xidieqHa468AIg?sub_confirmation=1'>اشتراك</a></div></div>
</b:if>

وتقوم بتغيير https://www.youtube.com/channel/UCAw8_TDr7xidieqHa468AIg برابط قناتك على اليوتيوب.

والخطوة الأخيرة تبحث عن الكود التالي:</body>

فوقه مباشرة تقوم بلصق الكود التالي:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{left:"0px"}:{left:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({left:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

ومبروك عليك الآن تدخل إلى أي موضوع في مدونتك ستجد أن الإضافة تعمل تنزل إلى الأسفل وستيظهر زر الإشتراك على يوتيوب.

إذا كانت أيقونة اليوتيوب لاتظهر على الإضافة يمكنك تحميك كود من هنا وتقوم بلصقه في أعلى أكواد Css

لدعمنا بارك الله فيكم فضلا وليس أمرا أن تشتركوا في قناتنا على اليوتيوب لنستمر في نشر المزيد من الشروحات المفيدة للجميع.