أخر التعليقات

/ / / / اضافه قائمه ويندوز 8 الى مدونتك

اضافه قائمه ويندوز 8 الى مدونتك

, , تحرير
السلام عليكم ورحمه الله وبركاته

هل انت ممل من القائمه التى تستخدمها فى مدونتك؟
هل تريد ان تستبدل القائمه الخاص بك فى مدونتك بستايل قائمه ويندوز 8؟
والقائمه هى لٌب المدونه لأن من غيرها لا يستطيع الزائر البحث على موضوع معين فى عمق مدونتك. وبالطبع قائمه قبيحه تعنى وغير منظمه تعنى مدونه مهمله ولا أحد سيبحق عنها. فمن الاساسى ان يكون لك قائمه ذو طابعا خاص وبشكل جذاب ومميز.لذلك قمت بمشاركتكم قائمه وينوز 8 لتضفى على مدونتك طابع مميز ورائع .




الان مع التكريب

  • نبحث عن هذا الكود  ]]></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; }


 ونأتى الى أهم خطوه وهى أين اضع قائمه ويندوز 8 فى مدونتى فهاذا يعتمد على رغبه الشخص نفسه ان يضعها فى اى مكان يريده.




<!-- mblmetromenu -->
<div class="mblmetromenu">
<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/AVvXsEgCbHoF3KbgtfEUAx8U0wAwc2-GWSY7Gi63ZWGWTtDKeGsl8V-7vEdaoq1HP_btFPyspjz9LRM591LewfiMXh3ic-J3Sqyn8aanU_eRSDt4jbv_aQ8qhWLB1O1hH4XTLXBRmEFND3g_5GU/s1600/home.png" alt="" />
<span class="light-text">Homepage</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/AVvXsEi7SiVYvlMT1NGlqRKaV48JikSSsdwlEEAHQkJ0X_DF8SI8vO9I4Xb4yzdq9AFU5ys_lmdPpvAEFuVHbd-MU2Jm5owQoCiluEzKOGig6lmlBEEH9y3VcYcfvX0kepK4_0_P56z81SzR4AA/s1600/messanger.png" alt="" />
<span class="light-text">About US</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/AVvXsEh7ISMenc-yVPDEIltCAaxxrtivNEDAkKTdSyH7kT8wONyKLC8dSyWxEDqUX6p7IuO4dCRB00wPWAIU6o-DvytdfwKFJEtUn7DcFLvL7IqtT2Ur6NsyS2-b80QPH9TLHJVPYi-MyGAnH2g/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</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/AVvXsEi0wKnJHKX47JtLMfQV0OQewJ_VkPX2B9Gpj93rPLerf4JDm1enDVLSPVQ_0O0vjJ1s2aaggMp0lycP8n0eMaX66ghXzOd6pgBgRe_9QYi31DQX_MbC4Mz9B96kXEGaTTObDjISvZFH29I/s1600/search.png" alt="" />
<span class="light-text">Search</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/AVvXsEhxcw8Bh8e2Er9_UroIMWEIz6wM186imfGXrGiOi3W343fKQsgaNZa5y788G4k8PBorvFa79_gwOc8xO4I9ZFmcH9F4q_Y2j42-9d3WROS2B9QxYDK216y18gzJHiJeRSmD-48Evg9LaQ0/s1600/mail.png" alt="" />
<span class="light-text">Contact US</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/AVvXsEioMB1LX6JdQcXoGliSP9G4rWb6Sl8IpqdWjekTcgS0Lvecy3sn6lxpM72B3YZg6x5KHwTGcaxxqUjGFmw4uIvrPXm-2C5sSZEJzcHiUISiDA0ULuvR3nXEq43JG4pT3nHVf9S5RgU9mQ0/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</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/AVvXsEho8Ff7PodquUbauKmArVX1q-0Q5tHcAVUlChFfhSaqAjswnFLRJMK1yAhocgGDLalwOhumimpyhs7uh-gPsvCA9PuP8nXca1jMrcS2LddHXOiw-KOiG52GFCRGyjQ_6oRvL9G5lekG1D0/s1600/youtbe.png" alt="" />
<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="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3T1MPJPqWKXwEJ1REOI4WnpgVxdRODLsNL6dlTxx5CAWcENo4H9SdIlf0iZljXl3FGTtlKZVN87oY6H7Kr2KWAncQTTm7hJRs8x5Y6eTkvQDmOyVvQ4RmpEW4nm9GMa4siKcHpyxjvcU/s1600/face.png" alt="" />
<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="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr5qGNOEIkzDGoCiKdhAkEqGu_4ZQ93_MAipWESotzxXLY-D4PTNpuJpSYpVUS_ys1CZWpza78Ysz0aAlk5PSt6fJZ8Fw4De0GgHYRPCIyggSL3XcPKtwLvl2-HFbbrqpY0a7_TOSA66Q/s1600/photo.png" alt="" />
<span class="light-text">Photos</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/AVvXsEiQkD275IU4ItM0BKNQE_vzwyfhk02kgrlyu-rR0kSoT87WTYbsftD3fF0dQ5OICDCvlKY4qgrlDc_6KmKamlGnveHvPxTf9z7xtPzsvteAsltrB_JaGJZWCZ3fKaRZ_KL6Ng39fKQ7O14/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
   
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIJzM-129nnUUxKCpZIFW2pvoKrfeHDk01OpE0cUDp7ZJJXMhqO-9-cHlqK9Mtoaz7Y5aWNrRbt-LOLcCDpYevVkfHvB4bG_caOyeX1Cb2slhNgv7RNEqJLJ8C9ekee75Km2s9dtBixM/s1600/MBL.png" alt="" />
<span class="light-text">Mohamed Tahseen</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END mblmetromenu -->

أتمنى ان تكون الموضوع عجبكم ولا تبخلو علينا بتعليقاتكم
شاركه على جوجل بلس

عن Unknown

    تعليقات بلوجر
    تعليقات فيسبوك

0 التعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة ( Atom )