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

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

1:54 ص

اضافات بلوجر

فيس بوك

بلوجر

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

السلام عليكم

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

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

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

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

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

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

الصق الكود

<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>

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

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

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

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

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

أصدقاء(تقارب)

تعليقات Facebook

0تعليقات Blogger

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

شارك أصدقاءك

لا توجد تعليقات على موضوع "كود صفحة خاصة لعرض الفيديوهات"

إرسال تعليق

طيف

إحصائيات

الأقسام

تابعنا عبر البريد الالكتروني

تابعنا على youtube

إشترك يصلك كل جديد علي بريدك

الأكثر مشاهده هذا الأسبوع

تابعنا على twetter

ابحث في يوتيوب

أخر التعليقات

دروس واضافات منصة بلوجر

أصدقاء المدونه

تعليقات القراء

اخترنا لكم

أرشيف