بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
في هذا اليوم اقدم لكم اضافة كبيرة يحتاجها المدونون
عند التصميم دائما وهي الالوان فلات الجذابة
اترك لكم المعاينة والكود حتى لا اطيل عليكم الموضوع
-------------------------------------------------------------
تصميم محمد السراي
اقدم لكم كل شيء لمساعدة مدونين العرب
طريقة الاضافة
- توجه الى بلوجر
- اضغط على الصفحات ستجدها باليمين
- اضغط اضافة صفحة جديدة
- ومن ثم اضغط html
- اضف الكود التالي في المربع
<div dir="rtl" style="text-align: right;" trbidi="on"> <div class="post-body entry-content" id="post-body-3219315029844364067" itemprop="description articleBody"> <style> #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; } </style> <br /> <div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: center;"> <span style="color: red; font-size: large;">ا</span><span style="color: orange; font-size: large;">لـ</span><span style="color: yellow; font-size: large;">و</span><span style="color: lime; font-size: large;">ا</span><span style="color: cyan; font-size: large;">ن</span><span style="font-size: large;"> </span><span style="color: blue; font-size: large;">فـ</span><span style="color: purple; font-size: large;">لا</span><span style="color: magenta; font-size: large;">ت</span><br /> <span style="font-size: large;"><span style="color: magenta;"><br /></span></span> <span style="font-size: large;">-------------------------</span><br /> <form style="background: url(http://subtlepatterns.com/patterns/symphony.png); height: 100%; left: 0px; position: fixed; top: -19px; width: 100%; z-index: 999;"> </form> <div dir="rtl" style="left: -239px; position: absolute; text-align: right; top: -311px; z-index: 9999;" trbidi="on"> <br /> <span style="font-size: large;"><span style="color: magenta;"><br /></span></span> <span style="font-size: large;"><span style="color: magenta;"><br /></span></span> <br /> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #131426; color: white; font-family: stc, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #131426</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #15589E; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #15589E</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #1B1B1B; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #1B1B1B</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #1B1C1E; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #1B1C1E</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #232323; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #232323</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #232A2B; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #232A2B</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #277FBF; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #277FBF</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2A2A2A; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2A2A2A</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2A7BBA; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2A7BBA</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2D2D2D; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2D2D2D</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2D3E50; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2D3E50</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2D3E52; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2D3E52</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2F3E48; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2F3E48</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #2FCDB4; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #2FCDB4</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #32425C; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #32425C</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #363F48; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #363F48</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #3D3D45; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #3D3D45</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #3DA3A2; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #3DA3A2</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #40A5C3; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #40A5C3</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #440136; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #440136</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #459BB6; color: white; font-family: stc; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #459BB6</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #47AADD; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #47AADD</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #4C5262; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #4C5262</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #4EA88F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #4EA88F</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #50419D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #50419D</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #61767D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #61767D</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #69C3A0; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #69C3A0</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #702E90; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #702E90</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #758D7D; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #758D7D</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #77BAB1; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #77BAB1</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #7ACCC8; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #7ACCC8</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #84267E; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #84267E</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #88B922; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #88B922</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #932256; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #932256</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #ABD6BA; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #ABD6BA</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #AF2C0E; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #AF2C0E</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #B0D9F5; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> <span style="color: black;">#B0D9F5</span></div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #D49E99; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #D49E99</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #D81E28; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #D81E28</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #DC3C48; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #DC3C48</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #E2614C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #E2614C</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #E56967; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #E56967</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F0F0F0; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> <span style="color: #888888;">#F0F0F0</span></div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F14E4F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F14E4F</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F1A744; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F1A744</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F3F3EB; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> <span style="color: #888888;">#F3F3EB</span></div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F48067; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F48067</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F4F4F4; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> <span style="color: #888888;">#F4F4F4</span></div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F6D66F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F6D66F</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F7C56C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F7C56C</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F8823C; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F8823C</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F8C492; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #F8C492</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #FA6800; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #FA6800</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #FCD475; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #FCD475</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #FDC800; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #FDC800</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #FEED48; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> <span style="color: black;">#FEED48</span></div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #FF8850; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #FF8850</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #FFB900; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> #FFB900</div> </div> </div> </div> <div style="background: #fff; float: left; margin: 0 auto; padding: 7px;"> <div style="background: #F4EF6F; color: white; font-family: Verdana, sans-serif; font-size: 20px; height: 118px; overflow: hidden; padding: 10px; width: 118px;"> <div class="uihover"> <div style="text-align: center;"> <span style="color: black;">#F4EF6F</span></div> </div> </div> </div> <style scoped="" type="text/css"> .uihover{overflow:hidden;opacity:0;width:100%;height:100%;transform:scale(1.0);transition: all 0.3s ease-Out;} .uihover:hover{opacity:1;transform:scale(1.0);} .uihover::before {font-size:11px;content:'انقر هنا للنسج';position:absolute;bottom:0; padding:4px 8px;left:0;right:0;color:#fff;display:block;margin:0;font-weight:400; background:rgba(0,0,0,0.3);border-radius:3px;opacity:0.8;transform:translate(0,80px);overflow:hidden;transition:all 0.3s ease-Out;transition-delay:0.5s;} .uihover:hover::before {transform:translate(0,0);} .post-inner {padding:0 0 0 0;margin:0 auto;} </style> <br /> <div style="clear: both;"> </div> <div style="clear: both;"> </div> </div> </div> </div> </div> </div>
ثم اضغط نشر واعرضها واعطينا النتيجة
-----------------
والسلام عليكم ورحمة الله وبركاته
نلتقيكم بالموضوع القادم
0 التعليقات:
إرسال تعليق