مساحة إعلانية

الاثنين، 5 مايو، 2014

الاثنين، 5 مايو، 2014

صناعة آداة متعددة التبويبات بتقنية جي كويري

Create Multi Tabbed Widget Blogger
اضافة مميزة لمدونات بلوجر وهي آداة متعددة التبويبات آداة وليست قسم هناك فرق هذه آداة يمكن ان تضيفها داخل الموضيع أو في آداة 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 كما تريد

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

هناك 35 تعليقًا:

  1. رائع جدا ابداع مميز

    ردحذف
  2. انا لقيت الأضافة دى فى مدونة قديمة جدا انا بقول فكرتى اكيد دة من فكرك سلمت يداك وابدعت

    ردحذف
  3. شكراً أخي احمد لم افهم يا طيب هل تقصد ان هناك من عرض اضافة مشابهة لهذه من قبل ؟؟ ان كان كذلك هذا امر طبيعي اخي فهذه احدى الإضافات الرسمية في جي كويري يعني كالقوالب وكباقي الإضافات هناك من يعرضها اكيد لكن طبعا الموضوع كاملا وشرحها وتطوير اجزاء بها كل هذا خاص لمدونتي لا يمكن ان استخدم النقل وان استخدمه يجب ان احفظ حقوق الغير بالإسم والرابط كما احب ان تحفظ حقوقي فما لا ارتضيه لنفسي لا ارتضيه لغيري وشاكر لمرورك

    ردحذف
    الردود
    1. اسف اذا كنت اسات فهمى لك واعرف ان مواضيعك حصرية ومنسقة 100%

      حذف
    2. لا تأسف يا غالي وفي كل الحالات لعل التوضيح مفيد شرفت بمرورك تحياتي =r

      حذف
  4. السلام عليكم
    سبحان الله قبل ايام اردت سؤالك عنها ^_^ ولكني ضننتها دعم فني :) حياك الله ياطيب وشكراً لك..
    اريد رأيك بقالب جديد اقوم بتصميمه :) : http://new2001.blogspot.com/

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      =s الحمد لله اخي محمد الذي ييسر الأمر بالنسبة للقالب اظن انه ما يزال في البداية فلا يمكن الحكم لكنه مبدئياً يحتاج ضبط في المسافات اضافة ان هناك شوائب في الصور ويحتاج لضبط المسافات لكن يا طيب أظن ان حور عبد الله هذه مدونة احذر ان كان هناك نسخ ولو بسيط مع اكتشافه تهدم السمعه ويجب اخذ اذن المصمم وبالتوفيق

      حذف
    2. اشكرك اخي العزيز ^_^ بالنسبة للنسخ فلا ثم لا لالالالا في هذا القالب اعتمدت على خبرتي فقط :) وبالنسبة للشعار فأنا اخترته كتميز كون الشعار دائري + اعجبني ^_^ اشكرك يا طيب

      حذف
    3. لم افهمك بشأن المسافات ؟ اي مسافات تقصد ؟

      حذف
    4. أقصد بالمسافات يا غالي
      تلك التي كانت بين النصوص في القوائم الىن ضبطت عندما رأيت القالب اول مرة كانت النصوص خارجة عن اطار خلفية القائمة
      ايضاً هنا المسافات بين حدود الصفحة يعني لا تجعل القوائم طالما القوائم حوافها مستديره حاول ان يكون هناك مسافة بين الحافة ونهاية الشاشة والتوفيق يا غالي

      حذف
    5. وفي انتظار رؤية العمل يا غالي بعد اكتماله

      حذف
    6. اشكرك اخي العزيز ^_^ وان شاء الله سيكتمل قريباً , بعد الانتهاء سأبحث عن سلايد شو جميل لأضيفه كلمسة جميلة للقالب وكذلك لدي افكار مبدعة سأضعها =a

      حذف
    7. تمنياتي لك أخي الحبيب بالتوفيق دمت في امان الله =r

      حذف
  5. ابدعت اخى عمرو فى موضوعك
    وادعمك بكل ثقة ان لديك المزيد لتقديمه =r

    ردحذف
    الردود
    1. ربي يعزك اخي محمود ولدي تلال من الأفكار والإضافات المخزنة خلال فترة دراستي لبلوجر قبل ان افتتح المدونة افكر طبعا في عرضها وتطويرها كون البعض تتطرق لها فيجب ان تكون بها شئ جديد والله المستعان شاكر لمرورك العطر يا طيب =r

      حذف
  6. قالب مدونتك رائع هل تستطيع تصميم لي قالب مشابهه وبجميع إضافات القالب

    ردحذف
    الردود
    1. نعم انا اقوم بتصميم القوالب المدفوعة الأسعار تبدأ من 35 دولار يمكنك التواصل عبر صفحة راسلنا لإعطائك تفاصيل اكثر وشكراً للمرور الكريم

      حذف
  7. السلام عليكم ورحمة الله وبركاته
    أخي الحبيب عمرو ماشاء الله عليك أسأل الله العظيم أن يحميك من كل شر =s
    دائما في الوقت المناسب كنت أبحث عن إضافة للمدونة بنفس الفكرة وها أنا أجدها
    لديك في المدونة بتنسيقات رائعة =u بارك الله فيك على الإضافة الرائعة والمميزة
    وفي إنتظار جديدك الأروع والمميز دمت في أمان الله وحفظه

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حبيبي الغالي بدر ربي يعزك يا طيب واحمد الله ان تجد ما ترغب في المدونة
      تحياتي لك وبالتوفيق

      حذف
  8. r= أسأل الله العظيم أن يحميك من كل شر

    ردحذف
    الردود
    1. الله آمين وإياكم أخي يوسف تحياتي لك يا طيب =r

      حذف
  9. دائماً مبدع ،، بالتوفيق لك ولمن يساندك

    ردحذف
    الردود
    1. ربنا يعزك وأنتم من يساندني بتلك التعليقات والمتابعة فتحية لكل متابعينا المحترمين =r

      حذف
  10. عاوز اعرف حاجه..هو انا ممكن اصغرها واكبرها؟؟

    ردحذف
    الردود
    1. يمكنك ذلك أخي بإضافة الكود الأخير بين هاذين الكودين مع تعديل الرقم 500 بالمقاس الذي تريده
      <div style="width:500px;">
      اضفه هنا
      </div>

      حذف
  11. كيف استفيد من هذا الكود بحيث يصبح عندي المشاركات الشائعة + التعليقات + ارشيف المدونة

    بصراحة ما عندي خبرة كبيرة في الاكواد

    يا ليت تفيدني

    ردحذف
    الردود
    1. يمكنك ان تستخدمها هكذا وتضيف في كل تبويب كود آداة لكن طبعا الأرشف لن ينفع لانه آداة تابعة لبلوجر وليست آداة HTML/JavaScript
      الأرشيف والادوات المستقله لها نظام آخر في مسالة التبويبات

      حذف
  12. كيف اغير الشك اين اضيف كود الستايل

    ردحذف
    الردود
    1. أخي الفاضل راجع الموضوع جيداً مذكور به أسئلتك

      حذف
  13. موضوع مميز جد اشكرك استاذي عمرو , كيف استطيع تركيب المظاهر ؟

    ردحذف
    الردود
    1. ذلك مذكور اخي عمر في الموضوع الكود الأزرق الموجود في اول كود تستبدله بكود المظهر الذي تريد كل مظهر تحته كود تنسخ كود المظهر الذي تريد وتستبدله بالأزرق الموجود في الكود الاول في الموضوع

      حذف
  14. جزاك الله ألف خير وفي ميزان حسناتكم يارب ..

    أخي العزيز ممكن شرح كيفية تحويل الكلام إلى اليمين .. لأن الكلام يظهر على اليسار

    فائق احترامي وتقديري

    ردحذف
    الردود
    1. أضف الكلمات التي تريدها ان تكون تجاه اليمين بين هذين الكودين
      <div style="text-align:right;">
      هنا
      </div>

      حذف
  15. السلام عليم الاضافة لا تعمل نهائيا اخي اين css الخاص ب tabs
    بالاضافة الى الاشكال التي وضعت في الاسفل كلها تحمل نفس الرابط وهو رابط لستايل لا علاقة له ب tabs هناك خطأ في الموضوع اخي الفاضل
    عندما اضفت كل ما قلته لم تفلح ظهر ك hml فقط بدون ستيال
    الرابط الخاص بالستايل الذي قلت اضفوه الى القالب عندما فتحته لم اجد فيه اي معرف لهذه الاضافة


    وهذا ايضا لم افهمه اصلا ولا يوجد فيه شيئ
    <script>
    jQuery(document).ready(function($) {
    $("#tabs").tabs();
    });
    </script>
    =
    اتمنى الرد وشكرا جزيلا اخي الكريم

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

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©