اضافه تغيير الوان خلفية المدونه حسب رغبت الزوار

السلام عليكم

اليوم اقدم لكم اضافه جميله تمكين من زوار مدونتك التحكم فى لون الخلفية المناسبه لهم واختيار نوع الخط ايضا ولون التدوينه بطريقه سهله واحترافيه

كيفية اضافة هذه الاداه الى مدوناتكم

•  توجه لقالب >> تحرير 
•  ابحث بإستعمال CTRL+F عن :  </body>

 والصق الكود التالي قبله تمامآ

 <script src='http://softglad.at.ua/widgets/theme-style-cookie.js' type='text/javascript'/> <script type='text/javascript'> /** * Theme Style Switcher by jalal undefinedalbaadani) * URL: http://tec1new.blogspot.com     */ //<![CDATA[ var expiredStyle = 7000, dbs = document.body.style; // background switcher function bgSwitchundefinedv) { dbs.background = v; createCookieundefined'bgstyle', v, expiredStyle);    } // font switcher function fontSwitchundefinedv) { dbs.fontFamily = v; createCookieundefined'fontstyle', v, expiredStyle);    } // font sizer function changeFontSizeundefinedv) { dbs.fontSize = v + 'px'; createCookieundefined'fontsize', v, expiredStyle); } // color switcher  function fontColorundefinedv) {  dbs.color = v;  createCookieundefined'fontcolor', v, expiredStyle);    } if undefinedreadCookieundefined'bgstyle')) { dbs.background = readCookieundefined'bgstyle');    } if undefinedreadCookieundefined'fontstyle')) { dbs.fontFamily = readCookieundefined'fontstyle');    } if undefinedreadCookieundefined'fontsize')) { dbs.fontSize = readCookieundefined'fontsize') + 'px'; document.getElementByIdundefined'fontSizer').value = readCookieundefined'fontsize');    } if undefinedreadCookieundefined'fontcolor')) { dbs.color = readCookieundefined'fontcolor'); document.getElementByIdundefined'fontColorer').value = readCookieundefined'fontcolor');    } function resetStyleundefined) { eraseCookieundefined'bgstyle'); eraseCookieundefined'fontstyle'); eraseCookieundefined'fontsize'); eraseCookieundefined'fontcolor'); window.location.reloadundefined1); } //]]>
  </script>

قم بحفظ القالب 

1.     انتقل إلى لوح تحكم مدونتك،
2.      HTML/Javascript إختر "تخطيط" ثم إضافة أداة ثم اختر 

 والصق الكود التالي  

    <style>
    #stylechanger {
      border:none;
      margin:0 0;
      padding:0 0;
      width:98%;
      text-align:left;
      font:normal 11px Arial,Sans-Serif;
      border-collapse:collapse;
    }
    #stylechanger th,
    #stylechanger td {
      vertical-align:middle;
      border:none !important;
      padding:2px 10px;
    }
    #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:130px;
      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 {
      font:normal 11px Arial,Sans-Serif;
      padding:3px 5px;
      cursor:pointer;
    }
    #stylechanger #bgColorer {
      overflow:hidden;
      margin:10px 0 10px;
    }
    #stylechanger #bgColorer span {
      display:block;
      float:left;
      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>
<table border="0" id="stylechanger">
<tr><th class="title" colspan="2">Background Color Changer</th></tr>
<tr>
 <td colspan="2">
<div id="bgColorer">
<span style="background-color:#523690;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
<span style="background-color:#248bcb;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
<span style="background-color:#fed100;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
<span style="background-color:#c91212;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
<span style="background-color:#3a9838;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
<span style="background-color:#36404a;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
<span style="background-color:#ffffff;" onclick="bgSwitchundefinedthis.style.backgroundColor);"></span>
                </div>
 </td>
</tr>
<tr><th>Font Type</th>
<td>
<select onchange="fontSwitchundefinedthis.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>Text Color</th>
 <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColorundefinedthis.value);"/></td>
 </tr>
<tr><th>Font Size</th>
 <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSizeundefinedthis.value);"/></td>
</tr>
<tr><th>Reset</th>
<td><button onclick="resetStyleundefined);">Reset</button></td>
</tr>
</table>