MAS ARIE69

Friday, April 25, 2014

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.

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

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

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

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

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

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

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

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

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

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

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

.samsury-tab2:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBJT9e-Ul1LT3O-8nOaPOakhsxxryXAUZug3B0G2O-hR3QvQJGEBGfl7sNwJlm42bKKhTjtVwj32zRdMqzPYUCetAovcF8LI9aCOGzHYU90xFX5wRxkhsTgiHBx59Bc5tZG7jO6PxXdhk/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/AVvXsEhVRdaS-NcRUxb3BQl6atBVhXlXK31uchVzY74BlvNEup7n-UieJ8Y-UArqn3ULZoJkSvurY7CeUtyBWwYhhLsHC-hjEEXmc8DOiQwgNNyqEBqmE1tCzOpObOXO8zKliQMVaoIghYhq6I0/h120/archives.png) no-repeat center center #265f27;}

.samsury-tab3:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRdaS-NcRUxb3BQl6atBVhXlXK31uchVzY74BlvNEup7n-UieJ8Y-UArqn3ULZoJkSvurY7CeUtyBWwYhhLsHC-hjEEXmc8DOiQwgNNyqEBqmE1tCzOpObOXO8zKliQMVaoIghYhq6I0/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/AVvXsEgTCsBjbQ-aie2sVMOw-e9hR52m2hx0YLuh-r3-3OZki3wLkngd8fDiqYGSoeapb0NcLrIqDG2JBTX56HMgHG52HsXP2pKzkQ76msascLv8ClRbn-5ssS5pyLd3n0O8-iWTB-s3aRW-ZxY/h120/contact.png) no-repeat center center #d84a38;}

.samsury-tab4:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTCsBjbQ-aie2sVMOw-e9hR52m2hx0YLuh-r3-3OZki3wLkngd8fDiqYGSoeapb0NcLrIqDG2JBTX56HMgHG52HsXP2pKzkQ76msascLv8ClRbn-5ssS5pyLd3n0O8-iWTB-s3aRW-ZxY/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/AVvXsEgWJTf57BcFuny8-_NPi-hAgARYpHF9sGdGTrPrtIeXEwDRpxtgE6mu3eBq6iVqioxMZGmgwdwIN4HXMDCuSxu9W6PC6snaVnPD6gaF9fuO9xfgE5gcKo7YM7eOMLjXhG29dKysk1kxXdg/h120/Menu.png) no-repeat center center #555;}

.samsury-tab5:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWJTf57BcFuny8-_NPi-hAgARYpHF9sGdGTrPrtIeXEwDRpxtgE6mu3eBq6iVqioxMZGmgwdwIN4HXMDCuSxu9W6PC6snaVnPD6gaF9fuO9xfgE5gcKo7YM7eOMLjXhG29dKysk1kxXdg/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

Button Icon Unik Dengan Animasi CSS3

6:48 AM Animation, css3 No comments

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.

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

Widget Unik Social Metro Efek Zoom

6:46 AM Sosial Media, Widget No comments

Widget Unik Social Metro Efek Zoom - Kurang afdol jika sebuah blog yang keren namun tidak terpasang widget social media, karena biar bagaimanapun kehadiran social media sangat berpengaruh bagi popularitas sebuah blog. Masih berkaitan tentang widget unik khususnya bagi mereka para blogger yang menggunakan template blog metro, yaitu membuat widget social media ala metro dengan efek zoom.

Untuk tampilannya seperti dibawah ini :

DEMO

Selanjutnya untuk cara pemasangannya :

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

Ganti tanda # warna merah dengan URL data blog anda

Demikian tips widget unik kali ini, dan semoga tetep bermanfaat.
Happy Blogging

Cara Mudah Download Video Youtube | Pasang Widget Download Youtube di Blog

6:40 AM Widget No comments

Cara Mudah dan Praktis Download Video Youtube - Sudah lama tidak download youtube, baru hari ini karena ada kebutuhan untuk sebuah tutorial video yang harus saya download, mau gak mau harus searching tools gratis untuk download Video di Youtube. Banyak saya menemukan Video Youtube Downloader di Internet, namun ada satu yang saya suka dan demen banget, karena simple, mudah, cepet dan gak pakai ribet butuh requirenment aneh-aneh dan tetek bengek. Akhirnya jatuhlah pilihan pada tools dari Savefrom. Kebetulan Savefrom menyediakan script widget nya juga buat di pasang di blog dengan redirect ke halaman savefrom, jadilah seperti di bawah ini. Silahkan langsung aja mencoba tools di bawah ini :

Masukkan Link Youtube Disini :

Pada saat akan masuk ke halaman proses download-nya, pilih format Video yang akan di unduh, ada beberapa format pilihan :

FLV 240p

MP4 360p

WebM 360p

3GP 144p

3GP 240p

Audio MP4 128

Bagaimana Cara Pasang di Blog Anda ?
Nah, sekarang bagaimana cara pasang Tools downloader Youtube diatas pada blog anda ?, tinggal pasang saja script di bawah ini dan penempatannya bisa di widget blog maupun di dalam postingan.

Script Download Video Youtube :

Bagaimana mudah bukan ?, selamat mencoba Cara Mudah Download Video Youtube, semoga bermanfaat bagi pembaca setia Blogger-Coepoe ini.

MAS ARIE69

10.000 GAMBAR KEREN UNTUK BACKGROUND BLOG

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Friday, April 25, 2014

Widget Unik Metro UI Drop Down Sliding

Button Icon Unik Dengan Animasi CSS3

Widget Unik Social Metro Efek Zoom

Cara Mudah Download Video Youtube | Pasang Widget Download Youtube di Blog

Labels

Blog Archive

sponsor

comment

Friday, April 25, 2014

Social Profiles

Labels

Blog Archive

sponsor

comment