الصفحة الرئيسية
إضافات
بلوجر

ضافة أزرار تغيير حجم النص في مدونة بلوجر باستخدام jQuery و CSS

تمكن هذا الكود على مدونة بلوجر من إضافة أزرار لتغيير حجم النص بسلاسة باستخدام jQuery للتحكم في العناصر وCSS لتنسيقها، مما يحسن تجربة قراءة الزوار ....
جمال الحزازي
Split Post - Split Article Into Several Pages
إضافة أزرار تغيير حجم النص في مدونة بلوجر باستخدام jQuery و CSS

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

كيفية إضافة تغيير حجم النص الديناميكي على موقع Blogger

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

فهم الأساسيات

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

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

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

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

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

معاينة في UnPlug

شرح تفصيلي لشيفرة JavaScript

إدراج مكتبة jQueryتُستخدم

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

الشيفرة المعروضة هي جزء من JavaScript وتستخدم مكتبة jQuery لإدراجها في صفحة HTML.

تحليل الشيفرة

<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>

هذا العنصر <script> يستخدم لتضمين ملف JavaScript من الإنترنت، وتحديدًا مكتبة jQuery بإصدارها 3.6.0 المصغرة (jquery-3.6.0.min.js).

خلاصة

الشيفرة تُستخدم لتضمين مكتبة jQuery في صفحة HTML، مما يسمح باستخدام ميزات jQuery في تطوير السكربتات والتفاعلات في الصفحة. تحميل مكتبة jQuery بهذه الطريقة يسهل استخدام دوال jQuery مثل click() وcss() والكثير من الوظائف الأخرى في السكربتات الخاصة بك.

شرح تفصيلي لشيفرة CSS

/*...Text Resizing...*/
    .txt-rsr {
    position: fixed;
    left: 25px;
    bottom: 126px;
    background: #ffffff;
    box-shadow: 0 0 5px #000000;
    border-radius: 5px;
    box-sizing: border-box;
    z-index: 1;
    transition: all 0.3s linear
}
.darkMode .txt-rsr {
    background: var(--darkU);
    color: #ffffff;
    box-shadow: 0 0 5px #ffffff
}
#Ifont, #Dfont {
    font-size: 16px;
    padding: 6px;
    box-sizing: border-box;
    background: #299e94;
    color: #ffffff
}
#Ifont:hover,#Dfont:hover {
    background: var(--themeC);
    color: #ffffff
}
#Ifont {
    border-bottom: 0.5px solid #000000
}
#Dfont {
    border-top: 0.5px solid #000000
}

هذه الشيفرة هي جزء من CSS تُستخدم لتنسيق عناصر معينة في واجهة المستخدم. تتضمن الشيفرة قواعد لتنسيق عنصر نصي يمكن تكبيره وتصغيره، بالإضافة إلى إعدادات للون والخلفية والتأثيرات البصرية عند تفعيل وضعية الوضع الداكن (Dark Mode).

تنسيق عناصر واجهة المستخدم باستخدام CSS

هذه الشيفرة CSS تستخدم لتنسيق عناصر واجهة المستخدم، مثل الأزرار والخلفيات والظلال. تُعرف الخصائص التالية:
.txt-rsr: يحدد خصائص تنسيق عنصر معين في واجهة المستخدم، مثل الوضع الثابت والظلال.
.darkMode .txt-rsr: يغير خصائص عنصر txt-rsr عند تفعيل وضع الظلام.
#Ifont, #Dfont: يحدد تنسيق لأزرار معينة في واجهة المستخدم، مع خصائص للألوان والحواف.
#Ifont:hover, #Dfont:hover: يعدل التنسيق عند تحريك الماوس فوق الأزرار.

تحليل الشيفرة

