الزيارات: طريقة تكبير وتصغير حجم خط المدونة من طرف الزائر

السلام عليكم ورحمة الله تعالي وبركاته

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

تعتبر هذه الاضافة من أهم الاضافات في مدونات بلوجر فاحيانا في بعض المتصفحات تجد شكل المدونة وخطها تحديدا أكبر من الحجم الفعلي أو اصغر واحيانا اخرى خصوصاً المدونات الخاصة بالنقاد والكتاب والذين تكون مقالاتهم طويلة يحتاج الزائر في ذلك الوقت الى تكبير حجم الخط .. اذن هذه هي وظيفة أداة اليوم.
طريقة التركيب.
1- لوحة التحكم.
2- القالب.
3- تحرير html.
4- نبحث باستعمال Ctrl+F عن الكود التالي:

</head>

5- نضع فوقه هذا الكود.

<script type="text/javascript">
var fontSize = 1;

fontSize += 0.1;
function zoomIn() {

document.getElementById('main').style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;

</script>
document.getElementById('main').style.fontSize = fontSize + "em";

}

6- الخطوة الثانية والاخيرة من تركيب الاضافة
7- لوحة تحكم.
8- التخطيط.
9- إضافة أداة HTML/JAVASCRIPT.
10-  ضع الكود التالي :

<!--Better reading experience by codingcrazy for blogger-->
<style>
#userbtns { margin: 10px 0px;}

#font-cc {cursor:pointer;}
#zoom-in {cursor:zoom-in;}
#zoom-out {cursor:zoom-out;}

#zoom-in, #zoom-out, #font-cc {-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;box-shadow:inset 0px 1px 0px 0px #54a3f7;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);background-color:#007dc1; -moz-border-radius:3px; -webkit-border-radius:3px;border-radius:3px;border:1px solid #124d77;color:#ffffff;font-family:verdana;font-size:10px;padding:6px 10px;text-decoration:none; margin:0px;}
#zoom-in:hover,#zoom-out:hover #font-cc:hover {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7),color-stop(1, #007dc1));background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);background-color:#0061a7;}
/*end of styling*/
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id="userbtns">
<center>
<input id="zoom-in" value="A+" onclick="zoomIn()" type="button"/>
<input id="zoom-out" value="A-" onclick="zoomOut()" type="button"/>

<!--All ends here-->
<input id="font-cc" value="Verdana"onclick="document.getElementById('main').style.fontFamily = 'verdana'"type="button"/>
<input id="font-cc" value="Georgia"onclick="document.getElementById('main').style.fontFamily = 'Georgia'"type="button"/>
<input id="font-cc" value="Arial"onclick="document.getElementById('main').style.fontFamily = 'Arial'"type="button"/>
<input id="font-cc" value="Trebuchet MS"onclick="document.getElementById('main').style.fontFamily = 'Trebuchet MS'" type="button"/>
<input id="font-cc" value="Comic Sans MS"onclick="document.getElementById('main').style.fontFamily = 'Comic Sans MS'" type="button"/>
</center>
</div><!--Userbuttons-->

</b:if></b:if>

وهناك تركيبة أخرى بنفس الكود  ادا اردت ان تظهر الإضافة في داخل المنشور، كل ماعليك
11- البحت باستخدام Ctrl+F عن الوسمة داخل القالب:

<div class='post-header'>

12- وضع الكود الأخير أسفله

قسم : إضافات البلوجر

بقلـــــــم شبكة عـدناني

شبكة عدناني فيها الكثير والكثير من اطيب الكلام و أجمل القصص و أروع المواضيع، نعمل جادين لتقديم ما يفيد ، ستجدون في صفحتنا خيرا كثيرا إن شاء الله : ﴿إن اصبنا فمن الله و ان اخطأنا فمن انفسنا ومن الشيطان﴾