حصريا طريقة اضافة اختار لون الخلفية حسب رغبتك في مدونات بلوجر2013

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

 طريقة اضافة اختار لون الخلفية حسب رغبتك في مدونات بلوجر ،يمكنك من هذا الاضافة ارضاء جميع زوار مدونتك من خلال الاضافة الجميلة والحصرية هذا الاضافة تمكن الزوار ان يغير لون الخلفية الي 7 الوان جميلة و ومريحة للعين ويمكن للزائر ان يغير في حجم الخط ويمكن تغير نوع الخط 

 اضافة اختار لون الخلفية حسب رغبتك في مدونات بلوجر2013

   

لتركيب الاضافة علي مدونتك ادخل علي لوحة تحكم مدونتك واختارقالب كما واضح في الصورة

واختار تحرير  html كما موضح في الصورة

وابحث بلضغط علي

وابحث علي هذا الكود 

 </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)

     * URL: http://hh50.blogspot.com

     */

    //<![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>

 

 

واحفط القالب  توجه اليالتخطيط كما واضح في الصورة

 

ثم بعد ذلك اختار اضافة اداة كما ظهر في الصورة

بعد ذلك اختار html /javascriptكما موضح في الصورة

 والصق الكود في المربع

    <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>

 

اضغط علي حفط ومبروك عليك الاضافة الجديدة

ان وفقت فهذا من الله وان اخطاءت فمن نفسي والشيطان

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..