السلام عليكم ورحمة الله وبركاته . اعزائي زوار ومتابعي مدونة الأمة . هناك الكثير من الناس يريدون أن تضهر مدوناتهم بألوان مختلفة فهذا يقنع الزائر لأنه سيختار لونه المفضل حثى يتصفحة موقعك .
الاضافه ببساطة عباره عن تعديلات تقوم بها في اكواد ال 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/AVvXsEiJjVlrgz587lecfsNj8D_zc6dUhaitEB-UvieRx5uYJPmohrSfez1TXQqsFhrt6R2pLozdYo2HKJ-AKMmuY76zFcM_ptvq8X3L2wFhyHnI5zCGsT9nBsW76-gZeIBCksyISnt147G1AqI/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/AVvXsEgUvHBdvn5CBzcrWcRFDZzpJMdg8QF3cTkCtFMoyWhCoP7ulXdL5ukLHpzAYnKjGhhK-wkNTlSl4pgAc6p4SxdZvrxH1kvpKGNGoKH0ICLMmhH_2n5CnO4B6NxOumBuKKXVvRDGSmGKY38/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/AVvXsEgUHgLLbp8M9YrjMFu9Xlx2D-yqbA_dIKqYYC6f_wGCKvPK_Eea_NYdwojfBspA1vohA0PaCLmOnKcrD8Ac_pu_4zuo5G8CQwlkBglRy7c52i167Ar3q0UkWcJ3lwV2BC2AQcLGHa4wAbw/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/AVvXsEjdE1nDEiRcHq_y2UH1lzB0QWL47cXZGwv4oj0zqsxXZUkQQgDw-a3i9rf2XQ9Vqsu1rvmWrA8f7nA5qzo34Fu-zHDv_RhtHj0_d-Oh0pPcJCGO4ZpUv9gVRIqqGVUFxywGOXH5z1f7yeRe/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/AVvXsEjMqZw6PFuwH0xw96JXNYYE7a3n66klYOvZyZM2lGNWLqUzc6hM5S-qd87va8mmxPP77-2extauxvkb2jpDUI-FFxnuqTWq7FXx1N-NzmU8-8KYR_Vob6oGy9NzBfoQ1R_mlBUiHFvKp6UF/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/AVvXsEjvZvrwIBJXwl7Fxu5nGuLnJp5T-nLDfXPSBL-MTLTQUU0vFyaltkNVQ9xuy5FvnzxFKON7YJnYyiaCdSJC18zX774wJIDASck6RotzAvJhx2adpVKWeXDBDB_T-Sb_HlAfLnhkeHh3m8Jh/s75/sGreen.gif' width='40'/></a>
<div>اختر قالباً</div>
</div>
</div><!-- نهاية أزرة اختيار القالب -->
انتهى الشرح حمد الله وتوفيقه ولمزيد من التفاصيل يمكنكم زيارة الرابط التالي مدونة البلوقر فالشكر موصول لها فهي اول مدونه عربيه تحدثت عن تلك الاضافه والشكر لصاحب الاضافه والمطور لها وموقعه على الرابط التاليwww.kelvinluck.com
ملحوظه : تلك الاضافه نظرا للوقت التي تاخذه في التعديل علي اكواد ال css لعدة مرات كى ينتج ثلاث قوالب في النهايه ..
سوف لا اتلقي طلبات لتركيب تلك الاضافه سوى طلبات رفع الملفات علي جوجل كود بطريقه صحيحه ..
