Dari Anda Untuk Anda: Widget Unik Metro UI Drop Down Sliding

Widget Unik Metro Drop Down Sliding - Seperti artikel sebelumnya tentang tips widget navigasi unik metro ui, pada kesempatan kali ini saya akan memberikan tips yang sama tentang widget unik khususnya untuk template blog metro. Dan untuk tampilan ini saya berharap dapat memberikan warna yang berbeda dan lebih unik bagi para pengguna blog yang bernuansa blog Metro UI style.

Penasaran seperti apakah tampilan widgetnya silakan anda lihat pada link demo dibawah ini.

DEMO

Nah udah lihat kan...??? lalu kita lanjutkan untuk cara pemasangan di blog, langsung aja silakan ikuti langkah - langkah berikut ini :

Masuk ke Edit HTML >> Expand Template >> ( Tekan CTRL+A, CTRL+C, DEL, CTRL+V )

Kemudian Masukkan kode CSS dibawah ini sebelum kode [[ </b:skin>

.samsury-tab1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGzMasqab0mLj8oqwcFzthyEhruhB70a2PWIXogzuH9SFKgx38XcYGm_VIALsNNGLBhvWJoMqvmAbiFsfnDuEC-O58mZmotb59Jc4F4IiqQwL1GT-D4QyV6P8ueeLOEY-0zsSEZkNcLU/h120/home.png) no-repeat center center #277599;}

.samsury-tab1:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGzMasqab0mLj8oqwcFzthyEhruhB70a2PWIXogzuH9SFKgx38XcYGm_VIALsNNGLBhvWJoMqvmAbiFsfnDuEC-O58mZmotb59Jc4F4IiqQwL1GT-D4QyV6P8ueeLOEY-0zsSEZkNcLU/h120/home.png) no-repeat center center #de0000;}

.samsury-fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQLU0xU5T7O0N8sH4xgxS3L6XnFHvDR35Vrf7UEG6b4x2ctFTe2b_mNF84BazL_3Ya1qFqMj4DrpaS3TSK5VUGg0W7gUdgmherxSxsXzRLmdjyFjZdIOUKIA3hbgFRmLlO3zDw85KPFY/s1600/facebook2.png) no-repeat center center #2A82D9;}

.samsury-fb:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQLU0xU5T7O0N8sH4xgxS3L6XnFHvDR35Vrf7UEG6b4x2ctFTe2b_mNF84BazL_3Ya1qFqMj4DrpaS3TSK5VUGg0W7gUdgmherxSxsXzRLmdjyFjZdIOUKIA3hbgFRmLlO3zDw85KPFY/s1600/facebook2.png) no-repeat center center #1f69b3;}

.samsury-tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWrIARZ-M_7IA52ryGYPIVO_Ue8eiNJGKfvfC4Dw3JZnaycUzJ60MjTbu8R16soPtseZ7UIDPwhpcGAkZboUStEkoiYCvKp56BTmO-S6GbZ8y_il0J5IyoJCrO79aPsKuFCg1s47Bahc/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0;}

.samsury-tw:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWrIARZ-M_7IA52ryGYPIVO_Ue8eiNJGKfvfC4Dw3JZnaycUzJ60MjTbu8R16soPtseZ7UIDPwhpcGAkZboUStEkoiYCvKp56BTmO-S6GbZ8y_il0J5IyoJCrO79aPsKuFCg1s47Bahc/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;}

.samsury-g{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYjf7Bihl8dBzB5nYDYy_c1ePT2fIwlIjcnzf2tAJgHm8y7na8_Ho1OkW7XWHmW3mkqApdrUh6LSp-7lUIqDVNSIlkqvhz6kLuuFbMrBZfT1u05D1a52sooGz14u4KJhHz5UrgSgIELao/s1600/google+plus2.png) no-repeat center center #DC321E;}

.samsury-g:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYjf7Bihl8dBzB5nYDYy_c1ePT2fIwlIjcnzf2tAJgHm8y7na8_Ho1OkW7XWHmW3mkqApdrUh6LSp-7lUIqDVNSIlkqvhz6kLuuFbMrBZfT1u05D1a52sooGz14u4KJhHz5UrgSgIELao/s1600/google+plus2.png) no-repeat center center #c53727;}

