إضافات بلوجربلوجر

طريقة تغيير شكل الترقيم في بلوجر – 4 أشكال مختلفة

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

وأكيد تسألت كيف يتم عمل ذلك وهل يمكن عمله في موقعي أو مدونتي ، وبكل إختصار نعم يمكن عمل ذلك في موقعك أومدونتك وبكل سهولة .

وسوف نقوم في هذه المقالة بشرح طريقة تغيير شكل الترقيم في بلوجر ، وليس ذلك فقط ل سوف نعرض عليك 4 أشكال ترقيم مختلفة ، ويمكنك إختيار الشكل المناسب لك .

اقرأ أيضاً : طريقة تغيير خط المدونة على بلوجر إلى خط جديد

ما هي فائدة تغيير شكل ترقيم

قبل أن تبدأ في تركيب الإضافة سوف نقول لكم بعض فوائد تغيير شكل الترقيم في بلوجر ، إن تغيير الترقيم له أهمية كبيرة في موقعك او مدونتك ، فهو يعطي مدونتك شكل جذاب مختلف عن جميع المدونات الأخرى ، ويساهم في إبقاء الزائر مدة أطول في موقعك بسبب الشكل الرائع والمميز .

إختيار شكل الترقيم المناسب

قبل البدء في عملية شرح طريقة تغيير الترقيم ، سوف نقوم بعرض عليك 4 أشكل ترقيم محتلفة الأن ، سوف تقوم أنت بإختيار شكل الترقيم المناسب لمدونتك وكل شكل تحته مباشرة سوف يكون الكود الخاص به .

الشكل الأول :

شكل الترقيم الأول
شكل الترقيم الأول

الكود الخاص به :

