Привет друзья, вот решил вам рассказать про меню как в виндовс 8. Для блогов на блогспот,сама менюшка очень красивая имеет 11 кнопок но при большом желании их можно добавить еще, или заменить стандартные.При наведении кнопки подсвечиваются, вставлять их лучше сверху блога так как я считаю там они будут полезнее всего и удобнее для ваших пользователей. Да и сверху я разместил скриншот из виндовс восемь), а настоящие кнопки выглядят так.
Для установки такого меню нам надо зайти в панель инструментов Blogger - Шаблон - Изменить HTML.Зажимаем CTRL+F и ищем тег ]]></b:skin> а далее перед ним вставляем этот код. Да и самое главное, если у вас уважаемые читатели что то не сработает после сохранения то значит проблема с CSS скриптом вот который ниже. И его надо будет обернуть в теги стиля я их помечу желтым, и уже поместить перед тегом </body> . Но это надо делать подчеркиваю если только у вас не сработал вариант с первым тегом ]]></b:skin> , и как вы видите я теги стиля
<style> сделал чуть выше самого скрипта это что бы вам не запутаться друзья. <style>
/*===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; }
</style>Теперь же нам надо зайти в дизайн, нажать добавить виджет, там в списке найти HTML/JavaScript
>и в него вставить наш скрипт, вот этот что ниже.Ах да кстати друзья второй скрипт что ниже можно еще вставлять в тело шаблона,вместо вставки в виджет, вставляется он во втором случае после тега <body> <!-- 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/AVvXsEjs9i2pa-TU4bRXwSFImlK6K_8waYa2jGoJCiJSTntqrrtpFvval6mj_QZupAi_u-TLJNJzBqaCr_YGMov_cDV9jPy8RnPM7uUG3cxsQ37pYHW2zrlKz09bpunFCwU49UiA7ah0hedn8GM/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/AVvXsEiZyUlOLRI6_S6bDFvyjsaNjSptbZcM7GUUQJcEa-EENv2z5cA4f8_a_O3RfABC16KEP81uS6uhpjR2eKIj80WpZQvB432RsmKx24RMTNR9OR1lC0WmflT8yARqxpZc8OqkTHzHGCOe7fQ/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/AVvXsEh4E4jluBqYtOxfCejBIB7Ttj5uPIK8Ya8VhARCl0LjSGR9WVZtTJjiFVFqzwjSoeQw3psRJKJ35zRzGtmHiB9Yv7WNhvjW4cZXpkw408FFsM3v0k4OkYUxwmrq_nKG7sxfiNp7IUtMmHw/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/AVvXsEhDUL9eFqyfAirhFQCJvm98oApsqDhW1ViN5F_j8FIInMGnxo6pN6H5f396zVfLuv-9ExVeCk6MHNec58x5FczK2UHjDc4_n4sONzf8yWMYaTna2Hmzny2mX0w3Fop5_G1ekxKuYv6eiKk/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/AVvXsEiTuvNtHjUxp_bBn7szzcqt5k5eVNlLZdlQ6rfHnNiZaeMbUyjChIDww6CEpOXvMBnYDL7TUHRglmABsXheir7GqBEbc7Qxle6tOaO3kIAXZ3QyMJlkylnMl__24-8uUrg0bowJyBs6aj8/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/AVvXsEi4LXMMqZFhTvkGfsgs-e2GRqQnODN29OCxddWAvJxdjwTcnJUCqXMjchlBo0tWppx-v5pQIJv-tJ4cdU4RBYaWyfv53ngAnYynlODelkQJ9cjV2FjFYJoM1_y_pvV9cRTof29RnfK6_88/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/AVvXsEiFriLCPf5FXT1ht11BxzXa_z0rDkoAvHJ_NGX1P98GvfJUAQmLmBv5JdP_OmK7ThlbytO7ckRUyzDVZNiBjtsqqmaUSCOfbgHx8o-RQfw8vaEaxfsFIpeov9d_hcijaSY6EV0NCpKzJqM/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/AVvXsEg5e7y4YB0lY8Oq92T38AY3m8j56j9FFER_tHQdwVR8_O9yKTbGSB9D_XILmiyLjVFJvWML54sDvyE1Ad5AweIB6H8_lbE7MhWEIJ6Cp8yzkICEbQz4xwtNhDOu8ZHS_dey1P_D3IldtzM/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/AVvXsEgCg55KuT486EmmV2QEJ4_t2P-H44fQtleezv5Db6SUhEE90cEc7pjSEz7QYA8MS_oavkwzxW9PWlrZWroo41jU3xxfrw_ol5y2qU_einMKSUh1joRrRS8sfa4jejWliJfEJL2xsWlO7HM/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/AVvXsEj3PF0CoH6R21JwWuqEUcrw1cbyHX4o5EU0AaaQkY1_nxNcwZx_BlaHd27dcHPZW56XvPIJ-48stg5gHm6U6tBtotzIfdhJXVbb4TBQm-ZfAFzk7km6ysYT_Q5aAF43CkPgGBAbHo_gEl0/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://shkolablogger.ru/" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-P7o-M3BZ9hMjVmIGqxMzI_1CxfrDxjZERjSlLFX-n1Dukcs8LvdWnATSovDnHY7UAvk11GQprBViVkeGSLTw8NwKVeTTJZGkETBLPV1SqMEWFRIj-EoONxv7GCWpu_0MfoKrA5PBDo0/s1600/MBL.png" alt="" />
<span class="light-text">Школа Bloggera</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->
0 коммент. :