اضافة احترافية للتحكم في ستايل المدونة

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

معاينة الاضافة

شرح تركيب الاضافة

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

<style>

#cnmustylechanger {height: 120px;}

#stylechanger {

  background:#FFFFFF;

  border-collapse: collapse;

  border-radius: 5px;

  box-shadow: 0 0 2px #222222;

  display: block;

  font: 10px tahoma;

  height: 180px;

  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>
  </div>
  </br>
  <a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
  Widget by hsam ahmed</a></div>
        
</tr>
 
</table>


</div>

</center>


<script src='https://cnmu.googlecode.com/svn/trunk/2014/theme-style.js' type='text/javascript'/></script>

ثم نحفظ الاداة

المصدر : كن مدون

وفي الاخير كن ايجابيا ولاتأخذ بدون ان تعطي فمجرد كلمة شكر تكفي لرد الجميل

الكاتب : Unknown

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر

شارك المقال

شاركه على فيسبوكشاركه على جوجل+