إضافة لتغيير لون وخط مدونتك وإرضاء زوارك

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

نبدأ على بركة الله 

   من  لوحة التحكم -> قالب -> تحرير HTML -> تابع 

    خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

   قم بالبحث عن الكود </body> بالإستعانة بلوحة التحكم (CTRL+F)
والصق الكود التالي قبله تمامآ

 <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://alb33dani.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>

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

    انتقل إلى لوح تحكم مدونتك،
إختر "تخطيط" ثم إضافة أداة       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>

الان قم بحفظ الاداه

اتمنى تكون اعجبتكم الاضافه واذا واجهتكم مشكله في التركيب ضعوا تعليق وسيتم الرد عليكم ان شاء الله