إضافة اليوم على هى إضافة إضافة أداة مكتبة أكواد الألوان فى بلوجر هى إَافة بسيطه ولكن مفيده لمصممى القوالب فهذه الإضافة تسهل فى عملية اختيار الألوان ومع هذه الإضفة سوف يكون تصممك اسهل واسرع وهذا الإضافة يتم وضعها فى صفحة خاصة فى بلوجر وهى سهلت التركيب ويمكنك مشاهده المعاينة من الرابط التالى .
تركيب الإضافة
الإَضافة سهلة التركيب وهى عبارة عن كود واحد فقط وهذا الكود يتم وضعه فى وضع الـHTML فى صفحة جديده على مدونتك .
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="flatuarlina">
<ul class="flatui">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #5C97BF</span>
</li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #4B77BE</span>
</li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1F3A93</span>
</li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2574A9</span>
</li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #67809F</span>
</li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #34495E</span>
</li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #3A539B</span>
</li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1E8BC3</span>
</li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #6BB9F0</span>
</li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #22313F</span>
</li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #336E7B</span>
</li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #19B5FE</span>
</li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #89C4F4</span>
</li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2C3E50</span>
</li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #3498DB</span>
</li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #22A7F0</span>
</li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #94E0EE</span>
</li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #52B3D9</span>
</li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #59ABE3</span>
</li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #26A65B</span>
</li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1E824C</span>
</li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #00B16A</span>
</li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2ABB9B</span>
</li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #4DAF7C</span>
</li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #03A678</span>
</li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #26C281</span>
</li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #019875</span>
</li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #3FC380</span>
</li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #16A085</span>
</li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2ECC71</span>
</li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C5EFF7</span>
</li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C8F7C5</span>
</li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #049372</span>
</li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #36D7B7</span>
</li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #66CC99</span>
</li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1BA39C</span>
</li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1BBC9B</span>
</li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #65C6BB</span>
</li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BFBFBF</span>
</li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #ABB7B7</span>
</li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #DADFE1</span>
</li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #95A5A6</span>
</li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C5DCE2</span>
</li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BDC3C7</span>
</li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EEEEEE</span>
</li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D2D7D3</span>
</li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F0E2C5</span>
</li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EB9532</span>
</li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E67E22</span>
</li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F27935</span>
</li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F9BF3B</span>
</li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F7CA18</span>
</li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F9690E</span>
</li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F39C12</span>
</li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D35400</span>
</li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F4D03F</span>
</li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F5AB35</span>
</li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EB974E</span>
</li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F2784B</span>
</li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F4B350</span>
</li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E87E04</span>
</li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E74C3C</span>
</li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #CF000F</span>
</li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C0392B</span>
</li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D64541</span>
</li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EF4836</span>
</li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #96281B</span>
</li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D91E18</span>
</li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E26A6A</span>
</li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #FF0000</span>
</li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F22613</span>
</li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E08283</span>
</li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #9B59B6</span>
</li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #8E44AD</span>
</li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BE90D4</span>
</li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BF55EC</span>
</li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #9A12B3</span>
</li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #913D88</span>
</li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #722D6A</span>
</li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #740A4E</span>
</li>
</ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by www.arlinadzgn.com */
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui li:after{content:'اضغط مرتين لنسخ الكود';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style></div>
وكما قلنا هذه الإضافة بسيطه جدا وهذا كل شئ فى هذا الموضوع اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)
المصدر عالم المدون
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).