بسم الله الرحمان الرحيم.
_السلام عليكم ورحمة الله تعالى وبركاته , اليوم اخواني اخواتي اتيت لكم باضافة رائعة جدا تخص طبعا مدونات بلوجر بتقنة css3 , يمكنك ان تضعها تحت الهيدر او امام الشعار يعني حسب حاجتك .
ولتركيب هاته الاضافة يجب اولا التوجه الى القالب ومن ثم تحرير html , ثم تبحث عن الوسم التالي : ]]></b:skin>
بعد ان تجد الوسم ضع قبله مباشرتا هذا الكود :
"==MBL METRO UI Menu==*/ body { font-family:sans-serif; } a { text-decoration:none; } .mblmetromenu { width:960px; margin:auto; } @media screen and (max-width:960px) { .mblmetromenu { width:100%; } } /* MblMetroMenu */ .MblMetroMenu { position:relative; } .om-nav { position:absolute; width:100%; z-index:999; display:none; } .om-ctrlbar { width:100%; height:48px; } .om-ctrlitems { margin:auto; padding:0px; height:48px; display:inline-block; text-align:center; } .om-ctrlitem { height:48px; width:48px; display:none; cursor:pointer; float:left; opacity:0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha(opacity=50) !important; /* For IE8 and earlier */ } .om-ctrlitem:hover { opacity:0.8; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important; filter: alpha(opacity=80) !important; /* For IE8 and earlier */ } .om-activectrlitem { opacity:1 !important; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; filter: alpha(opacity=100) !important; /* For IE8 and earlier */ } .om-controlitems { width:960px; margin:auto; } .om-controlitem { height:48px; cursor:pointer; } .om-closenav { float:left; } .om-movenext { float:right; } .om-itemholder { margin:auto; padding:20px 0px; } @media screen and (max-width:960px) { .om-closenav { position:absolute; z-index:9999; left:0; top:0; } .om-movenext { position:absolute; z-index:9999; right:0; top:0; } .om-controlitems { width:100%; } .om-itemholder { width:100%; } } .om-centerblock { display:inline-block; } .om-item { display:none; } .om-showitem { margin:5px; float:left; display:none; } /* END MblMetroMenu */ /* TILE BUTTONS */ /* Standar Buttons */ .tile-bt { text-align:center; cursor:pointer; width:90px; height:90px; } .tile-bt a { display:block; padding-top:12px; text-decoration: !important; } .tile-bt img { margin:0 auto 0 auto; padding-bottom:5px; height:48px; width:48px; position:relative; display:block; } .tile-bt span { font-size:12px; padding-bottom:10px; display:block; } .tile-bt:active { opacity:0.5; } /* End Standard Buttons */ /* Large Buttons */ .tile-bt-large { width:190px; height:90px; line-height:90px; text-align:center; cursor:pointer; } .tile-bt-large a { display:block; text-decoration: !important; } .tile-bt-large img { vertical-align: middle; margin:auto; padding:0px; position:relative; width:48px; height:48px; } .tile-bt-large span { vertical-align: middle; display:inline; } .tile-bt-large:active { opacity:0.5; } /* End Large Buttons */ /* Extralarge Buttons */ .tile-bt-extralarge { text-align:center; cursor:pointer; width:190px; height:190px; } .tile-bt-extralarge a { display:block; padding-top:52px; text-decoration: !important; } .tile-bt-extralarge img { margin:0 auto 0 auto; padding-bottom:22px; height:80px; width:80px; position:relative; display:block; } .tile-bt-extralarge span { font-size:14px; padding-bottom:20px; display:block; } .tile-bt-extralarge:active { opacity:0.5; } /* End Extralarge Buttons */ /* END TILE BUTTONS */ /* SHADOW LIST */ .shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red { /*display:inline-block;*/ } .shadow-white:hover { box-shadow:0px 0px 6px 3px #fff; -webkit-box-shadow:0px 0px 6px 3px #fff; -moz-box-shadow:0px 0px 6px 3px #fff; -o-box-shadow:0px 0px 6px 3px #fff; -ms-box-shadow:0px 0px 6px 3px #fff; } .shadow-blue:hover { box-shadow:0px 0px 6px 3px #38D1F7; -webkit-box-shadow:0px 0px 6px 3px #38D1F7; -moz-box-shadow:0px 0px 6px 3px #38D1F7; -o-box-shadow:0px 0px 6px 3px #38D1F7; -ms-box-shadow:0px 0px 6px 3px #38D1F7; } .shadow-green:hover { box-shadow:0px 0px 6px 3px #AACA37; -webkit-box-shadow:0px 0px 6px 3px #AACA37; -moz-box-shadow:0px 0px 6px 3px #AACA37; -o-box-shadow:0px 0px 6px 3px #AACA37; -ms-box-shadow:0px 0px 6px 3px #AACA37; } .shadow-red:hover { box-shadow:0px 0px 6px 3px #E81750; -webkit-box-shadow:0px 0px 6px 3px #E81750; -moz-box-shadow:0px 0px 6px 3px #E81750; -o-box-shadow:0px 0px 6px 3px #E81750; -ms-box-shadow:0px 0px 6px 3px #E81750; } .shadow-black:hover { box-shadow:0px 0px 6px 3px #444; -webkit-box-shadow:0px 0px 6px 3px #444; -moz-box-shadow:0px 0px 6px 3px #444; -o-box-shadow:0px 0px 6px 3px #444; -ms-box-shadow:0px 0px 6px 3px #444; } /* END SHADOW LIST */ /* BACKGROUND LIST */ /* Solid Colors */ .solid-blue { background:#00BBE2; } .solid-blue-2 { background:#2C84EE; } .solid-darkblue { background:#044E94; } .solid-violetred { background:#781766; } .solid-red { background:#E51400;} .solid-red-2 { background:#E81750; } .solid-pink { background:#FF539B; } .solid-purple { background:#D02090; } .solid-orange { background:#FB8F02; } .solid-orange-2 { background:#FF6600; } .solid-orange-3 { background:#DD5F37; } .solid-coral { background:#CD5B45; } .solid-green { background:#67B239; } .solid-green-2 {background:#96BF01; } .solid-darkgreen { background:#016C38; } .solid-olive { background:#999900} .solid-grass { background:#CDCD00; } .solid-darkred { background:#5F0000; } .solid-gold { background:#FEE9AE; } .solid-yellow { background:#F7D100; } .solid-black { background:#000; } .solid-smoke { background:#F5F5F5; } /* End Solid Colors */ /* MISC */ .clearspace { clear: both; } .floatleft { float:left; } .floatright { float:right; } .none { display: none !important; width:0px !important; } .light-text { color:#fff; } .dark-text { color:#1e1e1e; } .gradient { background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */ background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */ } .margin-5 { margin:5px; } drek7 SOFT MASR http://abdothe7.blogspot.com/2013/11/css3.html#ixzz34bb6XgWc"
_بعدها مباشرتا قم بحفظ القالب , وهاته الخطوة هي مهمة حيث تدمج css بقالبك كان هذا الجزء الاول , اما الجزء الثاني فتذهب الى تخطيط ومن ثم اضافة اداة ثم تختار ثم اختر : HTML/Javascript.
ثم ضع الكود التلي مباشرة واضغط حفظ :
- mblmetromenu --> <div class="mblmetromenu"> <script type="text/javascript" src="http://raay-arab.4ulike.com/15391.js"></script> <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFIilN1DUqZ2_puhulos2gdGyTXTdafMOxWd5Y39zMgL6sJj1Ktxxz0816pd996_kH6Rg4MV4oBzU76txDUq0ntVl9ufXx_HfmslR5Hpc4nKUSyxSUNtCPAP9hSANx6711I53Cx55pyA/s1600/home.png" alt="" /><span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGT3Mz380PBENtw78-p70wfPbtR2-5n44_2eEO8jyhwiyKkxoKDlV2JlLT6YhOKbOui7rrW29x1j9tYqFVumRm493bz4o2WqunuiVmQz7hcAAfBIioYgUAIroJoHzAzoDz_0aZj4wIzCE/s1600/messanger.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkgHQwiA3d1QYx8bnCUoshRVKLcg5W0iHB2iLbEIc3TGC3by1mZyAYYgc6UQfV-rPzoqOyb10r_fDSZHDEzQuCBXv87quZh6a-MEvq4SpkSvY-LeO_Nwm_vCQS7eo5eSjvobiQDt_BRI/s1600/rss.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu"> <a href="#"class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4n5HutUNwqsmD2J5hfPZJ8Bj_675C3e2H6KnP7932L_qNYpQEbJia7FnH0jjMYJyWCwKc3ppHTYHHggwnbX5VSSzzJKw1vei3EXZun7iEXI7uGvuX9AiL3rGF3nuPYw_aWEyXIeldPA/s1600/search.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNEiQfgOuY7khL7S7G_oRvAMOpzX1wt3Dxvd1S3qJBD4lOunKIquWde6MaRUkNugHYx2ODWnoIU_hDqDUvBWymsd-ARjrQ7kTL6xLw0wL9cChdCNnWcnBddinbwbabzvTLvo2hqLVIws/s1600/mail.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQjPeLZkcsN12CYprb7vRzWa0Adu4OPNfB_FNM2WG8tY1O9raPcgdpTN2lVjDrWjTUZQ99KzsCJjJCDS4ENj8Wz5R68-oJ0kFhXkoEC36dPkUEZ74Cetsi2XAFm2Xg19YhCpZnwjiyiw/s1600/help.pn" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRy9tuKcB9Ggu6uC7iMyyh-dzTyeBGV_dK35xXOHVA1YjldskP-1F5A3G1M1qA5Oww6BCLehQRFNTfjU_OmCF7X_6CrlKv6tUUrKLVUrP3ICWGvap4JAj4t9jFaydQj7pqNtehobxWRa4/s1600/youtbe.png" alt="" /><span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0TPoA3kbqZs6gpIyvxolIIZN5rC4rdRaNQowZ-EM886dYwjdKfAI7vC2TQZsoB79HXWz9ihz6Zv3tjbX8_yjzDoemqK133tnOsD6y3rmO3t1bfkZfzNKE1v07HjGki9cvSkvcyZ6oY4/s1600/face.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxrQv3lRd8861pZ5och7jJta-aPfWYqqFEevZLtBkhPzP9NzQYFYwNxSt259zOBINgWTXxcGZy0iYWWWr0nwgZIE49Sng8HbIpuQi25xJ4TL8Dnzdwm1Z20e5XBBu5cD8F8pkg7fxDsQ/s1600/photo.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu"> <a href="#"class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4nYaUsjVWV7NszroXtQdgiYDvY_xYXrM6sWlz0UfB9PSRe4aVcPxqkZwIEurLji143dHRVT_428Hx5YMfaQg1tSFNPcZoNkRqrp9ZihO2l12l5mmkjYoEqkHWvXX42QPZqrx_Qh5YPVQ/s1600/music.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"> <a href="http://konozblog.blogspot.com" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbJ28nof3y40I5eK31SNhNUodHNXTJnCJsOzA94ocrXQoPGvFQUVK2siCVZgsIOi5hlVPtAlzaloIskZ3q7RRFT6eS3IFz828OAv5l_-EGpRCf74KqWTcnNMdUZfXj5ZvmuJeDx30U8w/s1600/MBL.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <!-- End MblMetroMenu --> </div> <!-- END mblmetromenu -->
_ وماعليك سوى بعدها التعديل عليه بروابط مدونتك واضافة الصور التي تريدها الى اخر .
_ كان هاذا هو درسنا لنهار اليوم نرجوا انه اعجبكم , لا تنسوا مشاركتنا بتعليقاتكم سلام .
مصدر الاضافة من اضافات بلوجر .
_بعدها مباشرتا قم بحفظ القالب , وهاته الخطوة هي مهمة حيث تدمج css بقالبك كان هذا الجزء الاول , اما الجزء الثاني فتذهب الى تخطيط ومن ثم اضافة اداة ثم تختار ثم اختر : HTML/Javascript.
ثم ضع الكود التلي مباشرة واضغط حفظ :
- mblmetromenu --> <div class="mblmetromenu"> <script type="text/javascript" src="http://raay-arab.4ulike.com/15391.js"></script> <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNFIilN1DUqZ2_puhulos2gdGyTXTdafMOxWd5Y39zMgL6sJj1Ktxxz0816pd996_kH6Rg4MV4oBzU76txDUq0ntVl9ufXx_HfmslR5Hpc4nKUSyxSUNtCPAP9hSANx6711I53Cx55pyA/s1600/home.png" alt="" /><span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGT3Mz380PBENtw78-p70wfPbtR2-5n44_2eEO8jyhwiyKkxoKDlV2JlLT6YhOKbOui7rrW29x1j9tYqFVumRm493bz4o2WqunuiVmQz7hcAAfBIioYgUAIroJoHzAzoDz_0aZj4wIzCE/s1600/messanger.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkgHQwiA3d1QYx8bnCUoshRVKLcg5W0iHB2iLbEIc3TGC3by1mZyAYYgc6UQfV-rPzoqOyb10r_fDSZHDEzQuCBXv87quZh6a-MEvq4SpkSvY-LeO_Nwm_vCQS7eo5eSjvobiQDt_BRI/s1600/rss.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu"> <a href="#"class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4n5HutUNwqsmD2J5hfPZJ8Bj_675C3e2H6KnP7932L_qNYpQEbJia7FnH0jjMYJyWCwKc3ppHTYHHggwnbX5VSSzzJKw1vei3EXZun7iEXI7uGvuX9AiL3rGF3nuPYw_aWEyXIeldPA/s1600/search.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNEiQfgOuY7khL7S7G_oRvAMOpzX1wt3Dxvd1S3qJBD4lOunKIquWde6MaRUkNugHYx2ODWnoIU_hDqDUvBWymsd-ARjrQ7kTL6xLw0wL9cChdCNnWcnBddinbwbabzvTLvo2hqLVIws/s1600/mail.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQjPeLZkcsN12CYprb7vRzWa0Adu4OPNfB_FNM2WG8tY1O9raPcgdpTN2lVjDrWjTUZQ99KzsCJjJCDS4ENj8Wz5R68-oJ0kFhXkoEC36dPkUEZ74Cetsi2XAFm2Xg19YhCpZnwjiyiw/s1600/help.pn" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRy9tuKcB9Ggu6uC7iMyyh-dzTyeBGV_dK35xXOHVA1YjldskP-1F5A3G1M1qA5Oww6BCLehQRFNTfjU_OmCF7X_6CrlKv6tUUrKLVUrP3ICWGvap4JAj4t9jFaydQj7pqNtehobxWRa4/s1600/youtbe.png" alt="" /><span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0TPoA3kbqZs6gpIyvxolIIZN5rC4rdRaNQowZ-EM886dYwjdKfAI7vC2TQZsoB79HXWz9ihz6Zv3tjbX8_yjzDoemqK133tnOsD6y3rmO3t1bfkZfzNKE1v07HjGki9cvSkvcyZ6oY4/s1600/face.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxrQv3lRd8861pZ5och7jJta-aPfWYqqFEevZLtBkhPzP9NzQYFYwNxSt259zOBINgWTXxcGZy0iYWWWr0nwgZIE49Sng8HbIpuQi25xJ4TL8Dnzdwm1Z20e5XBBu5cD8F8pkg7fxDsQ/s1600/photo.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu"> <a href="#"class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4nYaUsjVWV7NszroXtQdgiYDvY_xYXrM6sWlz0UfB9PSRe4aVcPxqkZwIEurLji143dHRVT_428Hx5YMfaQg1tSFNPcZoNkRqrp9ZihO2l12l5mmkjYoEqkHWvXX42QPZqrx_Qh5YPVQ/s1600/music.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"> <a href="http://konozblog.blogspot.com" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitbJ28nof3y40I5eK31SNhNUodHNXTJnCJsOzA94ocrXQoPGvFQUVK2siCVZgsIOi5hlVPtAlzaloIskZ3q7RRFT6eS3IFz828OAv5l_-EGpRCf74KqWTcnNMdUZfXj5ZvmuJeDx30U8w/s1600/MBL.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <!-- End MblMetroMenu --> </div> <!-- END mblmetromenu -->
_ وماعليك سوى بعدها التعديل عليه بروابط مدونتك واضافة الصور التي تريدها الى اخر .
_ كان هاذا هو درسنا لنهار اليوم نرجوا انه اعجبكم , لا تنسوا مشاركتنا بتعليقاتكم سلام .
مصدر الاضافة من اضافات بلوجر .
