صناعة آداة متعددة التبويبات بتقنية جي كويري
اقرأ ايضا
اضافة مميزة لمدونات بلوجر وهي آداة متعددة التبويبات آداة وليست قسم هناك
فرق هذه آداة يمكن ان تضيفها داخل الموضيع أو في آداة HTML/JavaScript في
اى مكان بقالبك مفيدة جداً لأصحاب ا لمدونات التي بها انواع متعددة من
المواضيع والأقسام وايضاً لمن يستخدمون العديد من الإضافات يمكن ان تجمعها
في إضافة واحدة يمكن ان تضيف بها مثلا جميع اضافات المواقع الإجتماعية كثير
من الأشياء فقط أحتاج منك قليل من الإنتباه لتنفيذها وهي غاية في السهولة
ويمكنك معاينتها في البداية من الرابط التالي
أولا ادخل الى تحرير قالبك وأضف الكود التالي فوق الوسم </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" type="text/css" />
<script>
jQuery(document).ready(function($) {
$("#tabs").tabs();
});
</script>
مع حذف الكود الاحمر ان كانت لديك مكتبة JQuery في قالبك فعلياً
واستبدال الكود الأزرق بكود المظهر الذي يناسبك ستجد في نهاية الموضوع اكواد لعدة مظاهر اختار ما يناسبك
وأضف الكود التالي فوق الوسم ]]></b:skin> إن اردت الازرار من اليمين الى اليسار كما في المعاينة
.ui-tabs .ui-tabs-nav li {float: right !important;}
اما الكود التالي هذا هو كود تشغيل وعمل الإضافة هذا تضيفه في موضوع طبعا بعد تغيير الموضوع من وضع التأليف الى وضع HTML أو في آداة HTML/JavaScript كما تريد
<a
href='http://imgads.night-hawk.net/ck.php?n=a988bd67&amp;cb=981498135'
target='_blank'><img
src='http://imgads.night-hawk.net/avw.php?zoneid=97&amp;cb=981498135&amp;n=a988bd67'
border='0' alt='' /></a>
<div id="tabs">
<ul>
<li><a href="#tabs-1">التبويب الاول</a></li>
<li><a href="#tabs-2">التبويب الثاني</a></li>
<li><a href="#tabs-3">التبويب الثالث</a></li>
</ul>
<div id="tabs-1">
محتوى التبويب الأول
</div>
<div id="tabs-2">
محتوى التبويب الثاني
</div>
<div id="tabs-3">
محتوى التبويب الثالث
</div>
</div>
طبعا تستبدل جملة محتوى التبويب بكلمات أو فديو أو كود اضافة اى شئ تريد
وان اردت زيادة عدد التبويبات كرر الأكواد الحمراء مع تغيير الرقم الى 4 ثم 5 او اكثر كل تكرار يساوي تبويب جديد
والتكرار يكون بعده مباشرة
والآن اترككم مع المظاهر اختار مظهر الإضافة الاقرب لألوان قالبك وبالتوفيق مقدماً
 |
 |
 |
|---|---|---|
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/black-tie/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/blitzer/jquery-ui.css" type="text/css" /> |
 |
 |
 |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/dark-hive/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/dot-luv/jquery-ui.css" type="text/css" /> |
 |
 |
 |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/eggplant/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/excite-bike/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/flick/jquery-ui.css" type="text/css" /> |
 |
 |
 |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/hot-sneaks/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/humanity/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/le-frog/jquery-ui.css" type="text/css" /> |
 |
 |
 |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/mint-choc/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/overcast/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/pepper-grinder/jquery-ui.css" type="text/css" /> |
 |
 |
 |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/redmond/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/south-street/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/start/jquery-ui.css" type="text/css" /> |
 |
 |
 |
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/sunny/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/swanky-purse/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/trontastic/jquery-ui.css" type="text/css" /> |
 |
 |
|
| <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-darkness/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-lightness/jquery-ui.css" type="text/css" /> | <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/vader/jquery-ui.css" type="text/css" /> |
إرسال تعليق