HTML clipboard حديثنا اليوم عن كيفية وضع لمسات جمالية من اختيارك لمدونتك ، كإضافة خلفية للمدونة أو خلفية للترويسة وأسفل الصفحة والتحكم بلون عنوان المدونة ولون خلفية عناوين الصناديق الموجودة على يمين المدونة ، فهيا معا نصنع شكل وتصميم مدوناتنا بأيدينا.
الموضوع قد يكون طويلا ولكن أعتقد أنه يستحق المتابعة.
بداية أنصحكم بالقيام ببعض الخطوات البسيطة كى نحافظ بها على التصميم الأصلى للمدونة ، والذى يمكننا من الرجوع به مرة أخرى إلى سابق شكل المدونة إذا لم يلقى العمل الذى تقوم به استحسانا منك.
فتابع معى هذه الخطوات :-
1- أدخل إلى مدونتك باليوزرنيم والباسورد الخاصين بك.
2- إختر التصميم ، ثم من الصفحة التى ستظهر إختر تعديل التصميم CSS .
3- من الصفحة التى ستظهر قم بالنقر بزر الماوس الأيسر نقرة واحدة داخل صندوق نص التصميم الأصلى ، ومن لوحة المفاتيح إضغط على ( CTRL + A ) فيتم تحديد النص بالكامل ، ومن ثم إضغط بزر الماوس الايمن على النص المحدد واختار من القائمة التى ستظهر COPY . كما هو موضح بالصورة التالية
4- إفتح برنامج Notepad وذلك من Start ثم All Programs ثم Accessories ثم Notepad كما هو موضح بالصورة التالية
5- تفتح نافذة البرنامج ، قم بالضغط بزر الماوس الايمن داخل مكان خالى بنافذته واختر من القائمة التى ستظهر Paste ، حتى يتم لصق ما نسخناه سابقا ، كما هو موضح بالصورة التالية
6- من سطر القوائم ببرنامج النوتباد اختر File ثم من القائمة التى ستظهر اختر Save as تظهر نافذة حفظ الملف ، أمام خانة File name أكتب إسم للملف وليكن على سبيل المثال ( القالب الأساسى ) ثم اختر المكان الذى ستحفظه فيه على حاسبك ثم اضغط Save كما هو موضح بالصورة التالية
الهدف من هذه العملية هو إمكانية الرجوع مرة أخرى إلى سابق شكل المدونة إذا لم يستهوينا العمل الذى قمنا به ، أو ما إذا أردنا الرجوع مرة أخرى إلى القالب الذى كانت عليه سابقا ، كما يمكننا إتباع هذه الطريقة لحفظ قوالب من صنعنا لاستخدامها فى أى وقت نريد.
إذن كيف يمكننا الرجوع لسابق عهد تصميم المدونة أو لوضعها الأصلى الذى كانت عليه ؟ إتبع الخطوات التالية :-
1- إذهب إلى الملف الذى حفظناه سابقا باسم القالب الأساسى وافتحه ، سيفتح فى نافذة برنامج النوتباد ، حدد النص الموجود بالكامل بالنقر بزر الماوس الأيسر نقرة واحدة داخل صندوق النص ثم من لوحة المفاتيح إضغط على مفتاحى ( CTRL + A ) ، أو بطريقة أخرى من سطر القوائم ببرنامج النوتباد إختار Edit ومن القائمة التى ستظهر اختر Select All فيتم تحديد النص بالكامل كما هو موضح بالصورة التالية
2- أنقر بزر الماوس الايمن على النص المحدد واختر من القائمة التى تظهر Copy .
3- أدخل إلى مدونتك بمعلوماتك الشخصية أى اليوزرنيم والباسورد واختر التصميم ثم اختر تعديل التصميم CSS وانقر بزر الماوس الأيسر نقرة واحدة داخل صندوق النص ومن لوحة المفاتيح اضغط مفتاحى ( CTRL + A ) ثم بزر الماوس الايمن أنقر نقرة واحدة على النص المحدد ومن القائمة التى ستظهر اختر Paste فيتم استبدال القالب الموجود بنص القالب الذى حفظناه سابقا ، الآن اضغط تحديث ، حفظ التغييرات.
هكذا يعود تصميم شكل المدونة إلى ما كان عليه قبل قيامنا بأى تعديل به.
وبعد أن علمنا كيف يمكننا الرجوع إلى شكل المدونة الأصلى فى أى وقت نريده ، فيمكننا الآن أن نعدل ونغير كيفما نشاء دون خوف من فقدان شىء .
لنبدأ العمل
لوضع خلفية background للمدونة قم بالآتى
فى البداية يجب أن نكون قد حددنا الخلفية التى سوف نضعها للمدونة ، لذا سأمدك برابط لموقع به أنواع من الخلفيات لا حصر لها يمكنك إختيار منها ما تشاء ، رابط الموقع هو
بالضغط على الرابط يفتح الموقع وبه مجموعة كبيرة ومنوعة من الخلفيات يمكنك استعراضها ، وذلك بالضغط على الأقسام الموجودة بالجانب الأيسر ، كما يمكنك الإنتقال ما بين الصفحات لعرض مجموعة أخرى من الخلفيات ، ولاستعراض أى خلفية إضغط عليها مرة واحدة بالماوس ليتم عرضها فى نافذة أكبر ، كما هو موضح بالصورة التالية
من أسفل صفحة الخلفية التى اخترتها ستجد كودين يمكن نسخهما ، سوف ننسخ الكود الأول وذلك بالنقر داخل صندوق الكود بزر الماوس نقرة واحدة فيتم تحديده بالكامل ، إضغط على النص المحدد بزر الماوس الايمن ثم اختر من القائمة التى تظهر Copy كما هو موضح بالصورة التالية
إفتح برنامج النوتباد كما تعلمنا سابقا وانسخ بداخله النص المنسوخ وذلك بالنقر بزر الماوس الايمن واختر Paste فيتم نسخ الكود ، قم بتحديد الرابط الخاص بالخلفية فقط كما هو موضح بالصورة التالية وذلك بالضغط بزر الماوس واستمر ضاغطا واسحب حتى نهاية التحديد الموضح بالصورة التالية
همسة إحترافية
يمكنك تحديد أى نص يستعصى عليك تحديده بالماوس أو لضمان تحديده بالضبط ، وذلك من لوحة المفاتيح ، بالنقر بزر الماوس على قبل بداية أو نهاية النص المراد تحديده ثم من لوحة المفاتيح إضغط على مفتاح Shift واستمر ضاغطا ثم اضغط على أى من مفاتيح الأسهم سواء السهم الايمن للإتجاه بالتحديد لناحية اليمين أو السهم الأيسر للإتجاه بالتحديد لناحية اليسار .
نكمل الآن شرحنا
إتجه الآن إلى صفحة تعديل التصميم المفتوحة وحدد الرابط المبين بالصورة والموجود بعد كلمة background ( ولاحظ أنه فى الجزئية التى بها كلمة body ) وبعد تحديده إضغط عليه بزر الماوس الايمن واختر Paste ليتم لصق رابط الخلفية مكانه ، ثم إضغط على حفظ التغييرات ، كما هو موضح بالصورة التالية
افتح مدونتك كأى زائر وشاهد العمل على الطبيعة ، كرر هذه العملية إذا أردت التغيير.
لوضع خلفية للترويسة قم بالآتى
كرر نفس الخطوات السابقة من فتح موقع الخلفيات ثم اختيار خلفية ولكن حاول أن تكون الخلفية التى تختارها هذه المرة مستطيلة قدر الإمكان وليست كبيرة لأنها ستكون خلفية للترويسة وهو المكان المستطيل الموجود به أو أعلى إسم مدونتك وهو مكان ليس كبيرا ، وقم بنسخ الكود الأول ثم افتح برنامج النوتباد والصق الكود ثم حدد منه رابط الخلفية كما تعلمنا سابقا وقم بلصقه فى المكان المحدد بالصورة التالية والموجود بعد كلمة background ( ولاحظ أنه فى الجزئية التى بها كلمة header ) ، كما يجب عليك أن تمحو كلمة no- والشرطة التى أمامها كى تجبر الصورة على التكرار داخل حيز الترويسة ثم إضغط على حفظ التغييرات ، كما بالصورة التالية
أنظر أيضا إلى الصورة التالية
#000000 هو كود لون خلفية الترويسة الذى يظهر قبل ظهور صورة خلفية الترويسة المحددة بالرابط الذى يأتى بعد كلمة url ، إذا يجب عليك اختيار لون يكون متناسبا مع لون الصورة التى ستظهر بعده للمحافظة على تناسق ألوانك ، أو يمكنك التخلى عن هذا اللون بمسح كوده نهائيا من صفحة تعديل التصميم ، وعندها سوف تظهر الصورة مباشرة دون ظهور لون قبلها ، أو يمكنك مسح رابط الصورة إذا أردت أن لا تظهر صورة كخلفية لترويستك .
270px هو حجم إرتفاع الترويسة والذى يمكنك زيادة قيمته إذا أردت أن تظهر خلفيتك التى وضعتها كلها ولا ينقص من أطرافها شيئا ، ولكن إنتبه فقد قلت لك حاول أن تنتقى الصور التى ستستخدمها كخلفية للترويسة صغيرة الحجم حتى يمكن التحكم فيها بسهولة .
#fcfcfc هو كود لون عنوان المدونة .
#b54141 هو كود لون عنوان المدونة الذى يظهر بمجرد وضع مؤشر الماوس عليه .
White هو لون وصف المدونة وهو الكلام الذى تضيفه أنت ويظهر تحت إسم مدونتك كوصف لها .
همسة إحترافية
يمكننا الحصول على كود أى لون والذى سوف نحتاجه عند إدخال أى تعديلات على أكواد الألوان وذلك من تبويب تدوين كأننا نشرع فى كتابة إدراج جديد والضغط على المربع الخاص باختيار لون النص أو المربع الخاص باختيار لون خلفية النص الملون كما هو موضح بالصورة التالية تفتح نافذة الألوان وبها إختيار المزيد من الألوان ، إضغط عليه لتفتح نافذة الألوان الكلية فى إطار مستقل بالضغط بالماوس على رقعة الألوان بتدريجاتها ترى بالأسفل مربع يظهر فيه كود اللون ، اختر ما تريد تجد أن الكود قد ظهر فى مستطيل صغير بالأسفل يمكن نسخه للصقه بدلا من أى كود لون آخر موضوع فى صفحة تعديل التصميم تريد أنت تغييره وشرح هذه الهمسة توضحه الصورة التالية :-
لتغيير شكل مؤشر الماوس قم بالآتى
الآن سوف أتحدث عن كيفية تغيير شكل مؤشر الماوس والذى نراه دائما بشكل رأس السهم الأبيض المعروف إلى أى شكل آخر يعجبك ، وسوف نستعين هنا أيضا ببعض المواقع التى تتيح هذه الأشكال فى صورة كود ، وكل ما علينا أننا سنأخذ من هذا الكود ما نحتاجه فقط لكى ننجز به عملنا ، فانتبه معى .
سأمدك بروابط لمواقع بها أنواع من أشكال مؤشر الماوس لا حصر لها يمكنك إختيار منها ما تشاء ، روابط المواقع هى
أو
بالضغط على أى من الرابطين يفتح الموقع وبه مجموعة كبيرة ومنوعة من أشكال الماوس cursor يمكنك استعراضها ، وذلك بالضغط على الأقسام الموجودة بالجانب الأيسر ، ليتم عرض أكواد المؤشرات فى مربعات صغيرة يمكن نسخها ، كما نلاحظ أنه بمجرد وضع مؤشر الماوس على مربعات الأكواد المعروضة يتم عرض شكل مؤشر الماوس الخاص بهذا الكود ، كما يمكنك الإنتقال ما بين الصفحات لعرض مجموعة أخرى من المؤشرات ، وتلاحظ معى أيضا أن كل شكل مؤشر معروض له كودان ، ما يهمنا هنا هو الكود المعروض بالجانب الأيسر ، نضغط داخل المربع بزر الماوس الأيسر ليتم تحديد الكود بالكامل ثم بزر الماوس الايمن نختار COPY كما هو موضح بالصورة التالية
إفتح برنامج النوتباد كما تعلمنا سابقا وانسخ بداخله الكود المنسوخ وذلك بالنقر بزر الماوس الايمن واختر Paste فيتم نسخ الكود ، قم بتحديد النص الموضح بالصورة التالية بداية من كلمة cursor وحتى النقطة التى تحتها فصلة ; دون زيادة أو نقصان وذلك بالضغط بزر الماوس واستمر ضاغطا واسحب حتى نهاية التحديد أو إستخدم طريقة تحديد النص بلوحة المفاتيح والتى أشرت لها سابقا ، تابع الصورة التالية
إتجه الآن إلى صفحة تعديل التصميم المفتوحة والصق ما تم نسخه فى الخطوة السابقة فى المكان الذى توضحه الصورة التالية مع الإنتباه إلى الملاحظتين التاليتين ، أن ما سيتم لصقه الآن سيكون فى الجزء الذى يبدأ بكلمة body ، إذهب حتى آخر رابط خلفية المدونة واضغط بالماوس بعد النقطة التى تحتها فصلة مباشرة فيظهر مؤشر الكتابة النابض ، ثم من لوحة المفاتيح إضغط على مسطرة المسافات ضغطة واحدة لتبعد عن هذه النقطة التى تحتها فصلة بمقدار مسافة واحدة ثم إلصق النص الذى نسخته سابقا وذلك بالضغط على زر الماوس الايمن واختر Paste ، أومن لوحة المفاتيح اضغط مفتاحى ( CTRL + V ) ليتم لصق نص مؤشر الماوس مكانه ، ثم إضغط على حفظ التغييرات ، كما هو موضح بالصورتين التاليتين
ثـم هـكـذا
إلى هنا أكون قد انتهيت من الشرح المفصل ، وأرجو أن أكون قد وصلت ولو قدر ضئيل من الفكرة أو المعلومة ، ولو فيه أى سؤال أو استفسار فلا تتردد.
هذا الموضوع منقول وشكرا
البيبسي = أنفلونزا الخنازير.. 
