مهووسي التقنية: اضافة مترو ويندوز 8 لمدونات بلوجر بحترافية

بسم الله الرحمن الرحيم
كيفية اضافة مترو ويندوز 8 لمدونات بلوجر باحترافية

How-To-Create-Windows-8-Metro-UI-Navigation-Menu-in-Blogger

طريقة اضافة المترو :

اولا اذهب الي مدونتك ثم اضغط علي قالب
ثم تخصيص 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; }

المصدر: http://3asq.blogspot.com/2012/12/windows-8_2650.html#ixzz2oVyjqWaV

الخطوة الاخيرة توجه الي تخطيط
ثم Html/JavaScript
واضف هذا الكود :

<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/AVvXsEgvqoygcBi4nHBAV0z-gRs8OeDQjwSrLQOAHhi1OipEvMZdb1vh-q41op6EkBb-vxvU23Y5e9h6GE0GaltYj_pIb6EQcA-XpdPX4duS0qLhmtnEW44yVrgi1C3EUQN-SKvKVOGvrtTt9t8/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/AVvXsEiVg4U12A_-91BG9s_lf0CVXc_2qInahN_LN060BwL4aYz8g2-QA4_bEs96Wh0zSb7JFE_lB6k2IRwXPmQSJyJOzIlMLa5fam6gRset8iN3yuAzJM1QZQM_OgGhfAKgli6_kLQ7qQTP4vw/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/AVvXsEg9HlydwbUApsc8DcwCo97eL51CZqipdzTY3POESGMsS8Rufd0A7VEoD4tJ2u4EZaxq7ImUW-rwi__Q2LZo4RAX_jyUhk8y8npuOG-vnJJhRcdtpqhfRBvKDBaEXC3tJzz_5wobRUWJGGQ/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/AVvXsEhpzju1JhQISePq_DzlF07V9t0uZE15AGO16OhnVgofdE824P-nQTmBsxiIzmO6UvmzR9FZSW7hb4wVFnl23rJcSuJO78w56t6wTygVXJmy_YdN_iRvvcMKALedBtW0IlbaF335JdDYB9Q/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/AVvXsEhMvyj8H8xP9V5xZwgIlZwKbs0tDG3darrCi_yurEDFMYXxVhVcor0AHXym3Vhrf8l5ZT1vDgFzQ9kyl7vjdjiquh6YWmxuL9-aU2JRoov_a9BdELdqVRCKQrYVDQNaELNbjd2TplpGRsA/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/AVvXsEjR8Br_lXz89TUrHglmmZcPRwt33sNYlAd_02uoqxyKRwvioO7mY6HPJNO8SNAifjZspTUJuPAw5gsS6t34eBeYqsATYc6ZiIS8H-qa98fIFJ1pUCwZNflf7txru-ioXTFa9A0V32Bkv64/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/AVvXsEgZfzLAarjbfb_6V3WAL3A7ryPMxSPBnZU3RZYGKez_KhgbaOdkc79hswEkt8i7M6nhEB4C6eDCHWStzcgRqFtnZOt4-0892wC0DNMWTxNRM_G_G8l7KlGru5EhQHCL4a8jIcT4Ua1QdSU/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/AVvXsEjL2aXoLtacbrF_jet1ouCaOZOQ1NNqGP96iVX-ZMAipW9UxM88yA7uajgBd4h68W7IvCU_7ptbBrFdlCuDMP8zZ18hQ12Nn7tEKZMN0cxAleV8_QgV9D6nsR5JFET3ZIxdBh1oW1w9xbI/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/AVvXsEjlCXAphhKTwUUfHNJYz3WlbYxoJhJw-QcUQ41_2L4EZyHRqWYHdk45dcK2R-bCTe6hRinFMLPMKlBpTJAYM6R3ft1JwOG4Ij6NOGdtG_yFraduTHc33DT4irnbZDnYis11Y3bEXcp4fo8/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/AVvXsEj8wTBL7UwgfbwP2tYO4Rhv-yj4iA9ATBALar406mEKC1bbXDIiXbQgMOeOlglEkGliemVf60KQEeYookOgDo4xDuNy8diNYryYNqD9f5AisQegwcLz0siTrh4zrs1WjS8dm92vLrGbpu0/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="http://konozblog.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid60xnnefTEAXzXfZt8_2JoVReri9OGDXiGZDWvBqOgcaw-I5vsKPBA_2wJfSewwOTStH6MPd78DDAcAKtQ_arPMDwRuthr03qlA2N0_RumWOntRAmoiL27yg3kwHAuv_aIPR9JV0BSRE/s1600/MBL.png" alt="" />
<span class="light-text">konozblog</span>
</a>
</div>

  </div>

المصدر: http://3asq.blogspot.com/2012/12/windows-8_2650.html#ixzz2oVzMQmKT

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

راسلنا من خلال النمودج التالي :

مهووسي التقنية

الأربعاء، 25 ديسمبر 2013

اضافة مترو ويندوز 8 لمدونات بلوجر بحترافية

مثال لأسم الكاتب

ليست هناك تعليقات:

إرسال تعليق

الأكثر تصفحاً

التسميات

تابعنا هنا

تجربة إضافة !