‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات بلوجر. إظهار كافة الرسائل

الاثنين، 12 ديسمبر 2016

اضافة صندوق طلب الخدمات على خمسات


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


طريقة التركيب

  1. أول خطوة عليك فتح قالب المدونة
  2. والبحث عن الوسم ]]></b:skin>
  3. ثم قم بوضع هذا الكود فوقه مباشرة

/* ------------------------------
* Header khamssat by Nak1ha
  http://nak1ha.blogspot.com/
* ------------------------------ */
.radio-info1 {
    text-align: center;
    font-size: 26px;
}
.radio-side1 {
    border-bottom: 5px solid #dd2f2f;
    border-top: 5px solid #dd2f2f;
    width: 100%;
    height: 304px;
    padding: 17px;
background: #444444 url(//khamsat.hsoubcdn.com/assets/splash-7531fc6a7a3f995f040e4b83a2309ed1.jpg) fixed;    color: #fff;
}
.radio-name1 {
    margin-top: 18.5px;
    margin-bottom: 22px;
    text-align: center;
}
.radio-name1 .fa {
    font-size: 69px;
 color: #fff;
}
.radio-button1 .button {
    padding: 8px 18px;
    background: #FFFFFF;
    color: #444444;
    border-radius: 4px;
    border: 3px solid #FFF;
    transition: all 0.4s ease;
    font-size: 16px;
}
.radio-button1 {
margin-top: 50px;
}
.radio-button1 .button:hover {
    background: #444444;
    color: #fff;
 transition: all 0.4s ease;
}




  1. في الخطوة الثانية عليك ان تركز معي فيها جيدا
  2. أولا عليك الاختيار أين ستضع الاضافة هل فوق الفوتر أو  في السايدبار ثم اتبع الشرح الآتي

 فوق الفوتر

01-اذن ان كنت اخترت وضع الاضافة فوق الفوتر عليك البحث عن هذا الوسم 'footer وتقوم بوضع هذا الكود قبله مباشرةثم اعمل حفظ للقالب


<div class='radio-side1'>
<div class='radio-name1'>
  <img alt='' class='quott' src='http://f.top4top.net/p_297245181.png'/></div>
<div class='radio-info1'>
<b style='font-size: 20px;'>اكتشف آخر الأعمال والخدمات التي أقدمها على خمسات</b>
<div class='radio-button1'>
<a class='button' href='https://khamsat.com/' target='_blank'>
<i aria-hidden='true' class='fa fa-money'/>
            طلب خدماتى
          </a>
</div>
</div>
</div>

في السايدبار

أما ان كنت اخترت بأن تضع الاضافة في السايدبار
فعليك حفظ القالب والاتجاه مباشرة للتخطيط وضع فيها تلك الاكواد التي في الفوق
ثم حفظ







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

              https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-cVoXWwjYhvn5ynvRo8lL1LigLL5-RKJVXoAbJ_SBHRD-fodjRe6n2rBiYyhRYeQV73K0kzava-ArlPIqvFrsOTN5geAmE6Ezdjh0PIL23ifdgq2TPAHWIl1nccJjpVvps1qAbqKr8s/s640/

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


              شرح طريقة التركيب


              1. انتقل إلى لوح تحكم مدونتك،
              1. إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
              1. والآن الصق داخل المستطيل الكود التالي :


              <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">
              #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>