أكواد قائمة ميترو من Gooplz

كود Html-javascript

<!-- mblmetromenu --> <div class='mblmetromenu'> <div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav'> <a class='gradient' href='/'> <i class='fa fa-home'></i> <span class='light-text'>الرئيسية</span> </a> </div> <div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav'> <a class='gradient' href='http://almos3a.blogspot.com/search/label/%D9%85%D8%B9%D9%84%D9%88%D9%85%D8%A7%D8%AA%20%D9%88%D8%AB%D9%82%D8%A7%D9%81%D8%A9?&max-results=8'> <img src=' '/> <i class='fa fa-question-circle'></i> <span class='light-text'>ثقافة ومعلومات</span> </a> </div> <div class='tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav2'> <a class='gradient' href='http://almos3a.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%D8%B7%D8%B1%D8%A7%D8%A6%D9%81?&max-results=8'> <i class='fa fa-globe'></i> <span class='light-text'>غرائب وطرائف</span> </a> </div> <div class='tile-bt-large solid-red shadow-violetred-n margin-5 floatleft MblMetroMenu' data-navid='om-nav'> <a class='gradient' href='http://www.almos3a.com/search/label/%D9%82%D8%B5%D8%B5%20%D9%88%D8%B9%D8%A8%D8%B1?&max-results=8'> <i class='fa fa-book'></i> <span class='light-text'>قصص وعبر</span> </a> </div> <div class='tile-bt solid-darkred shadow-violetred-b margin-5 floatleft MblMetroMenu' data-navid='om-nav2'> <a class='gradient' href='http://almos3a.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%D8%B7%D8%B1%D8%A7%D8%A6%D9%81?&max-results=8'> <i class='fa fa-video-camera'></i> <span class='light-text'>أبتكارات ومنوعات</span> </a> </div> <div class='tile-bt solid-black shadow-violetred-c margin-5 floatleft MblMetroMenu' data-navid='om-nav2'> <a class='gradient' href='http://www.almos3a.com/search/label/%D8%B9%D8%A7%D9%84%D9%85%20%D8%A7%D9%84%D9%85%D8%B1%D8%A3%D8%A9?&max-results=8'> <i class='fa fa-female'></i> <span class='light-text'>عالـم المرأة</span> </a> </div> <div class='tile-bt solid-orange shadow-violetred-e margin-5 floatleft MblMetroMenu' data-navid='om-nav2'> <a class='gradient' href='http://www.almos3a.com/search/label/%D8%A7%D9%84%D9%85%D8%B7%D8%A8%D8%AE%20%D9%88%D8%A7%D9%84%D8%AD%D9%84%D9%88%D9%8A%D8%A7%D8%AA?&max-results=8'> <i class='fa fa-coffee'></i> <span class='light-text'>طبخات وحلويات</span> </a> </div> <div class='tile-bt solid-darkblue shadow-violetred-f margin-5 floatleft MblMetroMenu' data-navid='om-nav2'> <a class='gradient' href='http://www.almos3a.com/search/label/%D8%A7%D9%84%D8%B5%D8%AD%D8%A9%20%D9%88%D8%B1%D8%B9%D8%A7%D9%8A%D8%AA%D9%87%D8%A7?&max-results=8'> <i class='fa fa-medkit'></i> <span class='light-text'>الصحة ورعايتها</span> </a> </div> <div class='tile-bt-large solid-blue shadow-violetred-j margin-5 floatleft MblMetroMenu' data-navid='om-nav'> <a class='gradient' href='http://almos3a.blogspot.com/search/label/%D8%A7%D9%84%D9%85%D9%83%D8%AA%D8%A8%20%D8%A7%D9%84%D8%A5%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A9?&max-results=8'> <i class='fa fa-columns'></i> <span class='light-text'>الموسوعة الإسلامية</span> </a> </div> <div class='tile-bt solid-olive shadow-violetred-h margin-5 floatleft MblMetroMenu' data-navid='om-nav2'> <a class='gradient' href='http://www.almos3a.com/search/label/%D9%81%D9%86%D9%88%D9%86%20%D9%88%D8%A3%D8%A8%D8%AA%D9%83%D8%A7%D8%B1%D8%A7%D8%AA?&max-results=8'> <i class='fa fa-rocket'></i> <span class='light-text'>اختراعات وتكنولوجيا</span> </a> </div> <div class='tile-bt-large solid-blue-2 shadow-violetred-q margin-5 floatleft MblMetroMenu' data-navid='om-nav'> <a class='gradient' href='http://www.facebook.com/messages/almos3abook'> <i class='fa fa-phone-square'></i> <span class='light-text'>إتصل بنا</span> </a> </div> <!-- End MblMetroMenu --></div>

