السلام عليكم و رحمة الله تعالى و بركاته،إخواني أخواتي الكرام في هذا الدرس سوف نتعرف على كيفية اضافة أيقونة تكبير وتصغير الخط + مجموعة خطوط تحت عنوان التدوينة - لمدونات بلوجر.
تعتبر هذه بمثابة عامل مساعد للزوار بحث تجعل الزائر يختار حجم الخط الذي يريدة من تكبير أو تصغير وأيضاً هنالك بعض من الزوار لا ترتاح لخط المدونة ، لذلك تركنا الخيار للزائر هو بنفسه الذي يحدد الخط الذي يريده .
-طريقة التركيب :
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 == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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- احفظ القالب .
السلام عليكم..
ردحذفمدونة جميلة اخي والواضح ان مواضيعها مميزة ومن نظرتي الاولى اتمنى لك التوفيق..اخي العزيز عندي مدونة وهذا عنوانها :
www.slena.mobi
عند التعليق يوجد مثل مدونتك باستخدام الفيس بوك وبلوجر .. اريد حذف تعليقات الفيس بوك واستبدالها بتعليقات ديسكس وذلك لاجل التحكم بالتعليقات والرد على الزوار .. ارجوا ان تستطيع مساعدتي .. دمت بود