اضافة صفحة الوان فلات للصفحات الثابتة

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

شرح تركيب الاضافة

1. إتجه إلى الصفحات ثم صفحة جديدة، ضع في العنوان color-flat او color-picker

2. انتقل الى تبويب HTML وضع الكود التالى

<p><center class="button_me" id="button_me"><a class="button button_turquoise" onClick="colorToTurquoise()">تركواز</a><a class="button button_green_sea" onClick="colorToGreenSea()">اخضر</a><a class="button button_emerald" onClick="colorToEmerald()">زمردى</a><a class="button button_nephritis" onClick="colorToNephritis()">جزور</a><a class="button button_peter_river" onClick="colorToPeterRiver()">نهرى</a><a class="button button_belize_hole" onClick="colorToBelizeHole()">ازرق</a><a class="button button_amethyst" onClick="colorToAmethyst()">حجرى</a><a class="button button_wisteria" onClick="colorToWisteria()">بنفسجي</a><a class="button button_wet_asphalt" onClick="colorToWetAsphalt()">ازرق غامق</a><a class="button button_midnight_blue" onClick="colorToMidnightBlue()">ليلي</a><a class="button button_sunflower" onClick="colorToSunflower()">شمسي</a><a class="button button_orange" onClick="colorToOrange()">برتقالى</a><a class="button button_carrot" onClick="colorToCarrot()">جزري</a><a class="button button_white_smoke" onClick="colorToWhiteSmoke()">ابيض</a><a class="button button_pumpkin" onClick="colorToPumpkin()">قرعي</a><a class="button button_alizarin" onClick="colorToAlizarin()">احمر</a><a class="button button_pomegranate" onClick="colorToPomegranate()">قرمزى</a><a class="button button_clouds" onClick="colorToClouds()">سحابى</a><a class="button button_silver" onClick="colorToSilver()">سلڨر</a><a class="button button_concrete" onClick="colorToConcrete()">اسمنتى</a><a class="button button_asbestos" onClick="colorToAsbestos()">رصاصي</a><a class="button button_chestnut_rose" onClick="colorToChestnutRose()">احمر غامق</a><a class="button button_alice_blue" onClick="colorToAliceBlue()">ازرق متجمد</a><a class="button button_spray" onClick="colorToSpray()">لبنى</a><a class="button button_gossip" onClick="colorToGossip()">شعاعى</a><a class="button button_cream_can" onClick="colorToCreamCan()">كريمى</a><a class="button button_silver_tree" onClick="colorToSilverTree()">شجيري فضي</a><a class="button button_cape_honey" onClick="colorToCapeHoney()">عسلي فاتح</a><a class="button button_medium_turquoise" onClick="colorToMediumTurquoise()">تركواز فاتح</a><a class="button button_lynch" onClick="colorToLynch()">رصاصي غامق</a><a class="button button_crusta" onClick="colorToCrusta()">برتقالى فاتح</a><a class="button button_jungle_green" onClick="colorToJungleGreen()">اخضر فاتح</a><a class="button button_hoki" onClick="colorToHoki()">هوكي</a><a class="button button_wax_flower" onClick="colorToWaxFlower()">وردى</a><a class="button button_observatory" onClick="colorToObservatory()">اوب سيرفت</a><a class="button button_ecstacy" onClick="colorToEcstasy()">برتقالى غامق</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{float:none;width:100%;margin-right:0}
.wrap-header{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{line-height:normal;border:1px solid #38424b;padding-top:30px;font-size:28px;color:#999;width:100%;background:#ececec}
section{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="تركواز",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="اخضر",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="زمردى",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="جزور",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="نهرى",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="ازرق",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="حجرى",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="بنفسجي",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="ازرق غامق",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="ليلي",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="شمسي",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="برتقالى",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="جزري",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="قرعي",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="احمر",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="قرمزى",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="سحابى",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="سلڨر",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="اسمنتى",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="رصاصي",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="احمر غامق",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="ازرق متجمد",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="لبنى",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="شعاعى",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="كريمى",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="شجيري فضي",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="عسلي فاتح",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="تركواز فاتح",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="ابيض",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="رصاصي غامق",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="برتقالى فاتح",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="اخضر فاتح",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="هوكي",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="وردي",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="اوب سيرفت",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>

3. اضغط على حفظ، اي مشكلة تواجهك لا تردد فباب التعليقات مفتوح.