2016/03/13

إضافة ألوان فلات رائعة في صفحة ثابتة

إضافة ألوان فلات رائعة في صفحة ثابتة
إضافة ألوان فلات رائعة في صفحة ثابتة

إضافة ألوان فلات رائعة في صفحة ثابتة-عادة بعض الأشخاص تعاني من إختيار ألوان متناسقة لتصاميمهم  أو تغيير ألوان في قوالبهم ولكن ليس لديهم هذه الإضافة ولمعاينة الإضافة إضغط على زر المعاينة  التالي

طريقة التركيب


  • أدخل إلى لوحة تحكم المدونة
  • ثم الصفحات
  • إضغط على صفحة جديدة
  • ثم غير من تبويبة تأليف إلى HTML كما في الصورة التالية
غير من تبويبة تأليف إلى HTML
غير من تبويبة تأليف إلى HTML 


ثم ضع الكود التالي 

<p><center class="button_me"id="button_me"><a class="button button_turquoise"onClick="colorToTurquoise()">Turquoise</a><a
   class="button button_green_sea"onClick="colorToGreenSea()">GreenSea</a><a class="button button_emerald"onClick="colorToEmerald()">Emerald</a><a
    class="button button_nephritis"onClick="colorToNephritis()">Nephritis</a><a class="button button_peter_river"onClick="colorToPeterRiver()">PRiver</a><a
     class="button button_belize_hole"onClick="colorToBelizeHole()">BelizeH</a><a class="button button_amethyst"onClick="colorToAmethyst()">Amethyst</a><a
      class="button button_wisteria"onClick="colorToWisteria()">Wisteria</a><a class="button button_wet_asphalt"onClick="colorToWetAsphalt()">WetA</a><a
       class="button button_midnight_blue"onClick="colorToMidnightBlue()">Midnight</a><a class="button button_sunflower"onClick="colorToSunflower()">Sunflower</a><a
        class="button button_orange"onClick="colorToOrange()">Orange</a><a class="button button_carrot"onClick="colorToCarrot()">Carrot</a><a
         class="button button_white_smoke"onClick="colorToWhiteSmoke()">WhiteSmoke</a><a class="button button_pumpkin"onClick="colorToPumpkin()">Pumpkin</a><a
          class="button button_alizarin"onClick="colorToAlizarin()">Alizarin</a><a class="button button_pomegranate"onClick="colorToPomegranate()">Pgranate</a><a
           class="button button_clouds"onClick="colorToClouds()">Clouds</a><a class="button button_silver"onClick="colorToSilver()">Silver</a><a
            class="button button_concrete"onClick="colorToConcrete()">Concrete</a><a class="button button_asbestos"onClick="colorToAsbestos()">Asbestos</a><a
             class="button button_chestnut_rose"onClick="colorToChestnutRose()">ChestnutR</a><a class="button button_alice_blue"onClick="colorToAliceBlue()">AliceBlue</a><a
              class="button button_spray"onClick="colorToSpray()">Spray</a><a class="button button_gossip"onClick="colorToGossip()">Gossip</a><a
               class="button button_cream_can"onClick="colorToCreamCan()">CreamCan</a><a class="button button_silver_tree"onClick="colorToSilverTree()">SilverTree</a><a
                class="button button_cape_honey"onClick="colorToCapeHoney()">CapeHoney</a><a class="button button_medium_turquoise"onClick="colorToMediumTurquoise()">MTurquoise</a><a
                 class="button button_lynch"onClick="colorToLynch()">Lynch</a><a class="button button_crusta"onClick="colorToCrusta()">Crusta</a><a
                  class="button button_jungle_green"onClick="colorToJungleGreen()">JungleG</a><a class="button button_hoki"onClick="colorToHoki()">Hoki</a><a
                   class="button button_wax_flower"onClick="colorToWaxFlower()">WaxFlower</a><a class="button button_observatory"onClick="colorToObservatory()">Observat</a><a
                    class="button button_ecstacy"onClick="colorToEcstasy()">Ecstacy</a></center><center><div class="wrap-header">ألوان فلات</div><div class="kode-warna"id="kode-warna"><div class="colorName"id="colorName">إضغط على اللون
</div><div class="colorText"id="colorText">ثم قم بنسخ كود اللون الذي اخترته
</div><section><p></p></section></div></center><style scoped=""type="text/css">#sidebar-wrapper{display:none;}
#main-wrapper{font-family:'Droid Arabic Kufi',sans-serif;float:none;width:100%;margin-right:0;}
.wrap-header{font-family:'Droid Arabic Kufi',sans-serif;text-align:center;font-size:20px;background:#444;color:#fafafa;padding:10px;font-weight:700;}
.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;margin-bottom:20px;}
#button_me a:hover{color:#fff;}
.button{margin:0!important;text-transform:none;cursor:pointer;font-size:12px;line-height:3.4em;flex:100 100 8%;-webkit-flex:100 100 8%;-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial;}
.button_turquoise{border:5px solid #1abc9c;background:#1abc9c;color:#fff;padding:1px;}
.button_green_sea{border:5px solid #16a085;background:#16a085;color:#fff;padding:1px;}
.button_emerald{border:5px solid #2ecc71;background:#2ecc71;color:#fff;padding:1px;}
.button_nephritis{border:5px solid #27ae60;background:#27ae60;color:#fff;padding:1px;}
.button_peter_river{border:5px solid #3498db;background:#3498db;color:#fff;padding:1px;}
.button_belize_hole{border:5px solid #2980b9;background:#2980b9;color:#fff;padding:1px;}
.button_amethyst{border:5px solid #9b59b6;background:#9b59b6;color:#fff;padding:1px;}
.button_wisteria{border:5px solid #8e44ad;background:#8e44ad;color:#fff;padding:1px;}
.button_wet_asphalt{border:5px solid #34495e;background:#34495e;color:#fff;padding:1px;}
.button_midnight_blue{border:5px solid #2c3e50;background:#2c3e50;color:#fff;padding:1px;}
.button_sunflower{border:5px solid #f1c40f;background:#f1c40f;color:#fff;padding:1px;}
.button_orange{border:5px solid #f39c12;background:#f39c12;color:#fff;padding:1px;}
.button_carrot{border:5px solid #e67e22;background:#e67e22;color:#fff;padding:1px;}
.button_pumpkin{border:5px solid #d35400;background:#d35400;color:#fff;padding:1px;}
.button_alizarin{border:5px solid #e74c3c;background:#e74c3c;color:#fff;padding:1px;}
.button_pomegranate{border:5px solid #c0392b;background:#c0392b;color:#fff;padding:1px;}
.button_clouds{border:5px solid #ecf0f1;background:#ecf0f1;color:#808080;padding:1px;}
.button_silver{border:5px solid #bdc3c7;background:#bdc3c7;color:#fff;padding:1px;}
.button_concrete{border:5px solid #95a5a6;background:#95a5a6;color:#fff;padding:1px;}
.button_asbestos{border:5px solid #7f8c8d;background:#7f8c8d;color:#fff;padding:1px;}
.button_chestnut_rose{border:5px solid #D24D57;background:#D24D57;color:#fff;padding:1px;}
.button_alice_blue{border:5px solid #E4F1FE;background:#E4F1FE;color:#999;padding:1px;}
.button_spray{border:5px solid #81CFE0;background:#81CFE0;color:#fff;padding:1px;}
.button_gossip{border:5px solid #87D37C;background:#87D37C;color:#fff;padding:1px;}
.button_cream_can{border:5px solid #F5D76E;background:#F5D76E;color:#fff;padding:1px;}
.button_silver_tree{border:5px solid #68C3A3;background:#68C3A3;color:#fff;padding:1px;}
.button_cape_honey{border:5px solid #FDE3A7;background:#FDE3A7;color:#999;padding:1px;}
.button_medium_turquoise{border:5px solid #4ECDC4;background:#4ECDC4;color:#fff;padding:1px;}
.button_white_smoke{border:5px solid #ECECEC;background:#ECECEC;color:#999;padding:1px;}
.button_lynch{border:5px solid #6C7A89;background:#6C7A89;color:#fff;padding:1px;}
.button_crusta{border:5px solid #F2784B;background:#F2784B;color:#fff;padding:1px;}
.button_jungle_green{border:5px solid #26C281;background:#26C281;color:#fff;padding:1px;}
.button_hoki{border:5px solid #67809F;background:#67809F;color:#fff;padding:1px;}
.button_wax_flower{border:5px solid #F1A9A0;background:#F1A9A0;color:#fff;padding:1px;}
.button_observatory{border:5px solid #049372;background:#049372;color:#fff;padding:1px;}
.button_ecstacy{border:5px solid #F9690E;background:#F9690E;color:#fff;padding:1px;}
.kode-warna{font-family:'Droid Arabic Kufi',sans-serif;line-height:normal;border:1px solid #38424b;padding-top:30px;font-size:28px;color:#999;width:100%;background:#ececec;}
section{font-family:'Droid Arabic Kufi',sans-serif;background:#transparent;margin:30px;width:80%;color:#000;border-top-right-radius:5px;border-top-left-radius:5px;padding-left:20px;padding-right:20px;padding-top:1px;padding-bottom:1px;text-align:left;}
@media (max-width:800px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;}.button{font-size:4px;}.kode-warna{width:100%;}}
@media (max-width:320px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;}.button{font-size:3px;}.kode-warna{width:100%;}}
@media (max-width:360px){.button_me{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:center;align-content:center;}.button{font-size:3px;}}
</style><br /><script type="text/javascript">function colorToTurquoise(){document.getElementById("kode-warna")
   .style.backgroundColor = "#1abc9c";var e = document.getElementById("colorName");e.innerHTML = "Turquoise",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#1abc9c"}
function colorToGreenSea(){document.getElementById("kode-warna")
   .style.backgroundColor = "#16a085";var e = document.getElementById("colorName");e.innerHTML = "Green Sea",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#16a085"}
function colorToEmerald(){document.getElementById("kode-warna")
   .style.backgroundColor = "#2ecc71";var e = document.getElementById("colorName");e.innerHTML = "Emerald",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#2ecc71"}
function colorToNephritis(){document.getElementById("kode-warna")
   .style.backgroundColor = "#27ae60";var e = document.getElementById("colorName");e.innerHTML = "Nephritis",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#27ae60"}
function colorToPeterRiver(){document.getElementById("kode-warna")
   .style.backgroundColor = "#3498db";var e = document.getElementById("colorName");e.innerHTML = "Peter River",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#3498db"}
function colorToBelizeHole(){document.getElementById("kode-warna")
   .style.backgroundColor = "#2980b9";var e = document.getElementById("colorName");e.innerHTML = "Belize Hole",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#2980b9"}
function colorToAmethyst(){document.getElementById("kode-warna")
   .style.backgroundColor = "#9b59b6";var e = document.getElementById("colorName");e.innerHTML = "Amethyst",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#9b59b6"}
function colorToWisteria(){document.getElementById("kode-warna")
   .style.backgroundColor = "#8e44ad";var e = document.getElementById("colorName");e.innerHTML = "Wisteria",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#8e44ad"}
function colorToWetAsphalt(){document.getElementById("kode-warna")
   .style.backgroundColor = "#34495e";var e = document.getElementById("colorName");e.innerHTML = "Wet Asphalt",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#34495e"}
function colorToMidnightBlue(){document.getElementById("kode-warna")
   .style.backgroundColor = "#2c3e50";var e = document.getElementById("colorName");e.innerHTML = "Midnight Blue",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#2c3e50"}
function colorToSunflower(){document.getElementById("kode-warna")
   .style.backgroundColor = "#f1c40f";var e = document.getElementById("colorName");e.innerHTML = "Sunflower",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#f1c40f"}
function colorToOrange(){document.getElementById("kode-warna")
   .style.backgroundColor = "#f39c12";var e = document.getElementById("colorName");e.innerHTML = "Orange",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#f39c12"}
function colorToCarrot(){document.getElementById("kode-warna")
   .style.backgroundColor = "#e67e22";var e = document.getElementById("colorName");e.innerHTML = "Carrot",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#e67e22"}
function colorToPumpkin(){document.getElementById("kode-warna")
   .style.backgroundColor = "#d35400";var e = document.getElementById("colorName");e.innerHTML = "Pumpkin",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#d35400"}
function colorToAlizarin(){document.getElementById("kode-warna")
   .style.backgroundColor = "#e74c3c";var e = document.getElementById("colorName");e.innerHTML = "Alizarin",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#e74c3c"}
function colorToPomegranate(){document.getElementById("kode-warna")
   .style.backgroundColor = "#c0392b";var e = document.getElementById("colorName");e.innerHTML = "Pomegranate",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#c0392b"}
function colorToClouds(){document.getElementById("kode-warna")
   .style.backgroundColor = "#ecf0f1";var e = document.getElementById("colorName");e.innerHTML = "Clouds",e.style.color = "gray";var o = document.getElementById("colorText");o.style.color = "gray",o.innerHTML = "#ecf0f1"}
function colorToSilver(){document.getElementById("kode-warna")
   .style.backgroundColor = "#bdc3c7";var e = document.getElementById("colorName");e.innerHTML = "Silver",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#bdc3c7"}
function colorToConcrete(){document.getElementById("kode-warna")
   .style.backgroundColor = "#95a5a6";var e = document.getElementById("colorName");e.innerHTML = "Concrete",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#95a5a6"}
function colorToAsbestos(){document.getElementById("kode-warna")
   .style.backgroundColor = "#7f8c8d";var e = document.getElementById("colorName");e.innerHTML = "Asbestos",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#7f8c8d"}
function colorToChestnutRose(){document.getElementById("kode-warna")
   .style.backgroundColor = "#D24D57";var e = document.getElementById("colorName");e.innerHTML = "Chestnut Rose",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#D24D57"}
function colorToAliceBlue(){document.getElementById("kode-warna")
   .style.backgroundColor = "#E4F1FE";var e = document.getElementById("colorName");e.innerHTML = "Alice Blue",e.style.color = "gray";var o = document.getElementById("colorText");o.style.color = "gray",o.innerHTML = "#E4F1FE"}
function colorToSpray(){document.getElementById("kode-warna")
   .style.backgroundColor = "#81CFE0";var e = document.getElementById("colorName");e.innerHTML = "Spray",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#81CFE0"}
function colorToGossip(){document.getElementById("kode-warna")
   .style.backgroundColor = "#87D37C";var e = document.getElementById("colorName");e.innerHTML = "Gossip",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#87D37C"}
function colorToCreamCan(){document.getElementById("kode-warna")
   .style.backgroundColor = "#F5D76E";var e = document.getElementById("colorName");e.innerHTML = "CreamCan",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#F5D76E"}
function colorToSilverTree(){document.getElementById("kode-warna")
   .style.backgroundColor = "#68C3A3";var e = document.getElementById("colorName");e.innerHTML = "SilverTree",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#68C3A3"}
function colorToCapeHoney(){document.getElementById("kode-warna")
   .style.backgroundColor = "#FDE3A7";var e = document.getElementById("colorName");e.innerHTML = "CapeHoney",e.style.color = "gray";var o = document.getElementById("colorText");o.style.color = "gray",o.innerHTML = "#FDE3A7"}
function colorToMediumTurquoise(){document.getElementById("kode-warna")
   .style.backgroundColor = "#4ECDC4";var e = document.getElementById("colorName");e.innerHTML = "Medium Turquoise",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#4ECDC4"}
function colorToWhiteSmoke(){document.getElementById("kode-warna")
   .style.backgroundColor = "#ECECEC";var e = document.getElementById("colorName");e.innerHTML = "White Smoke",e.style.color = "gray";var o = document.getElementById("colorText");o.style.color = "gray",o.innerHTML = "#ECECEC"}
function colorToLynch(){document.getElementById("kode-warna")
   .style.backgroundColor = "#6C7A89";var e = document.getElementById("colorName");e.innerHTML = "Lynch",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#6C7A89"}
function colorToCrusta(){document.getElementById("kode-warna")
   .style.backgroundColor = "#F2784B";var e = document.getElementById("colorName");e.innerHTML = "Crusta",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#F2784B"}
function colorToJungleGreen(){document.getElementById("kode-warna")
   .style.backgroundColor = "#26C281";var e = document.getElementById("colorName");e.innerHTML = "JungleGreen",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#26C281"}
function colorToHoki(){document.getElementById("kode-warna")
   .style.backgroundColor = "#67809F";var e = document.getElementById("colorName");e.innerHTML = "Hoki",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#67809F"}
function colorToWaxFlower(){document.getElementById("kode-warna")
   .style.backgroundColor = "#F1A9A0";var e = document.getElementById("colorName");e.innerHTML = "WaxFlower",e.style.color = "gray";var o = document.getElementById("colorText");o.style.color = "gray",o.innerHTML = "#F1A9A0"}
function colorToObservatory(){document.getElementById("kode-warna")
   .style.backgroundColor = "#049372";var e = document.getElementById("colorName");e.innerHTML = "Observatory",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#049372"}
function colorToEcstasy(){document.getElementById("kode-warna")
   .style.backgroundColor = "#F9690E";var e = document.getElementById("colorName");e.innerHTML = "Ecstasy",e.style.color = "white";var o = document.getElementById("colorText");o.style.color = "white",o.innerHTML = "#F9690E"}
</script></p><div style='clear:both;'></div>
ثم احفظ الصفحة

2 التعليقات

أزال أحد مشرفي المدونة هذا التعليق.

أسف جداً صديقي محمد لمسح التعليق :( أعرف أنك لاتريد نشر روابط إشهارية
ولكن سامحني هذه شروط التعليق في المدونة,

لقد تم المرور بمدونتك إنها رائعة :ng

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهارية