-->

Home Amp Blogger Google URL Shortener Untuk Blog AMP HTML

Google URL Shortener Untuk Blog AMP HTML

Wi March 04, 2017

Short URL ini berfungsi untuk memudahkan mendapatkan URL postingan untuk dibagikan melalui sosial media, forum, maupun ruang chatting. Untuk demo Google URL Shortener untuk postingan blog ini, silahkan coba lihat di bawah postingan ini.

Tertarik untuk mencobanya?

Silahkan simpan kode di bawah ini di edit HTML, biasanya disimpan di bawah postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shortener-box'>
<amp-iframe frameborder='0' height='30' layout='responsive' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' expr:src='&quot;https://cdn.rawgit.com/darwinisrin/URL-Shortener.html/6b3221f0/URL-Shortener.html?api=xxxxxxxxxxxxxxxxx&amp;url=&quot; + data:blog.canonicalUrl' width='747'>
</amp-iframe>
  </div>
</b:if>

Silahkan ganti <xxxxxxxxxxxxxxxxx dengan kode URL Shortener API key Anda sendiri. Untuk mendapatkan kode URL Shortener API key, silahkan ikuti tutorialnya DI SINI.

Kemudian silahkan tambahkan kode CSS di bawah ini pada css style untuk postingan.

@media screen and (max-width:414px){.shortener-box amp-iframe{height:45px}
}
@media screen and (max-width:375px){.shortener-box amp-iframe{height:60px}
}

Selesai........

Jika Anda ingin menghosting sendiri file HTML-nya silahkan gunakan kode di bawah ini, simpan dengan ekstensi *.html.

<!DOCTYPE html><script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,700,500i,900'/>
<style>
body{margin:0;padding:0;font-family:Roboto,Arial,sans-serif}
.shorten-box{font-size:100%;font-weight:500;color:#666!important;margin:0}
#output{display:inline-block;}
.shorten-text{display:inline-block;color:#141924;margin-right:5px;border:1px solid transparent;line-height:1;padding:5px 0;}
#foo{display:inline-block;background:#f8f8f8;border:1px solid #d5d5d5;border-radius:3px;padding:5px 8px;margin:0;box-shadow: inset 0px 0px 1px rgba(0,0,0,.08);font-family:Consolas,Monaco,'Andale Mono',monospace;font-size:14px;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000;cursor:pointer;line-height:1;}
.clear{clear:both}
#output{position:relative}
#output .btn {
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
  right:0;
  top: 0;
}

button.btn {
  position: relative;
  display: inline-block;
  padding: 5px 5px 4px;
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  color: #333;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius:0 3px 3px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
}

img.clippy {
  position: relative;
  vertical-align: middle;
  padding: 0;
  background: none;
  border: none;
  -moz-box-shadow: 0;
  -webkit-box-shadow: 0;
  box-shadow: 0;
}

#output:hover .btn {
  opacity: 1;
}

.tooltipped {
  position: relative
}

.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background: rgba(0,0,0, 0.8);
  border-radius: 3px;
  -webkit-font-smoothing: subpixel-antialiased
}

.tooltipped:before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: rgba(0,0,0, 0.8);
  pointer-events: none;
  content: "";
  border: 5px solid transparent
}

.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
  display: inline-block;
  text-decoration: none
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%)
}

.tooltipped-w:before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: rgba(0,0,0, 0.8)
}

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%)
}
button.btn:focus,button.btn:active{outline:0}
</style>

<script>
var urls = getQueryVariable("url");
var apis = getQueryVariable("api");
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
  }
  return(false);
}
</script>

<div class='shorten-box'>
<script>document.write('<input value="'+ urls +'" id="longurl" name="url" type="hidden"/> '); </script>
<div class='shorten-text'>Share this with short URL:</div>
<div id='output'></div>
<div class='clear'></div>
  </div>
 

<script>
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

function makeShort() {
    var longUrl = document.getElementById("longurl").value;
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longUrl
        }
    });
    request.execute(function(response) {
        if (response.id != null) {
            str = "";
            str += "<button class='btn' data-clipboard-snippet><img class='clippy' width='13' src='https://firebasestorage.googleapis.com/v0/b/kompijs.appspot.com/o/image%2Fclippy.svg?alt=media&token=ded490f4-41c8-4fb6-a52a-0f078167d21b' alt='Copy to clipboard'></button><div id='foo'>"+ response.id +"</div>";
            document.getElementById("output").innerHTML = str;
        } else {
            alert("ERROR: creating short url \n" + response.error);
        }
    });
}

function load() {
    gapi.client.setApiKey(apis);
    gapi.client.load('urlshortener', 'v1', function() {
        document.getElementById("output").innerHTML = makeShort();
    });
}
window.onload = load;
</script>
    <script>
  var clipboard = new Clipboard('.btn', {
    target: function() {
      return document.querySelector('div#foo');
    }
  });

  clipboard.on('success', function(e) {
    console.log(e);
  });

  clipboard.on('error', function(e) {
    console.log(e);
  });

var snippets = document.querySelectorAll('div#foo');
var clipboardSnippets = new Clipboard('[data-clipboard-snippet]', {
  target: function(trigger) {
    return trigger.nextElementSibling;
  }
});
clipboardSnippets.on('success', function(e) {
  e.clearSelection();
  showTooltip(e.trigger, 'Copied!');
});
clipboardSnippets.on('error', function(e) {
  showTooltip(e.trigger, fallbackMessage(e.action));
});

var btns = document.querySelectorAll('.btn');
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('mouseleave', function(e) {
    e.currentTarget.setAttribute('class', 'btn');
    e.currentTarget.removeAttribute('aria-label');
  });
}

function showTooltip(elem, msg) {
  elem.setAttribute('class', 'btn tooltipped tooltipped-w');
  elem.setAttribute('aria-label', msg);
}

function fallbackMessage(action) {
  var actionMsg = '';
  var actionKey = (action === 'cut' ? 'X' : 'C');
  if (/iPhone|iPad/i.test(navigator.userAgent)) {
    actionMsg = 'No support :(';
  } else if (/Mac/i.test(navigator.userAgent)) {
    actionMsg = 'Press ?-' + actionKey + ' to ' + action;
  } else {
    actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
  }
  return actionMsg;
}
    </script>

Darwin Isrin

Pencinta Malam, Penyuka Hitam, Penikmat Gelap dan Pengurus Acara 😃

Amp, Blogger

How to style text in Disqus comments:

To write a bold letter please use <strong></strong> or <b></b>.
To write a italic letter please use <em></em> or <i></i>.
To write a underline letter please use <u></u>.
To write a strikethrought letter please use <strike></strike>.
To write HTML code, please use <code></code> or <pre></pre>or<pre><code></code></pre>.
And use parse tool below to easy get the style.

Show Parser Hide Parser

Tambahkan Komentar Tutup Komentar

Disqus Comments