Flat UI Download Button Awesome

Flat UI Download Button Awesome - Layaknya multiple button download CSS3 yang saya share pada artikel sebelumnya dengan memanfaatkan font awesome icon untuk mempercantik tampilan. Menerapkan pseudo element dengan CSS value content sebuah icon awesome untuk membuat sebuah tombol button download yang lebih modern dan menarik seperti Flat Menu UI Efek Flip CSS3. Dan tentunya juga akan terlihat lebih bergaya dengan konsep metro ui style dalam sebuah Flat Template Portfolio Design.

• DEMO

• VIEW CODE

Untuk konsep dasarnya sebagai berikut :

CSS

.vn-red a{
background-color:#e74c3c;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-red a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-red a:hover{
  background:#2c3e50
}

HTML

<div class="vn-red" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>

Anda cukup mengganti tanda # dengan URL yang ingin dimasukkan

PENTING...!!!

# Install CSS kodenya sebelum kode :

]]></b:skin>

# Untuk menampilkan button dalam postingan blog cukup masukkan HTMLnya di mode HTML
# Untuk pilihan warnanya silakan klik VIEW CODE

Demikian semoga bermanfaat dan Happy Blogging

Share Button UI Slide Toggle

Share Button UI Slide Toggle - Melanjutkan artikel yang masih berbau blog metro ui style seperti random post efek jquery ui modal, dan hide widget dengan slide toggle agar semakin lengkap rasanya menerapkan konsep UI walaupun cuma mirip - mirip doang kan ga papa ya. Untuk penampakkan seperti dibawah ini :

• DEMO

Sebagai komponen pembentuknya adalah sebagai berikut :

CSS

