هل تعاني من مشاكل في تصميم مدونتك أو أن التصميم لايعجب الزوار أو الألوان المستخدمة في التصميم لاترضي وتعجب الزائر , فأليكم أضافة حصرية مقدمة من المطور .نت , فذوق كل زائر يختلف عن الزوار الأخرين لذلك من الصعب ارضااء الجميع , لذلك اليكم اليوم اضافة تسمح لزوار مدونتك باختيار الوان خلفية المدونه ونوع الخط حسب رغبتهم , يحيث يتيح له أختيار لون خلفية الذي يريد حيث يظهر له مجموعة كبيرة من الألوان , وكذلك الأمر بالنسبة للخطوط يمكنك أختيار الخط الذي تريد وايضا تتيح لك تغير حجم الخط حتى يتناسب مع نظر الزائر الى الحجم الذي تريد و ايضا يمكنك أستعادة الخيارات الأولى الموجودة في المدونة من قبل والكثير من المميزات أتمنى أن ترضيكم .
طريقة التركيب :
- قم بالذهاب الى لوحة تحكم بلوجر
- ثم قم بالذهاب الى التخطيط
- قم باضافة اداة HTML/Javascript
- وقم باضافة الكود الأتي يمكنك تحميلة من هنا
<style>
#cnmustylechanger {height: 180px;}
#stylechanger {
background:#FFFFFF;
border-collapse: collapse;
border-radius: 5px;
box-shadow: 0 0 2px #222222;
display: block;
font: 10px tahoma;
height: 170px;
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="'Book Antiqua',Serif" />Book Antiqua
<option value="'Times New Roman',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="'Trebuchet MS',Arial,Sans-Serif" />Trebuchet
<option value="Verdana,Arial,Sans-Serif" />Verdana
<option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
<option value="'Comic Sans MS',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></td>
</tr>
</table>
</div>
</center>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/theme-style.js' type='text/javascript'/></script>
0 التعليقات :
إرسال تعليق