آخر المواضيع :
الرئيسية » , , » طريقة إضافة مربعات تبويب داخل مواضيع بلوجر

طريقة إضافة مربعات تبويب داخل مواضيع بلوجر

كتب بواسطة الكاتب غير معرف في 01‏/06‏/2012 | 00:58

Smiley face
تشاهدون الآن:
موضوع:طريقة إضافة مربعات تبويب داخل مواضيع  بلوجر.
سلسلة:[أكواد مهمة للمدونين]
نبذة:إضافة علامات التبويب لاختصار المواضيع .
الصنف:دروس,أكواد,جافاسكريبت,بلوجر
مرحبا وأهلاً بكم في درس جديد من أكواد بلوجر داخل المواضيع .
لعل الملفت في ال
إنتباه داخل موقعنا هو إستعمال مربعات التبويب داخل المواضيع، التي لها أثر رجعي مباشر على المواضيع من حيث التنسيق و التحميل (يجعل الصفحة أخف بمرتين ) و موازاةً مع ذلك إرتأينا النقص الذي تعاني منه هذه الإضافة على صفحات الأنترنت، ماجعلني شخصياً أفكر في إنزال هذه الإضافة للجمهور العريض حتى يستفيد منها لذا سنترككم مع الشرح.
إضافة مربعات تبويب:
كما قلنا سابقاً الإضافة مميزة في تنسيق الموضوع وتسريع التحميل لكن عن أمثلة إستخدامها فهي كثيرة نذكر منها:
وضع أمثلة لدروس ما....كل مثال داخل تبويب.
إضافة سلسلة فيلم....كل حلقة داخل تبويب.
إضافة عدة لينكات مختلفة  لقناة واحدة كل لينك داخل تبويب....والكثير.

الكود:
<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('link1','link2','link3','link4','link5','link6','link7','link8');

function channel(id){
 hideallids();
 showdiv(id);
}

function hideallids(){
 //loop through the array and hide each element by id
 for (var i=0;i<ids.length;i++){
  hidediv(ids[i]);
 }  
}

function hidediv(id) {
 //safe function to hide an element with a specified id
 if (document.getElementById) { // DOM3 = IE5, NS6
  document.getElementById(id).style.display = 'none';
 }
 else {
  if (document.layers) { // Netscape 4
   document.id.display = 'none';
  }
  else { // IE 4
   document.all.id.style.display = 'none';
  }
 }
}

function showdiv(id) {
 //safe function to show an element with a specified id
  
 if (document.getElementById) { // DOM3 = IE5, NS6
  document.getElementById(id).style.display = 'block';
 }
 else {
  if (document.layers) { // Netscape 4
   document.id.display = 'block';
  }
  else { // IE 4
   document.all.id.style.display = 'block';
  }
 }
}
</script>

<div align="center">
<div style="text-align: center;">
</div>
<table border="1" style="text-align:center;background-color:#cccccc; width: 240px;">
<tbody>
<tr>
<td width="25%"><input onclick="javascript:channel('link4');" type="button" value="الحلقة 4" /></td>
<td width="25%"><input onclick="javascript:channel('link3');" type="button" value="الحلقة 3" /></td>
<td width="25%"><input onclick="javascript:channel('link2');" type="button" value="الحلقة 2" /></td>
<td width="25%"><input onclick="javascript:channel('link1');" type="button" value="الحلقة 1" /></td>
</tr>
<tr>
<td width="25%"><input onclick="javascript:channel('link8');" type="button" value="الحلقة 8" /></td>
<td width="25%"><input onclick="javascript:channel('link7');" type="button" value="الحلقة 7" /></td>
<td width="25%"><input onclick="javascript:channel('link6');" type="button" value="الحلقة 6" /></td>
<td width="25%"><input onclick="javascript:channel('link5');" type="button" value="الحلقة 5" /></td>
</tr>
</tbody></table>
<hr />

 <div id="link1" style="display: block;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/C4oMy3PPNaE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link2" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/2F8cXGoSLeM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link3" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/Bg9UjZmg_dY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link4" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/Zbp1q1qYNwg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link5" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/PZzYkTYESCI?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link6" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/G0Vj7rbRiUg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div id="link7" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/PH_br4e2ryM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div> 

<div id="link8" style="display: none;">
<div align="center">
<div style="background-image: url(http://4.bp.blogspot.com/-bWtAfRp6Lbg/TzUa4Bmi9PI/AAAAAAAAAY8/Do7QbqlCSJ4/s1600/tv1.png); background-repeat: repeat; height: 533px; width: 600px;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe width="575" height="450" src="http://www.youtube.com/embed/5BseRzzmZn8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

</div>


</div>
النتيجة:



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


<script>     الكود الملون باللون الأزرق  الموجود هنا     </script>
مع إضافة/إزالة كل الأكواد التي تحتوي بداخلها اللون الأزرق.

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

Smiley face Smiley face

بقلم سليمان بوزمبراك (slimane bouzembrak)

الإسم الكامل سليمان بوزمبراك (slimane bouzembrak) ،طالب جامعي صاحب موقع من أجلك إلى الأبد,و موقع فيديوهات من أجلك,و موقع قنوات من أجلك، الهدف من خلال هذه المواقع تسهيل البحث على المواطن العربي في بحثه بشتى المواقع بحيث يضم أفضل المواضيع و المواقع في شتى المجالات ،لمزيد من المعلومات راسلني بالضغط هنا ،أو تابعونا على هذه الموقع ،أو من خلال صفحتنا على الفايسبوك.

هناك تعليق واحد:

مواضيع صديقة

فيديو الأسبوع

لقطات من الفيلم الهندي zindaghi (لمشاهدة الفيلم كاملا إضغط هنا)



تابعنا على شبكة التواصل الإجتماعية

زوار الموقع

free counters

قسم الوثائقيات

المتواجدين الآن

 
تصميم : الموقع الرسمي | Johny Template | Mas Template
تعريب: slimax-bzk| الموقع الرسمي
جميع الحقوق محفوظة © أفريل 2012 | من أجلك إلى الأبد
بدعم من: بلوجر