/*-------- by mabrouktec ---------*/
.post-body ol li{padding:8px 30px;margin-right:15px;margin-bottom:15px;list-style:none;-webkit-box-shadow:0 1px 3px #ddd;box-shadow:0 1px 3px #ddd;font-size:17px;position:relative}
.post-body ol li:before{content:counter(li);counter-increment:ol li;background-color:#d24949;width:30px;height:30px;text-align:center;line-height:30px;margin-left:15px;color:#FFF;border-radius:3px;font-size:17px;position:absolute;right:-15px}
.post-body ol{counter-reset:li;padding-right:0}
.post-body ol li:hover:after,.post-body ol li:hover:before{background-color:#9e44c9}
.post-body ol li:after{content:'';width:10px;height:100%;background-color:#d24949;position:absolute;top:0;left:0}
.post-body ol li a{text-decoration:none}
.post-body ul{list-style-type:disc;padding-right:40px}
.post-body li{color:#222222;padding-right:10px}
.post-body ul li a{text-decoration:none}

الشكل الثاني :

شكل الترقيم الثاني
شكل الترقيم الثاني

الكود الخاص به :

/* --- Change the shape of numbering --- */
ol {
  counter-reset:li;
  list-style: none;
  font:15px 'Droid Arabic Kufi', 'Oswald';
  padding:0;
  margin-bottom:4em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol {
  margin: 0 0 0 2em;
}
.post ol li{
  position:relative;
  display:block;
  padding:.4em .8em .4em .4em;
  margin:.5em 2.5em .5em 0;
  background:#F5F5F5;
  color:#666;
  text-decoration:none;
  transition:all .3s ease-out;
}
.post ol li:hover{
  background:#EEEEEE;
}
.post ol li:before{
  content:counter(li);
  counter-increment:li;
  position:absolute;
  right:-2.5em;
  top:50%;
  margin-top:-1em;
  background:#FA8072;
  color:#FEFEFE;
  height:2em;
  width:2em;
  line-height:2em;
  font-weight:bold;
  text-align: center;
}
.post ol li:after{
  position:absolute;
  content:'';
  border: .5em solid transparent;
  right:-1em;
  top:50%;
  margin-top:-.5em;
  transition:all .3s ease-out;
}
.post ol li:hover:after{
  right:-.5em;
  border-right-color:#FA8072;
}
.post ol li span{
  position:relative;
  display:block;
  padding:5px 8px;
  margin-bottom:10px;
  background:#fafafa;
  color:#666;
  text-decoration:none;
  transition:all .3s ease-out;
}
.post ol li span:hover{
  background:#f9f9f9;
} 

الشكل الثالث :

شكل الترقيم الثالث
شكل الترقيم الثالث

الكود الخاص به :

/* --- Change the shape of numbering --- */
.post ul{list-style:inherit;}
ol {
counter-reset:li;
list-style:none;
font-size:14px;
font-family:droid arabic kufi,hacen_saudi_arabiaregular;
padding:0;
margin-bottom:1em;
}
ol ol {margin:0 2em 0 0;}
.post ol li{
position:relative;
display:block;padding:0;
margin:.5em 2.5em .5em 0;
background:transparent;
color:#5E6066;text-decoration:none;
transition:all .3s ease-out;
}
.post ol li:hover{color:#E74C3C;}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
right:-2.5em;top:50%;
margin-top:-1em;
background:#F3F3F3;
color:#545457;
height:2.3em;
width:2em;
line-height:2em;
text-align:center;
font-weight:bold;
border:1px solid #DDD;
font-family:Electrolize,hacen_saudi_arabiaregular;
transition:all .3s ease-out;
}
.post ol li:hover:before{
background:#F3F3F3;
color:#DB2F2F;
border:1px solid #DDD;
}
.post ol li:after{
position:absolute;
content:'';
border: .4em solid transparent;
right:-.4em;
top:52%;
margin-top:-.4em;
transition:all .3s ease-out;
}
.post ol li:hover:after{right:-.4em;border-right-color:#EC4848;}
.post ol li span{
position:relative;
display:block;
padding:4px 8px;
margin-bottom:10px;
background:transparent;
color:#b0b1b8;
text-decoration:none;
transition:all .3s ease-out;
}
.post ol li span:hover{color:#fff;}
dl{margin:.5em 3em .5em 0em}
ol{list-style:decimal outside}
dt{font-weight:bold}
dd{margin:0 2em .5em 0}
/* Video */
.mudwnpv {
background: url("https://1.bp.blogspot.com/-Y--bgTBtQnM/VCXi0Sx6BPI/AAAAAAAAAr8/WdSlH731VZQ/s1600/mudwnpv.png") no-repeat scroll 0 center      transparent;
height: 390px;
padding-top: 57px;
width: 500px;
text-align:center;
margin:0 auto;
}

الشكل الرابع :

شكل الترقيم الرابع
شكل الترقيم الرابع

الكود الخاص به :

/* --- Change the shape of numbering --- */
.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-right:0;
padding-right:0
}
.post ol li{
position:relative;
margin:0 15px 20px 0 !important;
padding:4px 10px 4px 5px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2;
background:#f2f2f2;
text-indent:14px;
}
.post ol li:before {
background:#E2E2E2;
color: #A5A5A5;
content: counter(li, decimal);
counter-increment: li;
font: bold 14px serif;
margin: 0 0 10px;
padding: 5px 3px !important;
position: absolute;
right: -9px;
text-align: right;
text-indent: 6px;
top: -5px;
width: 20px;
}
.post ol li:after {
border-color: transparent #aeaeae transparent ; /* color of the triangle behind */
border-style: solid;
border-width: 5px 5px 0 0;
content: "";
height: 0;
position: absolute;
right: 17px;
top: -5px;
width: 0;
}
جميع هذه الاكواد ليست من تصميم أو تطوير موقع التقنية للجميع ، وجميع الحقوق محفوظة لأصحابها .

خطوات تغيير شكل الترقيم

والأن وبعد أن عرضنا عليكم أربع أشكال لترقيم بلوجر ، سوف نقوم بشرح طريقة تركيب شكل الترقيم الجديد ، خطوات التركيب :

  1. الدخول إلى بلوجر ثم تحديد المدونة المطلوبة.
  2. التوجه للمظهر ثم >> تعديل HTML.
  3. البحث عن الوسم ]]></b:skin> عن طريق النقر على Ctrl + F.
  4. إختيار شكل الترقيم الذي يناسبك من أعلى.
  5. نسخ الكود الخاص بالشكل الذي إخترته.
  6. لصق الكود الذي نسخته فوق الوسم مباشرة.
  7. عمل حفظ المظهر من أعلى شريط بلوجر.

وهكذا تكون قد قمت بتغيير شكل الترقيم لديك إلى شكل جديد ومميز ، ويختلف عن جميع المواقع والمدونات الأخرى .

وإلى هنا قد تكون إنتهت مقالتنا لهذا اليوم ، والسلام عليكم ورحمة الله وبركاته.

محمد العقاد

محمد أشرف العقاد - من فلسطين أعمل مدير تنفيذي وكاتب مقالات في موقع التقنية للجميع وأنا مطور ويب محترف ( بلوجر & ووردبريس ) ولدي سابق أعمال في إنشاء الموقع

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى