التحرر من البلوجر

الحقيقة تقول ان اجمل اشياء فى الدنيا هى الاشياء المجانية
ولكى تكتمل تلك المجانية فى بلوجر , يلزمك بعض التعديلات والاعدادات كى تتخلص وللأبد من التبعية للبلوجر وتتحول من صاحب مدونة الى صاحب موقع بأقل التكاليف , او ربما مجانا أيضا :)

أولا : شريط البلوجر
الكثير ينزعج من وجود هذا الشريط بأعلى المدونة , اما حذفه فسهل جدا من هنا
ثانيا : الدومين
البعض ايضا ينزعج من وجود .blogspot فى رابط مدونته , والكثير جدا من المدونات الشهيرة تنتقل من مجرد كونها مدونات الى مواقع , لذلك وجدنا البلوجر تدعم اضافة دومين للمدونة والاستغناء به عن الرابط الاساسى للمدونة .
فمثلا , لو كانت مدونتك whatever.blogspotc.com واحببت انت ان تجعلها watever.com كل ما عليك الا انك تشترى الدومين ( اذا كان متاح ) من مواقع بيع الدومينات او حتى من مواقع الدومينات المجانية , ثم اضافته الى البلوجر بكل سهولة .
بهذه الطريقة انت مازلت تملك مميزات مساحة البلوجر والتدوينات والصور والفيديو وخلافه , بينما رابط موقعك الجديد لا يوجد به blogspot على الاطلاق .

اعدادات تغيير الدومين :

اذهب الى لوحة التحكم - الاعدادات


اختر : نشر > مجال متخصص



تابع اذا كنت تريد شراء الدومين الان من بلوجر , او اختر الاعدادات المتقدمة اذا كنت تملك دومين بالفعل



ضع الدومين الذى تملكه , ثم احفظ .



ثالثا : المساحة
البلوجر يعطيك مساحة قدرها 1 جيجا للصور والفيديو , غالبا لن تحتاج مساحة اخرى اذا كنت تريد انشاء موقع الا فى حالة وجود ملفات اخرى مثل برامج او ملفات مضغوطة تريد لها مساحة خاصة , فى تلك الحالة لابد من شراء مساحة او مساحة مجانية لرفع تلك الانواع من الملفات .
هناك بدائل اخرى مثل مواقع الرفع المختلفة rapidshare ورفاقه , يمكنك من خلالها ان تتيح ملفاتك للزائرين .
متى ايضا ستحتاج الى مساحة خاصه ؟ عندما تريد انشاء منتدى مثلا ملحق بالموقع , او تريد تخزين ملفات معينة لقالب الموقع مثلملفات السكريبت او خطوط او شات او غيرها , كل هذا يستلزم وجود مساحة خاصه اخرى غير مساحة البلوجر التى لا يزيد استخدامها على الصور والفيديو .

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

خامسا : أشياء اخرى

هناك الكثير من الاشياء الاخرى التى تجعل الشكل النهائى للمدونة اقرب الى موقع منه الى مدونة , مثلا التاريخ , البعض يحب ازالة عنصر " التاريخ " الذى يظهر فوق او تحت كل تدوينة , شئ اخر مهم جدا هو ضم حزم الجافاسكريبت المختلفة الى البلوج سبوت مثل الـ JQuery يمكنك البدء من هنا , ثم هنا

اكتب ايميلك هنا

تكبير وتصغير الخط

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

الخطوات : اذهب الى لوحة التحكم
التخطيط > عناصر المدونة > اضافة اداة جديدة > اداة من نوع هتمل / جافا سكريبت
الصق هذا الكود :

<div>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='0.8em'"><span style="font-size: x-small;">+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.1em'"><span >+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.4em'"><span style="font-size: large;">+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.7em'"><span >+</span></a>
</div>

فى الكود السابق :
- الخط الذى سيتم التحكم به هو الخط الموجود فى كل الصفحة body
يمكن تحديد الخط الموجود فى منطقة بعينها عن طريق استبدال كلمة body بالـ id الخاص بالقطعة المراد تكبير وتصغير الخط بها , مثلا post او main-wrapper او side-wrapper وهكذا

- الوحدة التى سيتم التكبير والتصغير على اساسها هى em وهى خاصة بالخطوط , يمكن استعمال البيكسل ايضا لكن الافضل em , حيث ان الاخير ينسق بين حجم الخط وبين مساحات التصميم .

- يتراوح الحجم الادنى والاقصى من 0.5 الى 1.7 , يمكنك تغيير القيم بالطبع .

اكتب ايميلك هنا

تعلم JQuery اليوم الثانى

بعد الدرس السابق " تعلم الـ jquery " اليوم الاول , اتمنى ان يكون استفاد منه البعض , اكمل هنا


اولا : خلاصة سريعة لما سبق

انظر الصورة التالية " اضغط للتكبير "



كيف تختار اى شئ بواسطة الجى كويرى ؟

