اداة تغير حجم خط التدوينات في البلوجر

08‏/06‏/2010

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


احفظ القالب قبل البدء في العمل لتفادي حدوث اخطاء
نبدا الأن بشرح كيفية تركيب الأضافة
 اذهب الى >التخطيط >تحرير html
1- ابحث عن هذا الكود

</head>
ثم استبدل الكود السابق بهذا الكود


<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
 </head>
قم بحفظ القالب

2- اذهب الى التخطيط > عناصر الصفحة > اضف اداة جديدة > HTML/JavaScript
ومن ثوم انسخ هذا الكود والصقه في الأداة
<style>
html {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

.post-body {
font-size:15px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}

</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('.post-body').css('font-size');
$(".resetFont").click(function(){
$('.post-body').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('.post-body').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('.post-body').css('font-size', newFontSize);
return false;
});
});
</script><div id="sidebar-right2"><div id="sidebar1"><ul>
<li><a href="#" class="increaseFont">تكبير الخط</a></li>
<li><a href="#" class="resetFont">معتدل</a></li>
<li><a href="#" class="decreaseFont">تصغير الخط</a></li>
</ul>
</div></div>
ومن ثوم احفظ الأداة وقم بمعاينة مدونتك وستكون الأضافة فعالة بشكل جميل

*ملاحظة*
 شرح الوان
الأحمر:.هذا لتكبير الخط يمكنك تغير النص مثال ( تكبير او + )
الأزرق :. هذا لأستعادة حجم الخط الطبيعي ومكنك تخير النص
الأخضر :. هذا لتصغير الخط ويمكنك تغير النص مثال ( تصغير او -)

**مهم**

post-body {
font-size:14px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
 هذا الكود يعبر عن الأعدادات الأفتراضية عند وضع الأضافة صيصبح خط وحجم ولون الخط في مدونتك كما هو موضح في الكود الصابق . يمكنك تعديل الكود حسب رغبتك 
شرح الأوان
الأحمر :. وهو حجم الخط في التدوينة لتكبير الخط قم بتغير الرقم 14 الى اكثر من 14 وللتصغير العكس قم بتغير الرقم 14 الى اقل من 14.
الأخضر :. وهو نوع الخط ويمكن تغير النوع.
الأزرق :. وهو لون  الخط في التدوينة الوضع الأفتراضي هو الأسود يمكنك تغير بتغير هذا الكود000000#.

واي اسفسار انا جاهز في اي وقت اضف تعليق في اسفسارك وشكرا للجميع
شارك في تعليقك وشكرا للجميع.
اخوكم مهند ناصر

27 تعليق على اداة تغير حجم خط التدوينات في البلوجر

فؤاد يقول... @ 8 يونيو، 2010 7:18 م

إضافة جميلة بارك الله فيك أخي العزيز
بالتوفيق لك

مهند ناصر يقول... @ 9 يونيو، 2010 9:45 ص

شكرا جزيلا لك اخي فؤاد على مرورك وهذا من لطفك

GeHaD HaNy يقول... @ 18 يونيو، 2010 5:32 م

اضافة رائعة اتمنى لك التوفيق

مهند ناصر يقول... @ 18 يونيو، 2010 6:53 م

GeHaD HaNy:. شكرا جزيلا للك اخي على مرورك وهذا من زوقك اخي.
اخوك مهند ناصر

khaled يقول... @ 2 أغسطس، 2010 11:27 م

جميل جدا ان نقرا مثل هته المواضيع المميزة
بانسبة للكود السابق فأنت ادخلت عليه ثاتيرات للcss
الى اني لم أجد و لا ثاتير أثناء المعاينة
يعني الاضافة تنقصها بعض التاثيرات
لدالك انصح بتغيير تلك الكلمات"تكبير.تصغير.معتدل"
الى صور صغيرة فهو افضل
تحياتي لكم
و نتمنى المزيد من الابداع
جميل جدا من يزور هته المدونة !

مهند ناصر يقول... @ 3 أغسطس، 2010 2:05 م

مرحبا اخي الكريم خالد اهلا فيك في مدونتي المتواضعة اخي

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


اما بالنسبة للصور فالأمر سهل
اذهب الى تحرير html واضف هذا الكود في اخر كود css في قالبك _لا اقصد الكود السابق بل اقصد المكان المخصص لجميع اكواد css ومن ثم اضف الكود التالي

.increaseFont {
font-size:0px;
background:url(' ') no-repeat;
height:??;
width:??;
}
.resetFont {
font-size:0px;
background:url(' ') no-repeat;
height:??;
width:??;
}
.decreaseFont {
font-size:0px;
background:url(' ') no-repeat;
height:??;
width:??;
}

انه الكود السابق واضح لأن المحرر هذا للتعليقا ولي للأكود وبأذن الله سأضيف الكود داخل الموضوع

شكرا طبعا الكود بده تعديلات حسب ما تريد وما يناسب الصورة التي ستضيفها

مهند ناصر

نهضة العرب يقول... @ 22 نوفمبر، 2010 3:13 م

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

مهند ناصر يقول... @ 22 نوفمبر، 2010 3:49 م

نهضة العرب : اهلا اخي بالنسبة للشرح بالصور صعب جدا جدا اخي ولكن انا وضحت اين تضع الأكواد وايضا الكود الثاني اي الطويل ضعه في اداة html بالنسبة لرابط مدونتك لا مشاكل ضعه وسأعاين مدونتك لأرة ما المشكلة بالتحديد.

تحياتي

نهضة العرب يقول... @ 22 نوفمبر، 2010 4:32 م

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


بالنسبة لرابط مدونتى هو

http://arabicivilization2.blogspot.com/

وعلى استعداد لسماع اى اقتراحتراه للافضل
شكرا لك

مهند ناصر يقول... @ 22 نوفمبر، 2010 5:19 م

اهلا بك مرة اخرى

اخي الكريم اعتذر ان لم افهمك جيدا :)

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

اما بالنسبة للصور فيميك وضع الصور بدل النصوص ولكن اولا يجب ان الأداة تعمل ومن ثم سأقول لك كيف تضع صور بدل النصوص



تحياتي
مهند ناصر

مهند ناصر يقول... @ 22 نوفمبر، 2010 5:24 م

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

نهضة العرب يقول... @ 22 نوفمبر، 2010 5:29 م

شكرا لك اخى
القالب من البلوجر ولكنى سوف اقوم بعمل مدونة تجريبية اخرى والتجربة فيها

واخبرك ان شاء الله
شكرا لك

نهضة العرب يقول... @ 22 نوفمبر، 2010 5:53 م

اخى الفاضل لقد قمت بعمل مدونة اخرى
http://ahlamy-3000.blogspot.com/
وقد عملت الاداة ولكن اخترت الشكل البسيط
وعندما قمت بالتغيير للشكل اطار صورة فى جزء التصميم لم تعمل

نهضة العرب يقول... @ 22 نوفمبر، 2010 6:03 م

ولله تعبتك معى اخى لم اقم بعمل اى شيىء فى المدونة ولكن الاداة اصبحت لا تعمل

مهند ناصر يقول... @ 22 نوفمبر، 2010 8:16 م

اخي الكريم لا اعرف ماذا الأمر اخي ما باليد حيلة لا اعرف ما الأمر بالتحديد اعتذر :(

تحياتي

مهند ناصر

نهضة العرب يقول... @ 23 نوفمبر، 2010 9:45 ص

شكرا لك اخى مهند واعتذر عن تعبك معى

وشكرا على مجهودك الكبير فى المدونة
تحياتى

Dr/ walaa salah يقول... @ 25 ديسمبر، 2010 8:35 م

مهند لو سمحت مفيش طريقه لتكبير حجم الخط في التعليق وتغيير لونه ؟

مهند ناصر يقول... @ 26 ديسمبر، 2010 4:33 م

ولاء : انا رأيت تعليقك امس ولم اريد الرد الا بعد البحث ولكن للأسف لم اجد .


لا تحرمينا من تعليقاتك ومنقاشتق

تحياتي
مهند ناصؤ

Mohaned Magdy يقول... @ 12 أبريل، 2011 4:45 م

أشكرك على هذا الموضوع

hdfna.blogspot.com

غير معرف يقول... @ 21 نوفمبر، 2011 8:14 م

اظافة جميلة تسلم يا كبير
www.tamassinte.blogspot.com

شبكة تعارف الاخبارية يقول... @ 12 مايو، 2012 8:21 م

شكرا http://datingnewsarab.blogspot.com/

مدونة التقنية يقول... @ 14 مايو، 2012 4:07 م

جميل جدا ، لكن هل هناك طريق لتغيير خط التدوينة من القالب

mlak alomer يقول... @ 5 يوليو، 2012 6:22 م

بارك الله في اخي الفاضل واثمرت جهودك بكل الخير

عبد الخالق اسلام يقول... @ 31 يوليو، 2012 3:10 ص

شكرا على الاضافة الرائعة

غير معرف يقول... @ 7 سبتمبر، 2012 10:12 م

http://alkebar.blogspot.com/ |مدونة الكبار فقط |يحتوي |علي |افلام للكبار افلام اجنبى اون لاين |افلام رعب للكبار فقط|افلام اكشن اون لاين |افلام للكبار 18 |افلام فرنسيه اون لاين | افلام اثاره اون لاين |افلام المانيه اون لاين | افلام اجنبيه |افلام عربيه |افلام للكبار 21 | افلام ممنوعه |افلام جديده |افلام اكشن للكبار فقط | مشاهده افلام اون لاين |جديد افلام |مشاهدة افلام| مشاهده |اتفرح | بث | مباشر | مشاهده الافلام الاجنبيه |فضايح مشاهير |
You mig

محمد سالم يقول... @ 19 يوليو، 2013 1:26 م

تم التطبيق
مدونة برابط خاص
http://www.rim1.net/

محمد مصطفي يقول... @ 12 مايو، 2017 1:52 ص

www.zamalekonly1911.cf

إرسال تعليق