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

[walid]

http://www.ar-bl.net/vb/storeimg/img_1360497363_431.png
بسم الله الرحمن الرحيم , السلام عليكم اخواني اخواتي متابعي مدونة blog جلال البعداني ,, اليوم حبيت اقدم لكم اضافه حصريه وجديده في عالم بلوجر ,لا شك ان الكثير من المدونين يعانو من مشكلة ارضاء جميع زوار مدوناتهم من خلال شكل والوان ستايل style المدونه ولكن اليوم باذن الله سوف اقدم لكم (الحل ) هذه الاضافه الاحترافيه تمكن زوار مدونتك من التحكم باختيار لون الخلفيه المناسبه لهم وايضا اختيار نوع الخط وحجمه وايضا لون النص في التدوينه بمجرد النقر على اللون المفضل لهم بطريقه سهله واحترافيه, مما يزيد من جمالية المدونه ويجعل زوار مدونتك راضيين كل الرضا عن شكلها واختيار الاستايل style المناسب لهم ,,, لن اطيل عليكم ... نبدأ على بركة الله
http://1.bp.blogspot.com/-mmrqEB0k05k/UaSGBb7C-HI/AAAAAAAABo8/yZFj7nYUltc/s400/styl-jalal-for-blogger.png

مثال حي للاضافه (http://alb33dani.blogspot.com/2014/05/Style-Changer.html)



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

1- من لوحة التحكم -> قالب template -> تحرير HTML -> تابع
2- خذ نسخه احتياطيه لـ قالب template المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود code التالي بالإستعانة بلوحة التحكم (CTRL+F)



</body>

والصق الكود code التالي قبله تمامآ



اقتباس




قم بحفظ القالب template

انتقل إلى لوح تحكم مدونتك،
إختر &quot;تخطيط&quot; ثم إضافة أداة ثم اختر HTML/Javascript
و الصق داخل المستطيل الكود code التالي

اقتباس


<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=&quot;text&quot;] {
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=&quot;text&quot;] {
width:118px !important;
padding:4px !important;
height:auto !important;
}
</style>
<table border=&quot;0&quot; id=&quot;stylechanger&quot;>
<tr><th class=&quot;title&quot; colspan=&quot;2&quot;>Background Color Changer</th></tr>
<tr>
<td colspan=&quot;2&quot;>
<div id=&quot;bgColorer&quot;>
<span style=&quot;background-color:#523690;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
<span style=&quot;background-color:#248bcb;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
<span style=&quot;background-color:#fed100;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
<span style=&quot;background-color:#c91212;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
<span style=&quot;background-color:#3a9838;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
<span style=&quot;background-color:#36404a;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
<span style=&quot;background-color:#ffffff;&quot; onclick=&quot;bgSwitch(this.style.backgroundColor);&quot;></span>
</div>
</td>
</tr>
<tr><th>Font Type</th>
<td>
<select onchange=&quot;fontSwitch(this.value);&quot;>
<option selected />--
<option value=&quot;'Book Antiqua',Serif&quot; />Book Antiqua
<option value=&quot;'Times New Roman',Serif&quot; />Times New Roman
<option value=&quot;Georgia,Serif&quot; />Georgia
<option value=&quot;Arial,Sans-Serif&quot; />Arial
<option value=&quot;Tahoma,Verdana,Arial,Sans-Serif&quot; />Tahoma
<option value=&quot;'Trebuchet MS',Arial,Sans-Serif&quot; />Trebuchet
<option value=&quot;Verdana,Arial,Sans-Serif&quot; />Verdana
<option value=&quot;'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif&quot; />Century Gothic
<option value=&quot;'Comic Sans MS',Serif&quot; />Comic Sans
</select>
</td>
</tr>
<tr><th>Text Color</th>
<td><input type=&quot;text&quot; id=&quot;fontColorer&quot; value=&quot;#000000&quot; onkeyup=&quot;fontColor(this.value);&quot;/></td>
</tr>
<tr><th>Font Size</th>
<td><input type=&quot;text&quot; id=&quot;fontSizer&quot; value=&quot;12&quot; maxlength=&quot;3&quot; onkeyup=&quot;changeFontSize(this.value);&quot;/></td>
</tr>
<tr><th>Reset</th>
<td><button onclick=&quot;resetStyle();&quot;>Reset</button></td>
</tr>
</table>



الان قم بحفظ الاداه ومبرووووووووك عليك الاضافه
اتمنى تكون اعجبتكم الاضافه واذا واجهتكم مشكله في التركيب install ضعوا تعليق وسيتم الرد عليكم ان شاء الله









https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©