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

السبت، 1 أغسطس، 2015

السبت، 1 أغسطس، 2015

أدوات الفئات والأقسام الرئيسية

categories blogger widgets
الأدوات الرئيسية احدى اكثر الأدوات والإضافات التي يتم طلبها لمدونات بلوجر والتي طلبت مني شخصياً عدة مرات لكن دائما ما كنت اواجه مشكلة وهي ان تلك الادوات المفترض انها تكون جزء من تصميم القوالب ويجب ان يراعى وجودها في التصميم حتى لا تكون ثقيلة وبعد تجارب عديدة استطعت بفضل الله تطويع اضافة واحده لتعمل بشكل متعدد وتعطي نتيجة جيده لم يعد بإذن الله فقدان تلك الادوات من القوالب مشكلة , حصرياً على كن مدون
طبعا انا حرصت ان تكون الإضافة فاعلة على اكبر عدد من القوالب لكن هذا لا يعني انها ستعمل مع الجميع فبعض لاقوالب قد تظهر تعارض هذا امر وارد لكن بإذن الله تعمل على قالبك

أولاً المظهر

أضف الكود التالي فوق الوسم ]]></b:skin>
/*cnmu Category widget*/
.cnmucat1 li,.cnmucat4 li,.cnmucat5 li {
  border-bottom: 1px solid #ddd;
  display: block;
  float: right;
  height: 65px;
  list-style: outside none none;
  margin: 0;
  overflow: hidden;
  padding: 5px 5px 5px 0;
  width: 60%;
}
.cnmucat1 .imglink,.cnmucat4 .imglink,.cnmucat5 .imglink {
  border: 3px solid #bbb;
  float: right;
  height: 60px;
  margin-left: 5px;
  overflow: hidden;
  width: 60px;
}
.cnmucat1 img,.cnmucat4 img,.cnmucat5 img {
  height: 72px;
  margin: 0;
  padding: 0;
  width: 72px;
  transition: all 0.7s ease 0s;
}
.cnmucat1 img:hover,.cnmucat4 img:hover,.cnmucat5 img:hover   {transform: scale(1.3);}
.cnmucat1 .catmore,.cnmucat1 .catinfo p,.cnmucat4 .catmore,.cnmucat4 .catinfo p,.cnmucat5 .catmore,.cnmucat5 .catinfo p {display: none;}
/*First*/
.cnmucat1 .first,.cnmucat4 .first,.cnmucat5 .first {
  border-left: 1px solid #ddd;
  float: right;
  height: 445px;
  width: 38%;
}
.cnmucat1 .first .imglink,.cnmucat4 .first .imglink,.cnmucat5 .first .imglink {
  background-color: #fff;
  display: block;
  float:none;
  height: 150px;
  margin: 0 auto 10px;
  padding: 4px;
  width: 88%;
}
.cnmucat1 .first img,.cnmucat4 .first img,.cnmucat5 .first img {
  height: 150px;
  width: 100%;
}
.cnmucat1 .first b,.cnmucat4 .first b,.cnmucat5 .first b   {
  display: block;
  text-align: center;
}
.cnmucat1 .first p,.cnmucat4 .first p,.cnmucat5 .first p {
  display: block !important;
  font: 14px/2em tahoma;
  margin: 5px 0;
  max-height: 140px;
  overflow: hidden;
  text-align: center;
}
.cnmucat1 .first .catmore,.cnmucat4 .first .catmore,.cnmucat5 .first .catmore {
  background-color: #000;
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
  padding: 2px 0;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
.cnmucat1 .first .catmore:hover,.cnmucat4 .first .catmore:hover,.cnmucat5 .first .catmore:hover   {background-color: #555;}
/*Category 2 and 3*/
.cnmucat2, .cnmucat3,.cnmucat6, .cnmucat7 {
  float: right;
  width: 49%;
}
.cnmucat2,.cnmucat6 {margin-left:10px;}
.cnmucat2 li,.cnmucat6 li {
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  display: block;
  float: right;
  height: 65px;
  list-style: outside none none;
  margin: 0;
  overflow: hidden;
  padding: 5px 5px 5px 0;
  width: 100%;
}
.cnmucat2 .imglink,.cnmucat6 .imglink {
  border: 3px solid #bbb;
  float: right;
  height: 60px;
  margin-left: 5px;
  overflow: hidden;
  width: 60px;
}
.cnmucat2 img,.cnmucat6 img {
  height: 72px;
  margin: 0;
  padding: 0;
  width: 72px;
  transition: all 0.7s ease 0s;
}
.cnmucat2 img:hover,.cnmucat6 img:hover {transform: scale(1.3);}
.cnmucat2 .catmore,.cnmucat2 .catinfo p,.cnmucat6 .catmore,.cnmucat6 .catinfo p {display: none;}
/*First*/
.cnmucat2 .first,.cnmucat6 .first  {
  height: auto;
  padding-bottom: 20px;
}
.cnmucat2 .first .imglink {
  background-color: #fff;
  display: block;
  float: none;
  height: 150px;
  margin: 0 auto 10px;
  padding: 4px;
  width: 92%;
}
.cnmucat2 .first img,.cnmucat6 .first img {
  height: 150px;
  width: 100%;
}
.cnmucat2 .first .catinfo a,.cnmucat6 .first .catinfo a {
  display: block;
  text-align: center;
}
.cnmucat2 .first .catmore,.cnmucat6 .first .catmore {
  display: none !important;
}
/*Category3*/
.cnmucat3 li,.cnmucat7 li {
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  display: block;
  float: right;
  height: 65px;
  list-style: outside none none;
  margin: 0;
  overflow: hidden;
  padding: 5px 5px 5px 0;
  width: 100%;
}
.cnmucat3 .imglink,.cnmucat7 .imglink {
  border: 3px solid #bbb;
  float: right;
  height: 60px;
  margin-left: 5px;
  overflow: hidden;
  width: 60px;
}
.cnmucat3 img,.cnmucat7 img {
  height: 72px;
  margin: 0;
  padding: 0;
  width: 72px;
  transition: all 0.7s ease 0s;
}
.cnmucat3 img:hover,.cnmucat7 img:hover {transform: scale(1.3);}
.cnmucat3 .catmore,.cnmucat3 .catinfo p,.cnmucat7 .catmore,.cnmucat7 .catinfo p {display: none;}
/*First*/
.cnmucat3 .first,.cnmucat7 .first {
  height: auto;
  padding-bottom: 20px;
}
.cnmucat3 .first .imglink,.cnmucat7 .first .imglink {
  background-color: #fff;
  display: block;
  float: none;
  height: 150px;
  margin: 0 auto 10px;
  padding: 4px;
  width: 92%;
}
.cnmucat3 .first img,.cnmucat7 .first img {
  height: 150px;
  width: 100%;
}
.cnmucat3 .first .catinfo a,.cnmucat7 .first .catinfo a {
  display: block;
  text-align: center;
}
.cnmucat3 .first .catmore,.cnmucat7 .first .catmore  {
  display: none !important;
}
/*Titles*/
.cnmucat1 b, .cnmucat2 b, .cnmucat3 b, .cnmucat4 b, .cnmucat5 b, .cnmucat6 b, .cnmucat7 b {font:bold 15px arial;}
.cnmucat1 .first b, .cnmucat2 .first b, .cnmucat3 .first b, .cnmucat4 .first b, .cnmucat5 .first b, .cnmucat6 .first b, .cnmucat7 .first b {font:bold 17px arial;}
.cnmucat1 h6, .cnmucat2 h6, .cnmucat3 h6, .cnmucat4 h6, .cnmucat5 h6, .cnmucat6 h6, .cnmucat7 h6 {margin: 0;}
.cnmucat1 h6 a,.cnmucat2 h6 a,.cnmucat3 h6 a,.cnmucat4 h6 a,.cnmucat5 h6 a,.cnmucat6 h6 a,.cnmucat7 h6 a {
  color: #fff;
  display: block;
  font-size: 15px;
  margin: 0 0 10px;
  padding: 3px 10px 3px 0;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
.cnmucat1 h6 a:hover,.cnmucat2 h6 a:hover,.cnmucat3 h6 a:hover,.cnmucat4 h6 a:hover,.cnmucat5 h6 a:hover,.cnmucat6 h6 a:hover,.cnmucat7 h6 a:hover {background-color:#555;}

.cnmucat1 h6 a {background-color: #0259bc;}
.cnmucat2 h6 a {background-color: #D60015;}
.cnmucat3 h6 a {background-color: #037B31;}
.cnmucat4 h6 a {background-color: #53037B;}
.cnmucat5 h6 a {background-color: #FB6900;}
.cnmucat6 h6 a {background-color: #0071FB;}
.cnmucat7 h6 a {background-color: #4E8265;}
اهم جزء تحتاج تنسيقه في الكود هو المعلمان بالحمر والازرق
الأرقام في الأزرق الأول 15 هذا هو حجم العنوان للمواضيع والأحمر في نفس السطر هو نوع خط العنوان
نفس الامر في الرقم 17 لكنه يخص اول موضوع والذي يكون له شكل مميز

ثانيا تفعيل الإضافات

الإضافات ستضيف كل واحده في اداة HTML/JavaScript ثم تسحبها فوق صندوق المواضيع في صفحة التخطيط
حتى لو لم يكن هناك مكان اضافة ظاهر اسحبها وسيظهر ويمكنك سحبها تحته ايضاً ان اردتها ان تظهر بعد المواضيع

الإضافة الاولى

<div class="cnmucat1">
<h6><a href="#">الإسم الظاهر</a></h6>
<script language="JavaScript">
jsummaryPost = 300;
numposts =7
label = "قوالب";
home_page = "http://cnmu.blogspot.com/";
</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2015/recentcat.js" type="text/javascript"></script>
<script src="/feeds/posts/default/-/Video?max-results=6&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
<div style='clear: both; height:20px;'></div>
استبدل الإسم الظاهر بالإسم الذي تريده ان يظهر فوق الإضافة
استبدل رمز # برابط القسم الذي ستجلب المواضيع منه
كلمة قوالب استبدلها بإسم القسم الذي ستجلب المواضيع منه كما هو موجود تماما في مدونتك اى خطا في الكتابة لن تظهر المواضيع
رابط مدونتي المعلم بالاخضر استبدله برابط مدونتك مع الحرص ان تكون علامة / موجوده في نهايته
يمكنك تكرار تلك الإضافة بان تضيف الكود مرة ثانية في آداة جديدة مع تغيير الرقم 1 بـ 4 ولتكرار ثاني نفس الأمر لكن استبدله بـ 5

الإضافة الثانية

<div class="cnmucatcontain">
<div class="cnmucat2">
<h6><a href="#">الإسم الظاهر</a></h6>
<script language="JavaScript">
jsummaryPost = 300;
numposts =5
label = "معلومات";
home_page = "http://cnmu.blogspot.com/";
</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2015/recentcat.js" type="text/javascript"></script>
<script src="/feeds/posts/default/-/Video?max-results=6&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
<div class="cnmucat3">
<h6><a href="#">الإسم الظاهر</a></h6>
<script language="JavaScript">
jsummaryPost = 300;
numposts =5
label = "دروس";
home_page = "http://cnmu.blogspot.com/";
</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2015/recentcat.js" type="text/javascript"></script>
<script src="/feeds/posts/default/-/Video?max-results=6&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
</div>
<div style='clear: both; height:20px;'></div>
نفس الامر كالموجود مع الإضافة الاولى لكن هذه الإضافة مكونة من قسمين متجاورين فتعدل بيانات القسمين
وان اردت تكرارها تضيف كودها في آداة جديدة مع تعديل الرقم 2 بالرقم 6 والرقم 3 بالرقم 7
ان اردت ان تظهر الأدوات في الرئيسية فقط مثلا , اقرأ الجزء الاخير من الموضوع التالي وطبقه

سرع مدونتك بحذف الزيادات وإخفاء الأدوات


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

  1. شكرأ لك على الموضوع الرائع

    ردحذف
  2. =r شكرا جزيلا اخ عمرو =r

    ردحذف
  3. شكراا اخي على الاضافة الرائعة كنت ابحث عنها ولم اجدها =q

    ردحذف
  4. أسعدني مروركم اخواني الأفاضل
    موفقين بإذن الله
    =r

    ردحذف
  5. تمت التجربة اخي والاضافة شغالة 100% في هذا القالب http://dfgxdfgxfd.blogspot.com/
    مع بعض التعديلات في الستايل ليتناسب مع القالب
    لقد عانيت في البحث عن مثل هذه الطريقة في عرض المواضيع ووجدتها هنا في مدونتك ولله الحمد
    اتمنى ان تتحفنا بالمزيد من حصرياتك وشكراا

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

      حذف
  6. موضوع رائع مثل صاحبة شكراً لك اخي عمرو تحياتي لك

    ردحذف
    الردود
    1. شكرا لذوقك اخي الكريم سررت بمرورك =r

      حذف
  7. شكرا جدا جدا جدا جدا قبلتنى كتير لاكن كان بحصل مشاكل بالقالب

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

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

      حذف
  9. السلام عليكم شكرا اخي على الاضافة لاكن هل يمكن ان اضيفة ازرار فوقع المواضيع يمكنها التبديل متل gird/list

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      الـ grid / list لا علاقة لها بالإضافة هذه تكون جزء من القالب إن كانت به اما ان لم تكن فلا ينفع اضافتها لانها تختلف من قالب لآخر فهي جزء من التصميم نفسه

      حذف
  10. اضافة ممتازرة وجزاك الله خيرا

    ردحذف
  11. كن ابحث عن هده الاضافة كثيرا شككرا كثيررا

    ردحذف
  12. السلام عليكم ورحمة الله وبركاتة
    اخى الكريم اشكرك على المجهود الاكثر من رائع
    ليا سؤال بس خارج الموشوع لوسمحت
    عندى فى التخطيط كل لما اعدل مكان الصنديق وكدا وادوس على حفظ الترتيب يجى يقولى حدث خطا الرجاء تحديث الصفحة واعادة المحاولة وفى كل مرة بعمل تحديث الصفحة وادوس على حفظ الترتيب يقولى نفس الكلام حدث خطا الرجاء تحديث الصفحة واعادة المحاولة ارجو المساعدة ولك جزيل الشكر

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هذا الأمر حدث في بعضا لقوالب بعد تحديثات على المنصة تحتاج تلك القوالب لإعادة تصميم فأحيانا يكون البحث عن هذه الأخطاء صعب حتى لو كان حلها بسيط لكن البحث عنها كخطأ في القالب لا يكون مجدي
      بالنسبة للاسئلة الخارجية لدينا ركن للأسئلة يمكنك السؤال بإذن الله فيه عن ما تشاء
      http://cnmu.blogspot.com/p/chat.html

      حذف
  13. السلام عليكم ورحمة الله
    اريد تغيير اسم مدونتي . فما التأثير السلبي لتغيير الاسم.

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

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

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

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

      حذف
    2. بالفعل اخي ... جميع الصور مرفوعة على خدمة بيكاسا ..

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

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

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

    احترامي و تقديري لشخصك الكريم =r

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

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

      حذف
    3. تمام حبيبي وهذا بالفعل ما انا حريص عليه حتى لا الزم المستخدم بذوقي
      نورت الموضوع يا غالي

      حذف
  16. اخي العزيز الاضافه مش عايزة تشتغل بشكل صحيح اطلاقا واعتقد بسبب كود CSS
    http://www.masrlights.com/

    الاضافه انا ركبتها واتمني تدخل تشوفها وتقولي ايه الحل ؟

    ردحذف
    الردود
    1. أخي الكريم تأكد من نسخ كود الـ CSS بشكل صحيح من الواضح اما انك نسخت جزء منه ناقص ملحوظة نقطة واحده تفرق تماما
      او ان قالبك به خطأ في الـ CSS وليست اكوادك مغلقة بشكل مضبوط لمحاولة اخرى
      يمكنك اضافة كود الـ CSS فوق الوسم </head>
      بين هاذين الكودين
      <style>
      هنا
      </style>

      حذف
    2. شكرا اشتغل معايا

      حذف
  17. أسعدك الله في الدارين ورزقك من حيث لا تحتسب وزادك الله من فضله ورزقك الفردوس ياارب ووالديك
    آمين
    موضوع قيم بنسبة 100%

    ردحذف
  18. أستاذي الفاضل
    زادك الله من فضله
    فقط هناك مشكل
    لما أفتح موضوع تبقى هذه الإضافة الرائعة
    مثال ذلك
    http://www.smounir48.com/2015/09/blog-post_84.html

    ردحذف
    الردود
    1. راجع هذا الموضوع أخي به شرح اخفاء الادوات واظهارها في الرئيسية فقط او في اى منطقة تحب
      http://cnmu.blogspot.com/2013/02/blog-post.html

      حذف

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

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