إظهار صورة فيديو يوتيوب في الصفحة الرئيسية دون اضافة صورة داخل التدوينة + اقرأ للمزيد لمدونات بلوجر

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

قبل اضافة الكود يمكنك معاينة الكود بعد تفعيله على تلك المدونة التجريبية youtube-thumbs وبعد ذلك يمكنك الدخول الى قالب ثم أخذ نسخة احتياطية منه ومن ثم الدخول الى تعديل HTML ثم البحث عن الوسم التالى </head> ثم ضع الكود التالى فوقه ثم قم بحفظ القالب. 


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
// change the dimension variable below to be the max pixel width you want the thumbnails to be
var dimension = 140;
// set this to be the word count of the lead-in
var words = 80;
// set this to be left, right, none or inherit
var orientation = "left";
// set 1 for squared image or 0 for proportional,
// squared images only works for images hosted in Picasa
var square = 0;
// continuation of the introduction paragraph
var addon = "...";
// optional read more link, leave empty if you don't want it
var readmore = "Read more";
// make the image thumbnail link to the blog post
var imagelink = 1;
// image margins such as 1em or 5px
var margin = "1em";
// kill lightbox function
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
 var html = this.parentNode.innerHTML;
 this.parentNode.innerHTML = html;
 this.onmouseover = null;
};
}
}
if (imagelink){ if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
} }
$(document).ready(function() {
$('.post-body').each(function(n, wrapper){
var newContents = "";
var wrapper = $(wrapper);
var image = $(wrapper).find('img').first();
var youtubeObject = $(wrapper).find('object').first();
var youtubeFrame = $(wrapper).find('iframe').first();
var link = $(wrapper).parent().find('h2 a').attr('href');
var textContents = wrapper.text().split(' ').slice(0,words).join(' ');
if (words > 0) textContents += addon;
wrapper.empty();
if (image.attr('src')) {
var imageOriginalHeight = image.height();
var imageOriginalWidth = image.width();
var imageParent = $(image).parent();
wrapper.append(imageParent).append(textContents);
if (square) {
image.attr({src : image.attr('src').replace(/sBd{3,4}/,'s' + dimension + '-c')});
image.attr('width',dimension).attr('height',dimension);
} else {
image.attr({src : image.attr('src').replace(/sBd{3,4}/,'s' + dimension)});
image.attr('width',dimension);
var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension).toFixed(0);
image.attr('height',newHeight);
}
} else if (youtubeObject.attr('data-thumbnail-src')){
var image = $('<img>').attr('src',youtubeObject.attr('data-thumbnail-src')).attr('width',dimension).attr('height','auto');
var imageParent = $('<a>').attr('href',link).append(image);
wrapper.append(imageParent).append(textContents);
} else if (youtubeFrame.attr('src')){
var urlarray = youtubeFrame.attr('src').split("/");
var urllink = 'https://ytimg.googleusercontent.com/vi/' + urlarray[4] + '/0.jpg';
var image = $('<img>').attr('src',urllink).attr('width',dimension).attr('height','auto');
var imageParent = $('<a>').attr('href',link).append(image);
wrapper.append(imageParent).append(textContents);
} else {
wrapper.append(textContents);
}
imageParent.css('clear','none').css('float',orientation);
switch (orientation) {
case "left":
imageParent.css('margin-left',0).css('margin-right',margin);
break;
case "right":
imageParent.css('margin-left',margin).css('margin-right',0);
break;
default:
imageParent.css('margin-left',margin).css('margin-right',margin);
break;
}
if (imagelink) {
image.parent().attr('href',link);
}
if (readmore) {
wrapper.append('<br /><a href="' + link + '">' + readmore + '</a>');
} wrapper.append('<hr>');
$('hr').css('width','100%').css('background-color','transparent').css('border-width',0);
});
});
//]]></script>
</b:if>



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

يمكنك الحصول على الكود من هنا أيضا وهنا مصدر الكود من مدونة المبرمج. رجاءا الحفاظ على حقوق التكويد لمدونة المبرمج وعدم تغيير روابط داخل الكود.

إضافة المصمم الرائع محمد أبو الغرانيق على الموضوع:

توضيحا لطريقته الفعالة بعد تجربتها. عندما تريد ظهور صورة من الفيديو بالرئيسية وبدون استخدام اكواد جافا سكريبت وغيرها يجب عليك عند انشاء موضوع جديد وضع كود الفيديو بهذه الطريقة
<iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube.com/embed/caTkcpPmq_s" width="100%"></iframe>
بشرط تغيير الكود المظلل السابق بالكود الذى تم تحديده بالصورة التاليه ويمكنك الحصول عليه عندما تضغط على نشر share للفيديو من اليوتيوب لتحصل على كود نشره داخل مدونتك أو موقعك

هناك 6 تعليقات:

  1. شكراً أخي وجزاك الله كل خير :)

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

    وجزاك الله كل خير :)

    ردحذف
  2. مع العلم أنه يوتيوب ومن غير يتيوب يعني كذا موقع للفيديوهات

    ردحذف
  3. طيب عندي قالب ميجا ماج لكن مشكلته
    ان الصور المنسوخه داخل الموضوع التي لم يتم تحميلها لا تضهر كصور مصغره في الرئيسيه مع انها تظهر داخل الموضوع
    إذا عندكم كود أو إضافه تحل المشكله نكون شاكرين لكم
    في حالة الرد وحل المشكله نرجوا تنبيهنا على الفيس بوك ان أمكن
    http://facebook.com/suhailnews

    ردحذف
  4. مشكور أخي الكريم على الطريقة الرائعة فعلاً مدونتك مفيدة وتقدم كل ما هو رائع ولك كل الشكر
    Shahid Anime

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية