جدول البث المباشر لموقع Aflam4You على البلوجر

السلام عليكم ورحمة الله وبركاته ،
مرحبا بكم زوار مدونة سكيمو في درس جديد و حصري . موقع Aflam4You من المواقع العربية الكبيرة التي تقوم بالنقل الحي للمباريات  و الاحداث الرياضية ، الموقع يتوفر على جدول للبث جد جد إحترافي و هائل جدول بالتقنية CSS و JQUERY ، جدول متحرك و متناسق الألوان ، جدول جذاب يحتوي على أربعة إختيارات و ثلات قائمات "مميز ، قنوات الرياضة و قنوات أخبار" .

في هذا الموضوع إنشاء الله سنقدم لكم جدول موقع Aflam4You على البلوجر و بكل الخاصيات ، لا تنسى مشاركة الموضوع .

جدول البث المباشر لموقع Aflam4You على البلوجر

معاينة  الجدول

• نتوجه إلى المدونة >>>   قالب .
• تحرير HTML  >>> ثم نبحث عن  </Head>
• ثم نضيف الكود التالي فوقه  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
 <script src='http://yourjavascript.com/43213721222/1.js' type='text/javascript'/>
 <script src='http://yourjavascript.com/82714233122/2.js' type='text/javascript'/>
 <script src='http://yourjavascript.com/21467325221/3.js' type='text/javascript'/>
<script>
$(document).ready(function(){
$(&#39;#tabs div&#39;).hide();
$(&#39;#tabs div:first&#39;).slideDown();
$(&#39;#tabs ul li:first&#39;).addClass(&#39;active&#39;);

$(&#39;#tabs ul li a&#39;).click(function(){
$(&#39;#tabs ul li&#39;).removeClass(&#39;active&#39;);
$(this).parent().addClass(&#39;active&#39;);
var currentTab = $(this).attr(&#39;href&#39;);
$(&#39;#tabs div&#39;).slideUp();
$(currentTab).slideDown();
return false;
});



});
</script>

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

/*--- HUKMAT   Tableau --- */

.htab li {
    background: none repeat scroll 0 0 #F6F6F6;
    border-radius: 5px 5px 0 0;
    float: right;
    height: 30px;
    line-height: 30px;
    list-style: none outside none;
    margin: 0 3px 0 0;
    padding: 0 10px;
    width: auto;
}
.htab li:hover {
    background: none repeat scroll 0 0 #5C6B7F;
    color: #fff;
}
.htab li:hover a {
    color: #fff;
}
.htab li.active {
    background: none repeat scroll 0 0 #146B7F;
    color: #5C6B7F;
}
.htab li.active a {
    color: #EB8F00;
}
.htab li a {
    text-decoration: none;
}
.htab {
    clear: both;
    height: 30px;
    margin: 0;
}
.ctab {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 2px solid #146B7F;
    display: none;
    margin: 0 0 10px;
}
.ddd {
    background: none repeat scroll 0 0 #fff;
    border: 2px solid #146B7F;
}
.ddd2 {
    background: url("http://s29.postimg.org/je64cldf7/image.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 2px solid #146B7F;
    color: #146B7F;
    line-height: 30px;
}
.rowa {
}
.rowa:hover {
    background: none repeat scroll 0 0 #FCFCFC;
}
.span8 {
    float: left !important;
}

• ثم نضغط على حفظ .

المرحلة الثالية

• نضع الكود الثالي للجدول في خاصية    "HTML"   عند كتابة موضوع . تابع الصورة التالية :

• • الكود التالي :

شارك الموضوع لظهور الكود المخفي