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

الثلاثاء، 8 سبتمبر، 2015

الثلاثاء، 8 سبتمبر، 2015

آداة ثلاثية التبويبات للسايد بار

Blogger three Widget in sidebar
من أكثر الادوات المهمة لمن يحتاجون مكان في السايد بار حيث انها تجمع ثلاث ادوات في آداة واحده مما يجعل هناك مساحة لادوات أكثر في السايد بار هذه الآداة هي بتنسيق حصري لكن مدون تم الإهتمام بان تعمل الآداة على القوالب المتجاوبة دون مشاكل وان تتخذ حجم السايد بار المشكلة الوحيدة التي قد تواجهك في تركيب تلك الآداة هي ان يكون قالبك غير مهئ في منطقة السايد بار لإستخدام تلك الآداة , الآداة ستعطيك ثلاث مساحات داخل التخطيط يمكنك ان تضيف بها اى أدوات تعجبك

/*Cnmu Tabbed Widget*/
.cnmusidebartabs {margin-bottom: 20px;}
.cnmusidebartabs .widget {
  border: 0 none !important;
  box-shadow: 0 0 0 1px #ddd inset;
}
.cnmusidebartabs .widget h2 {display: none;}
.tabs-widget {
  height: 35px;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.tabs-widget li {
  float:right;
  list-style: outside none none;
  padding: 0;
  text-align: center;
  width: 33.3%;
}
#cnmustab2 {float:left;}
#cnmustab2 a {border-left: 0 none;}
.tabs-widget li:first-child {margin: 0}

.tabs-widget li a {
  background-color: #000;
  border-left: 1px solid #444;
  color: #fff;
  display: block;
font-size:12px;
height:35px;
line-height:35px;
  text-transform: uppercase;
}

.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current {
  background-color: #FB6400;
  color:#fff;
  text-decoration: none;
}

تنسيق

هذا #000 هو لون خلفية التبويبات
وهذا #fff لون الكتابة
وهذا  #FB6400 لون الإطار النشط او عند تمرير الماوس
الرقم 12 هو حجم خط التبويبات
من اراد ان يستخدم أيقونة لكل تبويب يضيف بعد الكود السابق الكود التالي
#cnmustab1 a {
  background-image: url("*");
  background-position: 98% center;
  background-repeat: no-repeat;
}
مع تغيير * برابط الأيقونة
هذا خاص بالتبويب الأول
لعمل أيقونة للتبويب الثاني كرر الكود مع تبديل الرقم 1 بـ 3
والتبويب الثالث بتغيير الرقم 1 بـ 2

 التفعيل داخل القالب

هذا هو الجزء الاهم في الأمر
عليك ان تبحث في قالبك عن اسم اول آداة لديك في السايد بار
فوق اسم الآداة ستجد سطر أوله كلمة <b:section
 فوق السطر ستضيف الكود التالي
 مثال لاحظ اسم الآداة بالأصفر واسم السطر بالاحمر نريد ان نضيف الكود فوق السطر الأحمر
