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

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

معاينة

طريقة تركيب ألوان فلات في صفحة ثابتة

من لوحة التحكم بلوجر
الصفحات ›› انشاء صفحة جديدة
بعد انشاء الصفحة واخفاء التعليقات
حول وضع الصفحة من تأليف الي HTML وضع الكود التالي

<div id="flatublloggr">
<ul class="flatui">
<li style="background: #5C97BF;">Kode Warna #5C97BF</li>
<li style="background: #4B77BE;">Kode Warna #4B77BE</li>
<li style="background: #1F3A93;">Kode Warna #1F3A93</li>
<li style="background: #2574A9;">Kode Warna #2574A9</li>
<li style="background: #67809F;">Kode Warna #67809F</li>
<li style="background: #34495E;">Kode Warna #34495E</li>
<li style="background: #3A539B;">Kode Warna #3A539B</li>
<li style="background: #1E8BC3;">Kode Warna #1E8BC3</li>
<li style="background: #6BB9F0;">Kode Warna #6BB9F0</li>
<li style="background: #22313F;">Kode Warna #22313F</li>
<li style="background: #336E7B;">Kode Warna #336E7B</li>
<li style="background: #19B5FE;">Kode Warna #19B5FE</li>
<li style="background: #89C4F4;">Kode Warna #89C4F4</li>
<li style="background: #2C3E50;">Kode Warna #2C3E50</li>
<li style="background: #3498DB;">Kode Warna #3498DB</li>
<li style="background: #22A7F0;">Kode Warna #22A7F0</li>
<li style="background: #94E0EE;">Kode Warna #94E0EE</li>
<li style="background: #52B3D9;">Kode Warna #52B3D9</li>
<li style="background: #59ABE3;">Kode Warna #59ABE3</li>
<li style="background: #26A65B;">Kode Warna #26A65B</li>
<li style="background: #1E824C;">Kode Warna #1E824C</li>
<li style="background: #2ABB9B;">Kode Warna #2ABB9B</li>
<li style="background: #4DAF7C;">Kode Warna #4DAF7C</li>
<li style="background: #03A678;">Kode Warna #03A678</li>
<li style="background: #26C281;">Kode Warna #26C281</li>
<li style="background: #019875;">Kode Warna #019875</li>
<li style="background: #3FC380;">Kode Warna #3FC380</li>
<li style="background: #16A085;">Kode Warna #16A085</li>
<li style="background: #2ECC71;">Kode Warna #2ECC71</li>
<li style="background: #C5EFF7;">Kode Warna #C5EFF7</li>
<li style="background: #C8F7C5;">Kode Warna #C8F7C5</li>
<li style="background: #049372;">Kode Warna #049372</li>
<li style="background: #36D7B7;">Kode Warna #36D7B7</li>
<li style="background: #66CC99;">Kode Warna #66CC99</li>
<li style="background: #1BA39C;">Kode Warna #1BA39C</li>
<li style="background: #1BBC9B;">Kode Warna #1BBC9B</li>
<li style="background: #65C6BB;">Kode Warna #65C6BB</li>
<li style="background: #BFBFBF;">Kode Warna #BFBFBF</li>
<li style="background: #ABB7B7;">Kode Warna #ABB7B7</li>
<li style="background: #DADFE1;">Kode Warna #DADFE1</li>
<li style="background: #95A5A6;">Kode Warna #95A5A6</li>
<li style="background: #C5DCE2;">Kode Warna #C5DCE2</li>
<li style="background: #BDC3C7;">Kode Warna #BDC3C7</li>
<li style="background: #EEEEEE;">Kode Warna #EEEEEE</li>
<li style="background: #D2D7D3;">Kode Warna #D2D7D3</li>
<li style="background: #F0E2C5;">Kode Warna #F0E2C5</li>
<li style="background: #EB9532;">Kode Warna #EB9532</li>
<li style="background: #E67E22;">Kode Warna #E67E22</li>
<li style="background: #F27935;">Kode Warna #F27935</li>
<li style="background: #F9BF3B;">Kode Warna #F9BF3B</li>
<li style="background: #F7CA18;">Kode Warna #F7CA18</li>
<li style="background: #F9690E;">Kode Warna #F9690E</li>
<li style="background: #F39C12;">Kode Warna #F39C12</li>
<li style="background: #D35400;">Kode Warna #D35400</li>
<li style="background: #F4D03F;">Kode Warna #F4D03F</li>
<li style="background: #F5AB35;">Kode Warna #F5AB35</li>
<li style="background: #EB974E;">Kode Warna #EB974E</li>
<li style="background: #F2784B;">Kode Warna #F2784B</li>
<li style="background: #F4B350;">Kode Warna #F4B350</li>
<li style="background: #E87E04;">Kode Warna #E87E04</li>
<li style="background: #E74C3C;">Kode Warna #E74C3C</li>
<li style="background: #CF000F;">Kode Warna #CF000F</li>
<li style="background: #C0392B;">Kode Warna #C0392B</li>
<li style="background: #D64541;">Kode Warna #D64541</li>
<li style="background: #EF4836;">Kode Warna #EF4836</li>
<li style="background: #96281B;">Kode Warna #96281B</li>
<li style="background: #D91E18;">Kode Warna #D91E18</li>
<li style="background: #E26A6A;">Kode Warna #E26A6A</li>
<li style="background: #FF0000;">Kode Warna #FF0000</li>
<li style="background: #F22613;">Kode Warna #F22613</li>
<li style="background: #E08283;">Kode Warna #E08283</li>
<li style="background: #9B59B6;">Kode Warna #9B59B6</li>
<li style="background: #8E44AD;">Kode Warna #8E44AD</li>
<li style="background: #BE90D4;">Kode Warna #BE90D4</li>
<li style="background: #BF55EC;">Kode Warna #BF55EC</li>
<li style="background: #9A12B3;">Kode Warna #9A12B3</li>
<li style="background: #913D88;">Kode Warna #913D88</li>
<li style="background: #722D6A;">Kode Warna #722D6A</li>
<li style="background: #740A4E;">Kode Warna #740A4E</li>
</ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by blloggr.blogspot.com */
#flatublloggr ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatublloggr ul.flatui li{position:relative;display:flex;float:right;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)}
#flatublloggr ul.flatui li:hover{z-index:4}
#flatublloggr 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)}
#flatublloggr ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatublloggr ul.flatui li:after{content:'Salin kode warna';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}
#flatublloggr ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatublloggr ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatublloggr 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){#flatublloggr ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatublloggr ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatublloggr ul.flatui li{width:100%}}
</style>

في أمان الله