Megahubs blogger sample snippets

sample-blogger-snippet.txt

<style>
#mp-hook {
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;
  display: inline-block;
  position: relative;
  text-align: center;
  color: #00c7ec;
  border: 1px solid #00c7ec;
  border-radius: 5px;
  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
#mp-hook:hover {
  color: white;
  box-shadow: 0 0 30px 0 rgba(0, 199, 236, 0.5);
  background-color: #00c7ec;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#mp-hook:hover:before {
  -webkit-animation: shine 0.5s 0s linear;
  -moz-animation: shine 0.5s 0s linear;
  animation: shine 0.5s 0s linear;
}
#mp-hook:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
#mp-hook:before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: white;
  box-shadow: 0 0 15px 3px white;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@-webkit-keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
@-moz-keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
@keyframes shine {
  from {
    opacity: 0;
    left: 0%;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
</style>

<button id="mp-hook">My Button</button>

<script id="mp-snippet">;
    !function(a,b,c,d,e,f,g){a.MegahubsObject=e,a[e]=a[e]||function(){(a[e]._=a[e]._||[]).push(arguments)},
    a[e].$={start:1*new Date},f=b.createElement(c),g=b.getElementById("mp-snippet"),f.async=1,f.id="mp-widget",
    f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","https://d1npkqd2auelox.cloudfront.net/dist/mhsdk.js","MP");

    MP('init', 'PASTE_YOUR_APP_KEY_HERE', {
        // Parameter Lain-nya
    });

</script>;

Snippet di atas menggunakan SDK > 0.6.0, jika ingin menggunakan versi lama ganti Snippet (Line: 102 - 111) dengan,

<script id="mp-snippet">
window.mhAsyncInit = function() {
    MP.APP_KEY = 'PASTE_YOUR_APP_KEY_HERE';
    // Other API
};

!function(a,b,c){var d=a.createElement(b),e=a.getElementById("mp-snippet");
d.async=!0,d.id=c,d.src="https://mpwidget.s3.amazonaws.com/dist/v0.5.0/jssdk.min.js",
e.parentNode.insertBefore(d,e)}(document,"script","mp-widget");
</script>