متطلبات التركيب
الخطوات التالي هي مثالية بالنسبة للمبتدئين الذين لديهم أقل عن معرفة لغة HTML الإرشادات التالية هي واضحة للغاية بحيث يمكن لأي شخص بسهولة تطبيقها. اتبع التعليمات التالية بشكل صحيح.
الخطوة الأولي: إضافة الجزء الأول CSS:
انتقل إلى لوحة التحكم توجه إلى صفحة >> القالب > ثم> تحرير HTML .
قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. اشر علامة توسيع قوالب .الآن في البحث عن ]]></b:skin> ثم قبله مباشرة ألصق الكود الآتي:
للبحث اضغط على CTRL+F
كود بلغة HTML:
/*===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; }
ثم قم بحفظ القالب ، الآن دمجنا جزء CSS في قالب دعونا نرى كيفية استخدامها.الخطوة الثانية: الجزء الثاني HTML: في قائمة تحكم مدونتك توجه إلى تخطيط و أضف أدات HTML/Javascript و ألصق فيها الكود التالي في المكان الذي تريد أن تظهر فيه الإضافة.
كود بلغة HTML:
<!-- 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/AVvXsEgfCcPe8uMA6d9MxblOUwirJir4S44HvjrQdKX68qnbUwHLv8pvH2kGuQ8t1v98w-zOEeXieqz9U-1jRh07S1lc1AWtwXMfYcuj-mMgXOS1O_KDsdL7ZOCrHRh-Wrn1KkGbABh4-6AW3kE/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/AVvXsEizEXVk9xSfd1akNPYHxVGiKn2m3EXD5UM4apESlnbw-ZgPMwGOa4MnaNS5sPr-oMW2B-dfoaZGYwr7G_GyNfoNi7nVvdLgN8KPfWLXO_GXHfzmk27s5R9yPvAOhLmbUpG_n1IieJ8LZ9I/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/AVvXsEgLlBjCeVN7wp3n9jpSYVe2FSMbtExuL8cMN5kfo_cpgIjvNlCYlCoObw1o2YNKmBnkbHoLjuUZj2IFW7erUX-OgxZRD-6ZSkZ5UVrD00iboXqjAPgVHYBlFwaiPtPWeLoGzItIeAWlJbs/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/AVvXsEjsvCZHlOlALiOOwlsKkGcb-JcovAkUS7Pgo9NWMUyVaEWC1c9KP1fLdAkZdOkzn4cpmR-i-kg_KMnQ7Yi3UGmWspYz-hxVBeVeiRvCVMkWprO38HIpntFMHnUl0pcxAtIGTlYsKcAWtwQ/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/AVvXsEiUxg41aAi166OfSgFN3Gx8kq23VbEdkz3tOmplkYLwEmpxQivAZvsC8Klo3i9uHupBk71m1UPvzv67NSp80mMK9HtkjCjfOhQJDk-ScgE52LIlsBPFTuCRmahg0qwv_HH9c2IlX6Vl1Nc/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/AVvXsEhSgwXnncfru98incG6xb_n_6GLADK8exAOUbpRIzGfHPnD4b63gM40Hjio7vA-F57Q_Tc7O_PiFQSOfH3VN8yXPNmKy5RHwXYvBithyabOU-A0fOMRInS7KYseO62hax6sbOVVsbtpi-o/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/AVvXsEgCFFX94AzhPojBVOI88Y7F0jZoBh8lWACt5fXS4hfN9Bbyyz7AeL9_KFGoFrg5p7zAGzcMwMQ8H6sT9DADJadp_-lRiINPkNJ4c5Ke9oYnASIWjhOtDLDQYP-oyimcLB7A-7e7b06dd3w/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/AVvXsEghDI9VjxMJVxaAvdUcqwsmbsH-irtxSBqvZgZKs5JiB7rINYfDMtpEEy3Xg7m4RkutIx7WVGjTc6rG0u2jkTeCzaZK4ZJ63NlrdjUUebCWTLpqb-Lfnl1hggZc5CC2Z4aGXA5sgxdBOQM/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/AVvXsEifVsB-WKTfYR7xyuu7LtMeSoS2r_Ne0f7JaA98MoM6KPpZsnkWPSoz3emgBLLN-r6rQ1GviMNQdLxsl67kFi729M58YSArjJKVPXbXpXCpxn0LRtPlOF615eYi_QBDTRGPfyCws6LtOnU/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/AVvXsEixjy5rCDcda24KeZ52f2F1BbtcVBhrHRwwV4rSttbXcFT9LhJ_2EK_s5r8m72ZKkEZNez0un-G0lqk6Nh-D65FFgVof2bDqtrUF7qq54n1qtw68ELzfN9d7GocWNqikcOzjcsuYccDZE8/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/AVvXsEiyVnGILBc05jyFGrYCr0eKq79ZK2QPGoG__x3l9jxcj87WiCdnbUe1PoyfoQ-3bGikKx_ISo75n6tZl3-blcwSWXiLX-6nSulvD-OxqiD-mY5k4ViajgvMUc6-iklT8w8RKYQK-_eMtNE/s1600/MBL.png" alt="" /> <span class="light-text">تعديل</span> </a> </div> <!-- End MblMetroMenu --> </div> <!-- END mblmetromenu -->
هذا كل شيء. وقد تم دمج وجهة نظام ويندوز 8 تبدو وكأنها قائمة التنقل في موقع الويب الخاص بك.
تذكر: يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS والخ.
اتمنى ان تكون نالت اعجبكم وإن شاء الله فى القريب العاجل هناك بعض المفاجآت الجديدة . وفي انتظار ردودكم الطيبه وارائكم واستفسارتكم. والسلام عليكم ورحمه الله وبركاتة.
بقلم احمد عيد فتحي
أنا من مصرž احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم، وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها، فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني وتزيد من عطائي لكم إخوتي الكرام وأي استفسار ان موجود وشكرا
0 التعليقات:
إضغط هنا لإضافة تعليق
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )
Blogger Widgets