Membuat Halaman Demo dengan Toolbar di Blogger

Memasang Flat Design Social Share Button di Blog
Seleksi Otomatis pada Pre dan Tag Blockquote di Blogger
Membuat Sitemap Ganteng Sesuai Label di Blog

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.

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.

Membuat Halaman Demo dengan Toolbar di Blogger

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(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:#3C7F1F url(http://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png)no-repeat 15px 50%}
.dlbutton:hover {background:#3C7F1F 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;
}

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

https://www.farhanweb.com/p/demo.html?url=https://www.jalantikus.com&download=https://www.youtube.com
https://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.

COMMENTS

WORDPRESS: 14
  • comment-avatar

    Langkahnya harus benar gan.. coba lagi, kalo bener pasti bisa. Soalnya sudah saya coba langkah tersebut, buktinya di demo itu mengikuti langkah yang di atas

  • comment-avatar
  • comment-avatar

    Pastikan ikuti langkahnya dengan benar.

  • comment-avatar

    kok tidak berhasil ya gan ?

  • comment-avatar

    Tutorial nya lumayan jelas walaupun awal2 terlihat ribet, lagi coba sekarang, nice share

  • comment-avatar

    Lumayan ribet juga ya bagi pemula seperti saya hehe 🙂

  • comment-avatar

    Wah boleh juga nieh gan

  • comment-avatar

    wah , ketemu nih yang dicari-cari, ijin praktek dulu, nice info

  • comment-avatar

    tutorialnya cukup rumit juga tentang toolbal ini, tapi patut dicoba tuh.

  • comment-avatar

    Sepertinya tutorial di atas saya pernah lihat di demo theme arlina dzgn, itu berarti saya beruntung ya bisa dapat trik seperti ini. Jadi lebih kelihatan professional blog saya

  • comment-avatar

    Gak work ah..parah

  • comment-avatar

    terima kasih…
    atas tutorialnya sangat membantu saya sebagai pemula dalam dunia blogging

  • comment-avatar

    Terimakasih tutorialnya Om, sempat bingung juga dengan halaman demo sebuah theme. Ternyata begini cara buatnya.

  • comment-avatar

    Sama sama mas