إضافة صناديق الوصف لمدونات بلوجر

مرحبًا بالجميع، أتمنى أن تكونو في أحسن حال،على أية حال سأشارك معكم أداة مفيدة يبحث عنها الكثير وهي صندوق الوصف أو المواصفات أو المميزات... لا أعلم اسمها بالضبط لذالك اعذروني.

   صناديق الوصف لموقع بلوجر:

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

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

  معاينة

كيفية إضافة صندوق وصف احترافي:

توجه إلى لوحة تحكم Blogger

انتقل إلى قسم المظهر  

انقر فوق زر تحرير HTML .

انسخ كود CSS التالي والصقه فوق  الوسـم  ]]<b:skin>

  /* material box design by TI9NIYA ARABIC */
.tikniyabox{background:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.tikniyabox h2 {background:#ff0000;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;right:30px;text-transform:uppercase}
.tikniyabox.box-yellow h2{background:#e2c601}
.tikniyabox.box-blue h2{background:#2ad2c9}
.tikniyabox.box-red h2{background:#f7176a}

/* table info */
.Blog table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
.Blog table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
.Blog table.tr-caption-container tr:nth-child(2n+1) td, .Blog table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
.Blog table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
.Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
.Blog table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-right:0;font-family:Noto Sans;font-size:13px}
.Blog table th:last-child, .Blog table tr td:last-child, .Blog table tr:nth-child(2n) td:last-child{border-left:0}
.Blog table td{padding:15px 20px;border:1px solid #ddd;border-right:0;border-top:0;vertical-align:middle}
.Blog table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.Blog .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}
   

ملاحظة: إذا كان القالب الخاص بك يحتوي على كود css الخاص بالصندوق مثل قالب median ui، فلا تنسخ الجزء الثاني من الكود أعلاه باسم  /*table info*/ وذالك حتى لا تتعارض الأكواد الموجودة مسبقا في القالب مع الأكواد الحالية.

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

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

الشكل الأول

تجريب

هنا مكان النص أو الفقرة

     
  <div class="tikniyabox box-blue">

<h2>تجريب</h2>

<p>هنا مكان النص أو الفقرة</p><p>

</p><p></p></div>
 

الشكل الثاني

عنوان تجريبي

• هنا مكان النص
• هنا مكان النص
• هنا مكان النص

    <div class="tikniyabox box-yellow">
<h2>عنوان تجريبي</h2>
<ul>
<li>هنا مكان النص </li>
<li>هنا مكان النص</li>
<li>هنا مكان النص</li>
</ul>
</div>   

الشكل الثالت

عنوان

الإسم	TI9NIYA ARABIC
الحالة	مدفوع
الإصدار	1.0
السعر	300$
تجريب	تجريب

     <div class="tikniyabox">
<h2> عنوان </h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b> الإسم </b></td> <td> TI9NIYA ARABIC </td></tr>
<tr><td><b> الحالة </b></td> <td>مدفوع</td></tr>
<tr><td><b> الإصدار </b></td><td> 1.0 </td></tr>
<tr><td><b> السعر </b></td> <td>300$</td></tr>
<tr><td><b> تجريب </b></td> <td> تجريب </td></tr>
</tbody>
</table>
</div> 

وفي نهاية موضوعنا أتمنى أن تكونو قد استفذتم من الأداة ولا تنسو دعمنا ومشاركة المقالة

ونلتقي في موضوع آخر.