الأدوات الرئيسية احدى اكثر الأدوات والإضافات التي يتم طلبها لمدونات بلوجر والتي طلبت مني شخصياً عدة مرات لكن دائما ما كنت اواجه مشكلة وهي ان تلك الادوات المفترض انها تكون جزء من تصميم القوالب ويجب ان يراعى وجودها في التصميم حتى لا تكون ثقيلة وبعد تجارب عديدة استطعت بفضل الله تطويع اضافة واحده لتعمل بشكل متعدد وتعطي نتيجة جيده لم يعد بإذن الله فقدان تلك الادوات من القوالب مشكلة , حصرياً على كن مدون
طبعا انا حرصت ان تكون الإضافة فاعلة على اكبر عدد من القوالب لكن هذا لا يعني انها ستعمل مع الجميع فبعض لاقوالب قد تظهر تعارض هذا امر وارد لكن بإذن الله تعمل على قالبك
أولاً المظهر
أضف الكود التالي فوق الوسم
]]></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ان اردت ان تظهر الأدوات في الرئيسية فقط مثلا , اقرأ الجزء الاخير من الموضوع التالي وطبقه
