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

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

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

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

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

شرح طريقة إضافة زر اشتراك يوتيوب في نافذة منبثقة داخل مواضيع بلوجر 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;}
http://jistweb.blogspot.com/

تقوم بتغيير رابط http://jistweb.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/UCECt81Q_K4tQ4VEWalsLvoQ?sub_confirmation=1'>اشتراك</a></div></div>
</b:if>

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

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

</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 شاهد الفيديو التالي لكي تفهم:

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

اعلان اسفل المقال
كثير من الفشل فى الحياة جاء لأشخاص توقفوا عندما لم يعلموا كم كانوا قربين من النجاح.

إرسال تعليق

جميع الحقوق محفوظة © جيست ويب - Jistweb تعريب وتطوير جيست ويب