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

السلام عليكم .... �� , كثيراً من يلاحظ بعض المدونات تمتلك صفحة ثابته بمدونتها بأسم " الوان فلات " او صفحة الالوان او غير ذالك , اليوم سوف اشرح لكم كيفية اضافة هذه الصفحة في مدونتك وبأفضل الوان الفلات �� الاحترافية وبتاثيرات احترافي ✨ , غاية في الروعةقمنا بتجربتها في مدونتنا ونالت اعجاب الكثير واليوم نشرحها لكم بالتفصيل
اليك المعاينة �� قبل شرح الاضافة .

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

الكود

<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 http://www.pro7web.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>

> ثم قم بحفظ الصفحة , ومبروك عليك صفحة الوان فلات بشكل احترافي ومتوافق .

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

رسالة!

السلام عليكم ، المدونة للبيع مع الصفحة الخاصة بها على الفيسبوك + حساب ادسنس عادي مربوط بها كما ان الددومين متوفر الى 7/2018 ويمكن تجديدة ، توجد طرق عديدة للدفع بأذن الله ويمكننا التعمال من خلال خمسات ان احببت كوسيط

لمن يهمة الامر يراسلني على حسابي علي الفيسبوك من هنا

المشاركات الشائعة

أحدث التعليقات

تم النسخ