Blog Copas: MENU UI | Berbagi itu Indah

Home » Semua Post Berkategori MENU UI

Tampilkan postingan dengan label MENU UI. Tampilkan semua postingan

Simple Tooltip Dropdown Menu CSS3

Simple Tooltip Dropdown Menu CSS3 - Efek tooltip selain untuk link dan gambar bisa juga kita terapkan dalam bentuk menu dropdown agar tampilan lebih kreatif dan cantik tentunya. Banyak cara untuk membuat efek tooltip mulai menggunakan gambar, CSS maupun efek Jquery UI, namun kali saya hanya akan memberikan contoh simplenya menggunakan efek hover pseudo element ( before: after: ) dengan CSS3.

Sebagai gambaranya bisa lihat demonya dibawah ini :

DEMO

VIEW CODE

Untuk konsep dasarnya sebagai berikut :

CSS

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
#menu{
width: 100%;
padding:10px 0 0 0;
list-style: none;
background: #34495e;border-left:30px solid #34495e;border-radius:3px
}

#menu li{
float: left;
padding:0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding:0 12px 0 12px;
color: #fff;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}

#menu li:hover > a{background:#16a085;
color: #fff;
}

*html #menu li a:hover{ /* IE6 */
color: #fff;
}

#menu li:hover > ul{
display: block;
}

/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #2c3e50;
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin:0;
padding: 0;
display: block;
}

#menu ul li:last-child{
}

#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}

#menu ul a:hover{
background: #16a085;
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #2c3e50;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #2c3e50;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

HTML

<ul id="menu">
<li>
<a href="#"><i class="fa fa-cogs"></i> MENU 1</a>
<ul>
<li><a href='#'> <i class="fa fa-cogs"></i> Settings</a></li>
<li><a href='#'> <i class="fa fa-envelope-o"></i> Contact Me</a></li>
<li><a href='#'> <i class="fa fa-tag"></i> Tag</a></li>
<li><a href='#'> <i class="fa fa-user"></i> About Me</a></li>
</ul>
</li>
<li>
<ul>
menu seterusnya.....
</ul>
</li>
</ul>

Anda cukup mengganti tanda # dengan url yang ingin anda masukkan, baca juga drop down menu metro ui awesome dan modern dropdown menu button css3

Flat Menu UI Efek Flip CSS3

Flat Menu UI Efek Flip CSS3 - Dengan semakin maraknya para pengguna design UI ( User Interface ) baik Flat UI, Semantic UI, maupun Fitur Bootstrap framework ke dalam template blogger. Kali ini saya persembahkan lagi contoh Flat Menu Ui dengan efek flip menggunakan transform CSS3, dan tentunya masih dikombinasikan dengan font icon awesome seperti artikel sebelumnya Kombinasi Menu Metro Ui dengan Font Awesome dan Drop Down Menu Metro UI Awesome.

Silakan lihat demonya dibawah ini :

DEMO

VIEW CODE

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

nav ul {
min-width: 600px;
position: relative;
display: table;
margin: 50px auto;
clear: both;
}

nav ul li {
list-style: none;
float: left;
}

nav ul li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}

nav ul li .front {
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

nav ul li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}

