اضافة خاصية تكبير وتصغير خط المدونة

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

معاينة

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

1. من لوحة التحكم بلوجر 
2. نذهب الي قالب ومن ثم تحرير html 
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>

الخطوة الثانية والاخيرة من تركيب الاضافة 

نبحث عن الكود التالي داخل القالب

<div class='post-header'>

ونضع أسفله هذا الكود

<!--Better reading experience by codingcrazy for 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-->

في أمان الله

اضافة خاصية تكبير وتصغير خط المدونة 2015-03-16T01:39:00-07:00 Rating: 4.5 Diposkan Oleh: أبو عبد الله