.txt-rsr
.txt-rsr { position: fixed; left: 25px; bottom: 126px; background: #ffffff; box-shadow: 0 0 5px #000000; border-radius: 5px; box-sizing: border-box; z-index: 1; transition: all 0.3s linear; }
  1. position: fixed;: يثبت العنصر في موقع محدد بالنسبة للنافذة بغض النظر عن التمرير.
  2. left: 25px;: يحدد بعد العنصر 25 بكسل من الحافة اليسرى للنافذة.
  3. bottom: 126px;: يحدد بعد العنصر 126 بكسل من الحافة السفلية للنافذة.
  4. background: #ffffff;: يحدد خلفية العنصر باللون الأبيض.
  5. box-shadow: 0 0 5px #000000;: يضيف ظلًا بكسل 5 باللون الأسود حول العنصر.
  6. border-radius: 5px;: يجعل زوايا العنصر دائرية بقطر 5 بكسل.
  7. box-sizing: border-box;: يجعل حساب حجم العنصر يشمل الحواف والتعبئة.
  8. z-index: 1;: يحدد ترتيب العنصر فوق العناصر الأخرى (في مستوى Z).
  9. transition: all 0.3s linear;: يضيف انتقالًا سلسًا لجميع الخصائص على مدى 0.3 ثانية بخطية.
.darkMode .txt-rsr
.darkMode .txt-rsr { background: var(--darkU); color: #ffffff; box-shadow: 0 0 5px #ffffff; }
  1. background: var(--darkU);: يغير لون الخلفية إلى لون مخصص عند تفعيل الوضع الداكن.
  2. color: #ffffff;: يغير لون النص إلى الأبيض.
  3. box-shadow: 0 0 5px #ffffff;: يغير ظل العنصر إلى اللون الأبيض.
#Ifont, #Dfont
#Ifont, #Dfont { font-size: 16px; padding: 6px; box-sizing: border-box; background: #299e94; color: #ffffff; }
  1. font-size: 16px;: يحدد حجم الخط بـ 16 بكسل.
  2. padding: 6px;: يضيف حشوة داخلية بـ 6 بكسل.
  3. box-sizing: border-box;: يجعل حساب حجم العنصر يشمل الحواف والتعبئة.
  4. background: #299e94;: يحدد لون الخلفية.
  5. color: #ffffff;: يحدد لون النص بالأبيض.
#Ifont:hover, #Dfont:hover
#Ifont:hover, #Dfont:hover { background: var(--themeC); color: #ffffff; }
  1. background: var(--themeC);: يغير لون الخلفية إلى لون مخصص عند مرور الفأرة فوق العنصر.
  2. color: #ffffff;: يغير لون النص إلى الأبيض عند مرور الفأرة.
#Ifont
#Ifont { border-bottom: 0.5px solid #000000; }
  1. border-bottom: 0.5px solid #000000;: يضيف حافة سفلية بعرض 0.5 بكسل باللون الأسود.
#Dfont
#Dfont { border-top: 0.5px solid #000000; }
  1. border-top: 0.5px solid #000000;: يضيف حافة علوية بعرض 0.5 بكسل باللون الأسود.

الشيفرة المقدمة، تُستخدم المتغيرات المخصصة لتعريف الألوان وإعادة استخدامها بسهولة، مما يسهل إدارة الأنماط. متغير var(--darkU) يحدد لون الخلفية في الوضع الداكن، بينما var(--themeC) يحدد لون الخلفية عند تفاعل المستخدم مع العناصر مثل الأزرار عند مرور الفأرة فوقها. هذه المتغيرات تساهم في تسهيل عملية الصيانة والتحديث، حيث يمكن تغيير القيم في مكان واحد لتنعكس في جميع الأنماط التي تستخدمها.

الخلاصة

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

شرح تفصيلي لشيفرة HTML

الشيفرة المعروضة هي جزء من HTML تُستخدم في Blogger لتحديد عناصر معينة لعرضها فقط عندما يكون المشاهد في صفحة منشور.

تحليل الشيفرة

<b:if cond='data:view.isPost'>
  <div class='txt-rsr'>
    <div id='Ifont'><svg class='line' viewBox='0 0 24 24'><path d='M6 12H18'/><path d='M12 18V6'/></svg></div>
    <div id='Dfont'><svg class='line' viewBox='0 0 24 24'><path d='M6 12H18'/></svg></div>
  </div>
</b:if>
  1. <b:if cond='data:view.isPost'>: هذا العنصر يستخدم في Blogger لتطبيق شرط قبل عرض العناصر داخله. يتحقق هنا مما إذا كان المشاهد في صفحة منشور قبل عرض العناصر داخل <lb:if>.
  2. <div class='txt-rsr'>: عنصر <div> يستخدم لإنشاء صندوق يحتوي على عناصر أخرى داخله.
  3. <div id='Ifont'> و <div id='Dfont'>: عناصر <div> تحتوي كل منها على معرف (ID) هو Ifont و Dfont على التوالي.
  4. <svg class='line' viewBox='0 0 24 24'>: يبدأ بعرض رموز SVG داخل العناصر <div>، مما يتيح عرض أيقونات أو رسومات متجهية.
  5. <path d='M6 12H18'/> و <path d='M12 18V6'/>: عناصر <path> في SVG تستخدم لرسم خطوط وأشكال مختلفة. d='M6 12H18' يعني رسم خط أفقي من النقطة (6،12) إلى (18،12)، و d='M12 18V6' يعني رسم خط رأسي من (12،18) إلى (12،6).

خلاصة

الشيفرة تستخدم للتحقق من نوع الصفحة في Blogger قبل عرض رموز SVG داخل صندوق txt-rsr، مما يتيح إظهار عناصر مختلفة بناءً على سياق الصفحة. استخدام SVG يسمح بعرض رموز متجهية بشكل مرن وبسيط داخل الواجهة.

شرح تفصيلي لشيفرة JavaScript

تحكم في حجم النص باستخدام JavaScript و jQuery

هذه الشيفرة JavaScript تستخدم jQuery لتفعيل عمليات تغيير حجم النص عند النقر على الأزرار #Ifont و #Dfont.

الشيفرة المعروضة هي جزء من JavaScript تُستخدم في Blogger (أو أي موقع آخر) لتحكم في حجم الخط في عنصر معين عند النقر على عناصر محددة.

تحليل الشيفرة

<script>
/*<![CDATA[*/
$("").ready(function(){
    $("#Ifont").click(function(){
        curSize = parseInt($(".postBody").css("font-size")) + 1;
        if (curSize <= 20) {
            $(".postBody").css("font-size", curSize);
        }
    });

    $("#Dfont").click(function(){
        curSize = parseInt($(".postBody").css("font-size")) - 1;
        if (curSize >= 10) {
            $(".postBody").css("font-size", curSize);
        }
    });
});
/*]]>*/
</script>
  1. <script>: هذا العنصر يستخدم لإدراج شيفرة JavaScript داخل صفحة HTML.
  2. /*<![CDATA[*/ و /*]]>*/: تُستخدم هذه العلامات لتحديد أن محتوى النص داخل <script> هو بيانات CDATA، مما يساعد في تجنب مشاكل التحليل في بعض المتصفحات.
  3. $("").ready(function(){ ... }): تعني أنه عندما تكون الصفحة جاهزة، سيتم تنفيذ الوظائف الموجودة داخل الدالة الناتجة function(){ ... }.
  4. $("#Ifont").click(function(){ ... }): هذا الجزء يضبط دالة لتنفيذها عندما يتم النقر على عنصر يحمل الهوية (ID) Ifont.
  5. curSize = parseInt($(".postBody").css("font-size")) + 1;: يقوم بقراءة حجم الخط الحالي لعنصر يحمل الفئة (Class) postBody ويزيده بواحد.
  6. if (curSize <= 20) { $(".postBody").css("font-size", curSize); }: يتحقق مما إذا كان حجم الخط الجديد أقل من أو يساوي 20، ثم يقوم بتعيين حجم الخط الجديد لعنصر postBody.
  7. $("#Dfont").click(function(){ ... }): هذا الجزء يضبط دالة لتنفيذها عندما يتم النقر على عنصر يحمل الهوية (ID) Dfont.
  8. curSize = parseInt($(".postBody").css("font-size")) - 1;: يقوم بقراءة حجم الخط الحالي لعنصر يحمل الفئة (Class) postBody ويقلله بواحد.
  9. if (curSize >= 10) { $(".postBody").css("font-size", curSize); }: يتحقق مما إذا كان حجم الخط الجديد أكبر من أو يساوي 10، ثم يقوم بتعيين حجم الخط الجديد لعنصر postBody.

خلاصة

الشيفرة تستخدم jQuery لتنفيذ دوال JavaScript عند النقر على العناصر التي تحمل الهويات Ifont و Dfont، مما يسمح بزيادة أو نقصان حجم الخط في عنصر يحمل الفئة postBody عند النقر، بشرط أن يكون حجم الخط بين 10 و 20 بكسل.

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

تستخدم الشيفرات المقدمة CSS لتنسيق عناصر واجهة المستخدم، مما يسهل تحسين التصميم وتجربة المستخدم. بينما تستخدم الشيفرات JavaScript و jQuery لتفعيل عمليات تغيير حجم النص على الفور عند الضغط على الأزرار المعينة، مما يساهم في تحسين تجربة التصفح والقراءة.

تنبيه مهم

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

  1. أخذ نسخة احتياطية:
    قبل تعديل أي شيء في قالب موقعك أو مدونتك، تأكد من أخذ نسخة احتياطية للقالب الحالي. يمكنك فعل ذلك عن طريق الانتقال إلى قسم القالب في لوحة التحكم واختيار خيار "نسخ القالب" أو "حفظ نسخة احتياطية"، أو يمكنك ببساطة نسخ الكود وحفظه في ملف نصي على جهاز الكمبيوتر الخاص بك.
  2. توثيق الشفرات:
    قبل إضافة أي شيفرة جديدة، قم بتوثيق الشفرة الحالية بشكل جيد. يمكنك ذلك عن طريق إنشاء تعليقات في الشفرة توضح وظيفة كل جزء منها وكيفية عمله. هذا يسهل علىك فهم الشفرة في المستقبل والتعديل عليها بشكل أفضل مثلا فتح و غلق التوثيق <!--[ open adds code]--> و <!--[ close adds code]-->.
  3. الاختبار الشامل:
    بعد إضافة الشفرات الجديدة، قم بإجراء اختبار شامل لموقعك أو مدونتك للتأكد من عمل الشفرات بشكل صحيح وعدم وجود أي مشاكل. قم بفحص صفحات متعددة من الموقع للتأكد من تأثير الشفرات على جميع الصفحات.
  4. التوثيق المستقبلي:
    بمجرد إضافة الشفرات بنجاح والتأكد من عملها بشكل صحيح، قم بتوثيقها في ملف مستقل يحتوي على جميع الشفرات المستخدمة في الموقع مع شرح وظيفة كل منها. هذا يساعدك في المراجعة المستقبلية وإجراء التعديلات عند الحاجة.

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

إضافة الشيفرة

لكل جزء مكان محدد يتم اضافته اذا كنت تحتاج ان تظهر القطعة على جمسع مشاركاتك اتبع الخطوات اسفله. شيفرة CSS في الغالب تظاف فوق وسم ]]</b:skin> و شيفرة JS و HTML فوق وسم </body>