.widgetshare{font:bold 12px/20px Tahoma!important;background:#34495e;color:#fff;padding:10px}
.widgetshare a{font:bold 12px/20px Tahoma!important;text-decoration:none!important;color:#fff!important;transition:all 1s ease;padding:4px 6px}
.widgetshare a:hover{background:#2c3e50}
.fcbok{background: #2980b9;}
.twitt{background:#f1c40f}
.gplus{background:#27ae60}
.pin{background:#c0392b}
.lkdin{background:#16a085}
 i.fa-caret-down{color:#e74c3c}
#buton-share{float:right;
padding:14px 15px;
background:#2c3e50;
color:#fff;
cursor:pointer;
display:inline-block
}
#share-to{
display:none;
text-align:left;
background:#34495e;
color:#fff;
padding:4px 0
}

JS

<script type="text/javascript">
$(document).ready(function(){
  $("#buton-share").click(function(){
    $("#share-to").slideToggle(1000,function(){
    });
  });
});
</script>

HTML

<div id="buton-share">
SHARE TO <i class="fa fa-caret-down"></i></div>
<div id="share-to">
<div class="widgetshare">
<a class="fcbok" expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
<a class="twitt" expr:href="&quot;http://twittter.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
<a class="gplus" expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i> Google+</a>
<a class="pin" expr:href="&quot;http://www.pinterest.com/pin/create/button/?media=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-pinterest"></i> Pinterest</a>
<a class="lkdin" expr:href="&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>
</div>

PENTING....!!!!

# Untuk mengatur posisi widget di bawah postingan blog masukkan kode HTML nya sebelum kode dibawah ini :

<div class='post-footer'>

atau

<data:post.body/>

Kemudian copas tepat dibawahnya, karena ada banyak kode seperti itu maka gunakan trial error saja, dan setiap template bisa saja berbeda.

# Atau jika ingin menjadikan sebuah widget silakan masukkan semua kode dalam Add HTML Widget di Layout Dashboard

. 

Random Post Efek Modal Jquery UI

Random Post Efek Modal Jquery UI - Random post atau orang sering menyebutnya recent post adalah widget unik yang berfungsi untuk menampilkan artikel maupun postingan yang sebelumnya sudah kita publikasikan. Pada tips blog metro ui style kali ini saya akan memberikan sedikit contoh random post dengan blind dan explode efek modal jquery ui, untuk contoh efek - efek jquery ui lainnya baca juga contoh efek -efek jquery ui.

• DEMO

Komponen - komponennya sebagai berikut :

CSS

<style scoped="scoped" type="text/css">
#dialog {background:#fff;color:#fff;width:300px;height:80px}
.ui-dialog-title{color:#fff}
#opener{position:relative;background:#2980b9;color:#fff;border:3px solid #2980b9;padding:6px 6px}
i.fa-random{color:#fff;font-size:16px}
</style>

JQUERY UI

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

JS

 <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>

HTML

<div id="dialog" title="RANDOM POST">
<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 9;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://samsury-sites.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>
</div>
<button id="opener"><i class="fa fa-random"></i> RANDOM POST</button>

Anda cukup mengganti http://samsury-sites.blogspot.com dengan url blog anda

Demikian sedikit widget blog metro ui kali ini, baca juga menu metro ui modal dialog dan semoga bermanfaat.

Modern Drop Down Button CSS3

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

• DEMO

Untuk element pembentuknya sebagai berikut :

CSS

<link href='https://sites.google.com/site/samsurysites/modern-button/modern button.css' rel='stylesheet' type='text/css'/>

JS

<script src='https://sites.google.com/site/samsurysites/modern-button/modern button.js' type='text/javascript'/>

JQUERY

<script type='text/javascript' src='jquery-1.10.2.min.js'></script>

FONT

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

HTML

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

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

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

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

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

Silahkan pilih sesuai dengan warna yang ingin ditampilkan.

Multi Button Download Metro UI

Multi Button Download Metro UI - Sesuai pembahasan artikel sebelumnya button icon unik animasi css3 yang masih seputar blog metro style , kali ini saya akan memberikan lagi tips blog membuat tombol multi download metro ui dengan efek animasi CSS3. Tombol ini sangat cocok sekali buat kalian yang menyediakan file download dengan berbagai format sebagai contoh video dengan format misalnya 3gp, mp4, mpeg, dan lain - lain. Untuk tampilannya seperti dibawah ini :

• DEMO

Untuk penggunaannya sebagai berikut :

CSS

.download {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 2em auto;
    width: 100%;
    height: 60px;
    line-height: 60px;}
.download h1 {
    position: absolute;
    color: #fff;
    font: 0.6em;
    line-height: 60px;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #4f2c68;
transition: margin-left .6s cubic-bezier(.1, .7, .2, 1);}

.download:hover h1{
    margin-left: 98%;}

.download ul {
    display: inline-block;
    margin: 0;
    padding: 0;}

.download ul li {
    position: static;
    display: inline-block;
    padding: 0 .2em;}

.download ul li::before {
    display: none;
}

.download ul li a {
    color: #fff;
    font-size: 1.4em;
    margin: 0;
    padding: .3em .6em;
    background: none;}
.download-info{
    background: #16a085;}
.download-info h1{
    background-color: #1abc9c;}
.download-danger{
    background: #e67e22;}
.download-danger h1{
    background-color: #f39c12;}
.download-success{
    background: #27ae60;}
.download-success h1{
    background-color: #2ecc71;}
.download-warning{
    background: #8e44ad;}
.download-warning h1{
    background-color: #9b59b6}

HTML

<div class="download download-info">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

<div class="download download-danger">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

<div class="download download-success">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

<div class="download download-warning">
<h1><i class="icon-download-alt"></i> DOWNLOAD </h1>
<ul>
<li><a href="#">3gp</a></li>
<li><a href="#">MP4</a></li>
<li><a href="#">MPEG</a></li>
<li><a href="#">FLV</a></li>
</ul>
</div>

Anda cukup mengganti tanda # dengan link url download yang ingin anda tampilkan dan pilih salah satu untuk HTMLnya.

Demikian tips blog metro ui style kali ini semoga bermanfaat
Happy Blogging

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