عرض صورة او فيديوا داخل اطار بشكل بارز |SWE-UP

عرض صورة او فيديوا داخل اطار بشكل بارز|SWE-UP

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

دعونا نبدأ 
 نذهب إلى بلوجر>>قالب>>تحريرHTML>>نضع مؤشر الماوس في اي مكان داخل القالب>>نظغط Ctrl+F

 ونلصق الكود التالي فوقه مباشرة ]]></b:skin>  ثم نبحث عن هذا الوسم

.swe-youtube{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:10px 0 40px 7.5%;padding:8px 8px 5px;width:500px;box-shadow: 1px 30px 30px -26px #818181}
.swe-youtube object{border:0}

احفظ القالب ومبارك عليك حيث انه يمكنك اضافة اي فيدوا لمدونتك دون تضمينه فقط بمجرد حصولك على معرف الفيديو

HTMLللاضافة اي فيدوا لمدونتك ما عليك الا كتابة هذا الكود داخل محرر ال.

<div class="swe-youtube">
<object data="//www.youtube.com/embed/CP-B4p4-gAk" height="281" width="500"></object>
</div>

يمكنك تغيرمعرف الفيدوا باي معرف تريده ايضا يمكنك تغير ابعاد الفيديو بما يناسبك كما يمكنك استخدام اطار الظل لعرض اي صورة فقط ضع رابط الصورة بدل رابط الفيديو .

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

تحذير : ممنوع نقل الموضوع بدون ذكر المصدر مرفقا برابط الموضوع 

  هنا المصدر

http://swe-up.blogspot.com/2014/04/Showing-picture-or-video-within-the-framework-of-the-shade-prominently.html