مساحة إعلانية

الثلاثاء، 22 يوليو، 2014

الثلاثاء، 22 يوليو، 2014

مغير ستايل بلوجر

Blogger Style Changer
أعطي لزوار مدونتك حرية أكبر في اختيار مظهر يتلائم أكثر مع ذوقهم وذلك عبر إضافة مغير الستايل هي إضافة تسمح للزائر بتبديل لون خلفية المدونة أو لون الخطوط او حجم الخط ليكون مناسب اكثر لذوقه الخاص خصوصا مسألة لون وحجم الخط تفيد كثيراً لاصحاب ضعف النظر أو من يجلسون على مسافة كبيرة ويحتاجون رؤية الخطوط بشكل أوضح الإضافة بسيطة وسهلة التركيب كل ماعليك فعله هو إضافة الكود التالي في آداة HTML/JavaScript والباقي يعود لزوارك يمكنك تجربة الآداة أولا من الرابط التالي
<style>
#cnmustylechanger {height: 180px;}
#stylechanger {
  background:#FFFFFF;
  border-collapse: collapse;
  border-radius: 5px;
  box-shadow: 0 0 2px #222222;
  display: block;
  font: 10px tahoma;
  height: 170px;
  margin-top: 10px;
  text-align: right;
  width: 235px;
}

#stylechanger th,
#stylechanger td {
  vertical-align:middle;
  border:none !important;
  padding:2px 5px;
}

#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:128px;
  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 {
  cursor: pointer;
  font: 12px tahoma;
  padding: 2px 5px 5px;
  width: 128px;
}

#stylechanger #bgColorer {
  overflow:hidden;
  margin:10px 15px 10px 0;
}

#stylechanger #bgColorer span {
  display:block;
  float:right;
  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>
<center>
<div id="cnmustylechanger">
<table border="0" id="stylechanger">
     <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>نوع الخط</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected />--
                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua
                <option value="&#39;Times New Roman&#39;,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="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet
                <option value="Verdana,Arial,Sans-Serif" />Verdana
                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans
            </select>
        </td>
    </tr>
    <tr><th>لون الخط</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>حجم الخط</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>إستعادة الإفتراضي</th>
        <td><button onclick="resetStyle();">إستعادة</button></td>
    </tr>
</table>
</div>
</center>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/theme-style.js' type='text/javascript'/></script>
دمتم بكل ود

هناك 17 تعليقًا:

  1. اضافة رائعة اخي اتمني لك التوفيق دائما

    ردحذف
    الردود
    1. دائما ما تنير الموضوع بمرورك أخي محمد تحياتي لك

      حذف
  2. شكرا لك اخي عمرو فعلا هذه الاضافة من اجمل الاضافات =r

    ردحذف
    الردود
    1. شكراً على تشريفك الموضوع أخي الغالي منير =r

      حذف
  3. اضافة جميلة و رائع اخي عمرو بتوفيق دائما

    ردحذف
  4. اضافة رائعة وسهلة وفقك الله كل عام وانت بخير بمناسبة اقتراب عيد الفطر =q

    ردحذف
  5. ان شاء الله يارب نصل الى مستوى ابداعك ... ابداع بلا حدود و الله اخي عمرو

    دائما تقدم الاشياء النادرة الانتشار

    وربنا لايحرمنا منك

    ردحذف
  6. أشكركم اخواني على مروركم العطر تشرفت بتعليقاتكم =r
    وكل عام وانت بخير اخي الغالي أحمد وكل الإخوه والاخوات وكل امة الإسلام
    دمتم في امان الله

    ردحذف
  7. q= افكارك منذ ان بدأت التدوين مختلفة ومبهره
    واضيف اعجابى الشديد بقالب مدونتك الذى حولته وكانه منتدى ! يدل على درايتك بالاكواد بشكل ممتاز ماشاء الله
    والذى اكثر من اعجابى هو عرضه بنفس الشكل على تابلت؛ هذه الخاصية فى قالبى ولكن حجم الصفحة صغير .
    ؛ اتمنى لك التقدم والابداع المستمر

    ردحذف
    الردود
    1. كل كلمة كتبتها اخي جهاد هي وسام أتشرف به فانت من المدونين القلائل الذين لديهم الخبرة والتميز وحافظوا على مستواهم لفترات طويلة
      أشكرك كثيراً على التشجيع وتشرفت بمرورك كثيراً أخي الفاضل
      كل عام وأنت بخير =r

      حذف
  8. اضافة رائعة جداا أاخي عمرو
    أتمني منك زيارة مدونتي وتقيم مواضيعها بتعليق وشكرا
    tadwn.blogspot.com

    ردحذف
    الردود
    1. حياك الله أخي الكريم
      ومدونتك جيده أخي موفق بإذن الله

      حذف
  9. ألف شكر لك. لقد وفرت علي عناء التفكير في الشكل المناسب للمدونة ( الذي يرضي الزائر)

    ردحذف
    الردود
    1. أهلا بك اختي ويسعدني انك وجدت ما يفيدك في المدونة تحياتي

      حذف
  10. شكرا اصافة رائعة وانا من اكبر متابعي مدونتكم الجميلة =r
    لكن اكسل عن التعليق ههه =f

    ردحذف
    الردود
    1. =d نورت الموضوع يا طيب ولا تكسل عن التعليق فمروركم يسعدنا =r

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©