.samsury-rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yr-sBvKy3xUL3v_3fqTtApsDA4iAiw464wAjM2VtyBKUGRQJjzrx4xa0bRewDjo-KAib0fzcELZ7TJnr0Zksv7CyJ6Mxz04GIqjFbKJKv-7ZOQMjiW5pdgDhcgrDHJ_CALa0JR_Fiug/s1600/feed2.png) no-repeat center center #E9A01C;}

.samsury-rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yr-sBvKy3xUL3v_3fqTtApsDA4iAiw464wAjM2VtyBKUGRQJjzrx4xa0bRewDjo-KAib0fzcELZ7TJnr0Zksv7CyJ6Mxz04GIqjFbKJKv-7ZOQMjiW5pdgDhcgrDHJ_CALa0JR_Fiug/s1600/feed2.png) no-repeat center center #F9A914;}

.samsury-tab2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHUv_QltHClj3ZnI-w0_N2j44Sg_TAFiC1kIxxLCyACr7dCM8E3ABmTw1gi6mSVQ2inMQsWor3Be0PuUriKC9e6khC4s_h6DxVCG_EDlRCHQXjlNVCViuSqLLBJFrw7ZVEd3rSyfHz9I/h120/Tag.png) no-repeat center center #ff8c00;}

.samsury-tab2:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDHUv_QltHClj3ZnI-w0_N2j44Sg_TAFiC1kIxxLCyACr7dCM8E3ABmTw1gi6mSVQ2inMQsWor3Be0PuUriKC9e6khC4s_h6DxVCG_EDlRCHQXjlNVCViuSqLLBJFrw7ZVEd3rSyfHz9I/h120/Tag.png) no-repeat center center #1d943b;}

.samsury-tab2sub{background: #ff8c00;}

.samsury-tab2sub:hover{background: #1d943b;}

.samsury-tab3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPt1wug9dru21X4W377znZKd6OEs_9QLPcKtv2zxxFPTLtaum-5qcIBW1pqWcU2YmCVB-y00QSUE8SQEPhTNeAM4lmt5biMvWQAGOzykFOT046_GDZU4LTlTQ_bKqeok1w3RY5IPCdB4/h120/archives.png) no-repeat center center #265f27;}

.samsury-tab3:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPt1wug9dru21X4W377znZKd6OEs_9QLPcKtv2zxxFPTLtaum-5qcIBW1pqWcU2YmCVB-y00QSUE8SQEPhTNeAM4lmt5biMvWQAGOzykFOT046_GDZU4LTlTQ_bKqeok1w3RY5IPCdB4/h120/archives.png) no-repeat center center #007f74;}

.samsury-tab3sub{background: #ff8c00;
height:70px;}

.samsury-tab3sub:hover{background: #007f74;}

.samsury-tab4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2We1xKWN6Ovbv9LLjcuE5mgN1-hIL_ATru_VXY-mGykHk5uDv9SMmhEt646prmM6IqqmPrqhEMN7yZJvU0WYD5V4fbqhiZftPMnxyOWkOXv8KPADz9pmi973VhLl4t0eTwd1UQu7WxuQ/h120/contact.png) no-repeat center center #d84a38;}

.samsury-tab4:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2We1xKWN6Ovbv9LLjcuE5mgN1-hIL_ATru_VXY-mGykHk5uDv9SMmhEt646prmM6IqqmPrqhEMN7yZJvU0WYD5V4fbqhiZftPMnxyOWkOXv8KPADz9pmi973VhLl4t0eTwd1UQu7WxuQ/h120/contact.png) no-repeat center center #007f74;}

