إضافة اداة فوق فوتر للبت المباشر احترافية للبلوجر

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

ولكي لااطيل عليكم نبدا في الشرح 

1. اولا توجه الى قالب المدونة وابحث عن الكود التالي

2. ]]></b:skin>

3. واضف فوقها الكود التالي

#oi-web-live {border: 5px solid #fff; padding: 10px 10px;background: #29567D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixSY5ox425Npvj0TpucT-f3JQqcDJRjAIYgZS8zajsCZbzKCPg7GBaYaQ4ttP4iuU9XYKEQdLvs3AQbmS6LMVCkDcbISvV9k4ARlXuoosn9tpZysLFQ3AhpzcKD3BPmQAOavnZmY5D6yg/s1600/header-bg.png) no-repeat left bottom; color: #fff; position: relative; overflow: hidden; }.right-live {position: relative; float: right; }.right-live img { width: 118px;}.left-live { text-align: center; overflow: hidden; position: absolute; right: 0; font-size: 17px; left: 0; width: 550px; top: 40px; margin: 0 auto; display: block; font-weight: normal;font-size: 16px;}.time-live { float: left; margin-top: 10px;text-align: center; z-index: 99999999; font-size: 18px; position: relative; width: 129px; font-family: “Ta3alamFont”; }span#saaa { font-size: 37px; margin-right: 3px; margin-left: 21px; line-height: 46px; }.left-live a:hover { background: #F74047; }.left-live a { margin-right: 10px;margin-top: 6px; border-radius: 3px; transition: 0.2s; color: #fff; display: inline-block; padding: 8px; border: 2px solid #F74047; font-size: 16px; font-weight: normal;}

1.  وهذا هو كود html يمكنك اضافته في اي مكان مثلا في الهيدر فوق الفوتر في اداة داخل التخطيط …

 <div id=’oi-web-live’>
<div class=’right-live wow bounceIn animated’>
<img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZeXbN-Dy5yMNZ3K4OPjYFMU8LtU3Yb7WTgls74kvnxpTwBRNn0p7efCClikrlNbQolwm2mlD0yyBWkFfR1uBC7WOpWaXE2vHHMX36ZMYRaV5VgKygv05HGZmNl2c3rOvpEFO5GU9dJMc/s256/streaming.png’/></div>
<div class=’left-live wow bounceInUp animated’>
<span id=’ssgf1′><i class=’fa fa-microphone’/>
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك</span><a href=’#‘>قريبا…. <i class=’fa fa-spinner fa-spin’/></a></div>
<div class=’time-live wow bounceInLeft animated’><i class=’fa fa-check-square-o’/>
<span id=’saaa’>7</span>:<span id=’d9i9a’>30</span>
<span id=’ssss’>بتوقيت غرينيتش</span>
</div>
</div>
<div class=’clear’/>

1. قم بتغيير ما يلي بما تريد
2. البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك
3. وقم ايضا بتغير # برابط صفحة البت الخاص بك 
4. ونتمنى من كل شخص استفاد يترك تعليق لتحفيزنا من اجل المزيد

المصدر ويب تيك