الأربعاء، 6 أبريل، 2016

عمل استايل رائع للتسميات بتقنية css3


تعد التسميات من الاضافات  المهمة في مدونات بلوجر والتي تعرض الاسماء الخاصة بالموقع وتسهل على المستخدمين عملية الوصول الى كل قسم من اقسام الموقع لكن الشكل الاساسي للاداة ليس على مستوى عالي من التنسيق والجال لذلك سنتعلم في هذا الدرس كيف عمل التسميات بشكل رائع .


طريقة التركيب:
1) من لوحة التحكم في بلوجر >>قالب>>تحريرHTML
2) نصغط على ctrl+f لاظهار مربع البحث
3) ثم نقوم بالبحث عن  ]]></b:skin>
4) نضيف الكود التالي فوق الوسم ]]></b:skin>




  .cloud-label-widget-content {
 text-align: right;
 }
 .label-size {
 background: #5498C9;
 display: block;
 float: right;
 margin:0 0 3px 3px;
 color: #fff;
 font-size: 11px;
 text-transform: uppercase;
 }
 .label-size:nth-child(1) {
 background: #F53477;
 }
 .label-size:nth-child(2) {
 background: #89C237;
 }
 .label-size:nth-child(3) {
 background: #44CCF2;
 }
 .label-size:nth-child(4) {
 background: #01ACE2;
 }
 .label-size:nth-child(5) {
 background: #94368E;
 }
 .label-size:nth-child(6) {
 background: #A51A5D;
 }
 .label-size:nth-child(7) {
 background: #555;
 }
 .label-size:nth-child(8) {
 background: #f2a261;
 }
 .label-size:nth-child(9) {
 background: #00ff80;
 }
 .label-size:nth-child(10) {
 background: #b8870b;
 }
 .label-size:nth-child(11) {
 background: #99cc33;
 }
 .label-size:nth-child(12) {
 background: #ffff00;
 }
 .label-size:nth-child(13) {
 background: #40dece;
 }
 .label-size:nth-child(14) {
 background: #ff6347;
 }
 .label-size:nth-child(15) {
 background: #f0e68d;
 }
 .label-size:nth-child(16) {
 background: #7fffd2;
 }
 .label-size:nth-child(17) {
 background: #7a68ed;
 }
 .label-size:nth-child(18) {
 background: #ff1491;
 }
 .label-size:nth-child(19) {
 background: #698c23;
 }
 .label-size:nth-child(20) {
 background: #00ff00;
 }
 .label-size a, .label-size span {
 display: inline-block;
 color: #fff !important;
 padding: 4px 10px;
 font-weight: bold;
 }
 .label-size:hover {
 background: #222;
    }
 .label-count {
 white-space: nowrap;
 padding-left: 3px;
 margin-right: -3px;
 background: #333;
 color: #fff ;
 }
 .label-size:hover .label-count, .label-size:focus+.label-count {
 background-color: #ff6bb5;
 }

ليست هناك تعليقات:

إرسال تعليق

جميع الحقوق محفوظة ©2015-2016 أكاديمية العرب لتعليم الكمبيوتر

برمجة وتصميم وادارة : عبدالله النجار Privacy-Policy | سياسة الخصوصية |