إضافة CSS

طريقة تركيب الشيفرة

  1. قم بتسجيل الدخول إلى حسابك في بلوجر وانتقل إلى لوحة التحكم الخاصة بالمدونة التي ترغب في تركيب الشيفرة فيها.
  2. انتقل إلى قالب المدونة الخاص بك عن طريق النقر على "المظهر".
  3. اضغط على الرمز السهم بجانب تخصيص اختر "تحرير HTML" للوصول إلى محرر القالب.
  4. ابحث عن </head> الصق اسفله سكريبت مكتبة jQuery (الشيفرة لتضمين مكتبة jQuery من الإنترنت بإصدار 3.6.0.)
  5. في نفس الصفحة ابحث عن ]]</b:skin> في الكود،
  6. قم بلصق الشيفرة CSS التي تريد تركيبها مباشرة قبل علامة ]]</b:skin>.
  7. انقر على رمز لحفظ التغييرات التي قمت بها في القالب.
  8. قم بتحديث مدونتك لتطبيق التغييرات.

بعد اتباع هذه الخطوات، يجب أن تظهر الشيفرة CSS الخاصة بك في الصفحات الخاصة بمدونتك فوق علامة ]]</b:skin> اذا حاولة معاينة فحص مصدر موقعك.

إضافة JS و html

  1. في نفس صفحة محرر القالب.
  2. ابحث عن </body> في الكود، وهذه العلامة تظهر في نهاية الصفحة قبل إغلاق الجسم (</body>).
  3. قم بلصق الشيفرة JavaScript مع شيفرة html التي تريد تركيبها مباشرة قبل علامة </body>.
  4. انقر على رمز لحفظ التغييرات التي قمت بها في القالب.
  5. قم بتحديث مدونتك لتطبيق التغييرات.

