اليوم وفى موضوع جديد من مدونة نصائح للمدونين أقدم لكم شرح بسيط لكيفية اضافة مكتبة فيديوهات اليوتيوب لمدونتك بشكل احترافى ، الاضافة عبارة عن مجموعات مربعات منسقة بشكل افقى فى صفين بمجرد الضغط على أحدهم يظهر فيديو يوتيوب تقوم بتشغيله ، ولكى لا أطيل عليكم هيا بنا للشرح والمعاينة لذلك
♦ المعاينـــــــــــــــة ♦
كــــــــــــــــود الاضافـــــــــــــــــة
<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>
اذ اعجبك الموضوع ضع رد
من اروع الاضافات اللي شفتها وكنت ادور عنها تسلم غلاي ربي يسعدكك
ردحذفولو تقدر تشوف لنا طريقة مكتبة للصور اكوون ممنون لك :)
شكرا لزيارتك المدونة فى خدمتك دائما
حذف