الصفحة الرئيسية
إضافات
افكار

تصميم مشاركة على بلوجر لمعلومات تطبيق (App info)

هذه الشيفرة لتخصيص عرض معلومات تطبيق في مشاركة على بلوجر. بدأنا بشيفرة CSS لتخصيص العرض بشكل فني.
جمال الحزازي
Split Post - Split Article Into Several Pages تصميم مشاركة على بلوجر لمعلومات تطبيق (App info)

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

تعتبر تجربة المستخدم (User Experience) أحد أهم العوامل التي يجب أخذها في الاعتبار عند تصميم صفحات الويب. فهي تمثل الطريقة التي يتفاعل بها المستخدم مع الموقع أو التطبيق على الإنترنت، وتشمل جميع الجوانب التي يشعر بها المستخدم أثناء تصفحه للصفحة، بدءًا من تصميم الواجهة وانتهاءً بسهولة الاستخدام وسرعة الاستجابة.

تنسيق المشاركات لتحسين تجربة المستخدم

أهمية تجربة المستخدم:

  1. جذب المستخدمين: تجربة المستخدم الممتازة تسهم في جذب المستخدمين واستبقاءهم على الموقع، حيث يكونون متحمسين لاستكشاف المزيد من المحتوى والخدمات المقدمة.
  2. زيادة التفاعلية: تجربة المستخدم الجيدة تشجع على التفاعل مع المحتوى والأدوات المقدمة، مما يؤدي إلى زيادة معدل الإشارات والتحويلات.
  3. تحسين تجربة التصفح: من خلال تصميم واجهة مستخدم سهلة الاستخدام ومريحة، يمكن تحسين تجربة التصفح وجعلها أكثر متعة وفعالية.

دور تنسيق شكل ظهور معلومات التطبيق:

تلعب عناصر التصميم وتنسيق مظهر معلومات التطبيق دورًا حاسمًا في تحسين تجربة المستخدم على الويب. فهي تساهم في:
- جعل المعلومات سهلة القراءة والفهم.
- تحسين تنقل المستخدمين في الموقع وتوجيههم إلى المحتوى المهم.
- إبراز مميزات وفوائد التطبيق بشكل جذاب وواضح. - تعزيز الانطباع الإيجابي لدى المستخدمين وبناء الثقة بالعلامة التجارية.

أساسيات تنسيق CSS وعناصر HTML في تخصيص مظهر الصفحة

تعتبر لغتا CSS (Cascading Style Sheets) و HTML (HyperText Markup Language) أساسيتان لتنسيق مظهر الصفحات على الويب. وتلعب كل منهما دورًا حاسمًا في تحديد كيفية عرض وتنسيق المحتوى على الصفحة.

HTML:

HTML هي لغة ترميز تستخدم لبناء هيكل الصفحة على الويب. تتكون صفحة الويب من مجموعة من العناصر الـ HTML، مثل الفقرات، العناوين، الروابط، الصور، وغيرها. يتم تحديد ترتيب وتنظيم هذه العناصر باستخدام علامات HTML المختلفة.

CSS:

CSS هي لغة تنسيق تستخدم لتخصيص مظهر الصفحة على الويب. تسمح CSS بتحديد مظهر العناصر الـ HTML، مثل الألوان، الخطوط، الهوامش، والتنسيقات الأخرى. يمكن استخدام CSS لتطبيق تصميم موحد على جميع صفحات الموقع وجعلها أكثر جاذبية واحترافية.

كيفية استخدام CSS و HTML معًا:

  1. تعريف العناصر في HTML: يتم استخدام علامات HTML لتعريف العناصر على الصفحة، مثل <div> لتحديد منطقة معينة، أو <p> لتعريف فقرة.
  2. تطبيق التنسيقات باستخدام CSS: يمكن استخدام CSS لتطبيق التنسيقات المختلفة على العناصر، مثل تغيير الألوان، وتحديد الهوامش، وتغيير حجم الخطوط.
  3. التوازن بين الهيكل والتصميم: من المهم أن يكون هناك توازن جيد بين هيكل الصفحة المعرف بواسطة HTML وتنسيقها المحدد بواسطة CSS، لضمان تحقيق التصميم المرغوب وتحسين تجربة المستخدم.

