إنشاء زر إقرا المزيد في مدونات بلوجر بأحترافية وبأستخدام css فقط


أهلا بكم
سنتعلم في هذا الدرس كيفية إنشاء زر إقرأ المزيد في مدونات بلوجر وبأستخدام css فقط.
إنشاء زر إقرا المزيد في مدونة بلوجر بأحترافية
ان الزر الأفتراضي لمدونة بلوجر يكون كما موضح في الصورة رقم واحد
معاينة الزر الافتراضي المزيد من المعلومات
صورة رقم ( 1 )
لكن ماذا لو أردنا تغيير خصائص هذ الزر لجعله كما موضح في الصورة رقم أثنين
تغيير خصائص الزر الافتراضي لنحصل على هذا الزر
صورة رقم ( 2 )
الأمر بسيط فقط تابع معي
أن الطريقة المستخدمة لعمل ذلك تكون بأستخدام الجافا سكربت ولو قمت بالبحث في محرك البحث جوجل ستجد عشرات المواضيع تشرح هذه الطريقة لكن هي هي مجرد نسخ ولصق للموضوع نفسه في عشرات المدونات حتى انك لا تعرف الكاتب الاصلي للموضوع.
جرب ذلك بالنقر على هذا الرابط
اضافة زر اقرا المزيد لمدونة بلوجر
لكن أنا سأعطيك طريقة لم يتطرق لها أحد على الأرجح لأن عند بحثي لم اجد شرح لهذه الطريقة لذلك أبقى معي
هل تريد مني ان أشرح لك كيف تصل الى قالب مدونتك بالتأكيد لا لأنك تعرف كيف ذلك.

الخطوة الأولى كتابة كود CSS

  1.  بعد فتح القالب أضغط على الزر Ctrl+F
  2. اذهب الى خصائص المدونة بكتابة الكود b:skin
  3. افتح الكود b:skin وأنزل سطر جديد بعد الكود 
<![CDATA[
الآن نقوم بكتابة الكود لتغيير خصائص الزر إقرأ المزيد
ولتسهيل الأمر عليك قم بنسخ الكود التالي ولصقه أسفل هذا الكود
<![CDATA[
فتكون عندك النتيجة مثل ما موضح في الصورة رقم ثلاثة
هذا كود الخصائص css
صورة رقم ( 3 )

الخطوة الثانية التعديل على كود html الأصلي

  1.  أضغط على الزر Ctrl+F
  2. اكتب الكلمة jump-link انقر enter حتى تحصل على هذا الكود
قم بكتابة او نسخ هذا الكود 
ثم قم بلصق الكود في الموضع الموضح في الصورة رقم اربعة
كود التحكم بالنص إقرا المزيد
صورة  رقم ( 4 )
ثم قم بعمل قص للكود 
وتجد هذا الكود في داخل المستطيل الاحمر في الصورة رقم اربعة
بعد ان وجد الكود وقمت بقصه
الصقه بين  هذين الوسمين

الموضح  بمستطيل أزرق في الصورة رقم أربعة
الآن قم بحفظ القالب وانظر الى النتيجة

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

انتهى الموضوع
بالتوفيق للجميع

جميع الحقوق محفوظة الى MUSTAFA MAX

إتصل بنا

الاسم

بريد إلكتروني *

رسالة *