كود الستايل #CSS

body { font-family:sans-serif; } a { text-decoration:none; } .mblmetromenu { margin-bottom: auto; margin-top: auto; width: 960px; } @media screen and (max-width:960px) { .mblmetromenu { width:100%; } } .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 { -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; } .tile-bt { cursor: pointer; height: 50px; text-align: center; width: 120px; } .tile-bt a { display:block; padding-top:3px; 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 { display: block; font-family: 'Droid Arabic Kufi',cursive; font-size: 12px; font-weight: bold; padding-bottom: 10px; } .tile-bt:active { opacity:0.5; } .tile-bt-large { cursor: pointer; height: 50px; line-height: 50px; text-align: center; width: 190px; } .tile-bt-large a { display: block; height: 100%; } .tile-bt-large img { vertical-align: middle; margin:auto; padding:0px; position:relative; width:48px; height:48px; } .tile-bt-large span { display: inline; font-family: 'Droid Arabic Kufi',cursive; font-size: 12px; font-weight: bold; vertical-align: top; } .tile-bt-large:active { opacity:0.5; } .tile-bt-extralarge { text-align:center; cursor:pointer; width:190px; height:105px; } .tile-bt-extralarge a { display:block; padding-top:16px; text-decoration: !important; } .tile-bt-extralarge img { display: block; height: 80px; margin: 0 auto; padding-bottom: 23px; padding-top: 27px; position: relative; width: 80px; } .tile-bt-extralarge span { display: block; font-family: 'Droid Arabic Kufi',cursive; font-size: 14px; font-weight: bold; padding-bottom: 20px; } .tile-bt-extralarge:active { opacity:0.5; } .shadow-white, .shadow-black,.shadow-violetred, .shadow-blue, .shadow-green, .shadow-red { /*display:inline-block;*/ } .shadow-white:hover { background: none repeat scroll 0 0 #DDD; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-n:hover { background: none repeat scroll 0 0 #00A21B; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-b:hover { background: none repeat scroll 0 0 #D34727; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-c:hover { background: none repeat scroll 0 0 #009AAD; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-e:hover { background: none repeat scroll 0 0 #5535AF; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-f:hover { background: none repeat scroll 0 0 #AB193F; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-j:hover { background: none repeat scroll 0 0 #084EB3; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-h:hover { background: none repeat scroll 0 0 #98E509; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-violetred-q:hover { background: none repeat scroll 0 0 #EFAE00; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-blue:hover { background: none repeat scroll 0 0 #8E0099; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-green:hover { background: none repeat scroll 0 0 #000; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-red:hover { background: none repeat scroll 0 0 #2D88EE; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .shadow-black:hover { background: none repeat scroll 0 0 #FF9A00; box-shadow:0px 0px 6px 3px #FF9A00; -webkit-box-shadow:0px 0px 6px 3px #FF9A00; -moz-box-shadow:0px 0px 6px 3px #FF9A00; -o-box-shadow:0px 0px 6px 3px #FF9A00; -ms-box-shadow:0px 0px 6px 3px #FF9A00; } .solid-blue { background:#191919; } .solid-blue-2 { background:#191919; } .solid-darkblue { background:#191919; } .solid-violetred { background:#191919; } .solid-red { background:#191919;} .solid-red-2 { background:#191919; } .solid-pink { background:#191919; } .solid-purple { background:#191919; } .solid-orange { background:#191919; } .solid-orange-2 { background:#191919; } .solid-orange-3 { background:#191919; } .solid-coral { background:#191919; } .solid-green { background:#191919; } .solid-green-2 {background:#191919; } .solid-darkgreen { background:#191919; } .solid-olive { background:#191919} .solid-grass { background:#191919; } .solid-darkred { background:#191919; } .solid-gold { background:#191919; } .solid-yellow { background:#191919; } .solid-black { background:#191919; } .solid-smoke { background:#191919; } .clearspace { clear: both; } .floatleft { float:right; } .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 */ height:100%; }



شاهد شرح هذه الإضافة من هنا
http://gooplz.blogspot.com/2014/05/How-to-retrieved-tools-from-any-sites.html