.samsury-tab4sub{background: #d84a38;}

.samsury-tab4sub:hover{background: #007f74;}

.samsury-tab5{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNgxTmwaQo76TIQDAIDcX6Yf0e68M-4s4DIsdiwK7UBYPWEUKZ2WWWnir9qmCgsRNVS6gP6BrE5SYrvRdLxzBt-b7DfW3yGQO86TOSaQPF0xd8AXl-NZJGk4m5CPR9Y8Iu9_-L2aeNdA/h120/Menu.png) no-repeat center center #555;}

.samsury-tab5:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitNgxTmwaQo76TIQDAIDcX6Yf0e68M-4s4DIsdiwK7UBYPWEUKZ2WWWnir9qmCgsRNVS6gP6BrE5SYrvRdLxzBt-b7DfW3yGQO86TOSaQPF0xd8AXl-NZJGk4m5CPR9Y8Iu9_-L2aeNdA/h120/Menu.png) no-repeat center center #222;}

.samsury-metro-menu {font-family: Helvetica,Arial,sans-serif;
font-size: 11px;
position:relative;
background:none;
width:500px;
height:90px;
border:none;
margin:20px auto;
padding:20px;
float:left;
}

ul.navi {
position:relative;
z-index:100;
padding:0;
margin:0 0 0 60px;
list-style:none;
width:auto;
height:30px;
}

ul.navi > li {
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
-moz-transition: -moz-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}

ul.navi a {
display:block;
width:70px;
height:70px;
position:absolute;
left:0;
top:0;
line-height:30px;
text-align:center;
text-decoration:none;
}

ul.navi a img {
border:0;
}

ul.navi a span {
position:relative;
top:30%;
font: 14px Segoe UI, Helvetica, Arial, sans-serif;
color:#fff;
}

ul.navi:hover {
height:200px;}

ul.navi:hover li#n1 {
-moz-transform: translatex(0px);
-ms-transform: translatex(0px);
-o-transform: translatex(0px);
-webkit-transform: translatex(0px);
transform: translatex(0px);
}

ul.navi:hover li#n2 {
-moz-transform: translatex(90px);
-ms-transform: translatex(90px);
-o-transform: translatex(90px);
-webkit-transform: translatex(90px);
transform: translatex(90px);
}

ul.navi:hover li#n3 {
-moz-transform: translatex(180px);
-ms-transform: translatex(180px);
-o-transform: translatex(180px);
-webkit-transform: translatex(180px);
transform: translatex(180px);
}

ul.navi:hover li#n4 {
-moz-transform: translatex(270px);
-ms-transform: translatex(270px);
-o-transform: translatex(270px);
-webkit-transform: translatex(270px);
transform: translatex(270px);
}

ul.navi:hover li#n5 {
-moz-transform: translatex(360px);
-ms-transform: translatex(360px);
-o-transform: translatex(360px);
-webkit-transform: translatex(360px);
transform: translatex(360px);
}

ul.sub {
padding:0;
margin:0;
list-style:none;
width:100%;
height:200px auto;
position:absolute;
left:0;
top:0;
z-index:-1;
opacity:0;
-moz-transition: opacity 0s linear 1s;
-ms-transition: opacity 0s linear 1s;
-o-transition: opacity 0s linear 1s;
-webkit-transition: opacity 0s linear 1s;
transition: opacity 0s linear 1s;
}

ul.sub li {
width:80px auto;
height:80px;
position:absolute;
left:0;
top:0;
z-index:-1;
-moz-transition: -moz-transform 0.5s ease-in-out 0.5s;
-ms-transition: -ms-transform 0.5s ease-in-out 0.5s;
-o-transition: -o-transform 0.5s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;
transition: transform 0.5s ease-in-out 0.5s;
}

ul.navi > li:hover ul {
opacity:1;
-moz-transition: opacity 0s linear 0.5s;
-ms-transition: opacity 0s linear 0.5s;
-o-transition: opacity 0s linear 0.5s;
-webkit-transition: opacity 0s linear 0.5s;
transition: opacity 0s linear 0.5s;
}

ul.navi li:hover ul li.l {
-moz-transform: translatex(-70px) translatey(90px);
-ms-transform: translatex(-70px) translatey(90px);
-o-transform: translatex(-70px) translatey(90px);
-webkit-transform: translatex(-70px) translatey(90px);
transform: translatex(-70px) translatey(90px);
}