هناك العديد من الروابط فى المدونة , كلهم يرمز له بالكود a اليس كذلك ؟ كيف تستطيع ان تختار واحد منهم فقط لتخصه بعمل تاثير ما او تخصه هو نفسه بتطبيق التاثير عليه ؟
كما ذكر فى الموضوع السابق ان الرابط يمكنك ان تنشأ له id خاص تستطيع من خلاله ان تختار هذا الرابط دون غيره .
هناك ايضا العديد من الاقسام div تستطيع ان تنشأ لايها class مخصوص لتتحكم فيه دون غيره , وهكذا , ينطبق هذا الاسلوب مع كل شئ فى المدونة حتى تتحكم فى كل شئ بعينه دون غيره . اوكى

$("#box")

هنا انت تختار اى شئ فى المدونه له آى دى = box

$(".class")

هنا انت تختار اى شئ فى المدونه له كلاس = box

$("a")

هنا انت تختار اى رابط فى المدونة بدون تحديد

$("#hello")

انت تختار الرابط ( الروابط ) التى لها اى دى = hello فقط

$("p a")

هنا انت تختار الروابط الموجودة داخل أى paragraph

$("#sidebar a")

فى حالة المدونات التى بها اطار جانبى اسمه sidebar , انت هنا تختار كل الروابط الموجودة داخل اى شئ له آى دى = sidebar

$("ul il")

انت هنا تختار فقط الـ list items (li) الموجودة داخل اى Unordered list (ul) داخل المدونة , لاحظ ان الادوات من نوع link list (او قائمة روابط ) ستندرج تحت هذا الاختيار لكونها قائمة غير مرتبة . ايضا سيندرج تحتها الجداول

$("ul li:first")

مثل السابق , لكنت انت هنا تختار فقط العنصر او الرابط الأول من القائمة

$("h2")

انت تختار كل عنوان header من النوع الثانى

$("div#content .photo")

انت هنا تختار الاشياء التى لها class = photo ألتى تتواجد فقط داخل القسم div الذى له id = content .

$(this)

لنفرض ان لديك فى المدونة رابط ما له id اسمه hello مثلا
انت تريد عندما تضغط على الرابط ان ينزلق جزء التدوينات main-wrapper لاعلى
علما بان بالفعل يوجد لديك فى المدونة هذا الـ main-wrapper , وايضا لهذا الـ main-wrapper كلاس اسمخ down كى يعبر عن ان حالة هذا الـ Main-wrapper الان هى انها منزلقة لاسفل .
انت تريد عندما تضغط على الرابط ان تنزلق تلك القطعة اولا وايضا يتغير الكلاس من down الى UP كى يعبر عن ان الحالة تغيرت بالفعل

الكود سيصبح بالشكل الاتى :

$(document).ready(function(){

$("a#hello").click(function(){
$("#main-wrapper").slideUp("slow");
$(this).toggleClass("UP");
});

});

الشرح : الرابط a ألذى به id اسمه hello عند الضغط عليه .click ستنشأ وظيفة function مفادها ان : القسم div ألذى له id اسمه main-wrapper سينزلق لأعلى slideUp هذا اولا , لاحظ ان الوظيفة لم تنتهى , ثانيا سيحدث أن this ومعناها ان الـ main-wrapper نفسها هى التى سيحدث عليها التاثير , فبدلا من كتابة main-wrapper مرة ثانية , لا انت تكتب فقط this لتعنى ان نفس الشئ المذكور مباشرة من قبل هو نفسه الذى سينطبق عليه التاثير التالى , الا وهو toggleClass اى غير الكلاس من اسمه السابق الى الاسم الجديد UP . لاحظ ان toogle معناها التغيير بالتبادل , بمعنى انك عندما تضغط للامرة الاول ستبدل من down الى up والمرة الثانية ستبدل لوضعها الاصلى down والمرة الثالثة up وهكذا .

الخلاصة : ان this تعنى القطعة المذكورة مباشرة من قبل , بدلا من التكرار .

--------------------------

التطبيق الأول :

عندما تضغط على الرابط سيتحول قسم ما من كلاس لآخر , وبالتالى سيتحول من مواصفات الكلاس الأول لمواصفات الكلاس الثانى

اولا : يجب وضع مواصفات الكلاس الاول وليكن down وهو الافتراضى , وايضا وضع مواصفات الكلاس الثانى وليكن up . نضع تلك المواصفات ( الاكواد ) داخل جزء الـ head بصندوق الاكواد :

.down{
height:10px;
width:200px;
background:eeeeee;
}

.up{
height:300px;
overflow:auto;
background:e0e0e0;
}

بينما فى جزء الـ body يجب عليك اولا ان تنشا الرابط ولنضع له id مثلا اسمه slide وايضا ان تنشأ هذا القسم الذى سيطبق عليه هذا التاثير , ولنضع لهذا القسم id مثلا اسمه panel ونضع بداخله صورة وتعليق

(ضع هذه الاكواد فى منطقة الـ body ) وليكن مثلا مباشرة بعد كلمة <body>

لاحظ ان الكلاس down الافتراضى ارتفاعه 10 بيكسل , اى تقريبا مختفى , عند الضغط على الرابط سيتغير الكلاس الى up ويتغير بالتالى الارتفاع الى 300 بيكسل

<a id='slide' href='javascript:void(0);'>اضغط هنا</a>

<div id='panel' class='down'>

<img class="pic" src="http://www.barnardos.org.uk/microsite_smile.gif" />

</div>

للاستفسار او الاسئلة : اترك تعليق

اكتب ايميلك هنا