السلام عليكم ورحمة الله تعالى وبركاته.
درس اليوم هو هدية لكل متتبعي موقع Trucsinformatiques للمعلوميات,و هو عن طريقة إنشاء قائمة أفقية للأقسام مشابهة تماما لقائمة Metro الخاصة بويندوز 8 و إضافتها لمدونتك Blogger.
شاهد الدرس المصور:
تحميل الأيقونات : إضغط هنا .
رفع الأيقونات على الأنترنيت: إضغط هنا .
إبحث عن هذا الكود:
]]></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; }
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; }
ثم قم بحفظ القالب ،
كود الإضافة:
غير ما كتب بالأزرق بروابط الأقسام.
غير ما كتب بالبنفسجي بروابط الأيقونات التي تتناسب مع محتوى مدونتك.
غير ما كتب بالأحمر بأسماء الأقسام التي تتناسب مع محتوى مدونتك .
<!-- mblmetromenu -->
<div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="http://trucsinformatiques.blogspot.com/" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-TQcIoI9KHVwmvUGJqt2o6cXcGgcMn51O6b3ak8NxJd9J1_mxr8HgcEsBxwfWo-pmKzLDVbXrhRH53_P89RRFRN8GdpqoLUlmk5FxDgfWFiVUDHeazeLAcVv46VZ68rzXYaXpOGypLw/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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D9%86%D8%AA%D8%B1%D9%86%D9%8A%D8%AA?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVWaKagKs8pNVooC-h0VDAr411Yhy0GVmA2_dq2Yx0I21CdcAc75Lv8_UfKgr_cRLkKk9cCP2ZEZ32cPKpNyZL53zwbvTDGCOy1qauokI8P-aNY5ASgfA2Q8EBDWa-H0HY2O7kXqNUg/s1600/Google-plus.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%B4%D8%A8%D9%83%D8%A7%D8%AA?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwUfPv-mTcuvn6_mVuxbWdKF10wKY4XI-xZkloOHS0Nr6Js2qFfDlYXz7ufyzdxsDHEbNK5-L57RX126bozg-pWQA-AHezbIjLkMz0oNNR4NEaXGG8FVPizxgvA4o8YlDkajuo9EyhgQ/s1600/Wi-fi.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9%20%D9%88%20%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgE9Kofr76cG6TtI4BdwadDlOrXT-cskitgSZxT5kQoPyblJoCHP5uZHWhjzRcf2eXf3ZxVFgOSkTjTSspEz1bpM_nJbaHpcS5RrTmPubkqNqe3ErQ5iFpx-C6JRuJq336LjCoePF_5g/s1600/Open+file.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D8%A7%D9%85%D8%AC" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNz_2ZxyrVPG80LXSoGJTnHwoA4MJQNvL7SmDZaDKtseTjZtU2s19XOYwhYkpbnqhRWT_qG9wuLpbUgNvamI9IDuGBSV6TfmmbhG-pw5179iGRSbF96ZQhYHJhuVj7XQkgDpro4Zbudg/s1600/Cone.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="http://trucsinformatiques.blogspot.com/search/label/%D9%82%D8%B5%D8%B5%20%D9%86%D8%AC%D8%A7%D8%AD" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAszhQQ6VnHD-jjcP7C86G0cLiINdY5QnX71pAssIBfZ5qYXIoqnB5jEhT5ATVXMqRRHpwBB3-hgndlNxaStilH9z8dmgjD0i-p3j7BM-hofelfTcAu2CjqJdYGUJrgupdO2wqFhL79w/s1600/Android.png" 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="http://www.youtube.com/user/trucsinformatiques" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbdiDx21Laki6noRhuePmPCR0EeDViY88Zg1MbLf5Jfm9R_bC79YsGgJI_f8tu2_g3NS5alwx_-SBCQMmjEOGis4gcfF_Yfwej1CcTfJ4t15YJ1FOXHx1NcKe54ztMC_bhnui_Qu9QuPg/s1600/youtbe.png" alt="youtube" />
<span class="light-text">Youtube</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="https://www.facebook.com/Trucsinformatiques" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYu1P_mqpwoZ_bYGk6QKFsEoI7U2JTGmjocBDJUgsxVUhOOo4zse5RugaqkS9F9JfEns_VX9fWUprMDpmXCt_m5f5fvC52bwR4a_54-r2LLXMtXNg_TAMse-aQgQC6j3WVZ-ftW9k5N3g/s1600/face.png" alt="Facebook" />
<span class="light-text">Facebook</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://trucsinformatiques.blogspot.com/search/label/%D8%AC%D8%AF%D9%8A%D8%AF%20%D8%A7%D9%84%D8%AA%D9%83%D9%86%D9%88%D9%84%D9%88%D8%AC%D9%8A%D8%A7?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhWuIHI9ZIgsTOND34aWfDQ2ByylacpoBQjA0hBC2CK3kSqE5pNnEzjV_AtE6zgcXvVZtypg1hoU76upaxW5hxob6tlKhxzlx7o5H0NPlZyeXYrMNtvXqhgxKmZtcHke1SmBmYqyKHA/s1600/Windows-phone.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%B5%D9%8A%D8%A7%D9%86%D8%A9?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifANXH2AZOLLGw09RkbfSFujVh4UCJVpop4FrXvyAbDy8O_JqE7XoBkWHrWRUyVOoE88D3v8_Z0mbYGav4GYsZOdgfjvbFOXOFIf3eonnY3hm6JnBYQi-JyiQYXo34C__4Oygcz2Oygg/s1600/Tools.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://trucsinformatiques.blogspot.com/search/label/%D8%A3%D9%86%D8%B8%D9%85%D8%A9%20%D8%A7%D9%84%D8%AA%D8%B4%D8%BA%D9%8A%D9%84?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nde9YsDnKYPcYM9TNocbxwafHxrbcziwX1JTsruAkkvJ36cXDMuAHsbXL64Z5MfKN1m_fEZbRd84fHGZV47P5ZOE0sx3dpmve-pH3osFeMgy9xITInd6azDFqW8HZtFhrUlEjK7r0w/s1600/Windows.png" alt="أنظمة التشغيل" />
<span class="light-text">أنظمة التشغيل</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
<div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="http://trucsinformatiques.blogspot.com/" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-TQcIoI9KHVwmvUGJqt2o6cXcGgcMn51O6b3ak8NxJd9J1_mxr8HgcEsBxwfWo-pmKzLDVbXrhRH53_P89RRFRN8GdpqoLUlmk5FxDgfWFiVUDHeazeLAcVv46VZ68rzXYaXpOGypLw/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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D9%86%D8%AA%D8%B1%D9%86%D9%8A%D8%AA?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZVWaKagKs8pNVooC-h0VDAr411Yhy0GVmA2_dq2Yx0I21CdcAc75Lv8_UfKgr_cRLkKk9cCP2ZEZ32cPKpNyZL53zwbvTDGCOy1qauokI8P-aNY5ASgfA2Q8EBDWa-H0HY2O7kXqNUg/s1600/Google-plus.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%B4%D8%A8%D9%83%D8%A7%D8%AA?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwUfPv-mTcuvn6_mVuxbWdKF10wKY4XI-xZkloOHS0Nr6Js2qFfDlYXz7ufyzdxsDHEbNK5-L57RX126bozg-pWQA-AHezbIjLkMz0oNNR4NEaXGG8FVPizxgvA4o8YlDkajuo9EyhgQ/s1600/Wi-fi.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9%20%D9%88%20%D8%AA%D8%B7%D9%88%D9%8A%D8%B1%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgE9Kofr76cG6TtI4BdwadDlOrXT-cskitgSZxT5kQoPyblJoCHP5uZHWhjzRcf2eXf3ZxVFgOSkTjTSspEz1bpM_nJbaHpcS5RrTmPubkqNqe3ErQ5iFpx-C6JRuJq336LjCoePF_5g/s1600/Open+file.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D8%A7%D9%85%D8%AC" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNz_2ZxyrVPG80LXSoGJTnHwoA4MJQNvL7SmDZaDKtseTjZtU2s19XOYwhYkpbnqhRWT_qG9wuLpbUgNvamI9IDuGBSV6TfmmbhG-pw5179iGRSbF96ZQhYHJhuVj7XQkgDpro4Zbudg/s1600/Cone.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="http://trucsinformatiques.blogspot.com/search/label/%D9%82%D8%B5%D8%B5%20%D9%86%D8%AC%D8%A7%D8%AD" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAszhQQ6VnHD-jjcP7C86G0cLiINdY5QnX71pAssIBfZ5qYXIoqnB5jEhT5ATVXMqRRHpwBB3-hgndlNxaStilH9z8dmgjD0i-p3j7BM-hofelfTcAu2CjqJdYGUJrgupdO2wqFhL79w/s1600/Android.png" 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="http://www.youtube.com/user/trucsinformatiques" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbdiDx21Laki6noRhuePmPCR0EeDViY88Zg1MbLf5Jfm9R_bC79YsGgJI_f8tu2_g3NS5alwx_-SBCQMmjEOGis4gcfF_Yfwej1CcTfJ4t15YJ1FOXHx1NcKe54ztMC_bhnui_Qu9QuPg/s1600/youtbe.png" alt="youtube" />
<span class="light-text">Youtube</span>
</a>
</div>
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="https://www.facebook.com/Trucsinformatiques" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYu1P_mqpwoZ_bYGk6QKFsEoI7U2JTGmjocBDJUgsxVUhOOo4zse5RugaqkS9F9JfEns_VX9fWUprMDpmXCt_m5f5fvC52bwR4a_54-r2LLXMtXNg_TAMse-aQgQC6j3WVZ-ftW9k5N3g/s1600/face.png" alt="Facebook" />
<span class="light-text">Facebook</span>
</a>
</div>
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://trucsinformatiques.blogspot.com/search/label/%D8%AC%D8%AF%D9%8A%D8%AF%20%D8%A7%D9%84%D8%AA%D9%83%D9%86%D9%88%D9%84%D9%88%D8%AC%D9%8A%D8%A7?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhWuIHI9ZIgsTOND34aWfDQ2ByylacpoBQjA0hBC2CK3kSqE5pNnEzjV_AtE6zgcXvVZtypg1hoU76upaxW5hxob6tlKhxzlx7o5H0NPlZyeXYrMNtvXqhgxKmZtcHke1SmBmYqyKHA/s1600/Windows-phone.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="http://trucsinformatiques.blogspot.com/search/label/%D8%A7%D9%84%D8%B5%D9%8A%D8%A7%D9%86%D8%A9?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifANXH2AZOLLGw09RkbfSFujVh4UCJVpop4FrXvyAbDy8O_JqE7XoBkWHrWRUyVOoE88D3v8_Z0mbYGav4GYsZOdgfjvbFOXOFIf3eonnY3hm6JnBYQi-JyiQYXo34C__4Oygcz2Oygg/s1600/Tools.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://trucsinformatiques.blogspot.com/search/label/%D8%A3%D9%86%D8%B8%D9%85%D8%A9%20%D8%A7%D9%84%D8%AA%D8%B4%D8%BA%D9%8A%D9%84?&max-results=9" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nde9YsDnKYPcYM9TNocbxwafHxrbcziwX1JTsruAkkvJ36cXDMuAHsbXL64Z5MfKN1m_fEZbRd84fHGZV47P5ZOE0sx3dpmve-pH3osFeMgy9xITInd6azDFqW8HZtFhrUlEjK7r0w/s1600/Windows.png" alt="أنظمة التشغيل" />
<span class="light-text">أنظمة التشغيل</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
و مبروك عليك.
المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.
0 التعليقات