طرقة تغير شكل التسميات في مدونة بلوجر بشكل جميل

كود أدسنس 468*60

هل أعجبك الموضوع شاركه مع أصدقائك؟

السلام عليكم ورحمة الله وبركاته إرتأت مدرسة العلم الإلكتروني أن تقدم إليكم في هذا الدرس كيفية إضافة سحابة التسميات بشكل جميل وأنيق نعم هذه الإضافة بلون زاه وهو اللون الأزرقهذه الإضافة بتقنية CSS3 هذه الإضافة تجعل مدونتك احترافية غير التسميات التي نشاهدها الموجودة أصلا في المدونة ;والإضافة تغير لونها عند مرور الماوس نذهب إلى التطبيق

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

تم قم بتغيير الإعدادات كما موضح في الصورة

الأن نذهب إلى المرحلة التانية وهي نضغط على قالب تم نختار تحرير html تم إضغط في الكيبورد على Ctrl+F وتبحت على هذا الكود ]]></b:skin>

ملاحظة : إذا كنت لا تعرف وضع الأكواد إضغط هنا لمشاهدة تلك الحلقة

بعد أن تجد الكود قم بلصق هذا الكود فوقه مباشرة

.label-size{ 
   margin:0; 
   padding:0; 
   position:relative; 
   } 
   .label-size a{ 
   float:left; 
   height:24px; 
   line-height:24px; 
   position:relative; 
   font-size:12px; 
   margin-bottom: 9px; 
   margin-left:20px; 
   padding:0 10px 0 12px; 
   background:#0089e0; 
   color:#fff; 
   text-decoration:none; 
   -moz-border-radius-bottomright:4px; 
   -webkit-border-bottom-right-radius:4px; 
   border-bottom-right-radius:4px; 
   -moz-border-radius-topright:4px; 
   -webkit-border-top-right-radius:4px; 
   border-top-right-radius:4px; 
   } 
  .label-size a:before{ 
   content:""; 
   float:left; 
   position:absolute; 
   top:0; 
   left:-12px; 
   width:0; 
   height:0; 
   border-color:transparent #0089e0 transparent transparent; 
   border-style:solid; 
   border-width:12px 12px 12px 0;  
   } 
  .label-size a:after{ 
   content:""; 
   position:absolute; 
   top:10px; 
   left:0; 
   float:left; 
   width:4px; 
   height:4px; 
   -moz-border-radius:2px; 
   -webkit-border-radius:2px; 
   border-radius:2px; 
   background:#fff; 
   -moz-box-shadow:-1px -1px 2px #004977; 
   -webkit-box-shadow:-1px -1px 2px #004977; 
   box-shadow:-1px -1px 2px #004977; 
   }

.label-size a:hover{background:#555;} 
  .label-size a:hover:before{border-color:transparent #555 transparent transparent;}

كود إدسنس 200*90

كود إدسنس 336*280