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

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

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

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

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

     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (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://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>

الان قم بحفظ الاداه وعليك بالعافيه الاضافه

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

By glok

Similiar tagsاضافات بلوجردروس بلوجرCSS3