Home Widget Membuat Halaman Demo dengan Toolbar di Blogger

Kamis, 01 Juni 2017

Membuat Halaman Demo dengan Toolbar di Blogger

Tags

Tips nih buat para anda sahabat blogger yang ingin memiliki blog tentang demo template agar terlihat lebih professional. Cara ini pasti work, karena saya sudah mencari-cari kesana-kemari akhirnya dapat yang work. Pertama saya mendapat di blognya Seocips.com namun tidak bisa. Setelah saya mencari-cari akhirnya dapat juga, beginilah hasilnya.

Cara Membuat Halaman Demo dengan Toolbar di Blogger

Kelebihan dari Halaman Demo ini yaitu tidak perlu membuat blog baru, loading lebih cepat, dan penambahan link download otomatis.

Baiklah simak langkah demi langkah berikut ini

1. Login Blogger

2. Buatlah halaman statis dengan judul Demo atau Demo Blog maupun Demo Template, itu terserah Anda. Pada bagian isi tidak usah diisi lalu langsung Publikasikan saja.

3. Template - Edit HTML

4. Simpan kode di bawah ini sebelum kode ]]></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://www.ajaxload.info/cache/FF/FF/FF/64/5B/5B/25-1.gif)no-repeat center center;
transition:all .4s ease-out;
}
#tab-demo {
width:100%;
height:50px;
top:0;
background:#222;
color:white;
font:normal 13px Arial, sans-serif;
z-index:99999;
position:fixed;
}
.closebutton {
background:#3A841A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOpNpk14Tdghfs-5TNlbjZP6G4BSHxZ9PsMCUn4r4oNDLePJ8oIlgbzbzDTQjyZnQHW1EVSVqFA5yMjpj-H90pTE6vnB4HZ5eyUFfuLBWrMVuIUDOuFDE1L8l2jNfkW4f9rQlaWK-qrA/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:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOpNpk14Tdghfs-5TNlbjZP6G4BSHxZ9PsMCUn4r4oNDLePJ8oIlgbzbzDTQjyZnQHW1EVSVqFA5yMjpj-H90pTE6vnB4HZ5eyUFfuLBWrMVuIUDOuFDE1L8l2jNfkW4f9rQlaWK-qrA/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#3C7F1F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2iqZJUUK-E81s0QtyT-cZ651Uy9CieKP1PIZ3lXulto4MF9a4kRvAzPOSBK95Aq32B_DHBWSWFGyHvi_7hb9iwKQ8s-c6XZ8Z8rkE-XEW5-7T7q88aXajKe3ektTJo68RaMwRNFaylI/s1600/download.png)no-repeat 15px 50%}
.dlbutton, a.dlbutton {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2iqZJUUK-E81s0QtyT-cZ651Uy9CieKP1PIZ3lXulto4MF9a4kRvAzPOSBK95Aq32B_DHBWSWFGyHvi_7hb9iwKQ8s-c6XZ8Z8rkE-XEW5-7T7q88aXajKe3ektTJo68RaMwRNFaylI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQArBAOlmQyCh5lc-QEUwGfsvJwFhyIXf7jTrQwRUR6mXxmnT0SXNfogcKVMu22WJQnHF9p9gGyqKMiLhUtXQyxFJG3xXfzpMEXoPytIIuco0qwyvM7H5AGenyDbhO01h2nPFk6TNP8I/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;
}

5. Letakkan kode di bawah ini di bawah kode <body>

<b:if cond='data:blog.url != &quot;http://www.rumahmedia.id/p/demo.html&quot;'>
Ganti URL di atas dengan URL halaman Demo blog Anda

6. Tambahkan kode di bawah ini tepat sebelum kode </body>

</b:if>
<b:if cond='data:blog.url == &quot;http://www.rumahmedia.id/p/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://rumahmedia.id/'>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 URL di atas dengan URL Demo Blog Anda

7. Simpan template

Untuk format penulisan pada Artikel Anda dengan kode di bawah ini

http://www.farhanweb.com/p/demo.html?url=https://www.jalantikus.com&download=https://www.youtube.com

http://www.farhanweb.com/p/demo : Ganti dengan url blog anda
https://www.jalantikus.com : Ganti dengan url demo template yang anda ingin kan
https://www.youtube.com : Ganti dengan url download template yang ingin kan
URL demo template dan url download wajib menggunakan http atau https (jika ssl)

Selamat mencoba. Apabila ada yang kurang paham atau kesusahan dalam penerapan ataupun pengeditan silahkan berkomentar saja.

Selated Post

pk

Next Post
Previous Post