ul.navi li:hover ul li.c {
-moz-transform: translatex(2px) translatey(90px);
-ms-transform: translatex(2px) translatey(90px);
-o-transform: translatex(2px) translatey(90px);
-webkit-transform: translatex(2px) translatey(90px);
transform: translatex(2px) translatey(90px);
}

ul.navi li:hover ul li.r {
-moz-transform: translatex(74px) translatey(90px);
-ms-transform: translatex(74px) translatey(90px);
-o-transform: translatex(74px) translatey(90px);
-webkit-transform: translatex(74px) translatey(90px);
transform: translatex(74px) translatey(90px);
}

ul.navi li:hover ul li.r1 {
-moz-transform: translatex(146px) translatey(90px);
-ms-transform: translatex(146px) translatey(90px);
-o-transform: translatex(146px) translatey(90px);
-webkit-transform: translatex(146px) translatey(90px);
transform: translatex(146px) translatey(90px);
}

Kemudian Masuk ke Layout >> Add Gadget >> HTML/Javascript dan masukkan kode dibawah ini :

<div class="samsury-metro-menu">
<ul class="navi">
<li id="n1"><a class="samsury-tab1" href="#" title="HOME" ></a>
<ul class="sub">
<li class="l"><a class="samsury-fb" href="#" title="FACEBOOK"></a></li>
<li class="c"><a class="samsury-tw" href="#" title="TWITTER"></a></li>
<li class="r"><a class="samsury-g" href="#" title="GOOGLE +"></a></li>
<li class="r1"><a class="samsury-rss" href="#" title="RSS FEED"></a></li>
</ul>
</li>
<li id="n2"><a class="samsury-tab2" href="#" title="LABEL" ></a>
<ul class="sub">
<li class="l"><a class="samsury-tab2sub" href="#" title="label 1">LABEL 1</a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2">LABEL 2</a></li>
<li class="r"><a class="samsury-tab2sub" href="#" title="label 3">LABEL 3</a></li>
<li class="r1"><a class="samsury-tab2sub" href="#" title="label 4">LABEL 4</a></li>
</ul>
</li>
<li id="n3"><a class="samsury-tab3" href="#" title="ARCHIVE" ></a>
<ul class="sub">
<li class="l"><a class="samsury-tab3sub" href="#">ARSIP 1</a></li>
<li class="c"><a class="samsury-tab3sub" href="#">ARSIP 2</a></li>
<li class="r"><a class="samsury-tab3sub" href="#">ARSIP 3</a></li>
<li class="r1"><a class="samsury-tab3sub" href="#">ARSIP 4</a></li>
</ul>
</li>
<li id="n4"><a class="samsury-tab4" href="#" title="PARTNER LINK" ></a>
<ul class="sub">
<li class="l"><a class="samsury-tab4sub" href="#">LINK 1</a></li>
<li class="c"><a class="samsury-tab4sub" href="#">LINK 2</a></li>
<li class="r1"><a class="samsury-tab4sub" href="#">LINK 3</a></li>
<li class="r"><a class="samsury-tab4sub" href="#">LINK 4</a></li>
</ul>
</li>
<li id="n5"><a class="samsury-tab5" href="#" ></a>
</li>
</ul>
<div style="clear:both"></div>
</div>

Note : Ganti tanda # warna merah sesuai data - data blog anda
Atau jika anda ingin langsung menampilkannya dalam widget dan ga perlu repot - repot masuk ke template blog, anda bisa langsung copas kode dibawah ini ke Add Gadget >> HTML/javascript. Dengan cara ini saya rasa lebih praktis dan efisien karena jika kita tidak menginginkannya lagi tinggal hapus saja.

Berikut ini adalah kodenya :

Demikianlah tips widget unik kali ini, semoga bermanfaat dan Salam Blogger
Terimakasih

Dari Anda Untuk Anda

Saturday, October 12, 2013

Widget Unik Metro UI Drop Down Sliding

No comments:

Post a Comment