كود صفحة خاصة لعرض الفيديوهات

السلام عليكم      

اضافة مهمة لكل مدونة .... اضافة صفحة خاصة لجميع فيديوهاتك تظهر بشكل جميل جدا .....يمكنك اضافة العديد من الفديوهات بتكرار الكود الخاص للاضافه

اجعل الاضافه الجديده في راس الصفحه وليس في الاسفل ليعرف الزآئر الذي قد اطلع

على الصفحه من قبل بوجود اضافات جديده.....تابع الشرح

اجعل الاضافه في صفحه خاصه 

اذهب الى الصفحات > صفحه جديده > احذف الاكواد الافتراضيه الموجوده

في الصندوق التالي كود الاضافه كاملاً بالنتيجه الظاهره في المعاينه

الصق الكود

<link href='http://dl.dropbox.com/u/50688218/media%20box/mediaboxAdv-Minimal.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://dl.dropbox.com/u/50688218/media%20box/mootools-core-1.3.2.js' type='text/javascript'></script><script src='http://dl.dropbox.com/u/50688218/media%20box/mootools-more-1.3.js' type='text/javascript'/></script><script src='http://dl.dropbox.com/u/50688218/media%20box/mediaboxAdv.js' type='text/javascript'></script> <div style='display:none;'><style type='text/CSS'>#blog-pager,#comments,.art-postheadericons,.art-sheet:before, .art-sheet:after,.art-sheet-body:before,.art-sheet-body:after,.art-header-wrapper, .art-layout-cell art-content,.art-sidebar1,.art-sidebar2,.art-header:before,div.art-headerobject, .feed-links,.art-nav-wrapper,.art-nav:before,.art-header, .art-nav:after,.art-menu ,.art-layout-wrapper,#crosscol-wrapper,.art-page-footer, .art-footer{ display: none; } .art-layout-wrapper { display:block; width:100%; background:#F1F1F1; font-family: Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 12px; color:#ff9900; text-align: center; margin-top:-150px; } body{ background:#F1F1F1; } .bar-middle{ float:center; overflow: auto; width: 780px; height:420px; margin-top:0px; margin-left:250px; background:#b8b4b4; padding-top:5px; padding-bottom:10px; z-index: 1000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .head{ display:block; background:#786b6b; width:720px; margin-left:20px; padding-top:10px; padding-bottom:10px; font-family: Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: bold; font-size: 32px; color:#000000; text-align: center; text-shadow:3px 4px 3px #ff0000; border:1px solid #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } ul.items li a{ position: relative; display:block; font-family: Tahoma, Helvetica, Sans-Serif; font-style: normal; font-weight: bold; font-size: 12px; text-decoration: none; color: #000000 !important; text-align: right; } ul.items{ margin:10px 50px 2px 1px; } ul.items li{ position: relative; display:block; padding:5px; width:145px; min-height:130px; float:right; margin-right:1px; margin-top:5px; margin-left:2px; background:#cccccc; background-image: linear-gradient(bottom, #cccccc 7%, #000000 80%); background-image: -o-linear-gradient(bottom, #cccccc 7%, #000000 80%); background-image: -moz-linear-gradient(bottom, #cccccc 7%, #000000 80%); background-image: -webkit-linear-gradient(bottom, #cccccc 7%, #000000 80%); background-image: -ms-linear-gradient(bottom, #cccccc 7%, #000000 80%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.07, #cccccc), color-stop(0.80, #000000) ); border:1px solid #ffffff; } ul.items li:hover{ padding:5px; width:145px; min-height:130px; float:right; margin-right:1px; margin-top:5px; margin-left:2px; background:#878c8f; background-image: linear-gradient(bottom, #878c8f 7%, #cccccc 80%); background-image: -o-linear-gradient(bottom, #878c8f 7%, #cccccc 80%); background-image: -moz-linear-gradient(bottom, #878c8f 7%, #cccccc 80%); background-image: -webkit-linear-gradient(bottom, #878c8f 7%, #cccccc 80%); background-image: -ms-linear-gradient(bottom, #878c8f 7%, #cccccc 80%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.07, #878c8f), color-stop(0.80, #cccccc) ); border:1px solid #ffffff; } ul.items li img{ width:133px; height:128px; border:1px solid #ffffff; } .bar-footer{ display:block; background:#878c8f; width:700px; margin-left:30px; padding-top:10px; padding-bottom:10px; font-family: Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal; font-size: 11px; color:#fff; text-align: center; border:1px solid #ffffff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .box-body-footer a:hover{ font-size: 12px; color:#fff; } </style></div><div class="bar-middle"><div class="head">MEGTRB VIDEO STYLE</div><ul class="items"><li><p><a href="http://www.youtube.com/embed/1M_cCPaquew" rel="lightbox[flash 560 315]" title="مسافر بجوانح"><img src="http://i2.ytimg.com/vi/1M_cCPaquew/default.jpg"/><span class="caps">مسافر بجوانح عقيل يروي بعضاً من تفاصيل رحلته</span></a></p></li><li><p><a href="http://www.youtube.com/embed/KTno_dITv-Q" rel="lightbox[flash 560 315]" title="أحدنا "معاق"><img src="http://i4.ytimg.com/vi/KTno_dITv-Q/default.jpg"/><span class="caps"></span>شاهد قصة عبدالإله ، شاب سعودي يبحث عن</a></p></li><li><p><a href="http://www.youtube.com/embed/F1l5C1zGODM" rel="lightbox[flash 560 315]" title="دعيجانزل "><img src="http://i3.ytimg.com/vi/F1l5C1zGODM/default.jpg"/><span class="caps"></span> دعيجانزل الفارس المغوار سلتوح في مغامرة جديدة</a></p></li><li><p><a href="http://www.youtube.com/embed/uax-Lo_qZsM" rel="lightbox[flash 560 315]" title="من برنامج مسامير"><img src="http://i2.ytimg.com/vi/uax-Lo_qZsM/default.jpg"/><span class="caps"></span>حلقة بعنوان حلال الحكومة من برنامج مسامير</a></p></li><li><p><a href="http://www.youtube.com/embed/bhmHEqw-_LY" rel="lightbox[flash 560 315]" title="ويكي شام"><img src="http://i3.ytimg.com/vi/bhmHEqw-_LY/default.jpg"/>ويكي شام | قصر الشعب | الحلقة -1 | قامع اكبر </a></p></li><li><p><a href="http://www.youtube.com/embed/D-iu5aYnuLo" rel="lightbox[flash 560 315]" title="ويكي شام"><img src="http://i1.ytimg.com/vi/D-iu5aYnuLo/default.jpg"/>ويكي شام | قصر الشعب | الحلقة -2 | صَح صِح </a></p></li><li><p><a href="http://www.youtube.com/embed/0kPbTLOsPXI" rel="lightbox[flash 560 315]" title="ويكي شام"><img src="http://ar.m3n4.net/wp-content/uploads/video/M3N4NET-62442-0.jpg"/>ويكي شام | قصر الشعب | الحلقة -3 | المقابلة </a></p></li></ul><div class="clear"></div></div>

فضلاً قم بتوسيع الصندوق لمشاهدة الاكواد جميعها

شرح اضافة كود اليوتيوب :

اذهب لموقع يوتيوب واستعرض الفيديو المراد اضافته

انقر فوق مشاركه > ثم انقر فوق تضمين

انسخ كود التضمين واستخرج منه الرابط فقط  ثم الصقه في الاضافه

شاركها !