كيفية تنسيق المعلومات بشكل منظم وجذاب لتسهيل قراءتها

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

استخدام الألوان:

  1. - اختيار الألوان المناسبة: يجب اختيار ألوان تتناسب مع بعضها البعض وتعزز قراءة المحتوى دون التسبب في إرهاق المستخدم.
  2. - توحيد اللوحة اللونية: ينبغي توحيد اللوحة اللونية للصفحة واستخدام مجموعة محددة من الألوان للعناصر المختلفة، مما يعزز التمييز والترتيب.

الأشكال والتنسيقات:

  1. - استخدام العناصر الجذابة: يمكن استخدام الأشكال المميزة والرموز البصرية لجذب انتباه المستخدم وتسهيل تصفح المحتوى.
  2. - توفير التنسيقات السهلة القراءة: يجب تجنب التنسيقات المعقدة والزخرفية التي تصعب قراءتها، وبدلاً من ذلك يجب توفير نصوص بسيطة وواضحة لتسهيل فهم المحتوى.
  3. - تنسيق العناصر بشكل منظم: يجب تنظيم العناصر على الصفحة بشكل منظم ومرتب لتجنب الفوضى وتحسين تجربة المستخدم.

إضافة عناصر تفاعلية واستخدام تأثيرات الحركة في تحسين تجربة المستخدم

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

إضافة عناصر تفاعلية:

  1. - الأزرار والروابط: يتيح استخدام الأزرار والروابط للمستخدمين إمكانية التفاعل مع المحتوى بشكل أكبر، مما يسهل عليهم الوصول إلى المعلومات أو القيام بالإجراءات المطلوبة بسرعة وسهولة.
  2. - نماذج الإدخال: يمكن استخدام نماذج الإدخال لجمع معلومات من المستخدمين، مثل نماذج التسجيل أو استطلاعات الرأي، مما يعزز التفاعل ويساهم في تحسين تجربة المستخدم.

استخدام تأثيرات الحركة:

  1. - التأثيرات الانتقالية: يمكن استخدام التأثيرات الانتقالية مثل الانزلاق والتدوير لتحسين تجربة المستخدم وجعلها أكثر سلاسة وجاذبية.
  2. - التأثيرات الحركية: تعزز التأثيرات الحركية مثل التحريك والتظليل والتدرج من جاذبية الموقع وتجعل التفاعل مع المحتوى أكثر متعة وإثارة.
الفوائد:
  1. - زيادة معدل التفاعل: يجعل إضافة عناصر تفاعلية واستخدام تأثيرات الحركة التطبيق أكثر جاذبية للمستخدمين، مما يزيد من معدل التفاعل مع المحتوى.
  2. - تحسين تجربة المستخدم: يسهم استخدام عناصر التفاعل وتأثيرات الحركة في تحسين تجربة المستخدم وجعلها أكثر ديناميكية وممتعة.

ضمان توافق التصميم مع مختلف الأجهزة وحجم الشاشة

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

تقنيات توافق التصميم:

  1. - تصميم متجاوب (Responsive Design):
    يعتمد تصميم متجاوب على استخدام تقنيات CSS المتقدمة لضبط تنسيق الصفحة بحيث يتكيف مع حجم ونوع الشاشة المستخدمة، مما يضمن عرض المحتوى بشكل ملائم ومريح للمستخدمين.
  2. - استخدام وحدات النسب (Viewport Units):
    تسمح وحدات النسب في CSS بتعيين قيم الأبعاد باستخدام نسبة نسبية بدلاً من قيم ثابتة، مما يساعد في تكييف التصميم مع حجم الشاشة بشكل أفضل.
الفوائد:
  1. - توفير تجربة متسقة: يضمن توافق التصميم مع مختلف الأجهزة وحجم الشاشة توفير تجربة متسقة لجميع المستخدمين، بغض النظر عن نوع الجهاز الذي يستخدمونه.
  2. - زيادة الوصولية: يساعد توافق التصميم في جعل المحتوى متاحًا ومفهومًا لجميع الأفراد، بما في ذلك أولئك الذين يستخدمون أجهزة بحجم الشاشة الصغيرة.

شرح الشيفرة

شرح للشيفرة CSS:

