Widget Unik Social Media Metro UI

Widget Unik Social Media Metro UI - Kehadiran windows 8 yang kian pesat membawa dampak positif khususnya buat kita para blogger, karena dengan tampilannya tersebut dapat kita aplikasikan ke desain blog. Utamanya adalah template blog ala windows maupun widget unik metro ui windows, yang kesemuanya itu bisa membuat tampilan blog lebih hidup dan berwarna. Untuk artikel kali ini saya masih melanjutkan widget unik bernuansa metro namun saya tambah dengan search button.

Sebagai gambarannya silakan lihat demo dibawah ini :

• DEMO

Untuk cara pemasangan di blog seperti biasa masuk Layout >> Add Gadget >> HTML/Javascript >> dan copas kode dibawah ini :

<style type="text/css" scoped="scoped">
.virlyz-metrosial
{
width:300px;
}
.virlyz-metrosial li
{
position:relative;
cursor:pointer;
padding:0;
list-style:none;
}
.virlyz-metrosial .f,.t,.g,.p,.in,.yt,.fd
{
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;
}
.virlyz-metrosial .t
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBcCo3-Mxpw5OI5qxW0Hmzawe3aZixChOMsXX7_vgAwK_q3g7TTZmHEk1xHxjapcWcZgmyINyBgSdyhpjPU-8u-fKFB6LcWPKJ8YB9xnmU0EiiN8GI-YiM23ipj0Ej96HA-osxm4KLzms/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.virlyz-metrosial .f
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkt8tbt1t09DKXV-2UJlrXGLQ2gCiTgoDGK82GgCk9PsgST5FSfCgxg2yU-xlUzx67aEsyQ8XJi-aT29YCk2Jjdr-0iHyyNau1nLSMPTSpUg76b1vEKCAA-IJymxKbd_1oOTmWLTVRLg/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.virlyz-metrosial .g
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6JnpiyXyiU9bdskBasFinNDMe4bFYq1h4N341nBoD-5T4JTu59X1S83V3DY1YG2Jh6BOyGkvUQt1w7z8PxXn0rpBTWnFpZLnJkq5PXEdKOmVQbCU_ZT5P0pyIFLxEZcno_UYc5U7-rv0/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.virlyz-metrosial .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjDG9TCL9Az4iTkdCyQzu6dH_WBDUBxfb9CK9Dk9Olut3oTM6PplzSqo0MkS2B_pq8LAD2AniIx_F1oWpcEN1E2BcXmMY_Y0MZU2uun8Kbhh63aAyOWKDGoSZASp37eaYdE2mALIGWuY/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.virlyz-metrosial li:hover .f
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxYscE1aP4W-6BtGuoilG6uAun9XvgLkP6xrMtFy9SgxmipbrNMSm7f3tg8-19drMOH6ju-SgQ8-NEjNk-utMkqCRyZCVIxetHq81RG0Yz3YW19-ZOQv42ZzmbwNsLGknVJwRZb-x2zxE/h120/facebookfh.png) no-repeat center center #1f69b3;
 box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;
}
.virlyz-metrosial li:hover .t
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDXFSg4jMMfD_CI6YYI88ijwZ1fGiTVzSh8p4NCpu19_lmdWq0qnRzBSz9RnnY87dedsGAeDDvehOEJm2hQBcvN5bWFAHmPfRNiPgojgKGSPW3Q_Y4aQwkdzyIjffUWrhqgVFSeZXL7c/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
 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;
}
.virlyz-metrosial li:hover .g
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigECfOAyjkNHlHwWFdKR77Nfiqtdwt1QkDVLzoancz-ayeNR4KbSyF8Cq9GYPFGtQRfrTylhjFWIIa2X8XdtC8YWq6QVOhvyPIzQvCn2MA_S56oWLeDG4q9rqFQqimU-kfaBOpBtW0RAo/h120/google+plush.png) no-repeat center center #da4a38;
 box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;
}
.virlyz-metrosial li:hover .fd
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnsdQKccssMEfwVtGGS7ZFHMLpidmaQVtWIdtu0-WRo6NWVMhsvPIWboMESz-AKXA8k95EgjeCS4oetyzU2cH-1pyNBaxKPP_BMpSpTDJXagec3J9Fb9RgmeW6Opx5otVxoP_7-g_Ual4/h120/feedh.png) no-repeat center center #e9a01c;
 box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
    width: 280px;
}
/* Form text input */
.form-wrapper input {
    width: 215px;
    height: 20px;
    padding: 10px 5px;
    float: left;
    font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    border-color: #51a7e8;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 75px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOAy3oN_0CIoEiwyGlkUVjhEKDR6W5315fO5W3Yda-hkFW3GoyTz-HJRLav-HqI-vgrQaypxsKBd1xv_SxL6aXua6QjdGfpD41_PJ2UIt3xNgyxTDFjN3Mo5XIXRgcjz5mwedcnkFeY0/h120/1367665345_search.png) no-repeat center center #20B2AA ;
    border-radius: 0 0 0 0;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;
}
.form-wrapper button:hover{
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOAy3oN_0CIoEiwyGlkUVjhEKDR6W5315fO5W3Yda-hkFW3GoyTz-HJRLav-HqI-vgrQaypxsKBd1xv_SxL6aXua6QjdGfpD41_PJ2UIt3xNgyxTDFjN3Mo5XIXRgcjz5mwedcnkFeY0/h120/1367665345_search.png) no-repeat center center #20B2AA ;
box-shadow:0px 0px 6px 3px #00CED1;
-webkit-box-shadow:0px 0px 6px 3px #00CED1;
-moz-box-shadow:0px 0px 6px 3px #00CED1;
-o-box-shadow:0px 0px 6px 3px #00CED1;
-ms-box-shadow:0px 0px 6px 3px #00CED1;
}
.form-wrapper button:active,
.form-wrapper button:focus{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOAy3oN_0CIoEiwyGlkUVjhEKDR6W5315fO5W3Yda-hkFW3GoyTz-HJRLav-HqI-vgrQaypxsKBd1xv_SxL6aXua6QjdGfpD41_PJ2UIt3xNgyxTDFjN3Mo5XIXRgcjz5mwedcnkFeY0/h120/1367665345_search.png) no-repeat center center #20B2AA ;
    outline: 0;
}
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #20B2AA  transparent;
    top: 12px;
    left: -6px;
}
.form-wrapper button:hover:before{
    border-right-color: #20B2AA ;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #20B2AA ;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
</style>
<div class="virlyz-metrosial">
<br />
<li><a class="f" href="#"></a></li>
<li><a class="t" href="#"></a></li>
<li><a class="g" href="#"></a></li>
<li><a class="fd" href="#"></a></li>
<br />
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder="  Type here..." required="" type="text" />
<button type="submit"></button>
</form>
<br /></div>

Ganti tanda # warna merah dengan URL sesuai data blog anda

Sekian tips membuat widget unik metro ui ala windows, semoga bermanfaat.

Button Icon Unik Dengan Animasi CSS3

Button Icon Unik Dengan Animasi CSS3 - Button icon biasanya berupa link yang mengarah ke link yang lain, baik link download, demo dan sebagainya. Blogger memberikan fitur insert link secara default hanyalah berupa tulisan saja, sehingga kesannya kurang terlihat menarik jika yang kita masukkan adalah link - link seperti download, preview, dan demo. Nah seperti widget unik sebelumnya saya akan mencoba memberikan tips blog membuat  click icon ( Button Icon ) dengan efek animasi shine, tentunya agar tampilan postingan kita terlihat lebih cantik dan menarik.

Untuk tampilannya lihat demo dibawah ini :

• DEMO

Udah lihat kan..??? OK mari kita lanjutkan untuk cara pemasangan di postingan blog.
Masuk ke Edit Template >> Expand Template ( CTRL+A, CTRL+C, DEL, CTRL+V )
kemudian masukkan code CSS dibawah ini sebelum kode [[ </b:skin>

.sam_button_icon {
    height:2em;
    padding:15px 50px;
    margin:20px 40px;
    cursor:pointer;
    display:inline-block;
    color:#FFF !important;
    font-size:1em;
    border:1px solid #eee;
    background:#eee;
    border-radius:4px;
    line-height:2em;
    border:1px solid #aaa;
    text-decoration:none;
    -webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
}

.green{
    background: #008000; /* Old browsers */
    background: -moz-linear-gradient(top, #008000 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008000), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #008000 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #008000 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #008000 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #008000 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.red{
    background: #ff3019; /* Old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff3019 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff3019 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff3019 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #ff3019 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.indigo{
    background: #4B0082; /* Old browsers */
    background: -moz-linear-gradient(top, #4B0082 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4B0082), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4B0082 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4B0082 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4B0082 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #4B0082 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4B0082', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.orange{
    background: #FFA500; /* Old browsers */
    background: -moz-linear-gradient(top, #FFA500 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFA500), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #FFA500 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #FFA500 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #FFA500 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #FFA500 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFA500', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.lightseagreen{
    background: #20B2AA; /* Old browsers */
    background: -moz-linear-gradient(top, #20B2AA 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#20B2AA), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #20B2AA 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #20B2AA 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #20B2AA 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #20B2AA 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20B2AA', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.navy{
    background: #000080; /* Old browsers */
    background: -moz-linear-gradient(top, #000080 0%, #191919 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000080), color-stop(100%,#191919)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #000080 0%,#191919 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #000080 0%,#191919 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #000080 0%,#191919 100%); /* IE10+ */
    background: linear-gradient(top, #000080 0%,#191919 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000080', endColorstr='#191919',GradientType=0 ); /* IE6-9 */
}

.sam_button_icon:hover{
    -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
.sam_button_icon:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
}
.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
}
.sam_button_icon:hover .light{
    padding:1px 5px;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}
@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}
@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}
@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}
@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}

Kemudian Save Template.

Cara pemasangan di postingan blog silakan masuk pada HTML dan masukkan kode dibawah ini, dan pilihlah kode sesuai dengan warna yanga akan ditampilkan.

 Green 

<a class="sam_button_icon green" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Red 

<a class="sam_button_icon red" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Indigo 

<a class="sam_button_icon indigo" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Orange 

<a class="sam_button_icon orange" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 LightseaGreen 

<a class="sam_button_icon lightseagreen" href="#">
<div class="light"></div>Virlyz Nyzam</a>

 Navy 

<a class="sam_button_icon navy" href="#">
<div class="light"></div>Virlyz Nyzam</a>

Note : Ganti tanda # dan Tulisan Virlyz Nyzam dengan URL yang akan anda masukkan di postingan blog.
Untuk mengatur posisi tampilan ditengah - tengah tambahkan kode <div style="text-align: center;"> diikuti </div> pada akhir code, jadi kodenya menjadi seperti ini :

<div style="text-align: center;">
<a class="sam_button_icon lightseagreen" href="#">
<div class="light"></div>Virlyz Nyzam</a></div>

Dan akhirnya sekian dulu tips widget unik blog untuk kali ini semoga bermanfaat, dan Salam Blogger

Download Template Blog Metro Windows

Masih melanjutkan artikel bernuansa metro kali ini saya akan memberikan contoh template blog metro yang bisa kita aplikasikan ke template blogger. Buat anda yang mau mencobanya silakan anda download dibawah ini untuk contoh templatenya :


1. Metro Classic

• PREVIEW

• DOWNLOAD

2. Metro Modern Solar

• PREVIEW

• DOWNLOAD

3. MetroFy

• PREVIEW

• DOWNLOAD

Semoga dengan tampilan2 blog yang unik seperti ini makin menambah semangat kita untuk terus menulis artikel yang tentunya bermanfaat buat para pembacanya.
Demikian dan terimakasih...salam blogging

Widget Unik Menu Multiple Drop Down

Widget Unik Menu Multiple Drop Down - Kali ini saya masih melanjutkan tentang widget unik seperti yang saya posting diartikel sebelumnya yaitu widget unik metro ui drop down sliding dan tips widget navigasi unik metro ui . Untuk widget yang satu ini adalah menu multiple drop down, mungkin kalian sudah tidak asing lagi dengan widget menu efek drop down. Namun saya memberikan efek yang sedikit berbeda yaitu multiple drop down, yang ini sangat bermanfaat sekali buat mereka yang punya blog dengan berbagai macam kategori /label. Untuk tampilannya silakan lihat demonya dibawah ini :

• DEMO

Untuk pemasangan di blog cukup mudah tinggal Add Gadget >> HTML/Javascript >> Copas kode dibawah ini : 

<style type="text/css" scoped="scoped">
#sam-multi-menu, #sam-multi-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sam-multi-menu {
    width: 900px;
    margin: 40px auto;
    border: 1px solid #222;
    background-color: #007f74;
    background-image: linear-gradient(#444, #007f74);
    border-radius: 6px;
    box-shadow: 0 1px 1px #777;
}
#sam-multi-menu:before,
#sam-multi-menu:after {
    content: "";
    display: table;
}

#sam-multi-menu:after {
    clear: both;
}

#sam-multi-menu {
    zoom:1;
}
#sam-multi-menu li {
    float: left;
    border-right: 1px solid #222;
    box-shadow: 1px 0 0 #444;
    position: relative;
}

#sam-multi-menu a {
    float: left;
    padding: 12px 20px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#sam-multi-menu li:hover > a {background-color: #007f74;
    background-image: linear-gradient(#000, #FF8C00);
    color: #fff;
}

*html #sam-multi-menu li a:hover {
    color: #fff;
}
#sam-multi-menu ul {
    margin: 20px 0 0 0;
    _margin: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;
    background: #444;
    background: linear-gradient(#444, #007f74);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    border-radius: 3px;
    transition: all .2s ease-in-out;
}

#sam-multi-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

#sam-multi-menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0;
    box-shadow: -1px 0 0 rgba(255,255,255,.3);    
}

#sam-multi-menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#sam-multi-menu ul li:last-child {
    box-shadow: none;
}

#sam-multi-menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

#sam-multi-menu ul a:hover {
    background-color: #007f74;
    background-image: linear-gradient(#000, #FF8C00);
}
#sam-multi-menu ul li:first-child > a {
    border-radius: 3px 3px 0 0;
}

#sam-multi-menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
}

#sam-multi-menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
}

#sam-multi-menu ul li:first-child a:hover:after {
    border-bottom-color: #fff;
}

#sam-multi-menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;  
}

#sam-multi-menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}
#sam-multi-menu-trigger {
    display: none;
}

@media screen and (max-width: 600px) {

    #sam-multi-menu-wrap {
        position: relative;
    }

    #sam-multi-menu-wrap * {
        box-sizing: border-box;
    }

    #sam-multi-menu-trigger {
        display: block;
        height: 40px;
        line-height: 40px;
        cursor: pointer;    
        padding: 0 0 0 35px;
        border: 1px solid #222;
        color: #fff;
        font-weight: bold;
        background-color: #111;
        background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }

    #sam-multi-menu {
        margin: 0; padding: 10px;
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 1;
        display: none;
        box-shadow: none;    
    }

    #sam-multi-menu:after {
        content: '';
        position: absolute;
        left: 25px;
        top: -8px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #444;
    }

    #sam-multi-menu ul {
        position: static;
        visibility: visible;
        opacity: 1;
        margin: 0;
        background: none;
        box-shadow: none;            
    }

    #sam-multi-menu ul ul {
        margin: 0 0 0 20px !important;
        box-shadow: none;    
    }

    #sam-multi-menu li {
        position: static;
        display: block;
        float: none;
        border: 0;
        margin: 5px;
        box-shadow: none;        
    }

    #sam-multi-menu ul li{
        margin-left: 20px;
        box-shadow: none;    
    }

    #sam-multi-menu a{
        display: block;
        float: none;
        padding: 0;
        color: #999;
    }

    #sam-multi-menu a:hover{
        color: #fff;
    }

    #sam-multi-menu ul a{
        padding: 0;
        width: auto;    
    }

    #sam-multi-menu ul a:hover{
        background: none;
    }

    #sam-multi-menu ul li:first-child a:after,
    #sam-multi-menu ul ul li:first-child a:after {
        border: 0;
    }    

}

@media screen and (min-width: 600px) {
    #sam-multi-menu {
        display: block !important;
    }
}

.no-transition {
    transition: none;
    opacity: 1;
    visibility: visible;
    display: none;        
}

#sam-multi-menu li:hover > .no-transition {
    display: block;
}
</style>

<br />
<ul id="sam-multi-menu">
<li><a href="#">HOME</a></li>
<li>

<a href="#">CATEGORIES</a>

<ul>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS 1</a></li>
<li><a href="#">CSS 2</a></li>
<li><a href="#">CSS 3</a></li>
<li><a href="#">CSS 4</a></li>
</ul>
</li>
<li>
<a href="#">HTML</a>

<ul>
<li><a href="#">HTML 1</a></li>
<li><a href="#">HTML 2</a></li>
<li><a href="#">HTML 3</a></li>
<li><a href="#">HTML 4</a></li>
</ul>
</li>
<li>
<a href="#">DOWNLOAD</a>
<ul>
<li><a href="#">DOWNLOAD 1</a></li>
<li><a href="#">DOWNLOAD 2</a></li>
<li><a href="#">DOWNLOAD 3</a></li>
<li><a href="#">DOWNLOAD 4</a></li>
</ul>
</li>
<li>
<a href="#">TUTORIAL</a>
<ul>
<li><a href="#">TUTORIAL 1</a></li>
<li><a href="#">TUTORIAL 2</a></li>
<li><a href="#">TUTORIAL 3</a></li>
<li><a href="#">TUTORIAL 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">LINK</a>
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="#">LINK 2</a></li>
<li><a href="#">LINK 3</a></li>
<li><a href="#">LINK 4</a></li>
</ul>
</li>
<li><a href="#">SOFTWARE</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><a href="http://samsury-sites.blogspot.com/">SAMSURY SITES</a>
</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
    $('li').has('ul').mouseover(function(){
        $(this).children('ul').css('visibility','visible');
        }).mouseout(function(){
        $(this).children('ul').css('visibility','hidden');
        })
  }
});
/* Mobile */
$('#sam-multi-menu-wrap').prepend('<div id="sam-multi-menu-trigger">
sam-multi-menu</div>
');    
$("#sam-multi-menu-trigger").on("click", function(){
    $("#sam-multi-menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#sam-multi-menu ul').addClass('no-transition');
</script>

Anda tinggal mengubah tanda # dengan URL dan nama yang akan ditampilkan

Demikianlah tips widget unik yang saya sampaikan dan terimakasih. Salam Blogger

Tips Hapus Delta Home Pada Google Chrome

Tips Hapus Delta Home Pada Google Chrome - Sebenarnya masalah delta search engine ini sudah pernah saya bahas di artikel tips sederhana menghapus search engine di firefox. Tapi mungkin banyak yang masih belum paham karena yang saya bahas disitu adalah babylon search engine, namun pada dasarnya cara hapusnya baik delta, claro, ask, maupun babylon ini adalah sama.

Nah sebagai pelengkapnya pada kesempatan ini saya akan mencoba memberikan tips hapus delta home/search engine di browser Google Chrome. Biasanya delta search ini terinstall bersamaan saat kita download software yang didalamnya terintergrasi dengan toolbar delta search dan lain - lain, yang tanpa kita sadari kita juga telah menginstall delta toolbar tersebut. Untuk menghindarinya saat install software kita bisa pilih Custom installation agar searh engine seperti ini tidak ikut serta.

Perhatikan gambar dibawah ini sebagai contoh :

Nah pada gambar diatas bisa kita lihat Custom setupnya, kita hilangkan checklistnya agar Delta Toolbar tidak ikut terinstall. Kita kembali ke topik bahasan diatas yaitu tentang cara hapus Delta Home pada browser google chrome, langsung saja ikuti tips - tipsnya berikut ini jika memang Delta home sudah hinggap di menu tab browser google chrome kalian.

1. Masuk ke Setting Browser pada Google Chrome >> Extensions >> Hapus Delta Toolbar Extensions

2. Masih pada Setting Browser >> Search Engine >> Manage Search Engine >> Hapus Delta Search Engine

3. Scroll ke bawah Klik Make Google Chrome My default Browser untuk mengembalikan ke Menu tab browser secara default.

4. Setelah itu masuk ke Control Panel  >> Program Feature >> Uninstall semua Program yang berhubungan dengan Delta Toolbar Search Engine.

5. Dan terakhir Restart Komputernya

Demikian tips hapus Delta search engine  yang saya berikan semoga bermanfaat.
Terimakasih

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"><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 :

<style type='text/css'>
.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);
}</style>


<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>

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