إضافة بحث فيديوهات اليوتيوب المتطور لمدونتك - كلمات ليست كالكلمات

إضافة بحث فيديوهات اليوتيوب المتطور لمدونتك

بواسطة : Unknown | في : 3:54 ص | ليست هناك تعليقات | نشر في : jequrey

السلام عليكم
اضافة جميلة جدا .....من خلالها تستطيع البحث في اليوتيوب وانت في مدونتك
الطريقة
تذهب الى لوحة التحكم ثم القالب قم بتوسيع القالب ثم ابحث عن هذا الوسم

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script type='text/javascript'>//<![CDATA[ $(document).ready(function(){   $(".search_input").focus();   $(".search_input").keyup(function() {     var search_input = $(this).val();     var keyword= encodeURIComponent(search_input);     var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';      $.ajax({       type: "GET",       url: yt_url,       dataType:"jsonp",       success: function(response){         if(response.data.items){           $.each(response.data.items, function(i,data){             var video_id=data.id;             var video_title=data.title;             var video_viewCount=data.viewCount;             var video_frame="<iframe width='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";             var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";             $("#result").html(final);           });         } else {           $("#result").html("<div id='no'>No Video</div>");         }       }     });   }); }); //]]></script> <style>  /* el DIV donde colocamos el buscador */   #input_box {     text-align: center;     width:500px;   }   /* el cuadro de búsqueda */   .search_input {     font-size: 20px;     padding: 5px;     text-align: center;     width: 400px;   }   /* el DIV donde se mostrarán los resultados */   #result {     background-color: #000;     margin-top:25px;     min-height:380px;     width:500px;   }   /* un texto, sólo visible cuando no hay resultados a mostrar */   #no { text-align: center; }   /* el título del video encontrado */   #title {     font-size: 18px;     height: 40px;     line-height: 1;     padding-bottom: 10px;     text-align: center;   }   /* el texto inferior con el contador de YouTube */   #count {     height: 20px;     padding-top: 10px;     text-align: right;   } </style>

ثم نحفظ القالب

المرحله الثانيه : وهى وضع الكود التالى فى أى مكان نرغب وضع بحث اليوتيوب فيه على مدونتك طبعا تضعه في اداة جافا سكربت

الكود

شاركها !

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

إرسال تعليق

جميع الحقوق محفوظة 2012 | أعلن معنا | رخصة الإستخدام والنشر | خريطة الموقع | سياسة الخصوصية |