إختياري يمكنك تنزيل ملف الاكواد مضغوطة الخاص بشيفرة CSS و ايضا شيفرة Javascript و HTML من الزر اسفله (الاكواد مضغوطة يعني ان الشيفرة مختزلة لتحافظ على على تنسيق الاكواد في قالب مدونتك نظراً لانني انشر الاكواد مع شرح تفصيلي ادطر الى كتابتها واضحة و مرتبة)

يمكنك تنزيل تطبيق QuickEdit+ من متجر صِوان لتحرير الاكواد و مراجعتها قبل تركيبها في قالب مدونتك

في خطوة البحت داخل محرر الاكواد HTML في لوحة التحكم بلوجر اذا كنت تستخدم الحاسوب انقر في اي مكان داخل محرر الاكواد و من لوحة المفاتيح انقر على زري Ctrl + F معا ستظهر لك خانة البحث وابحث عن اي عنصر تريد داخل قالبك اما اذا كنت تستخم الهاتف نزل لوحة مفاتيك Hacker's Keyboard ستجد عليها جميع الاختصارات و منه تنقر على زري Ctrl + F ستنبتق لك خانة البحث ايضاً

خاتمة

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

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

سؤال: ما هي أهمية إضافة أزرار تغيير حجم النص في مدونتي؟

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

