-->
Cara Membuat URL Shortener sendiri menggunakan Javascript Javascript

-

Kali ini saya akan menjelaskan bagaimana cara membuat URL Shortener sendiri menggunakan Javascript. Seperti yang kalian ketahui bahwa ada beberapa SITE seperti goo.gl atau bit.ly. Sekarang dengan Tutorial ini kalian bisa membuat URL Shortener sendiri sesuka kalian. Kalian bisa ganti, memperbanyak, dll.
OK, sekarang kita langsung ke Tutorial nya.

Lanjutkan Membaca »
Cara Membuat Halaman Demo Dengan Toolbar di Blogger Javascript

-

Kali ini saya bertugas memberikan Tutorial atau artikel lainnya di blog ini. Semoga artikel ini bisa bermanfaat. Terutama bagi para blogger yang suka membuat Template Desain Sendiri. Halaman Demo ini menurut saya sangat di perlukan untuk melakukan View dari Template yang sudah kita buat.

Pertama. Keuntungan kamu membuat halaman demo. Diantaranya:
  1. Dibuat di halaman statis (static page)
  2. Kamu ngga perlu buat blog baru lagi
  3. Menggunakan tag conditional pengingkaran, sehingga loading lebih cepat
  4. Penambahan link download otomatis di header atas

Cara Pembuatan

Langkah Pertama : Kalian buat Halaman statis baru dengan memilih menu pages di blogger.
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.

Langkah Kedua : Masuk ke Template -> Edit HTML. Simpan kode CSS ini di atas ]]></b:skin> atau</style>
 
#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url(http://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/s1600/loader.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
left: 0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#66af33 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 50px;
position:fixed;
top:0;
right:0;
line-height:50px;
cursor:pointer;
color:white;
}
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#579c26 url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(http://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png)no-repeat 15px 50%;
text-align:center;
height:50px;
padding:0px 20px 0px 55px;
position:fixed;
top:0;
right:158px;
line-height:50px;
cursor:pointer;
color:white;
text-decoration:none;
}
.demologo, a.demologo {
background: url(http://2.bp.blogspot.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/s1600/ki-logo.png)no-repeat left center;
padding-left:55px;
font-size:17px;
font-weight:normal;
font-family:Oswald, Arial, Sans-serif;
text-transform:uppercase;
line-height:50px;
left:15px;
position:fixed;
color:white;
text-decoration:none;
}

Langkah Ketiga : Simpan kode ini tepat di bawah <body>

<b:if cond='data:blog.url != &quot;http://fansublogger.blogspot.com/p/template-demo.html&quot;'>

Ganti http://fansublogger.blogspot.com/p/template-demo.html dengan URL Halaman Demo yang telah kalian buat tadi

Langkah Keempat : Simpan kode ini tepat di atas </body>
</b:if> 

<b:if cond='data:blog.url == &quot;http://fansublogger.blogspot.com/p/template-demo.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
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);
}
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;
};
//]]>
</script>

<div id='tab-demo'>
<a class='demologo' href='http://fansublogger.blogspot.com'>Template Demo</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white;
}
</style>
</b:if>

Ganti http://fansublogger.blogspot.com/p/template-demo.html dengan URL Halaman Demo yang telah kalian buat tadi

Format Penulisan

http://blogsobat.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini