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.

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/AVvXsEjnkr6Fu8Nvalm7wqu2W8nJuXGplWI7-TzDtOxs4m_XqeIF7zsuAjl1Oqrzn-IdLLXa7lVbtgUTfi_mluP5vmn8Be6R2npoxyaUcFHBF1gxtCphkn3MVukjQ2WuF0z81GKbOGvLYJaDwgU/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/AVvXsEjLZChbumKUy394MuZxlh_YZJIvaueRfrBtgGp7PunhRN-LIjosyDtm9PIKn7auQu_zLbVESXUeJiJFn_4MSJL5DmBeyher4lnbPBepg00z7PEpekV6vbz4nu5_Bi4jjhyphenhyphenxLU-yfZ1fckI/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/AVvXsEgFtnSBv9_PGZ3zAtvQQgmcVKp1wjyp2R9uxedXNJClUnRTsaKB26JJ05ZKGLjrVy7k3uUugCdfi6NcPmdhY7R1tyvjvdKE0hUne_yl999CMioZPczBfliOI5mQR8Q_eNu0nsO_r7SoskY/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/AVvXsEhdV0k79AgUc0wfZaL3b7A_QvuZ56S1fwUSx5APEucrd_Mpqr2YZ-hmLg76n5QLEm1xSTjkRUEpjaUnQXTB49mPhO20ZSKbHb_YW94fzbqVN76zv_cQNz2UzOkqeFei4i7Tgb4yF242IQU/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/AVvXsEiSuH74L8GrLi50rSJcjkr_E3xtFGvaOrItVZ9ltwqJAKYZCle612Cd0_uYIIlQc6L5Q9jbs007JZA-7W1d90h2vEAFSfhoKWXEXDWT3M2vi3Q8HtW4T7OX_RCb0YVKrSLSa30f-_Yr5lA/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/AVvXsEiSEj3GnTMvG7ODS6yJ07TAJMM6tGnwDbYQwfdLViZt3_pblJtZCEbkdt_K-PBv0mhtCyfo1Hj6JXLMrsN27-WphOF__3FzrOuWxJAWnvyTOG9X4o78q0dUW5hCVOw6297mbWfrKwYkNTQ/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/AVvXsEh9WqYf1fvau1XM9AAjseVIskCPycvd4liGw1GyV3G9LNHXv0f7u51RHKuYL95fM9XVOKuMQXz32ebzMShyphenhyphenyVEyQo6yMuTVO9nsK5qJy5ahm8_IHi5s__5tQlnccecQRN4VK5C6VUvXiJc/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/AVvXsEip2ai3lgxyVP4dS3ps8z6-e3k_ktPTRV8gwYkKJdHTRcIXAhjhzcjMqJ2WD-Rpu1eXFJEOstNjFeA9PCvYMMC6UWwPKwkkXZzozIMUl4fT2xpEwSVXB1DB10yMnGvPVWuNnjv0JcIK2JY/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/AVvXsEgDPpZIbCts1TZU-rkLR5aaMG2ugzy-M_fTfCBMFCysFfqjr0hP8I1ZPNTiP_6wWmCTbxXdJwKXoOH6rInvIlkH03q0bbHBZVj0c9P3jJSk2hxuBxxXFZ-RsrtfP8iWNqsgjA8o4n9JQRU/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/AVvXsEgDPpZIbCts1TZU-rkLR5aaMG2ugzy-M_fTfCBMFCysFfqjr0hP8I1ZPNTiP_6wWmCTbxXdJwKXoOH6rInvIlkH03q0bbHBZVj0c9P3jJSk2hxuBxxXFZ-RsrtfP8iWNqsgjA8o4n9JQRU/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/AVvXsEgDPpZIbCts1TZU-rkLR5aaMG2ugzy-M_fTfCBMFCysFfqjr0hP8I1ZPNTiP_6wWmCTbxXdJwKXoOH6rInvIlkH03q0bbHBZVj0c9P3jJSk2hxuBxxXFZ-RsrtfP8iWNqsgjA8o4n9JQRU/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.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit