اداة تغير حجم خط التدوينات في البلوجر
بسم الله الرحمن الرحيم
انا في التدوينة السابقة ذكرت اني سأجلب للمدونين على البلوجر اضافات مميزة وانشالله سأقوم بهذا العمل في هاذه التدوينة سأجلب اضافة جميلة ومفيدة ايضا للمدونين ولزوار المدونات التي تستعمل هاذه الأظافة وهي اداة تكبير وتصغير الخط في التدوينات من قبل اي شخص دون التأثير على القالب او التصميم وعند تحديث الصفحة سسيترجع الأعدادات الأفتراضية للمدونة.
احفظ القالب قبل البدء في العمل لتفادي حدوث اخطاء
نبدا الأن بشرح كيفية تركيب الأضافة
اذهب الى >التخطيط >تحرير 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;
}
font-size:14px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
هذا الكود يعبر عن الأعدادات الأفتراضية عند وضع الأضافة صيصبح خط وحجم ولون الخط في مدونتك كما هو موضح في الكود الصابق . يمكنك تعديل الكود حسب رغبتك
شرح الأوان
الأحمر :. وهو حجم الخط في التدوينة لتكبير الخط قم بتغير الرقم 14 الى اكثر من 14 وللتصغير العكس قم بتغير الرقم 14 الى اقل من 14.
الأخضر :. وهو نوع الخط ويمكن تغير النوع.
الأزرق :. وهو لون الخط في التدوينة الوضع الأفتراضي هو الأسود يمكنك تغير بتغير هذا الكود000000#.
واي اسفسار انا جاهز في اي وقت اضف تعليق في اسفسارك وشكرا للجميع
شارك في تعليقك وشكرا للجميع.
اخوكم مهند ناصر
الاشتراك في:
تعليقات الرسالة (Atom)
20 تعليق على اداة تغير حجم خط التدوينات في البلوجر
إضافة جميلة بارك الله فيك أخي العزيز
بالتوفيق لك
شكرا جزيلا لك اخي فؤاد على مرورك وهذا من لطفك
اضافة رائعة اتمنى لك التوفيق
GeHaD HaNy:. شكرا جزيلا للك اخي على مرورك وهذا من زوقك اخي.
اخوك مهند ناصر
جميل جدا ان نقرا مثل هته المواضيع المميزة
بانسبة للكود السابق فأنت ادخلت عليه ثاتيرات للcss
الى اني لم أجد و لا ثاتير أثناء المعاينة
يعني الاضافة تنقصها بعض التاثيرات
لدالك انصح بتغيير تلك الكلمات"تكبير.تصغير.معتدل"
الى صور صغيرة فهو افضل
تحياتي لكم
و نتمنى المزيد من الابداع
جميل جدا من يزور هته المدونة !
مرحبا اخي الكريم خالد اهلا فيك في مدونتي المتواضعة اخي
اخي الكريم هذا ليس كود 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:??;
}
انه الكود السابق واضح لأن المحرر هذا للتعليقا ولي للأكود وبأذن الله سأضيف الكود داخل الموضوع
شكرا طبعا الكود بده تعديلات حسب ما تريد وما يناسب الصورة التي ستضيفها
مهند ناصر
اضافة رائعة اخى شكرا لك
عندما حاولت اضافتها للمدونة لم الحظ التغيير كما ان خط المدونة صغير علما بانى قد غيرته الى 16
وايضا ارجو توضيح مكان وضع الكود بالصور بالتفصيل لانه ليس لى خبرة كافية بالموضوع
شكرا
لا ادرى مسموع بوضع رابط مدونتى حتى تشاهد الموضوع ام لا
نهضة العرب : اهلا اخي بالنسبة للشرح بالصور صعب جدا جدا اخي ولكن انا وضحت اين تضع الأكواد وايضا الكود الثاني اي الطويل ضعه في اداة html بالنسبة لرابط مدونتك لا مشاكل ضعه وسأعاين مدونتك لأرة ما المشكلة بالتحديد.
تحياتي
شكرا اخى مهند على سرعتك
انا لم اقصد شرح بالصور لعلى لم احسن التعبير
اقصد ان هناك اخ فاضل وهو الاخ خالد مما فهمته اعتقد ان هذه الاضافة يمكن ان يكون فيها صور فقط اردت توضيح مكان الكود
ما قدتته معنى هذا الكلام التالى
جميل جدا ان نقرا مثل هته المواضيع المميزة
بانسبة للكود السابق فأنت ادخلت عليه ثاتيرات للcss
الى اني لم أجد و لا ثاتير أثناء المعاينة
يعني الاضافة تنقصها بعض التاثيرات
لدالك انصح بتغيير تلك الكلمات"تكبير.تصغير.معتدل"
الى صور صغيرة فهو افضل
بالنسبة لرابط مدونتى هو
http://arabicivilization2.blogspot.com/
وعلى استعداد لسماع اى اقتراحتراه للافضل
شكرا لك
اهلا بك مرة اخرى
اخي الكريم اعتذر ان لم افهمك جيدا :)
اخي الكريم لا اعرف ما المشكلة بالتحديد التي في مدونتك لا اعلم لماذا لا تعمل الأداة في مدونتك علما بأنها ما زالت تعمل في المدونة التجربية اعتقد ان المشكلة في القالب اعتقد بأنها لا تعمل مع قالبك ولكن للتأكد قم اخي بأنشاء مدونة تجريبة اخرى وضع قالب تجريبي من البلوجر نفسه وافعل نفس الخطوات التي عملتها في مدونتك الأصلية وشوف اذا بتشتغل ولا لا اذا اشتغلت بكون المشكلة من القالب اذا ما شتغلت بكون غلط في تنفيذ الخطوات عند ذلك بأذن الله سأقوم بمساعدتك بشكل مفصل بأذن الله ...
اما بالنسبة للصور فيميك وضع الصور بدل النصوص ولكن اولا يجب ان الأداة تعمل ومن ثم سأقول لك كيف تضع صور بدل النصوص
تحياتي
مهند ناصر
اخي جرب استبدال الككود الثاني الذي في الأعلى (الطويل) مع الكود الذي قمت انت وضعه قبل ما انا اقوم بالتعديل الكود لم يكون منسق بشكل جيد ولكن الأن اصبح كذللك جرب وشوف اذا ما زبط جرب الطريقة التي في تعليقي السابق
تحياتي
شكرا لك اخى
القالب من البلوجر ولكنى سوف اقوم بعمل مدونة تجريبية اخرى والتجربة فيها
واخبرك ان شاء الله
شكرا لك
اخى الفاضل لقد قمت بعمل مدونة اخرى
http://ahlamy-3000.blogspot.com/
وقد عملت الاداة ولكن اخترت الشكل البسيط
وعندما قمت بالتغيير للشكل اطار صورة فى جزء التصميم لم تعمل
ولله تعبتك معى اخى لم اقم بعمل اى شيىء فى المدونة ولكن الاداة اصبحت لا تعمل
اخي الكريم لا اعرف ماذا الأمر اخي ما باليد حيلة لا اعرف ما الأمر بالتحديد اعتذر :(
تحياتي
مهند ناصر
شكرا لك اخى مهند واعتذر عن تعبك معى
وشكرا على مجهودك الكبير فى المدونة
تحياتى
مهند لو سمحت مفيش طريقه لتكبير حجم الخط في التعليق وتغيير لونه ؟
ولاء : انا رأيت تعليقك امس ولم اريد الرد الا بعد البحث ولكن للأسف لم اجد .
لا تحرمينا من تعليقاتك ومنقاشتق
تحياتي
مهند ناصؤ
أشكرك على هذا الموضوع
hdfna.blogspot.com
اظافة جميلة تسلم يا كبير
www.tamassinte.blogspot.com
إرسال تعليق