السلام عليكم ورحمة الله تعالي وبركاته
اليوم انشاء الله سوف أقدم لكم اضافة جميلة هي اضافة تغيرحجم خط المدونة وكذا لون خلفية الدونة مع امكانية تغير نوع الخط ايضا بتسعة أنواع جميلة جدا وأنيقة مع تغير لونها الى اللون الدي تريد ان يظهر به خطك.تعتبر هذه الاضافة من أهم الاضافات في مدونات بلوجر فاحيانا في بعض المتصفحات تجد شكل المدونة وخطها تحديدا أكبر من الحجم الفعلي أو اصغر واحيانا اخرى خصوصاً المدونات الخاصة بالنقاد والكتاب والذين تكون مقالاتهم طويلة يحتاج الزائر في ذلك الوقت الى تكبير حجم الخط، كما تمكن زوار مدونتك من التحكم باختيار لون الخلفيه المناسبه لهم بمجرد النقر على اللون المفضل لهم بطريقه سهله واحترافيه، مما يزيد من جمالية المدونة، اما فيما يخص شكل الخط فبعض الزوار يحب نوع الخط الدي يريد ان يقرأ به ولونه المفضل للخط وذلك فقط بنقره على نوع الخط واختيار النوع الدي يريد وادخال كود اللون في خانة لون الخط ... اذن هذه هي وظيفة أداة اليوم.
طريقة التركيب.
1- لوحة تحكم.
2- التخطيط.
3- إضافة أداة HTML/JAVASCRIPT.
4- ضع الكود التالي :
<style> #cnmustylechanger {height: 180px;} #stylechanger { background:#FFFFFF; border-collapse: collapse; border-radius: 5px; box-shadow: 0 0 2px #222222; display: block; font: 10px tahoma; height: 170px; margin-top: 10px; text-align: right; width: 235px; } #stylechanger th, #stylechanger td { vertical-align:middle; border:none !important; padding:2px 5px; } #stylechanger th.title { background-color:#33AFE0; padding:5px 10px; margin:0 0 10px; text-transform:uppercase; font-size:12px; font-family: Arial,Sans-Serif; color: #FFF; } #stylechanger select, #stylechanger input[type="text"] { width:128px; padding:2px; font:bold 11px Arial,Sans-Serif; display:block; margin:0 0 0; height:24px; outline: 0; } #stylechanger select option { padding:5px 10px; cursor:pointer; } #stylechanger button { cursor: pointer; font: 12px tahoma; padding: 2px 5px 5px; width: 128px; } #stylechanger #bgColorer { overflow:hidden; margin:10px 15px 10px 0; } #stylechanger #bgColorer span { display:block; float:right; width:20px; height:20px; border:1px solid black; margin:0 5px 0 0; cursor:pointer; } #stylechanger input[type="text"] { width:118px !important; padding:4px !important; height:auto !important; } </style> <center> <div id="cnmustylechanger"> <table border="0" id="stylechanger"> <tr> <td colspan="2"> <div id="bgColorer"> <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span> <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span> <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span> <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span> <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span> <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span> <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span> </div> </td> </tr> <tr><th>نوع الخط</th> <td> <select onchange="fontSwitch(this.value);"> <option selected />-- <option value="'Book Antiqua',Serif" />Book Antiqua <option value="'Times New Roman',Serif" />Times New Roman <option value="Georgia,Serif" />Georgia <option value="Arial,Sans-Serif" />Arial <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma <option value="'Trebuchet MS',Arial,Sans-Serif" />Trebuchet <option value="Verdana,Arial,Sans-Serif" />Verdana <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic <option value="'Comic Sans MS',Serif" />Comic Sans </select> </td> </tr> <tr><th>لون الخط</th> <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td> </tr> <tr><th>حجم الخط</th> <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td> </tr> <tr><th>إستعادة الإفتراضي</th> <td><button onclick="resetStyle();">إستعادة</button></td> </tr> </table> </div> </center> <script src='https://cnmu.googlecode.com/svn/trunk/2014/theme-style.js' type='text/javascript'/></script>
0 التعليقات :
إرسال تعليق