/* تعريف قواعد التنسيق */
/* تعريف قواعد التنسيق لعناصر الواجهة */
.app-icon,
.app-name,
.app.no-padding {
  position: relative;
}
/* تعريف قواعد التنسيق للعناصر المشتركة */
.app-box-name-heading,
.app-icon,
.app-name,
.app.no-padding,
.entry-block.entry-content.main-entry-content,
h1.has-medium-font-size.no-margin,
span,
span.has-cyan-bluish-gray-color {
  -webkit-tap-highlight-color: transparent;
  box-sizing: inherit;
}
/* تعريف قواعد التنسيق للمحتوى */
.entry-block.entry-content.main-entry-content {
  -webkit-text-size-adjust: auto;
  margin-bottom: 20px!important;
  margin-top: 20px!important;
  margin: 20px auto;
  max-width: 750px;
}
/* تعريف قواعد التنسيق لعنصر بدون حشو */
.app.no-padding {
  column-gap: 15px;
  display: grid;
  grid-template-columns: 90px calc(100% - 105px);
  grid-template-rows: 90px;
  margin-bottom: 15px;
  margin-top: 0;
  padding: 0;
  row-gap: 15px;
  width: 380.90625px;
}
/* تعريف قواعد التنسيق لأيقونة التطبيق */
.app-icon {
  aspect-ratio: 1/1;
  border-radius: 15px;
  height: 90px;
  width: 90px;
}
/* تعريف قواعد التنسيق لاسم التطبيق */
.app-name {
  align-self: center;
  width: 275.90625px;
}
/* تعريف قواعد التنسيق لعنوان الصفحة */
h1.has-medium-font-size.no-margin {
  font-size: var(--wp--preset--font-size--medium)!important;
  line-height: 25px;
  margin: 0;
}
/* تعريف قواعد التنسيق للنصوص */
span {
  font-weight: 500;
}
/* تعريف قواعد التنسيق للنصوص ذات اللون الأزرق الفاتح */
span.has-cyan-bluish-gray-color {
  color: var(--wp--preset--color--cyan-bluish-gray)!important;
  font-weight: 400;
}
/* تعريف قواعد التنسيق للنصوص الصغيرة ذات اللون الأزرق الفاتح والمقتصرة */
span.has-small-font-size.has-cyan-bluish-gray-color.truncate {
  color: var(--wp--preset--color--cyan-bluish-gray)!important;
  -webkit-tap-highlight-color: transparent;
  box-sizing: inherit;
  display: block;
  font-size: var(--wp--preset--font-size--small)!important;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* تعريف قواعد التنسيق لمعرض الصور */
.ApseI {
  margin: 25px 0;
  overflow-y: hidden;
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
  width: 100%;
}
/* تعريف قواعد التنسيق للصور داخل معرض الصور */
.ApseI > * {
  display: inline-block;
  margin-right: 5px;
}
/* تعريف قواعد التنسيق لآخر عنصر داخل معرض الصور */
.ApseI > *:last-child {
  margin-right: 0;
}
/* تعريف قواعد التنسيق للصور */
.ApseI img {
  max-height: 310px;
  max-width: unset;
  width: auto;
}
/* تعريف قواعد التنسيق لمعرض الصور بارتفاع محدد */
.ApseI.h250 img {
  max-height: 250px;
}
/* تعريف قواعد التنسيق لمعرض الصور بارتفاع محدد */
.ApseI.h200 img {
  max-height: 200px;
}
/* تعريف قواعد التنسيق لمعرض الصور بارتفاع محدد */
.ApseI.h150 img {
  max-height: 150px;
}
/* تعريف قواعد التنسيق للصور في حالة عرض الشاشة تكون أقل من 500 بيكسل */
@media screen and (max-width: 500px) {
  .ApseI img {
    max-height: 250px;
  }
}
/* تعريف قواعد التنسيق لزر التنزيل */
.ApdbSD {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 30px auto;
  padding: 4px 25px;
  border-radius: 30px;
  line-height: 0px;
  color: #fefefe;
  background-color: #299e94;
  font-size: 14px;
  font-weight: bold;
  width: calc(100% - 40px);
}
/* تعريف قواعد التنسيق لزر التنزيل عند تحويش الماوس عليه */
.wc-apk-btn:hover {
  opacity: .8;
}
  1. .app-icon, .app-name, .app.no-padding: تعيين خصائص الوضع والمسافة لعناصر الصفحة مثل الأيقونة واسم التطبيق.
  2. .app-box-name-heading, .app-icon, .app-name, .app.no-padding, .entry-block.entry-content.main-entry-content, h1.has-medium-font-size.no-margin, span, span.has-cyan-bluish-gray-color: تعيين خصائص مختلفة للعناصر مثل حجم الخط والألوان والهوامش.
  3. .entry-block.entry-content.main-entry-content: تعيين الهوامش والمسافات لعناصر المحتوى الرئيسية في الصفحة.
  4. .ApseI: تعريف قواعد التنسيق لعناصر معرض الصور بحيث تظهر بشكل أفضل وأكثر جاذبية.
  5. @media screen and (max-width: 500px): تعريف قواعد التنسيق التي تطبق عندما يكون عرض الشاشة أقل من 500 بيكسل، مما يسمح بتحسين تجربة المستخدم على الأجهزة المحمولة.
  6. .ApdbSD: تعريف قواعد التنسيق لزر التنزيل لجعله بارزًا وجاذبًا للعين.
  7. .wc-apk-btn:hover: تعريف قواعد التنسيق لزر التنزيل عندما يتم تحويش الماوس عليه، مما يسمح بتغيير المظهر ليشير إلى التفاعل المحتمل.

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

شرح للشيفرة HTML:

<!--[ صورة كاملة للصفحة مقاس 1280*720 ]-->
<div class="zmImg">
<img width="1280" height="720" alt="_app_name" class="full lazy loaded" data-src="/s1600/coverture.jpg" src="/s1600/coverture.jpg" onclick="return false" lazied="">
</div>
<!--[ صورة أيقونة التطبيق ]-->
<div class="entry-block entry-content main-entry-content">
<div class="app no-padding">
<div class="app-icon">
<img alt="_app_name" decoding="async" fetchpriority="high" height="90" src="/android-icon-512x512.png" width="90">
</div>
<div class="app-name">
<div class="app-box-name-heading">
<h1 class="has-medium-font-size no-margin"><span>صِوان </span><span class="has-cyan-bluish-gray-color">APK + GAME (موقع ويب مميز) v1.0</span></h1><span class="has-small-font-size has-cyan-bluish-gray-color truncate">تحديث في<time datetime="2023-02-08T10:37:49+07:00">09 مايو 2024</time></span>
</div>
</div>
</div>
</div>
<div class="adB" data-text="Ads go here"></div>
       <!--[ رابط تحميل التطبيق او اللعبة ]-->
		<a class="ApdbSD" href="#">
		<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
				<g><path d="M11,8a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V9A1,1,0,0,0,11,8Z"></path>
					<path d="M7,12a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V13A1,1,0,0,0,7,12Z"></path>
					<path d="M3,16a1,1,0,0,0-1,1v6a1,1,0,0,0,2,0V17A1,1,0,0,0,3,16Z"></path>
					<path d="M25,14h-.26A8.05,8.05,0,0,0,17,8H15a1,1,0,0,0-1,1V23a1,1,0,0,0,1,1H25a5,5,0,0,0,0-10Zm0,8H16V10h1a6,6,0,0,1,5.93,5.14,1,1,0,0,0,1,.86H25a3,3,0,0,1,0,6Z"></path></g>
</svg> <span> تحميل </span></a>
<br/>
<!--[ جدول معلومات التطبيق ]-->
<h10><b>معلومات التطبيق:</b></h10>
<div class="table">
<table style="min-width: 100%; white-space: nowrap;">
<thead></thead>
<tbody>
<tr><td>الإسم</td><td>صِوان</td></tr>
<tr><td>اسم الحزمة</td><td>xyz.siwane</td></tr>
<tr><td>الناشر</td><td>جمال الحزازي</td></tr>
<tr><td>فئة</td><td>تصميم</td></tr>
<tr><td>إصدار</td><td>1.0</td></tr>
<tr><td>الحجم</td><td>10MB</td></tr>
<tr><td>سعر</td><td>حر</td></tr>
<tr><td>يتطلب</td><td>اندرويد</td></tr>
<tr><td>سمات</td><td>UI/UX</td></tr>
</tbody></table>
</div><br/>
<!--[ لقطات شاشة التطبيق ]-->
<h10><b>لقطة شاشة:</b></h10>
<div class="ApseI">
<div class="separator" style="clear: both;">
<a href="/scr1.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2208" data-original-width="1242" src="/scr1.png"></a>
</div>
<div class="separator" style="clear: both;">
<a href="/scr2.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2208" data-original-width="1242" src="/scr2.png"></a>
</div>
<div class="separator" style="clear: both;">
<a href="/scr3.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1242" data-original-width="2208" src="/scr3.png"></a>
</div>
<div class="separator" style="clear: both;">
<a href="/scr4.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1242" data-original-width="2208" src="/scr4.png"></a>
</div>
<div class="separator" style="clear: both;">
<a href="/scr5.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1242" data-original-width="2208" src="/scr5.png"></a>
</div>
</div>
  1. - الصورة الكاملة الصفحة:
    - تُستخدم لعرض صورة بحجم كامل للصفحة بأبعاد 1280x720.
    - تحتوي على عنصر <div> للتنسيق وتضمين الصورة داخله باستخدام عنصر <img>.
  2. - صورة أيقونة التطبيق:
    - تُستخدم لعرض أيقونة التطبيق.
    - تحتوي على عنصر <img> لتضمين الصورة وعرضها.
  3. - معلومات التطبيق:
    - تحتوي على اسم التطبيق، الإصدار، وتاريخ التحديث.
    - يستخدم عناصر <h1> و <span> لتنسيق النص، مع استخدام الفئات CSS لتحديد الألوان وحجم الخط.
  4. - رابط التنزيل:
    - يُمثل زر التنزيل للتطبيق.
    - يحتوي على عنصر <a> لإنشاء الرابط وعنصر <svg> لعرض الرمز.
  5. - جدول معلومات التطبيق:
    - يعرض معلومات مختلفة حول التطبيق مثل الاسم، الحزمة، الناشر، والإصدار.
    - يستخدم عناصر <table> و <tr> و <td> لتنظيم البيانات داخل الجدول.
  6. - لقطات الشاشة:
    - تعرض لقطات شاشة للتطبيق.
    - يتم عرض الصور داخل عنصر <div> ويتم تنسيقها باستخدام CSS.

class="note">هذه العناصر تعمل معًا لإنشاء صفحة ويب تُظهر معلومات حول التطبيق بشكل جذاب ومنظم.

تنسيق شكل مشاركة معلومات التطبيقات تضفي تجربة مريحة للمسخدم بحيث تظهر المشاركة بتنسيق مثالي تجعل المعنى المشاركة واضح للمستخدم.جمال الحزازي

شرح لنشر الشيفرة في مشاركة

يرجى ملاحظة أن الشيفرة المعروضة متوافقة فقط مع قوالب بلوجر المبنية على نسخة Median UI. يُرجى التأكد من استخدامها فقط في هذا السياق.

هذا التنسيق متوافق 100٪ مع قوالب المبنية على نسخة Median UI.

معاينة في UnPlug
لنشر الكود على منصة بلوجر، يمكن اتباع الخطوات التالية:. 
<style>/* AP Widget Code By elhizazi SA. (siwane.xyz) */
.app-icon,.app-name,.app.no-padding{position:relative}.app-box-name-heading,.app-icon,.app-name,.app.no-padding,.entry-block.entry-content.main-entry-content,h1.has-medium-font-size.no-margin,span,span.has-cyan-bluish-gray-color{-webkit-tap-highlight-color:transparent;box-sizing:inherit}.entry-block.entry-content.main-entry-content{-webkit-text-size-adjust:auto;margin-bottom:20px!important;margin-top:20px!important;margin:20px auto;max-width:750px}.app.no-padding{column-gap:15px;display:grid;grid-template-columns:90px calc(100% - 105px);grid-template-rows:90px;margin-bottom:15px;margin-top:0;padding:0;row-gap:15px;width:380.90625px}.app-icon{aspect-ratio:1/1;border-radius:15px;height:90px;width:90px}.app-name{align-self:center;width:275.90625px}h1.has-medium-font-size.no-margin{font-size:var(--wp--preset--font-size--medium)!important;line-height:25px;margin:0}span{font-weight:500}span.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray)!important;font-weight:400}span.has-small-font-size.has-cyan-bluish-gray-color.truncate{color:var(--wp--preset--color--cyan-bluish-gray)!important;-webkit-tap-highlight-color:transparent;box-sizing:inherit;display:block;font-size:var(--wp--preset--font-size--small)!important;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ApseI{margin:25px 0;overflow-y:hidden;overflow-x:scroll;position:relative;white-space:nowrap;width:100%}.ApseI>*{display:inline-block;margin-right:5px}.ApseI>*:last-child{margin-right:0}.ApseI img{max-height:310px;max-width:unset;width:auto}.ApseI.h250 img{max-height:250px}.ApseI.h200 img{max-height:200px}.ApseI.h150 img{max-height:150px}@media screen and (max-width:500px){.ApseI img{max-height:250px}}.ApdbSD{position:relative;display:flex;justify-content:center;align-items:center;text-align:center;margin:30px auto;padding:4px 25px;border-radius:30px;line-height:0px;color:#fefefe;background-color:#299e94;font-size:14px;font-weight:bold;width:calc(100% - 40px)}.wc-apk-btn:hover{opacity:.8}</style>
<!--[ صورة كاملة للصفحة مقاس 1280*720 ]-->
<div class="zmImg">
<img width="1280" height="720" alt="_app_name" class="full lazy loaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjRPRcSpWu_VUijOYAkkRAZvN11HnH7zb9MAO2slEu-YsoYCvwns8s9A-1mni5GEK47464nmkEVCS25wWzUp6hFxYmoTSXQBXaKB4Jz2QS7TKFw6pW6WFbvzw1qMrmqEuTtYC6VMtAkUzK6f6Fi7RllYwCMxr7SJ9YnXvnp7Zwhpeo8gFNyigbF732IA/s1600/coverture.jpg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjRPRcSpWu_VUijOYAkkRAZvN11HnH7zb9MAO2slEu-YsoYCvwns8s9A-1mni5GEK47464nmkEVCS25wWzUp6hFxYmoTSXQBXaKB4Jz2QS7TKFw6pW6WFbvzw1qMrmqEuTtYC6VMtAkUzK6f6Fi7RllYwCMxr7SJ9YnXvnp7Zwhpeo8gFNyigbF732IA/s1600/coverture.jpg" onclick="return false" lazied=""></div>
<!--[ صورة أيقونة التطبيق ]-->
<div class="entry-block entry-content main-entry-content">
<div class="app no-padding">
<div class="app-icon">
<img alt="_app_name" decoding="async" fetchpriority="high" height="90" src="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/android-icon-512x512.png" width="90">
</div><div class="app-name">
<div class="app-box-name-heading">
<h1 class="has-medium-font-size no-margin"><span>صِوان </span><span class="has-cyan-bluish-gray-color">APK + GAME (موقع ويب مميز) v1.0</span></h1><span class="has-small-font-size has-cyan-bluish-gray-color truncate">تحديث في<time datetime="2023-02-08T10:37:49+07:00">09 مايو 2024</time></span></div>
</div></div></div>
<div class="adB" data-text="Ads go here"></div>
<!--[ رابط تحميل التطبيق او اللعبة ]-->
<a class="ApdbSD" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><g>
<path d="M11,8a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V9A1,1,0,0,0,11,8Z"></path>
<path d="M7,12a1,1,0,0,0-1,1V23a1,1,0,0,0,2,0V13A1,1,0,0,0,7,12Z"></path>
<path d="M3,16a1,1,0,0,0-1,1v6a1,1,0,0,0,2,0V17A1,1,0,0,0,3,16Z"></path>
<path d="M25,14h-.26A8.05,8.05,0,0,0,17,8H15a1,1,0,0,0-1,1V23a1,1,0,0,0,1,1H25a5,5,0,0,0,0-10Zm0,8H16V10h1a6,6,0,0,1,5.93,5.14,1,1,0,0,0,1,.86H25a3,3,0,0,1,0,6Z"></path>
</g></svg>
<span> تحميل </span></a>
<br/>
<!--[ جدول معلومات التطبيق ]-->
<h10><b>معلومات التطبيق:</b></h10>
<div class="table">
<table style="min-width: 100%; white-space: nowrap;">
<thead></thead>
<tbody>
<tr><td>الإسم</td><td>صِوان</td></tr><tr>
<td>اسم الحزمة</td><td>xyz.siwane</td></tr>
<tr><td>الناشر</td><td>جمال الحزازي</td></tr>
<tr><td>فئة</td><td>تصميم</td></tr>
<tr><td>إصدار</td><td>1.0</td></tr>
<tr><td>الحجم</td><td>10MB</td></tr>
<tr><td>سعر</td><td>حر</td></tr>
<tr><td>يتطلب</td><td>اندرويد</td></tr>
<tr><td>سمات</td><td>UI/UX</td></tr>
</tbody></table>
</div><br/>
<!--[ لقطات شاشة التطبيق ]-->
<h10><b>لقطة شاشة:</b></h10>
<div class="ApseI">
<div class="separator" style="clear: both;">
<a href="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr6.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2208" data-original-width="1242" src="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr6.png"></a></div>
<div class="separator" style="clear: both;">
<a href="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr7.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2208" data-original-width="1242" src="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr7.png"></a></div>
<div class="separator" style="clear: both;">
<a href="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr8.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1242" data-original-width="2208" src="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr8.png"></a></div>
<div class="separator" style="clear: both;">
<a href="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr9.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1242" data-original-width="2208" src="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr9.png"></a></div>
<div class="separator" style="clear: both;">
<a href="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr10.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1242" data-original-width="2208" src="https://github.com/XyzSiwane/SiwaneXYZ.github.io/raw/main/scr10.png"></a></div></div>
  1. نسخ الشيفرة انسخ الشيفرة كاملة من صندوق الاكواد اعلاه و اتبع باقي الخطواة اسفله.
  2. تسجيل الدخول إلى حساب بلوجر قم بتسجيل الدخول إلى حسابك على بلوجر على العنوان: https://www.blogger.com/..
  3. إنشاء مشاركة جديدة: انتقل إلى لوحة التحكم الخاصة بك واختر "مشاركة جديدة" لإنشاء مشاركة جديدة.
  4. إضافة العنوان والمحتوى: قم بإضافة عنوان للمشاركة والنص الخاص بها.
  5. إضافة الشيفرة HTML: انتقل إلى وضع العرض النصي (Text mode) في محرر المشاركة غير من وضع الانشاء الذي رمزه () الى وضع التكويد الذي رمزه () والصق الشيفرة XML التي قمت بنسخها لتنشرها.
  6. معاينة ونشر: قم بمعاينة المشاركة للتأكد من أن الكود يتم عرضه بشكل صحيح، ثم انشر المشاركة.
  7. مشاركة الرابط: بمجرد نشر المشاركة، قم بمشاركة الرابط مع الآخرين ليتمكنوا من مشاهدة المشاركة الخاصة بك والتفاعل معها.
سؤال: ما هي أهمية إضافة شيفرة CSS في مشاركة معلومات التطبيق على بلوجر؟

- جواب: تساعد شيفرة CSS في تخصيص تنسيق وتصميم عرض معلومات التطبيق، مما يمكن أصحاب المدونات من تنسيق المحتوى بشكل مرئي جذاب ومنسق.

سؤال: ما هو دور العناصر HTML في عرض معلومات التطبيق على بلوجر؟

- جواب: تُستخدم عناصر HTML لتنظيم وترتيب المحتوى بشكل منظم، مثل إنشاء هياكل الصفحة وتنسيق النصوص وعرض الصور والروابط.

سؤال: ما هي العناصر الرئيسية في شيفرة تخصيص عرض معلومات التطبيق؟

- جواب: العناصر الرئيسية تشمل الأيقونة، اسم التطبيق، التفاصيل مثل الإصدار والحجم، وروابط التنزيل.

سؤال: ما هو تأثير إضافة الشيفرة الخاصة بالتنسيق على قوالب بلوجر؟

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

المشاركات ذات الصلة

الاستنتاج

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

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/05/app-info.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

تعليقان (2)

  1. DR.FATHI
    DR.FATHI
    اللله ينور بس عاوزين نعرف كيف اضافة اكواد صغيرة
  2. جمال الحزازي
    جمال الحزازي
    يتم عن طريق تخصيص ستايل الفقرة الحجم و اللون و نوع الخط
اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"