03-06-2014, 02:21 PM
#1
مدون نشيط
تاريخ التسجيل: Feb 2014
المشاركات: 124
اضافة تغيير لون خلفية المدونة - اضافات بلوجر
السلام عليكم ورحمة الله وبركاته
معنا اليوم اضافة تغيير لون الخلفية بطريقة جديدة وبشكل اجمل واحترافي
الشرح :
اذهب الي صفحة القالب ثم تحرير 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 >
واحفظ العمل
__________________
من مواضيع Blog-Add