Skip to content

Instantly share code, notes, and snippets.

@echr
Last active June 7, 2017 04:27
Show Gist options
  • Save echr/b784ed2b5274e440494a8ed58a5b5c58 to your computer and use it in GitHub Desktop.
Save echr/b784ed2b5274e440494a8ed58a5b5c58 to your computer and use it in GitHub Desktop.
Megahubs blogger sample snippets
<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>;
@echr
Copy link
Author

echr commented Jun 7, 2017

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment