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

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