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

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

 

لون  مدونة  بلوجر   Blog Blogger

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

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

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

3- قم بالبحث عن الكود التالي بالإستعانة
بلوحة التحكم (CTRL+F)

</body>

والصق الكود التالي قبله 

</body>

<script
src=’http://softglad.at.ua/widgets/theme-style-cookie.js’
type=’text/javascript’/>

<script
type=’text/javascript’>

/**

* Theme
Style Switcher by jalal albaadani

*/

//<![CDATA[

var expiredStyle = 7000,

dbs = document.body.style;

//
background switcher

function
bgSwitch(v) {

dbs.background
= v;

createCookie(‘bgstyle’,
v, expiredStyle);

}

// font
switcher

function
fontSwitch(v) {

dbs.fontFamily
= v;

createCookie(‘fontstyle’,
v, expiredStyle);

}

// font sizer

function changeFontSize(v) {

dbs.fontSize
= v + ‘px’;

createCookie(‘fontsize’,
v, expiredStyle);

}

// color
switcher

function
fontColor(v) {

dbs.color = v;

createCookie(‘fontcolor’,
v, expiredStyle);

}

if
(readCookie(‘bgstyle’)) {

dbs.background
= readCookie(‘bgstyle’);

}

if
(readCookie(‘fontstyle’)) {

dbs.fontFamily
= readCookie(‘fontstyle’);

}

if
(readCookie(‘fontsize’)) {

dbs.fontSize
= readCookie(‘fontsize’) + ‘px’;

document.getElementById(‘fontSizer’).value
= readCookie(‘fontsize’);

}

if
(readCookie(‘fontcolor’)) {

dbs.color =
readCookie(‘fontcolor’);

document.getElementById(‘fontColorer’).value
= readCookie(‘fontcolor’);

}

function
resetStyle() {

eraseCookie(‘bgstyle’);

eraseCookie(‘fontstyle’);

eraseCookie(‘fontsize’);

eraseCookie(‘fontcolor’);

window.location.reload(1);

}

//]]>

</script>

ثم  توجة الي التخطيط   و اختار 

إضافة  أداة 
جافا  سكريبت  و الصق 
الكود  هذا فية

<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=”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>Font
Type</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>Text
Color</th>

<td><input
type=”text” id=”fontColorer” value=”#000000″
onkeyup=”fontColor(this.value);”/></td>

</tr>

<tr><th>Font
Size</th>

<td><input
type=”text” id=”fontSizer” value=”12″
maxlength=”3″
onkeyup=”changeFontSize(this.value);”/></td>

</tr>

<tr><th>Reset</th>

<td><button
onclick=”resetStyle();”>Reset</button></td>

</tr>

</table>

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

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

جزاكم 
الله  خيرا   و في 
رعاية الله   

و السلام 
عليكم  ورحمة الله وبركاتة