بسم الله الرحمن الرحيم 

والصلاة والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبه افضل الصلاة واتم التسليم 

السلام عليكم ورحمة الله وبركاته . 

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

طريقة التركيب : 

•  من  لوحة التحكم -> قالب -> تحرير HTML -> تابع
•  خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
•  قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (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 jetara undefinedalbaadani)
* URL: http://7loll.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>

  <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>
<a href="http://7loll.blogspot.com"></a>