كيفية اضافة أيقونة تكبير وتصغير الخط + مجموعة خطوط تحت عنوان التدوينة - لمدونات بلوجر

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

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

للمعاينة أنقر هنا

-طريقة التركيب :

1- اختر لوحة التحكم من مدونتك .

2- من لوحة التحكم اختر قالب ، ثم اضغط على تحرير قالب .

3- ابحث عن الوسم :  </head>

4 - ضع الكود التالي فوقه .

 <script type="text/javascript">
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.getElementById('main').style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.getElementById('main').style.fontSize = fontSize + "em";
}
</script> 

5- ابحث عن الوسم : <data:post.body/>

- ملحوظة/ هذا الكود مكرر لأكثر من مرة المقصود الثاني الثالث منه .

6- ضع الكود التالي فوقه .

 <!--Better reading experience by Home Bloggerfor blogger-->
<style>
#userbtns { margin: 10px 0px;}
#zoom-in {cursor:zoom-in;}
#zoom-out {cursor:zoom-out;}
#font-cc {cursor:pointer;}
#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"/>
<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>
<!--All ends here-->. 

7- احفظ القالب .