كود لتغيير حجم ونوع الخط ولون الخلفية في مدونات بلوجر


كود رائع يساعد المستخدم في تغيير لون الخلفية واختيار حجم الخط الذي يناسبه .

كيفية إضافة الكود 
من لوحة تحكم المدونة
تخطيط
إضافة أداة .
إختر HTML/Javascript .
أضف الكود التالي واضغط حفظ .

<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="&#39;Book Antiqua&#39;,Serif" />Book Antiqua
                <option value="&#39;Times New Roman&#39;,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="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet
                <option value="Verdana,Arial,Sans-Serif" />Verdana
                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
                <option value="&#39;Comic Sans MS&#39;,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>
Hm

اسامة المصري : من مصر, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، ,

ليست هناك تعليقات:

إرسال تعليق