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

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

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

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

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

مميزات اداة عرض قناة اليوتيوب

1- عرض صورة قناة YouTube بشكل دائري جميل.
2- عرض اسم قناة اليوتيوب بحجم كبير وواضح.
3- عرض زر الإشتراك بشكل جميل وانيق مع وجود انيميشن لإثارة انتباه الزائر (جرس متحرك).
4- رابط زر الإشتراك يوصل الى صفحة تطلب من الزائر الإشتراك مباشرة.

معاينة اداة عرض قناة اليوتيوب مع زر الإشتراك


طريقة تركيب اداة زر الإشتراك في قناة Youtube على مدونة بلوجر

1- اولا يجب علينا تجهيز رابط قناتنا الإستثنائي، والذي يتميز بكونه يطلب من الزائر الإشتراك مباشرة بعد الدخول اليه، نقوم بجلب رابط قناتنا ونظيف له العبارة المحددة بالاحمر كما هو موضح اسفله:
https://www.youtube.com/channel/UCKbN8u7XAW_gVbRnnylKnBg/?sub_confirmation=1

2-
يجب علينا جلب رابط صورة شعار قناة اليوتوب كما هو موضح في الصورة ونحتفظ به في NotePad حتى نحتاجه :

على سبيل المثال هذا هو رابط صورة شعار مدونتي الذي نسخته:
https://yt3.ggpht.com/ytc/AAUvwnjSL-i8Ni_vjd_j8a7m1DMQDLIaZpeP_gC7xH-U=s88-c-k-c0x00ffffff-no-rj

3-
نقوم بتركيب كود CSS التالي فوق ]]></b:skin> او قم بوضعهم وسط <style></style> فوق </head>.
.subsccontainer{width:100%;height:auto;background-color:#eee;position:relative;padding:10px;box-sizing:border-box;text-align:right;direction:rtl;font-size:25px;font-family:sans-serif;border:solid 1px #b5b5b5;border-radius:5px;box-shadow:0 0 5px #eee;background:linear-gradient(325deg,black,#eee);}
#btnsub{margin:10px 0;padding:5px 15px;font-weight:bold;text-decoration:none;color:#fff;background-color:#ff0000;border-radius:5px;line-height:25px;display:inline-block;text-shadow:-5px 2px 5px #000;}
.svgiconsub{display:inline-block;}
#svgyoutube{width:25px;height:25px;float:right;margin-left:10px;filter:drop-shadow(-3px 3px 6px black);}
.svgiconsub > svg > path{fill:#fff;}
#svgbell{width:20px;height:20px;float:left;margin-right:15px;font-weight:bold;animation:movethebell 9s infinite;filter:drop-shadow(-3px 3px 6px black);}
@keyframes movethebell{0%{transform:rotate(0deg);}1%{transform:rotate(32deg);}2%{transform:rotate(30deg);}3%{transform:rotate(-28deg);}4%{transform:rotate(26deg);}5%{transform:rotate(-24deg);}6%{transform:rotate(22deg);}7%{transform:rotate(-20deg);}8%{transform:rotate(18deg);}9%{transform:rotate(-16deg);}10%{transform:rotate(14deg);}11%{transform:rotate(-12deg);}12%{transform:rotate(10deg);}13%{transform:rotate(-8deg);}14%{transform:rotate(6deg);}15%{transform:rotate(-4deg);}16%{transform:rotate(2deg);}17%{transform:rotate(0deg);}100%{transform:rotate(0deg);}}
#sora9ana{right:0;width:88px;height:88px;margin:auto;display:inline-block;border-radius:100px;overflow:hidden;border:solid 2px #ddd;box-sizing:content-box;}
#sora9ana img{width:88px;height:88px;object-fit:cover;border-radius:100px;margin:0;padding:0;}
#ism9ana{display:block;text-decoration:none;color:#fff;text-shadow:0 0 5px #000;}
#tanicon{display:block;width:calc(100% - 100px);height:80px;padding:0 5px 0 0;box-sizing:border-box;float:left;}

4-
قم بإستبدال المعلومات المحددة بالأحمر بمعلومات قناتك على يوتيوب وبالروابط التي جمعناها في 1 و 2 .
<div class="subsccontainer">
<a id="sora9ana" target="_blank" href="رابط القناة"><img alt="اسم القناة" src="رابط شعار القناة"></a>
<div id="tanicon">
<a id="ism9ana" target="_blank" href="رابط القناة">اسم القناة</a>
<a id="btnsub" target="_blank" href="رابط القناة"><div class="svgiconsub"><svg id="svgyoutube" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>اشتراك<svg id="svgbell" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.137 3.945c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.667 2.712-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.195-10.594-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm3 20c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6zm5.778-11.679c.18.721.05 1.446-.304 2.035l.97.584c.504-.838.688-1.869.433-2.892-.255-1.024-.9-1.848-1.739-2.351l-.582.97c.589.355 1.043.934 1.222 1.654zm.396-4.346l-.597.995c1.023.616 1.812 1.623 2.125 2.874.311 1.251.085 2.51-.53 3.534l.994.598c.536-.892.835-1.926.835-3-.001-1.98-1.01-3.909-2.827-5.001zm-16.73 2.692l-.582-.97c-.839.504-1.484 1.327-1.739 2.351-.255 1.023-.071 2.053.433 2.892l.97-.584c-.354-.588-.484-1.314-.304-2.035.179-.72.633-1.299 1.222-1.654zm-4.444 2.308c0 1.074.299 2.108.835 3l.994-.598c-.615-1.024-.841-2.283-.53-3.534.312-1.251 1.101-2.258 2.124-2.873l-.597-.995c-1.817 1.092-2.826 3.021-2.826 5z"/></svg></div></a>
</div>
</div>

5-
بعد التعديل على المعلومات قم بوضع الأكواد في الشريط الجانبي Sidebar من خلال التنسيق.

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

التعليقات

أحدث أقدم