الخميس, مارس 20, 2014

كيفية اضافة مكتبة فيديوهات اليوتيوب لمدونتك بشكل احترافى

اضافة مكتبة فيديوهات اليوتيوب لمدونتك بشكل احترافى

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

♦ المعاينـــــــــــــــة ♦







كــــــــــــــــود الاضافـــــــــــــــــة
<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('link1','link2','link3','link4','link5','link6','link7','link8');
function channel(id){

hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</script>
<br />
<div align="center">
<div style="text-align: center;">
</div>
<table border="1" style="background-color: #cccccc; text-align: center; width: 240px;">
<tbody>
<tr>
<td width="25%"><input onclick="javascript:channel('link4');" type="button" value="الحلقة 4" /></td>
<td width="25%"><input onclick="javascript:channel('link3');" type="button" value="الحلقة 3" /></td>
<td width="25%"><input onclick="javascript:channel('link2');" type="button" value="الحلقة 2" /></td>
<td width="25%"><input onclick="javascript:channel('link1');" type="button" value="الحلقة 1" /></td>
</tr>
<tr>
<td width="25%"><input onclick="javascript:channel('link8');" type="button" value="الحلقة 8" /></td>
<td width="25%"><input onclick="javascript:channel('link7');" type="button" value="الحلقة 7" /></td>
<td width="25%"><input onclick="javascript:channel('link6');" type="button" value="الحلقة 6" /></td>
<td width="25%"><input onclick="javascript:channel('link5');" type="button" value="الحلقة 5" /></td>
</tr>
</tbody></table>
<hr />
<div id="link1" style="display: block;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/C4oMy3PPNaE?rel=0" width="575"></iframe>
</div>
</div>
<div id="link2" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/2F8cXGoSLeM?rel=0" width="575"></iframe>
</div>
<div id="link3" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/Bg9UjZmg_dY?rel=0" width="575"></iframe>
</div>
<div id="link4" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/Zbp1q1qYNwg?rel=0" width="575"></iframe>
</div>
<div id="link5" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/PZzYkTYESCI?rel=0" width="575"></iframe>
</div>
<div id="link6" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/G0Vj7rbRiUg?rel=0" width="575"></iframe>
</div>
<div id="link7" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/PH_br4e2ryM?rel=0" width="575"></iframe>
</div>
<div id="link8" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/5BseRzzmZn8?rel=0" width="575"></iframe>
</div>
</div>
اذا اردت تغير مقاطع الفيديو قم بتغيير عنوان اليوتيوب اذا اردت تغير مضمون العرض قم بتغيير هذا الكود

فى المكان الذى تريد عرضة
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/PH_br4e2ryM?rel=0" width="575"></iframe>
</div>
اذ اعجبك الموضوع ضع رد 
من فضلك اضغظ لايك لمشاهدة لينك التحميل

2 تَعْلِيق:

  1. من اروع الاضافات اللي شفتها وكنت ادور عنها تسلم غلاي ربي يسعدكك
    ولو تقدر تشوف لنا طريقة مكتبة للصور اكوون ممنون لك :)

    ردحذف
    الردود
    1. شكرا لزيارتك المدونة فى خدمتك دائما

      حذف