<div class='cnmusidebartabs'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li id='cnmustab1'><a href='#widget-themater_tabs-1432447472-id1'>شائعة</a></li>
<li id='cnmustab2'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات</a></li>
<li id='cnmustab3'><a href='#widget-themater_tabs-1432447472-id3'>تسميات</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
</div>                          
                              
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div>
لو قالبك يدعم منطقة السايدر بار بشكل مضبوط ستعمل معك الآداة دون مشاكل ويمكنك حينها العودة لصفحة التخطيط وتركيب الإضافات التي تريد بها
يمكنك طبعا تعديل الكلمات العربية لكن لا تعدل الترتيب فقط الكلمات

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

  1. انت معلم واحنا منك نتعلم كن مدون افضل مدون منتظرين المزيد من تدويناتك الرائعة وشكرا لك عندى سوال انا لما جيت اكبر صورة التدوينة فى hover كل ما الماوس يجى عليها تخرج خارج اطار التدوينة

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

      حذف
  2. شكرا أخي عمرو أعجبتني كثيرا ولكنني أريد إضافة أيقونة بجانبه كل تبويبة

    ردحذف
    الردود
    1. تم عمل تحديث على الموضوع راجع الجزء الخاص بالتنسيق

      حذف
    2. شكرا على تنفيذك طلبى لو سمحت ممكن تعمل طريقة اضافة تعليقات الفيس+تعليقات بلور+تعلياقت dsiqus فى قالب واحد

      حذف
    3. بإذن الله يا طيب سيكون هناك موضوع حول الامر لكن طبعا سيتأخر بعض الشئ لأن هناك طلبات اخرى فنسألكم الدعاء لتيسير الأمر وبالتوفيق أخي الكريم

      حذف
    4. اخى عمرو انا وضعت فى السايدابر 10 مشاركات شائعة يظهر لى مشاركة واخحدة فقط م الحال ولو عندى مثلا مشاركات فى السايدبار ومشاركات فى الفوتر عاوز اغير استايل الفوتر عن السايدبار كيف

      حذف
    5. بالنسبة للمشاركات الشائعة فهي تتأثر بحجم التدوينات فإستخدم فاصل اقرأ المزيد اليدوي في التدوينة
      راجع هذا الموضوع في بدايته طريقة استخدام الفاصل
      http://cnmu.blogspot.com/2013/01/Read-More.html
      تعديل ستايل الفوتر ابحث عن الكلاس او الآي دي الخاص بالفوتر وابني الستايل طبقاً له

      حذف
  3. شكرا اخي عمرو .. لكن لماذا قمت بتغيير القالب .. القالب السابق اجمل بكثير.ومنسق بشكل جميل.
    دمت بود

    ردحذف
    الردود
    1. حياك الله اخي الكريم
      هو نوع من التحديث فكل قالب له مميزاته
      القالب السابق له طبع وجمالية لانه الاول من نوعه في التنسيق الخاص به
      كذلك هذا القالب له جمالية مختلفة
      احد الفروق السرعة فالقالب الحالي سرعته ضعف السابق
      القالب الحالي متجاوب بشكل كامل هذا سيفرق منع من يتصفحون المدونة من الهاتف
      هو نوع من التحديث والاذواق تختلف سيرى البعض السابق افضل وآخرون سيرون هذا افضل
      المهم ان كلاهما عملي في عرض المدونة
      ونورت الموضوع يا غالي

      حذف
  4. موضوع جميل اخي عمرو شكراً لك
    كنت احضر لنفس الموضوع ولكن باشكال مختلفة

    صراحة هذا القالب افضل من القديم بكثير على حسب رأيي
    و الذي اعجبني فيه تنسيقك للقالب اكثر من رائع

    ولكن سرعة القالب بالنسبة للجوال بطيئة جداً
    و على حسب خوارزميات جوجل فهي من اهم شيء

    بالتوفيق اخي عمرو

    ردحذف
    الردود
    1. حياك الله اخي منير
      بالنسبة لسرعة القالب على الجوال هذا الأمر يختلف من جوال لآخر وبحسب سرعة النت أيضاً
      خوارزميات جوجل في قياس السرعة لا يعتمد عليها
      لانها تعتمد مثالية في التقييم
      إضافة ان اكبر المؤثرات السلبية على السرعة
      هي اعلانات جوجل , واكواد بلوجر الرسمية التابعة أيضاً لجوجل
      اما الإنطباع العام لو تقصده فنموذج الجوال خاصتي متفوق على الفيس بوك طبقاً لتحليل جوجل ^_^
      اما السرعة فطبقاً لتحليل جوجل سرعتي تقارب اليوتيوب
      على الرغم أنني أستخدم صور كاملة الوضوح واليوتيوب يستخدم مصغرات وهو فرق شاسع في السرعة
      واسعدني مرورك يا غالي

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

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

    ردحذف
  7. لا يمكن نسخ الكلمات في مدونتك

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

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

    ردحذف
    الردود
    1. هذه الإضافة لا علاقة لها بأنظمة التعليقات هذه آداة للسايد بار يمكنك ان تضيف بها ادوات عادية وكلمة تعليقات هو لمن يريد اضافة آخر التعليقات
      اما أنظمة التعليق المتعددة يمكنك مراجعة الموضوع التالي
      http://cnmu.blogspot.com/2015/10/Multi-Comments-Systems.html

      حذف
  9. مو ماشية معاي لما اركبها تظهر الاداة على الموقع لكن بدون محتوى فمالحل?

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

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

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

      حذف
  11. تفضل اخي هذا هو القالب http://bibliotheque-cordoue.blogspot.com

    ردحذف
    الردود
    1. بعد هذ الكود
      .tabs-widget li {
      أضف هذا السطر
      margin: 0 !important;

      حذف
  12. اضافة جيد لكن لم استطع تركيبها بعد الكثير من المحاولات.......هل من مساعدة؟

    ردحذف
    الردود
    1. بعض القوالب يصعب تركيب انواع معينة من الإضافت بها
      فتتطلب متخصص لعمل ذلك لكن حاول ثانية ربما تنجح يا طيب

      حذف
  13. أخي عمرو شكرآ على المجهود إن شاءالله يكون في ميزان حسناتك
    قمت بتركيب الآداة وقد أخذت مكانها بدون مشاكل
    لكن في التبويبات لم يظهر أي محتوى(شائعة,تسميات,تعليفات)هل هناك شي يجب على عمله؟؟
    أرجو الإفادة وشكرآ

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

      حذف
  14. آسف أخي عمرو لكن هل لها شرح طريقة إضافتها؟؟

    لقد حصلت لي مشكلة بعد عمل السايدبار تقريبا وآضررت لحذفه

    المشكلة أن جميع المواضيع تقريبا عند فتحها تظهر مرتين في الصفحة
    آسف عالإطالة أخي الكريم
    مثال لأحد المواضيع
    http://www.zooltaqniea.tk/2016/03/wahtsapp-plus.html

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

      حذف
  15. شكرآ الأخ الكريم عمرو لقد قمت بتثبيت السايدبار بالطريقة الصحيحة وأضفت أدوات الخاصةبكل تبويب
    لكن لم تزل مشكلة تكرار الموضوع في الصفحة قائمة

    ردحذف
    الردود
    1. المفترض أخي ان مسألة تكرار الموضوع لا علاقه لها بالآداة فتلك في منطقة وتلك في منطقة أخرى ما أستطيع افادتك به في الأمر انه ربما يكون هذا الكود مكرر لديك في نفس المنطقة تحت بعضه
      وهذا غالبا ما يكون سبب المشكله
      <data:post.body/>
      حاول ايجاد وحذف الزائد لكن خذ نسخة احتياطية من القالب حتى لا تتلف شئ

      حذف
  16. والله أخي عمرو لا أعرف كيف أشكرك
    لقد قمت بالعمل بنصيحتك والحمدلله حلت المشكلة
    إن شاء الله دائما يا أخي في صحة وعافية شكرا كثيرا على المساعدة

    ردحذف
  17. ممكن روابط لصور الايقونات الموجوده عند حضرتك انا بحثت وزهقت مش بتطلع مناسبه لللاسف ممكن الروابط كرماً

    ردحذف
    الردود
    1. لا استخدم صور اخي هذه ايقونات خط راجع هذا الموضوع
      http://cnmu.blogspot.com/2016/01/Font-Awesome.html

      حذف

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

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