الرئيسية (Arthemia )

28‏/06‏/2013

تعديل قالب مدونة ذؤيب (Arthemia )

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

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

تعديـــــــــــــــل الشعـــــــــــــــــــار
  • تعديل شعار القالب واستبداله بشعار خاص بمدونتك 
  • من لوحة التحكم 
  • اختر قالب
  • تحرير html
  • علم خانة - توسيع قوالب عناصر واجهة المستخدم 
  • اضغط على المفتاح f 3 وابحث عن الكود <div class='left' id='logo'> ستجده بالشكل التالـــــي :

<div class='left' id='logo'>

<a expr:href='data:blog.homepageUrl'><img alt='' border='0' height='122' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtdG4n_e2vtaDzQ4sHwtuC1BF_oSd3VfwDM4XIxWQ4YdADmSd06UvDSpawPYS-ZCrAxY_Xgq7JHEq_UQK-EF07nvblS7LLM9C707v_ExLVb7dD2gP2Kg-0-I6GO7wCiEQcFh9NRWmBgic/' width='425'/></a>

<div id='tagline'><data:description/></div>

</div>

قم باستبدال الرابط باللون الأحمر برابط صورة الشعار الخاص بمدونتك ولتغيير حجم الشعار عدل النسب التالية

width='425      اللون الأزرق عرض الشعار
height='122     اللون الأخضر ارتفاع الشعار

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

تعديل الشريط الأفقي (القائمة الأفقية) 

يمكنك تعديل القائمة الأفقية للمدونة واضافة أقسام أو صفحات أخرى لمدونتك قم بالبحث عن الكود  <ul class='left clearfloat' id='page-bar'> ستجد الكود بالشكل التالــــــي :


 <ul class='left clearfloat' id='page-bar'>

<li><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>

<li><a href='http://blogger-onlin.blogspot.com/2012/11/blog-post_12.html'>فهــــرس المدونــــة</a>
</li>

<li><a href='http://blogger-onlin.blogspot.com/2012/11/blog-post_6864.html'>اطلب مساعدة من الزوار </a>
</li>

<li><a href='http://blogger-onlin.blogspot.com/2012/11/blog-post_7235.html'>الدعم المباشر من الإدارة </a>
</li>

<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>التعليقات </a></li>
</ul>

اذا أردت تغيير اي من الصفحات قم بادراج رابط الصفحة التي تود توجيه الزوار اليها مكان الرابط باللون الأزرق وتغيير اسم الصفحة مكان الكلمات باللون الأحمر.

اذا أردت حذف صفحة معينة قم بتحديد سطر لصفحة معينة كما هو موضح بالصورة واحذفه بالكامل واحفظ قالب المدونة.


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

حذف مربع البحث من الشريط الأفقي 

ابحث عن الكود <div id='search'> ثم قم بمسح الكود التالـــــــــــــــــــــــــــي :

<form action='/search' id='searchform' method='get'>
<div id='search'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='button' id='searchsubmit' type='submit' value='بحـــث'/>
</div>
</form>



تعديل حجم الصفحة (صفحة عرض التدوينات او الرسائل)


ابحث عن الكود #headline {      ستجد الكود بالشكل التالـــــي :


#headline {

width:600px;

float:right;

background:#fff;

قم بتغيير القيمة   width:600px الى الحجم الذي يلائم مدونتك.
تعديل حجم رأس الصفحة


ابحث عن الكود #head {    ستجده بالشكل التالــــي :

       #head {
width:960px;
margin:0px auto;

margin-top:15px;;

قم بتغيير القيمة  960 واحفظ القالب


تعديل الحجم الإجمالي للمدونة 
ابحث عن الكود التــــــــــــــــــــــــــــــــــالي:
#page {

width:940px;

margin:0px auto;

padding:10px;


قم بتعديل القيمة 940 الى ما يناسب مدونتك

تغيير لون تظليل خط الأدوات الجانبية للمدونة أثناء المرور بمؤشر الماوس

ابحث عن الكود التـــــــــــــــــــــــــــــــالي :


#sidebar ul li a:hover{ /*hover state CSS*/
color: #005b7f;
background-color: #F3F3F3;
}
اذا أردت تغيير لون الخط أثناء المرور فوقه بمؤشر الماوس color: #005b7f 
اذا أردت تغيير لون السحابة المضللة (الخلفية) أثناء المرور بمؤشر الماوس فوق الخط  background-color: #F3F3F3

 تغيير الأعمدة 


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



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

والتي من خلالها يمكننا ازاحة اعمدة المدونة من اليمين الى اليسار أو من اليسار الى اليمين وهو ما نحتاج اليه في تغيير اعمدة قالب مدونة ذؤيب.

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


كيفية القيام بذالك ؟

 من لوحة التحكم اختر قالب ثم اختر تحرير Html ثم متابعة ثم توسيع قوالب عناصر واجهة المستخدم وقم بالبحث عـــن الكـــــــــــــــود التالـــــــــــــــــــــــــــــــــــــي :  #sidebar {

ستجده على الشكل التالـــــــــــــــــــــــــــــي :


/* Sidebar*/
#sidebar {
width:320px;
float:right;
margin:0px 0px 0px 0px;
}

نقوم بتغيير كلمة right الى كلمة left  

  ثم نقوم بالبحث عن الكـــــــــــــــــــــــود التــــــــــــــــــــــــــالـــــي : #headline { 

 الذي سنجده أيضا بهذا الشكـــــــــــــل : 

/#headline {
width:590px;
float:left;
background:#fff;
padding:10px;
font-size:1.05em;
line-height:1.5em;
margin:0;
}


مرة أخرى نقوم بتغيير كلمة left الى كلمة right وبهذه الخطوة نكون قد انتهينا من ازاحة اعمدة القالب من الجهة اليمنى الى الجهة اليسرى .

الأن نقوم بحفظ القالب ومعاينة الشكل الجديد للمدونة .

اذا أردنا القيام بالعملية العكسية أي ازاحة  العمود من اليسار الى اليمين ما علينا سوى القيام بنفس الخطوات لكن نقوم بتغيير الكلمات عكس ما فعلناه في المرحلة الأولى : أي من left الى right  و من right الى left .
الفرق بين العمود على اليمين والعمود على يسار القالب

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

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

 والعكس تماما عندما تكون المواقع أو المدونات مكتوبة بلغة أجنبية من اليسار الى اليمين نجد ان العمود يكون عادة على يمين الصفحة ويمكنك ملاحظة ذالك عبر الكثير من المواقع والمدونات.