| Blog-Add |
03-06-2014 02:21 PM |
اضافة تغيير لون خلفية المدونة - اضافات بلوجر
السلام عليكم ورحمة الله وبركاته
معنا اليوم اضافة تغيير لون الخلفية بطريقة جديدة وبشكل اجمل واحترافي
الشرح :
اذهب الي صفحة القالب ثم تحرير HTML وابحث عن : </body>
واضف اعلاها الكود التالي :
كود PHP:
<script src='http://softglad.at.ua/widgets/theme-style-cookie.js' type='text/javascript'/>
<script type='text/javascript'>
//<![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 واضف الكود التالي :
كود PHP:
<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="'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>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>
واحفظ العمل |