سؤال: كيف يمكنني تثبيت أزرار تغيير حجم النص في مدونتي؟

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

سؤال: هل يمكنني تخصيص تصميم أزرار تغيير حجم النص؟

✦ جواب: نعم، يمكنك تخصيص تصميم أزرار تغيير حجم النص باستخدام CSS. يمكنك تعديل الألوان، الأبعاد، والتأثيرات البصرية لتناسب تصميم مدونتك.

سؤال: هل توجد نصائح لتحسين أداء أزرار تغيير حجم النص؟

✦ جواب: تأكد من اختبار أزرار تغيير حجم النص على مختلف المتصفحات للتأكد من توافقها وسلامتها.
استخدم تأثيرات CSS الناعمة مثل التحولات لتجعل تجربة المستخدم أكثر سلاسة عند تغيير حجم النص.

المصادر

إليك مصدرين يمكنك الاطلاع عليهم لمزيد من المعلومات حول إضافة أزرار تغيير حجم النص باستخدام CSS و jQuery في مدونة بلوجر:

  1. موقع بلوجر الرسمي (Blogger Help):
    يوفر دليلًا شاملاً لتخصيص القوالب في بلوجر، بما في ذلك كيفية إضافة وتعديل أكواد CSS واستخدام jQuery. يمكنك العثور على معلومات محدثة ودقيقة هنا:
    [Blogger Help - Customize Your Template]
  2. مجتمع بلوجر على Stack Overflow:
    يعد Stack Overflow مصدرًا جيدًا لطرح الأسئلة المتعلقة بتخصيص قوالب بلوجر واستخدام CSS و jQuery. يمكنك الاطلاع على أسئلة وأجوبة سابقة أو طرح سؤال جديد للحصول على دعم من المجتمع:
    [Stack Overflow - Blogger]

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

المراجع

بالطبع، إليك مرجعين آخرين يمكنك الاطلاع عليهم لمزيد من المعلومات حول تخصيص وتعديل قوالب بلوجر باستخدام CSS و jQuery:

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

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

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

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

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/06/adding-text-resizing-buttons-in-blogger.html

عن المؤلف

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

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"