أدوات الفئات والأقسام الرئيسية
الأدوات الرئيسية احدى اكثر الأدوات والإضافات التي يتم طلبها لمدونات بلوجر والتي طلبت مني شخصياً عدة مرات لكن دائما ما كنت اواجه مشكلة وهي ان تلك الادوات المفترض انها تكون جزء من تصميم القوالب ويجب ان يراعى وجودها في التصميم حتى لا تكون ثقيلة وبعد تجارب عديدة استطعت بفضل الله تطويع اضافة واحده لتعمل بشكل متعدد وتعطي نتيجة جيده لم يعد بإذن الله فقدان تلك الادوات من القوالب مشكلة , حصرياً على كن مدون
طبعا انا حرصت ان تكون الإضافة فاعلة على اكبر عدد من القوالب لكن هذا لا يعني انها ستعمل مع الجميع فبعض لاقوالب قد تظهر تعارض هذا امر وارد لكن بإذن الله تعمل على قالبك
أولاً المظهر
/*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 ثم تسحبها فوق صندوق المواضيع في صفحة التخطيطحتى لو لم يكن هناك مكان اضافة ظاهر اسحبها وسيظهر ويمكنك سحبها تحته ايضاً ان اردتها ان تظهر بعد المواضيع
الإضافة الاولى
استبدل الإسم الظاهر بالإسم الذي تريده ان يظهر فوق الإضافة
استبدل رمز # برابط القسم الذي ستجلب المواضيع منه
كلمة قوالب استبدلها بإسم القسم الذي ستجلب المواضيع منه كما هو موجود تماما في مدونتك اى خطا في الكتابة لن تظهر المواضيع
رابط مدونتي المعلم بالاخضر استبدله برابط مدونتك مع الحرص ان تكون علامة / موجوده في نهايته
يمكنك تكرار تلك الإضافة بان تضيف الكود مرة ثانية في آداة جديدة مع تغيير الرقم 1 بـ 4 ولتكرار ثاني نفس الأمر لكن استبدله بـ 5
الإضافة الثانية
نفس الامر كالموجود مع الإضافة الاولى لكن هذه الإضافة مكونة من قسمين متجاورين فتعدل بيانات القسمين
وان اردت تكرارها تضيف كودها في آداة جديدة مع تعديل الرقم 2 بالرقم 6 والرقم 3 بالرقم 7
ان اردت ان تظهر الأدوات في الرئيسية فقط مثلا , اقرأ الجزء الاخير من الموضوع التالي وطبقه
