كيفية إضافة صفحة ألوان فلات لمدونة بلوجر

كيفية إضافة صفحة ألوان فلات لمدونة بلوجر

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

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

اليوم سوف نتعرف في كيفية إضافة صفحة ألوان فلات لمدونة بلوجر بطريقة جد سهلة وغير معقدة ، نعم غير معقدة وتحتاج الى نسخ ولصق فقط دون الدخول الى تحريرHTML اضافة CSS والعمل الشاق ، وتكون هذه العملية افضل واحسن في الصفحة دون نشرها في المشاركات ، لان الصفحة غالبا تكون اوسع من المشاركة وتكون لها ارشفة جيدة ايضا ، والان نترككم مع احلى اضافة .

كيفية إضافة صفحة ألوان فلات لمدونة بلوجر :

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

كما يمكنك ايضا اضافتها في التخطيط في اضافة اداة JavaScript HTML

- معاينة صفحة ألوان فلات من هنا

<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="flatuarlina">
<ul class="flatui">
<li style="background: #5C97BF;">كود اللون #5C97BF
</li>
<li style="background: #4B77BE;">كود اللون #4B77BE
</li>
<li style="background: #1F3A93;">كود اللون #1F3A93
</li>
<li style="background: #2574A9;">كود اللون #2574A9
</li>
<li style="background: #67809F;">كود اللون #67809F
</li>
<li style="background: #34495E;">كود اللون #34495E
</li>
<li style="background: #3A539B;">كود اللون #3A539B
</li>
<li style="background: #1E8BC3;">كود اللون #1E8BC3
</li>
<li style="background: #6BB9F0;">كود اللون #6BB9F0
</li>
<li style="background: #22313F;">كود اللون #22313F
</li>
<li style="background: #336E7B;">كود اللون #336E7B
</li>
<li style="background: #19B5FE;">كود اللون #19B5FE
</li>
<li style="background: #89C4F4;">كود اللون #89C4F4
</li>
<li style="background: #2C3E50;">كود اللون #2C3E50
</li>
<li style="background: #3498DB;">كود اللون #3498DB
</li>
<li style="background: #22A7F0;">كود اللون #22A7F0
</li>
<li style="background: #94E0EE;">كود اللون #94E0EE
</li>
<li style="background: #52B3D9;">كود اللون #52B3D9
</li>
<li style="background: #59ABE3;">كود اللون #59ABE3
</li>
<li style="background: #26A65B;">كود اللون #26A65B
</li>
<li style="background: #1E824C;">كود اللون #1E824C
</li>
<li style="background: #00B16A;">كود اللون #00B16A
</li>
<li style="background: #2ABB9B;">كود اللون #2ABB9B
</li>
<li style="background: #4DAF7C;">كود اللون #4DAF7C
</li>
<li style="background: #03A678;">كود اللون #03A678
</li>
<li style="background: #26C281;">كود اللون #26C281
</li>
<li style="background: #019875;">كود اللون #019875
</li>
<li style="background: #3FC380;">كود اللون #3FC380
</li>
<li style="background: #16A085;">كود اللون #16A085
</li>
<li style="background: #2ECC71;">كود اللون #2ECC71
</li>
<li style="background: #C5EFF7;">كود اللون #C5EFF7
</li>
<li style="background: #C8F7C5;">كود اللون #C8F7C5
</li>
<li style="background: #049372;">كود اللون #049372
</li>
<li style="background: #36D7B7;">كود اللون #36D7B7
</li>
<li style="background: #66CC99;">كود اللون #66CC99
</li>
<li style="background: #1BA39C;">كود اللون #1BA39C
</li>
<li style="background: #1BBC9B;">كود اللون #1BBC9B
</li>
<li style="background: #65C6BB;">كود اللون #65C6BB
</li>
<li style="background: #BFBFBF;">كود اللون #BFBFBF
</li>
<li style="background: #ABB7B7;">كود اللون #ABB7B7
</li>
<li style="background: #DADFE1;">كود اللون #DADFE1
</li>
<li style="background: #95A5A6;">كود اللون #95A5A6
</li>
<li style="background: #C5DCE2;">كود اللون #C5DCE2
</li>
<li style="background: #BDC3C7;">كود اللون #BDC3C7
</li>
<li style="background: #EEEEEE;">كود اللون #EEEEEE
</li>
<li style="background: #D2D7D3;">كود اللون #D2D7D3
</li>
<li style="background: #F0E2C5;">كود اللون #F0E2C5
</li>
<li style="background: #EB9532;">كود اللون #EB9532
</li>
<li style="background: #E67E22;">كود اللون #E67E22
</li>
<li style="background: #F27935;">كود اللون #F27935
</li>
<li style="background: #F9BF3B;">كود اللون #F9BF3B
</li>
<li style="background: #F7CA18;">كود اللون #F7CA18
</li>
<li style="background: #F9690E;">كود اللون #F9690E
</li>
<li style="background: #F39C12;">كود اللون #F39C12
</li>
<li style="background: #D35400;">كود اللون #D35400
</li>
<li style="background: #F4D03F;">كود اللون #F4D03F
</li>
<li style="background: #F5AB35;">كود اللون #F5AB35
</li>
<li style="background: #EB974E;">كود اللون #EB974E
</li>
<li style="background: #F2784B;">كود اللون #F2784B
</li>
<li style="background: #F4B350;">كود اللون #F4B350
</li>
<li style="background: #E87E04;">كود اللون #E87E04
</li>
<li style="background: #E74C3C;">كود اللون #E74C3C
</li>
<li style="background: #CF000F;">كود اللون #CF000F
</li>
<li style="background: #C0392B;">كود اللون #C0392B
</li>
<li style="background: #D64541;">كود اللون #D64541
</li>
<li style="background: #EF4836;">كود اللون #EF4836
</li>
<li style="background: #96281B;">كود اللون #96281B
</li>
<li style="background: #D91E18;">كود اللون #D91E18
</li>
<li style="background: #E26A6A;">كود اللون #E26A6A
</li>
<li style="background: #FF0000;">كود اللون #FF0000
</li>
<li style="background: #F22613;">كود اللون #F22613
</li>
<li style="background: #E08283;">كود اللون #E08283
</li>
<li style="background: #9B59B6;">كود اللون #9B59B6
</li>
<li style="background: #8E44AD;">كود اللون #8E44AD
</li>
<li style="background: #BE90D4;">كود اللون #BE90D4
</li>
<li style="background: #BF55EC;">كود اللون #BF55EC
</li>
<li style="background: #9A12B3;">كود اللون #9A12B3
</li>
<li style="background: #913D88;">كود اللون #913D88
</li>
<li style="background: #722D6A;">كود اللون #722D6A
</li>
<li style="background: #740A4E;">كود اللون #740A4E
</li>
</ul>
</div>
<style scoped="" type="text/css">
#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>