اضافات بلوجر - الادوات الرئيسية

 

 

 

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

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

تعارض هذا امر وارد لكن بإذن الله تعمل على قالبك

 

الكود

 

/*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;}