كيف تجعل قالب مدونتك متعدد الالوان وتتيح للزائر اختيار ما يناسبه

كيف تجعل قالب مدونتك متعدد الالوان وتتيح للزائر اختيار ما يناسبه

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

وبالتالي انهار الحلم في ان امتلك قالبا واحدا متعدد الاشكال . الي ان وجدت الملف الذي كنت ابحث عنه في مدونة الاخ جاسر مدونة البلوقر وقد تفضل مشكورا من فتره طويله الحديث عن تلك الاضافه وكيفية تركيبها كما قام بعمل قالب ثلاثي الالوان وهو متاح للتحميل من مدونته لمن اراد .. شرح الاخ جاسر اراه مبسط جدا ومع ذلك لم اجد في التعليقات الكثيره علي التدوينه التي طرحها تعليقا واحدا يدل على تطبيق الطريقه بنجاح رغم سعيه مرارا لمساعدة المتعثرين في التطبيق .. مبدئيا شرحي لن يكون فيه اضافة شئ جديد علي شرحه وبنفس الوقت لن يكون مجرد نقل حرفي لما قام بطرحه مشكورا . لكني في السطور القادمه ساوضح بطريقتي الخاصه كيفية انجاز هذا العمل في وقت قصير لا يتعدى دقائق .. الاضافة الوحيده التي ساضيفها هي توفير اثنين من الاشكال للجزء الخاص بايقونات التنقل احدهم من تصميمي الشخصي والاخر تم استخراجه من القالب ثلاثي الاشكال الذي تحدثت عنه سلفا.
مستلزمات الاضافه :
1 -استضافه للملفات التي سنقوم برفعها وهي ملفات ال css.
وبالتاكيد كل شخص منا لديه حساب في جوجل سيكون لديه تلك الاستضافه , الا وهي استضافة جوجل كود  google code
ستحتاجها بالطبع لرفع الملفات عليها وفي هذا الرابط شرح لطريق رفع الملفات التي ساتحدث عنها على جوجل كود من هنا
قد تكون الطريقه الموجوده في الرابط السابق لرفع الملفات صعبه بعض الشئ على المبتدئين .. يمكنهم تخطي تلك الخطوه وساقوم انا بعملها بالنيابه عنهم عن طريق ارسال الملفات التي ساتحدث عنها لاحقا الي بريدي وكذلك الرقم السري لللحساب على جوجل وانا ساقوم برفع الملفات بالنيابه عنه . على حسابه الشخصي .
2 - يلزمك مجموعه من اكواد الالوان والتي سيكون لك مطلق الحريه في التفنن واختيار الالوان المناسبه والتي تراها ستعجب زوراك
يمكنك زيارة هذا الرابط ستجد فيه جميع الدرجات اللونيه التي تساعدك في تصميم قالبك من هنا.
 اعلم ان اطلت الحديث لذلك سادخل في التطبيق الفوري للاضافه علي مدونتك .
قم بتسجيل الدخول الي لوحة تحكم مدونتك ثم انتقل الي تصميم الصفحه ثم الي تحرير HTML
ما يهمنا في قالب المدونه بتلك المرحله من الشرح هي مجموعه الاكواد الواقعه ماين هذا الوسم <b:skin> وهذا الوسم ]]></b:skin>
الاكواد الموجوده بين هذين الوسمين يطلق عليهم اكواد ال CSS وهي الاكواد المسؤوله عن الوان القالب وعن كل شئ يخص تصميم القالب ويمكنك من خلال التعديل عليهم ان تجعل قالبك مغايرا مئه في المئه لما كان عليه في السابق .
في هذه الاكواد مايهمنا هو شيئين اثنين لا ثالث لهما . الاول هي روابط الصور الموجوده في تلك الاكواد علي سبيل المثال رابط شعار المدونه مثلا قد يكون فيها او رابط صوره خلفي القالب او روابط صور معلومات الموضوع مثل الموجوده في مدونتي صورة توقيت نشر التدوينه وصورة القسم وصورة عداد التعليقات . باختصار ابحث عن كل روابط الصور الموجوده في تلك الاكواد وقم بحفظها في مجلد علي سطح المكتب . هذا ان كنت تريد  تغييرا كليا وملحوظا وفرقا واضحا بين القوالب التي ستقوم بصنعها بيديك الان .
ثاني شئ يهمنا في تلك الاكواد هي المتغيرات المسؤوله عن تغيير اللون والتي غالبا ما تاخذ هذا الشكل علي سبيل المثال
#ddd    لانجاز تلك الخطوه بسهوله والوصول السريع لكل اكواد الالوان الموجوده في قال مدونتك  ابحث في القالب عن background: او عن color: وقم بتغيير القيمه اللونيه التي تلييهم والتي تاتي بهذا الشكل علي سبيل المثال #ddd
مثال توضيحي للمبتدئين : نفترض لون خلفية المدونه رصاصي فاتح كما هو الحال في مدونتي لذلك الكود الخاص بلون تلك الخلفيه موجود عندي بهذا الشكل background:#ddd; وان اردت انا تغيير اللون الي لون اخر فما علي الا بتغيير هذا #ddd باي درجه احصل عليها من رابط اكواد الالوان الذي قمت بوضعه في بداية الشرح .
اظن الان الامر واضح واتضح للمبتدئين كيفية تغيير الوان وصور القالب منتهى السهوله .
سنفترض الان انك تريد قالبك بثلاث اشكال . الامر بسيط جدا وسادلك علي نفس الطريقه التي اتبعتها . قم بفتح صفحة تحرير HTML
من لوحة تحكم مدونتك مثل ما قلنا وقم بالبحث عن كل اكواد الالوان الواقعه بين الوسمين السابق ذكرهم وقم بتغييرهم باكواد الوان اخرى ترغب فيها بنفس الطريقه المبسطه التي تحدثت عنها وكذلك قم تغيير روابط جميع الصور الموجوده بين الوسمين بصور اخرى من اختيارك مع مراعاة ان تكون قياسات الصور الجديده طولا وعرضا نفس قياسات الصور الموجوده في قالب مدونتك .
بعد الانتهاء من التغيير تستطيع معاينة القالب وشاهد هل النتيجه مرضيه ام تحتاج بعض الصبر للوصول لالوان يرتاح لها الزائر .
بعد الانتهاء لا تقم بحفظ القالب بل قم بنسخ الكود الواقع ين الوسمين السابق ذكرهما بالكامل قم بتحميل هذا الملف من هنا  
والصق بداخله الكود الذي نسخته ..
قم مجددا بتكرار نفس الطريقه وقم بتغيير الالوان وروابط الصور لاشكال والوان مختلفه عن المره الاولي  ثم انسخ الكود بين الوسمين بالكامل  والصقه في ملف اخر مثل الذي قمت بتحميله .( وذلك بنسخ الملف الذي حملته ثم تعيد تسميته الي اي اسم اخر وليكن style 2 ).
في النهايه سيكون لدينا 2 من  ملفات css وهما style1.css و style2.css  .. تلك الملفات بمثابة اثنين من القوالب يتم اضافتهم للقالب الافتراضي كى يتنقل بينهم الزائر كيفما شاء وهى قوالب مختلفه عن القالب الافتراضي لقالب مدونتك .
.. الان ناتي لطريقة تركيب الاضافه في قالب مدونتك .وذلك بالبحث داخل القالب عن </head> وضع قبلها مباشرة الكود التالي

<link href='رابط الملف الاول' media='screen' rel='alternate stylesheet' title='styles2' type='text/css'/>
<link href='رابط الملف الثاني' media='screen' rel='alternate stylesheet' title='styles3' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://my-tqarob.googlecode.com/svn/trunk/styleswitch.js' type='text/javascript'/>

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

<!-- selector -->
<div>
<style>

body#layout #selector-icons {display:none;}

#selector-icons div {
     border-bottom: 1px dotted #D3CBCB;
    color: gray;
    float: right;
    font-family: tahoma;
    font-size: 10pt;
    margin-left: 8px;
    padding-top: 5px;
    text-shadow: 0 3px 10px black;}
   
#selector-icons {
    position: relative;
float:right;
margin-right: 5px;
margin-top: 2px;
   -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
    -moz-box-shadow:  0 0 20px #3B5998 inset;
    -webkit-box-shadow: 0 0 20px #3B5998 inset;
    box-shadow: 0 0 0px #3B5998 inset;
    border: 0px solid #3B5998;
    border-radius: 5px 5px 5px 5px;
    clear: both;
    display: block;
    overflow: hidden;
    padding: 5px;
    width: 160px;
height: 25px;   }
#selector-icons img {border:none; margin:1px;}
  #opacity  img {opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity:0.5;
    -webkit-opacity:0.5;}
   #opacity:hover img { opacity:1.0;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   -moz-opacity:1.0;
   -webkit-opacity:1;}
</style>
<div id='selector-icons'>
<a class='styleswitch' href='serversideswitch.html?style=style1' id='opacity' rel='styles1' title='تقنيه'>
<img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx8uavK_M8lJ8K4CCVyQag0pUQoV_5_N5wLD_VEvQbPoC0xzMfie7e17TlC2i0yrr1kV0Oi0PYML801CQoDeSkOzFpXT09opS_VBhNaqrpay9YxAAIP6I6fhdf_jjyU_u0lNiPEcGbyTY/s1600/sblue.png' width='25'/></a>
<a class='styleswitch' href='serversideswitch.html?style=style2' id='opacity' rel='styles2' title='بساطه'>
<img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxTT1j1NzXKrTHcqRTmh9AMqc2XujHgdFP1Q_hvefMH8uS4xFXeCmTKS3rZa1_vAu2RsJUxLpSux0H1tW3HQbrraYRFvCmoYxKaMallNJpBAUevX2yUNABCqfsNdIC5f7Cj0e365sijE/s1600/sgray.png' width='25'/></a>
<a class='styleswitch' href='serversideswitch.html?style=style3' id='opacity' rel='styles3' title='فرح'>
<img height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3QXf2HB8oVVoBTvl935M7kSEZbLbobxmI6RoHf40MsSGYo2oVBmsb1sWc4KSFkqHgs-129VOoPJsJbSR4_CluRXQHyuajKn5XmxZq8R4fCC8FMN3jVuu6lD2kMNRaUneMkg_C2ThqnmY/s1600/spruple.png' width='25'/></a>
<div/>
</div>
</div>

<!-- selector -->

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

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

<!-- أزرة اختيار القالب -->
<div>
<style>

body#layout #selector-icons {display:none;}

#selector-icons div {
     border-bottom: 1px dotted #D3CBCB;
    color: gray;
    float: right;
    font-family: tahoma;
    font-size: 11pt;
    margin-left: 8px;
    padding-top: 12px;
    text-shadow: 0 3px 10px black;}
    
#selector-icons {
    position: relative;
float:left;
margin-left: 35px;
margin-top: 20px;
   -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
    -moz-box-shadow:  0 0 20px #D3CBCB inset;
    -webkit-box-shadow: 0 0 20px #D3CBCB inset;
    box-shadow: 0 0 20px #D3CBCB inset;
    border: 1px solid silver;
    border-radius: 5px 5px 5px 5px;
    clear: both;
    display: block;
    overflow: hidden;
    padding: 5px;
    width: 200px;    }
#selector-icons img {border:none; margin:1px;}
  #opacity  img {opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity:0.5;
    -webkit-opacity:0.5;}
   #opacity:hover img { opacity:1.0;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
   -moz-opacity:1.0;
   -webkit-opacity:1;}
</style>
<div id='selector-icons'>
<a class='styleswitch' href='serversideSwitch.html?style=style1' id='opacity' rel='style1' title='القالب الأزرق الافتراضي'>
<img height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgQlBfX_7VxIBIgLGq7VU8c38wecov1CYyN0yenIWC1Ttxdq1rQ6SCcLYe2OfzqqQVAMqBpFnY3j0OMylJ18A0piqbx-7zyF09JheFLOyGnRYWSgQ9WBxG9L4H-rclpKKDnONtTytEOKX/s75/sBlue.png' width='40'/></a>
<a class='styleswitch' href='serversideSwitch.html?style=style2' id='opacity' rel='purple' title='القالب الارجواني'>
<img height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLSl5SGoi4JoO-n-c9DVIXwIAOG-Ibuj7FPR-IkJHlIkVujOi1rxvgz5PgYMHqjZyokjOssZK1_oV0maCgisHT4T091Pzl4TsufHBXowYXdNHtxHuaAsm0olO68aNzD6AvhYh5bDRh62m1/s75/sPurple.gif' width='40'/></a>
<a class='styleswitch' href='serversideSwitch.html?style=style3' id='opacity' rel='green' title='القالب الاخضر'>
<img height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKLunGTxhIN61aA4s1Ht78UA2Z3loH983vN3t1mTL_wVj9gX1AUb2aFW75oQhBbm1VHYVytHaMc_ImjGfKMeSLHBz1JRPSLTS9JO8ePjI6Rylj5Xx1FGUUr-FlCW0YGFKspV9ByAuV1rQ/s75/sGreen.gif' width='40'/></a>
<div>اختر قالبا&#1611;</div>
</div>
</div>

<!-- نهاية أزرة اختيار القالب -->

ثم قم بحفظ الاداه وضعها في العامود الجانبي لقالب مدونتك ..
انتهى الشرح حمد الله وتوفيقه ولمزيد من التفاصيل يمكنكم زيارة الرابط التالي مدونة البلوقر فالشكر موصول لها فهي اول مدونه عربيه تحدثت عن تلك الاضافه والشكر لصاحب الاضافه والمطور لها وموقعه على الرابط التالي www.kelvinluck.com
ملحوظه : تلك الاضافه نظرا للوقت التي تاخذه في التعديل علي اكواد ال css لعدة مرات كى ينتج ثلاث قوالب في النهايه ..
سوف لا اتلقي طلبات لتركيب تلك الاضافه  سوى طلبات رفع الملفات علي جوجل كود بطريقه صحيحه ..
وسيتم عمل مسابقه في القري العاجل علي مدونه تقارب ستكون احدى الجوائز المقدمه في تلك المسابقه هي تركيب تلك الاضافه بخمس اشكال مع المزيد من الاضافات الاحترافيه الاخرى التي يختارها الفائز والتي ستكون منها دمج تعليقات الفيس بوك مع تعليقات بلوجر في تبويب واحد كما هو الحال في مدونتي مع دعم فني  لمدة 6 اشهر للمدونه الفائزه في المسابقه .. قريبا جدا سيتم الاعلان عن المسابقه على صفحات مدونة تقارب و توضيح طريقة المشاركه فيها والجوائز التي سيتم تسليمها للمدونات التي تفوز تلك المسابقه ..
تمنياتي للجميع بتدوين راقي خالي من الصعاب .