Membuat Widget Navigasi Metro UI

Tips Widget Unik Navigasi Metro UI - Untuk widget unik kali ini saya khususkan bagi para pengguna template blog Metro UI ala windows 8, seperti artikel widget social media unik maka saya persembahkan buat anda untuk widget navigasi unik metro. Dimana navigasi ini memang di design untuk memberikan warna yang berbeda pada tampilan blog yang bernuansa Metro UI.

• DEMO

Untuk langkah - langkahnya sebagai berikut :

Masuk Edit Template >> Dan Copas kode dibawah ini sebelum kode ]]></b:skin>

.samsury-metronav { font-family:sans-serif;
 text-decoration:none;
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .samsury-metronav {
 width:100%;
 }
}

.SamsuryMetroMenu {
 position:relative;
}
.samsury-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.samsury-ctrlbar {
 width:100%;
 height:48px;
}
.samsury-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.samsury-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; }
.samsury-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; }
.samsury-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; }
.samsury-controlitems {
 width:960px;
 margin:auto;
}
.samsury-controlitem {
 height:48px;
 cursor:pointer;
}
.samsury-closenav {
 float:left;
}
.samsury-movenext {
 float:right;
}
.samsury-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .samsury-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .samsury-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .samsury-controlitems {
  width:100%;
 }
 .samsury-itemholder {
  width:100%;
 }
 }
.samsury-centerblock {
 display:inline-block;
}
.samsury-item {
 display:none;
}
.samsury-showitem {
 margin:5px;
 float:left;
 display:none;
}

.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;
}

.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;
}

.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;
}

.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red
.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;
}

.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; }

.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%);
 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)));
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
}
.margin-5 { margin:5px; }

Selanjutnya pergi ke Dashboard >> Layout >> Add Gadget >> HTML/Javascript dan Masukkan kode dibawah ini :

<div class="samsury-metronav">

<div data-navid="samsury-nav" class="tile-bt-extralarge solid-orange shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://1.bp.blogspot.com/-88p8qe2Qlk8/UlD_XydhCZI/AAAAAAAACKU/oeWSa7M0Owc/s1600/Samsury+Home.png" alt="" />
<span class="light-text">Home</span>
</a>
</div>

<div data-navid="samsury-nav" class="tile-bt-large solid-coral shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://4.bp.blogspot.com/-1qKBe6Ga3mE/UlD_X8Dt_lI/AAAAAAAACJ8/-AXJ2KVlnts/s1600/Samsury+About+us.png" alt="" />
<span class="light-text">About Us</span>
</a>
</div>

<div data-navid="samsury-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://1.bp.blogspot.com/-KzZvX8WCyIk/UlD_Z8JoJmI/AAAAAAAACKo/AV1VNOdp4lE/s1600/Samsury+Rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>

 <div data-navid="samsury-nav" class="tile-bt-large solid-purple shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://3.bp.blogspot.com/-aKJCsAYabQQ/UlD_aPlHfaI/AAAAAAAACK0/QfRNiJom2uY/s1600/Samsury+Search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
 
 <div data-navid="samsury-nav2" class="tile-bt solid-green shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="
http://2.bp.blogspot.com/-MMJQ3eFd7T0/UlD_YiJK_xI/AAAAAAAACKI/VcYP7EyOS9I/s1600/Samsury+Mail.png" alt="" />
<span class="light-text">Contact Me</span>
</a>
</div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-yellow shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://4.bp.blogspot.com/-o1vZuIvjFb0/UlD_ayXlQKI/AAAAAAAACLI/u27ok55T30Y/s1600/Samsury+help.png" alt="" />
 <span class="light-text">Help</span>
</a>
 </div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-red shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://4.bp.blogspot.com/-Ea3rCoTYhBs/UlD_amnouRI/AAAAAAAACK4/YzXWGhLWEiE/s1600/Samsury+Youtube.png" alt="" />
<span class="light-text">You Tube</span>
</a>
</div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-darkblue shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://1.bp.blogspot.com/-2dImTfxWJgQ/UlD_Xy_2ggI/AAAAAAAACKE/9OGwwrpgDzo/s1600/Samsury+Facebook.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
 
<div data-navid="samsury-nav" class="tile-bt-large solid-blue shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://4.bp.blogspot.com/-zBVZgvx3O7I/UlD_ZtY661I/AAAAAAAACKk/H7ExCI2BOQE/s1600/Samsury+Photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-olive shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://2.bp.blogspot.com/-3VDpcYBOaK8/UlD_ZYguLPI/AAAAAAAACKY/RK-gU_dTlWI/s1600/Samsury+Music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
 
<div data-navid="samsury-nav" class="tile-bt-large solid-blue-2 shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="http://3.bp.blogspot.com/-f5gyg46WZHQ/UlD_ak2bj_I/AAAAAAAACLE/MTBx7eg_o7c/s1600/Samsury+Sites.png" alt="" />
<span class="light-text">Samsury Sites</span>
</a>
</div></div>

Ganti ### warna merah sesuai URL data blog anda. Anda juga bisa mengubah warna icon yang akan di tampilkan dan sesuaikan dengan warna pada CSS kode diatas

Demikian tips widget unik metro window semoga bermanfaat, happy blogging.

source : samsury-sites.blogspot.com/2013/10/tips-widget-unik-navigasi-metro-ui.html

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di www.watubudug.blogspot.com