nav ul li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
text-align: center;
z-index: -1;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateX(0deg) rotateY(-180deg);
-ms-transform: rotateX(0deg) rotateY(-180deg);
-o-transform: rotateX(0deg) rotateY(-180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

nav ul li:hover .back {
z-index: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
}

nav ul li i {
line-height: 100px !important;
color: white;
vertical-align: middle !important;
}

nav ul li span {
font-family: 'Roboto';
font-size: 20px;
font-weight: 300;
line-height: 100px;
color: white;
text-transform: lowercase;
vertical-align: middle;
}

nav ul li.color-1 .front,
nav ul li.color-1 .back {
background-color: #3498db;
}

nav ul li.color-2 .front,
nav ul li.color-2 .back {
background-color: #2ecc71;
}

nav ul li.color-3 .front,
nav ul li.color-3 .back {
background-color: #1abc9c;
}

nav ul li.color-4 .front,
nav ul li.color-4 .back {
background-color: #f39c12;
}

nav ul li.color-5 .front,
nav ul li.color-5 .back {
background-color: #34495e;
}

HTML

<nav>
<ul class="panel">
<li class="color-1"> <a href="#">
<div class="front">
<i class="fa fa-windows fa-4x"></i>
</div>
<div class="back">
<span>HOME</span>
</div>
</a>

seterusnya.......

</li>
</ul>
</nav>

Silakan anda kreasikan sendiri sesuai kebutuhan agar tampilan lebih maksimal, dan untuk HTML kode selengkapnya bisa dilihat di View Code ...!!!

Enjoy Blogging

Drop Down Menu Metro Ui Awesome

Drop Down Menu Metro Ui Awesome - Setelah sebelumnya saya pernah share artikel tentang Menu metro ui modal dialog dan widget menu metro ui drop down sliding yang masih menggunakan gambar sebagai icon, namun kali ini saya mencoba menyempurnakan tampilannya dengan kombinasi menu metro ui dan font awesome. Karena saya lebih suka tampilan gambar yang relatif sedikit pada halaman blog, agar konsep blog metro ui style lebih maksimal. Untuk panduan cara kostumisasi font icon awesome versi 403

Sebagai gambarannya seperti dibawah ini :

DEMO

CSS

.samsury-tab1{background:#ea6153;}
.samsury-tab1:hover{background:#555;}
.samsury-fb{background:#555;}
.samsury-fb:hover{background:#2A82D9;}
.samsury-tw{background:#555;}
.samsury-tw:hover{background:#0CA8F0;}
.samsury-g{background:#555;}
.samsury-g:hover{background:#DC321E;}
.samsury-in{background:#555;}
.samsury-in:hover{background:#16a085;}
.samsury-tab2{background:#34495e;}
.samsury-tab2:hover{background:#555;}
.samsury-tab2sub{background: #555;}
.samsury-tab2sub:hover{background: #007f74;}
.samsury-tab3{background:#16a085;}
.samsury-tab3:hover{background:#555;}
.samsury-tab3sub{background: #555;
height:70px;}
.samsury-tab3sub:hover{background: #007f74;}
.samsury-tab4{background:#222;}
.samsury-tab4:hover{background:#555;}
.samsury-tab4sub{background: #555;}
.samsury-tab4sub:hover{background: #007f74;}
.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.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);
}
i.fa-th-large,i.fa-facebook,i.fa-twitter,i.fa-google-plus,i.fa-download,i.fa-linkedin,i.fa-list,i.fa-cogs,i.fa-wrench,i.fa-volume-up,i.fa-power-off,i.fa-file-o,i.fa-music,i.fa-picture-o,i.fa-sitemap,i.fa-envelope-o,i.fa-random{font-size:36px;color:#fff;padding-top:15px;}

HTML

Anda cukup mengganti tanda # dengan url yang ingin di tampilkan, dan untuk font icon selengkapnya bisa anda kunjungi Font Icon Awesome V 4.0.3

Modern Drop Down Button CSS3

Seperti halnya multi download button sebelumnya kali ini saya memberikan contoh button drop down dengan css3 agar tampilan blog lebih maksimal.
Dan tentunya lebih modern mengusung tekhnologi framework bootstrap dengan gaya blog metro ui style.

DEMO

Untuk element pembentuknya sebagai berikut :

CSS

JQUERY

FONT

HTML

<div class="m-btn-group">
<a class="m-btn green"><i class="icon-cog icon-white"></i> Settings</a>
<a class="m-btn green dropdown-carrettoggle" data-toggle="dropdown" href="#">
<span class="caret white"></span>
</a>
<ul class="m-dropdown-menu">
<li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
<li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
<li><a href="#"><i class="icon-off"></i> Logout</a></li>
</ul>
</div>

<div class="m-btn-group">
<a class="m-btn purple"><i class="icon-cog icon-white"></i> Settings</a>
<a class="m-btn purple dropdown-carrettoggle" data-toggle="dropdown" href="#">
<span class="caret white"></span>
</a>
<ul class="m-dropdown-menu">
<li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
<li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
<li><a href="#"><i class="icon-off"></i> Logout</a></li>
</ul>
</div>

<div class="m-btn-group">
<a class="m-btn red"><i class="icon-cog icon-white"></i> Settings</a>
<a class="m-btn red dropdown-carrettoggle" data-toggle="dropdown" href="#">
<span class="caret white"></span>
</a>
<ul class="m-dropdown-menu">
<li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
<li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
<li><a href="#"><i class="icon-off"></i> Logout</a></li>
</ul>
</div>

<div class="m-btn-group">
<a class="m-btn blue"><i class="icon-cog icon-white"></i> Settings</a>
<a class="m-btn blue dropdown-carrettoggle" data-toggle="dropdown" href="#">
<span class="caret white"></span>
</a>
<ul class="m-dropdown-menu">
<li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
<li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
<li><a href="#"><i class="icon-off"></i> Logout</a></li>
</ul>
</div>

<div class="m-btn-group">
<a class="m-btn black"><i class="icon-cog icon-white"></i> Settings</a>
<a class="m-btn black dropdown-carrettoggle" data-toggle="dropdown" href="#">
<span class="caret white"></span>
</a>
<ul class="m-dropdown-menu">
<li><a href="#"><i class="icon-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="icon-th-list"></i> View Profile</a></li>
<li><a href="#"><i class="icon-question-sign"></i> Help</a></li>
<li><a href="#"><i class="icon-off"></i> Logout</a></li>
</ul>
</div>

Silahkan pilih sesuai dengan warna yang ingin ditampilkan.

Kombinasi Menu Metro UI Dan Font Awesome

Kombinasi Menu Metro UI Dan Font Awesome - Menerapkan efek - efek unik untuk menu blog rasanya tidak akan habis untuk dibahas, seperti menu navigasi metro ui dan menu metro ui efek modal dialog. Ini sebagai pengembangan blog gaya metro style dan FontAwesome seperti artikel sebelumnya tentang FontAwesome Icon V3.2.1. Namun kali ini saya tidak menggunakan versi ini melainkan versi terbarunya versi 4.0.3 yang dikombinasikan dengan CSS3, agar penerapan template blog metro style lebih maksimal.

DEMO

Untuk dapat menggunakannya silakan install font awesome versi 4.0.3 sebelum kode </head>

CSS

.wrap{width:95%;margin:0 auto;}
#menu {margin-bottom: 10px;}
#menu a { float: left;display: block;color: #fff;text-decoration: none;text-align:center;}
#menu a i {
font-size:36px;
display:block;
text-align:center;
padding-top:30px;
}
#menu .home,
#menu .random-post,
#menu .sitemap,
#menu .follow,
#menu .contact-me
{
margin-right: 3px;
height: 120px;
}

#menu a.home,
#menu a.random-post,
#menu a.sitemap,
#menu a.follow,
#menu a.contact-me
{
margin-right: 3px;
width: 11%;
/* padding-top: 115px;*/
padding-left: 20px;
padding-right: 20px;
/* height: 35px;*/
}

#menu a.home {
background: #27ae60;}
#menu a.random-post {
background: #e67e22;}
#menu a.sitemap {
background: #2980b9;}
#menu a.follow {
background: #8e44ad;}
#menu .contact-me {
background: #16a085;}

/* CSS3 Effects */
#menu a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#menu a:hover {
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
#menu a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
@media (max-width:768px){
#menu a i{
font-size:16px;
}
#menu .home,
#menu .random-post,
#menu .sitemap,
#menu .follow,
#menu .contact-me{
height:73px;
}
#menu a.home,
#menu a.random-post,
#menu a.sitemap,
#menu a.follow,
#menu a.contact-me
{width:22%;}
}

HTML

<div class="wrap">
<div id="menu">
<a class="home" href="#"><i class="fa fa-windows"></i>Home</a>
<a class="random-post" href="#" ><i class="fa fa-random"></i>Random Post</a>
<a class="sitemap" href="#"><i class="fa fa-sitemap"></i>Site Map</a>
<a class="follow" href="#"><i class="fa fa-users"></i>Follow</a>
<a class="contact-me" href="#"><i class="fa fa-envelope-o"></i>Contact Me</a>
</div>
</div>

Jika anda terlanjur menggunakan FontAwesome versi dibawah 4.0 anda bisa mengganti penulisan font pada HTML diatas, untuk format penulisannya seperti ini <i class="icon-windows"></i> dan seterusnya.

Demikian tips blog metro ui style kali ini, semoga bermanfaat dan memberikan inspirasi untuk terus mengembangkan blog dengan gaya terkini. Happy Blogging

Menu Metro UI Efek Modal Dialog

Menu Metro UI Efek Modal Dialog - Setelah sebelumnya widget navigasi metro ui sebagai widget unik gaya metro style, kali ini saya akan mencoba lagi memberikan tips untuk kostumisasi pada menu diatas dengan sedikit efek Light box overlay menggunakan Modal dialog. Fungsinya sebagai pembungkus widget ataupun text dengan efek modal dialog yang berkembang saat ini seperti template blog metro windows ( blog gaya metro ui style ).

DEMO

Untuk pemasanganya silakan perhatikan kode dibawah ini :

Masukkan sebelum </head>

Masukkan sebelum </body>

Untuk pemasangan di blog silahkan Add Gadget >> HTML/Javascript >> dan Copas Kode dibawah Ini :

<div class="samsury-metronav">
<div class="tile-bt-large solid-coral shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav">
<div class="md-modal md-effect-13" id="modal-13">
<div class="md-content">
<h3>
MENU <a class="md-close" href="">×</a></h3>
<div>
Silahkan Ganti Dengan Menu Di Blog Anda <br />
( Tapi Ingat Jangan Taruh Menu Makanan Ya )</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-13"><i class="icon-th-large icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
</div>
<div class="tile-bt solid-darkblue shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-8" id="modal-8">
<div class="md-content">
<h3>
<i class="icon-facebook"></i>
FACEBOOK <a class="md-close" href="">×</a></h3>
<div>
Jika perlu ganti tulisan ini dengan widget Fanpage Facebook Anda ( itupun kalau anda punya )</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-8"><i class="icon-facebook icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-red shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>
<i class="icon-envelope"></i> CONTACT ME <a class="md-close" href="">×</a></h3>
<div>
Isilah dengan widget contact me
</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-1"><i class="icon-envelope icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt-large solid-purple shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav">
<div class="md-modal md-effect-4" id="modal-4">
<div class="md-content">
<h3>
<i class="icon-group"></i> FOLLOW <a class="md-close" href="">×</a></h3>
<div>
Anda bisa mengganti tulisan ini dengan Follower Blog Anda....!!!!
</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-4"><i class="icon-group icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-green shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-15" id="modal-15">
<div class="md-content">
<h3>
<i class="icon-google-plus"></i> CIRCLE <a class="md-close" href="">×</a></h3>
<div>
Google menyediakan widget ini, silakan pasang di sini...!!!</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-15"><i class="icon-google-plus icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-yellow shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-11" id="modal-11">
<div class="md-content">
<h3>
<i class="icon-user"></i> ABOUT ME<a class="md-close" href="">×</a></h3>
<div>
Aku Hanyalah seorang Blogger yang ingin mencoba mencoba dan terus mencoba dengan hal2 yang baru</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-11"><i class="icon-user icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>

Anda cukup mengganti tulisan merah dengan text/maupun widget yang ingin anda munculkan

Demikian tips blog metro ui style kali ini semoga bermanfaat

Menu Breadcrumb Metro Style

Menu Breadcrumb Metro Style - Menu navigasi breadcrumb ini berfungsi untuk mempermudah para pembaca / pengunjung untuk menelusuri seluruh isi dari sebuah blog. Setiap blog yang pernah kita kunjungi pasti terdapat navigasi breadcrumb yang berada diatas title post, mulai dari design sederhana sampai yang keren - keren / unik. Terkait dengan menu navigasi ini saya akan berbagi tips membuat Navigasi Breadcrumb yang bergaya metro style. Mungkin menu ini akan lebih cocok bagi mereka yang menggunakan template blog metro, seperti menu navigasi metro ui. Untuk tampilannya silakan lihat demonya dibawah ini :

DEMO

Langsung kita lanjutkan ke cara pemasangan di blog, masuk Edit HTML >> Expand Template ( Tekan CTRL+A, CTRL+C, DEL, CTRL+V ). kemudian masukkan kode css dibawah ini sebelum kode [[ </b:skin>

#vn-brcmb{
background: #02ab68;
width:620px;
margin-left:20px;
border-width: 1px;
font-family:'Oswald', Arial, Helvetica, sans-serif;
margin-top:40px;
text-transform: uppercase;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
}
#vn-brcmb li{
float: left;
}
#vn-brcmb a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ff8c00;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#vn-brcmb li:first-child a{
padding-left: 1em;
}
#vn-brcmb a:hover{
background: #ff8c00;
}
#vn-brcmb a::after,
#vn-brcmb a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
#vn-brcmb a::after{
z-index: 2;
border-left-color: #ddd;
}
#vn-brcmb a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#vn-brcmb a:hover::after{
border-left-color: #ff8c00;
}
#vn-brcmb .current,
#vn-brcmb .current:hover{
font-weight: bold;
background: none;
}
#vn-brcmb .current::after,
#vn-brcmb .current::before{
content: normal;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
#vn-brcmb .current,
#vn-brcmb .current:hover{
font-weight: normal;
background: none;
}
#vn-brcmb .current::after,
#vn-brcmb .current::before{
content: normal;
}

Setelah itu cari kode <div class='blog-posts hfeed'>
Dan masukkan kode dibawahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<ul id='vn-brcmb'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

Jika anda sebelumnya sudah memakai navigasi breadcrumb sebaiknya anda hapus terlebih dulu, agar tidak menjadi 2. Mulailah dengan kata " breadcrumb " untuk menemukan kode tersebut baik CSS maupun pemanggil breadcrumbnya

Demikian semoga bermanfaat, happy blogging.

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/AVvXsEje2Q-YIeiJnVDvEZtfA8zGsBcKRErMaeqs0yKeNus3HhBylh9ygowch6u13rSwvV15VgWg6DPFF7OEK4xTQkf08m1vodVDTmuTYz3a5CM4vbrnth_FwB5ZF3YrqiLGxMo9CyJ5y4qNk5s/h120/home.png) no-repeat center center #277599;}

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

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

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

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

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

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

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

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

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

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

.samsury-tab2:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhov3HSKgplCemejpwkCBFETU2_NKKP0ClKVW7LcR3QcEueyhtB00s9OJ-78SsCCqBGbk-Qgbtkrh3VT8BdCiONpFAEe-PI5w5XQxbqJ3cxaAnMY6RSToscpijoDJs28EEO45dBveDECQU/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/AVvXsEgW369Qa66wVjXmzDrzOY0wmGOjTTgpa1An_isf9bVZFJPnfLDgXCGDrtlhNyL7fOJsQuJUO6ok2B-LgwnuiBYvAyTv5P2E0BxYuAsH8YIceLgb0blUnX3vmLAd_GQB6qLYF6hLn2eaFsM/h120/archives.png) no-repeat center center #265f27;}

.samsury-tab3:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW369Qa66wVjXmzDrzOY0wmGOjTTgpa1An_isf9bVZFJPnfLDgXCGDrtlhNyL7fOJsQuJUO6ok2B-LgwnuiBYvAyTv5P2E0BxYuAsH8YIceLgb0blUnX3vmLAd_GQB6qLYF6hLn2eaFsM/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/AVvXsEhVsdjGhJp4GSyeMh1fyKiyLLqZxL03HWJP_Q6G5ZShgwxTQGCbNRlq-mVBqt8Y3sXe9KxMU5qhGG-wEX266dJxwM-ORt7OFBB6xpQG9aRvqPUEVajuTEx-4hVYiMDVbSEcjpJZ29ZgrdY/h120/contact.png) no-repeat center center #d84a38;}

.samsury-tab4:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsdjGhJp4GSyeMh1fyKiyLLqZxL03HWJP_Q6G5ZShgwxTQGCbNRlq-mVBqt8Y3sXe9KxMU5qhGG-wEX266dJxwM-ORt7OFBB6xpQG9aRvqPUEVajuTEx-4hVYiMDVbSEcjpJZ29ZgrdY/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/AVvXsEjldpE2PhiHuhaPYIlL9hjMmOQGqHOlRpaDCBsSiS-6gZAGBmZrv7j8V233zdxy2m5SbsiIoNXMMf5LgeBdA8zo_8JbkHSsNoIpGZwA6k4S-ofNvUuZMmL0IdPDS1ZCCsKPThhMKiBmpPw/h120/Menu.png) no-repeat center center #555;}

.samsury-tab5:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjldpE2PhiHuhaPYIlL9hjMmOQGqHOlRpaDCBsSiS-6gZAGBmZrv7j8V233zdxy2m5SbsiIoNXMMf5LgeBdA8zo_8JbkHSsNoIpGZwA6k4S-ofNvUuZMmL0IdPDS1ZCCsKPThhMKiBmpPw/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"><span>LABEL 1</span></a></li>
<li class="c"><a class="samsury-tab2sub" href="#" title="label 2"><span>LABEL 2</span></a></li>
<li class="r"><a class="samsury-tab2sub" href="#" title="label 3"><span>LABEL 3</span></a></li>
<li class="r1"><a class="samsury-tab2sub" href="#" title="label 4"><span>LABEL 4</span></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="#"><span>ARSIP 1</span></a></li>
<li class="c"><a class="samsury-tab3sub" href="#"><span>ARSIP 2</span></a></li>
<li class="r"><a class="samsury-tab3sub" href="#"><span>ARSIP 3</span></a></li>
<li class="r1"><a class="samsury-tab3sub" href="#"><span>ARSIP 4</span></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="#"><span>LINK 1</span></a></li>
<li class="c"><a class="samsury-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="samsury-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="samsury-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="samsury-tab5" href="#" ><span></span></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

Blog Copas

Simple Tooltip Dropdown Menu CSS3

Flat Menu UI Efek Flip CSS3

Drop Down Menu Metro Ui Awesome

Modern Drop Down Button CSS3

Kombinasi Menu Metro UI Dan Font Awesome

Menu Metro UI Efek Modal Dialog

Menu Breadcrumb Metro Style

Widget Unik Metro UI Drop Down Sliding

Like Us

Naruto

Fairy Tail

Blogging