اضافة كود التبادل النصى بشكل احترافى

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

زوار ومتابعي المدونة الكرام

تحية طيبة وبعد ...

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

   معاينة   

طريقة التركيب
توجه الى لوحة التحكم فى بلوجر >> قالب >> تحرير HTML

ثم ابحث بأستعمال CTRL+F عن ]]></b:skin> وضع الكود التالي فوقه [ قبله ]

.Al7otweb ul{margin:0;padding:0;}
.Al7otweb ul li{
background: #00AAE7;
  margin-bottom: 6px;
  padding: 4px;
  margin-top: 3px;
  width: 207px;
  margin-right: 67px;text-align: center;
  transition: 0.6s;
  border-radius: 70px 0px 70px 0px;
}
.Al7otweb ul li a{color:#fff;}
.Al7otweb ul li:hover{
background: #191919;
  border-radius: 0 70px 0 70px;
}

00AAE7 للون الخلفية قبل الضغط على الرابط .

191919 للون الخلفية بعد الضغط على الرابط .

بعد اضافة الكود السابق قم بعمل حفظ
ثم توجه الى التخطيط >> اضافة اداة >> HTML/JavaScript وضع الكود التالى

<div class='Al7otweb '> <ul> <li><a href='#'><i class="fa fa-hand-o-left" style='font-size:12px;'></i> رابط نصي </a></li> <li><a href='#'><i class="fa fa-hand-o-left" style='font-size:12px;'></i> رابط نصي </a></li> <li><a href='#'><i class="fa fa-hand-o-left" style='font-size:12px;'></i> رابط نصي </a></li> <li><a href='#'><i class="fa fa-hand-o-left" style='font-size:12px;'></i> رابط نصي </a></li> <li><a href='#'><i class="fa fa-hand-o-left" style='font-size:12px;'></i> رابط نصي </a></li> </ul> </div>

 غيير # برابط المدونة المراد وضعها .

غيير رابط نصي بأسم المدونة المراد وضعها .

اعمل حفظ ومبروك عليك الاضافة .

يحق لك نسخ الموضوع بشرط ذكر المصدر