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

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

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

تعديـــــــــــــــل الشعـــــــــــــــــــار

• تعديل شعار القالب واستبداله بشعار خاص بمدونتك 
• من لوحة التحكم 
• اختر قالب
• تحرير 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/AVvXsEiNjBUzFgnr46eKiD9N-x8oeBnRCXbYUHGzwWDF16WxHh3W7UiKzD_2evQ73gCtyRQwRifKFPaRS0X9SEXupIpBNFUqRcxX-T7W-omFVagMkCLK0dL_kTI3Ho82pL7bvZcTnIfacAIdH20/' 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

تعديل لون الشريط الأفقي الأزرق 

/* Navigation Bar*/

#page-bar li:hover {


#page-bar a, #page-bar a:visited {


تعديل عنوان التدوينة لون وحجم ونوع الخط 

a:link, a:visited {

a:hover, a:active {

#headline  div.title {

تغيير لون شريط المشاراكات الشائعة

#headline h2 { font:1em Tahoma;

تغيير لون شريط الأدوات الجانبية

#sidebar h2 {

من فضلك شارك هذا الموضوع اذا اعجبك

الموضوع من طرف: عبد الحكيم الحماني

عبد الحكيم الحماني 19 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بتطوير المواقع والتجارة الالكترونية يمكنك متابعته من خلال الفيسبوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم