كيف اضافة صناديق اكواد بشكل احترافي متلون حصرياااا

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

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

 واضف الكود التالي فوقه مباشرة

html,
body {
  height: 100%;
  font-family: arial;
  font-size: 20px;
  background-color: #E47171;
}
* {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  font-size: 29px;
  padding: 20px;
  text-transform: uppercase;
  color: #fff;
}
.span {
  margin: 15px auto 15px;
  padding: 22px;
  max-width: 550px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: normal;
  border-radius: 20px;
  background-color: #E28F8F;
}
.span h3 {
  color: #632C2C;
  font-weight: normal;
}
.active .span.span2 {
  background-color: #fff;
  animation: cr 2s linear;
  animation-iteration-count: infinite;
}
@keyframes cr {
  0%,
  100% {
    background-color: #fff;
  }
  50% {
    background-color: #8FDAE2;
  }
}

 قم بحفظ العمل
* ما يتبقى عليك إلا وضع أحد الصناديق أو جميعها في موضوع

هذ هو الكود المتلون

<div class="active">
  <h1></h1>
  <div class="span span2">
<pre class="s1">الصق الكود هنا</pre>
  </div>
</div>

 الكود العادي

<div class="active">
  <h1></h1>
  <div class="span span1">
<pre class="s1">الصق الكود هنا</pre>
  </div>

ملاحظة غير فقط الصق الكود هنا يالكود المراد العمل به
مبروك عليك الاضافة