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

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

السلام عليكم

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

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

كل ما علينا القيام به هو إضافة بعض الأكود بطريقه سهله جدا.

المرحله الاولى : نذهب إلى تحرير HTML الخاص بقالب المدونه ونقم بالبحث عن هذا السطر

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

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

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