Cara membuat halaman demo ini mungkin sudah tidak asing lagi untuk anda, karena sudah banyak di bagikan di luar sana, tutorial ini sudah pernah seocips bagikan sebelumnya tapi karena suatu hal jadi saya menulisanya kembali disini. Halaman demo ini sangat cocok untuk sobat yang sering dan suka membagikan template, ada beberapa kelebihan membuat halaman seperti ini karena anda tidak perlu membuat blog baru untuk menampilkan demo blog orang lain misalnya. Ok jika sobat tertarik untuk membuatnya berikut ini adalah cara membuatnya di blog.

Cara Membuat Halaman Demo di Blog

MEMBUAT HALAMAN DEMO DENGAN TOOLBAR


1. Buat Halaman Statis dengan judul Demo. Silahkan isi, kosongkan atau terserah tulis apa saja. Lalu publish.
2. 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:0 20px 0 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:0 20px 0 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; }
3.Simpan kode ini tepat di bawah <body> dan jangan lupa Ganti kode berwana dibawah ini dengan URL / Link halaman blog demo sobat, seperti :
<b:if cond='data:blog.url != &quot;http://www.seocips.com/p/template-demo.html&quot;'>
4. Simpan kode ini tepat di atas </body> dan jangan lupa ganti lagi kode yang di warnai dibawah ini dengan URL / link halaman blog demo sobat.
</b:if> <b:if cond='data:blog.url == &quot;http://www.seocips.net/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://www.seocips.com'>KI 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>

Cara Penulisan Di Postingan

Untuk pemanggilan URL template dan link download, gunakan format seperti dibawah ini dan jangan lupa edit/ganti kode juga kode berwarna di bawah ini:
http://seocips.blogspot.com/p/demo.html?url=URL Demo disini&download=URL Download di sini
Jadi misalnya buat tulisan DEMO kemudian isi dengan link di atas. Nah jika sobat ingin membuat tombol demo -download yang keren baca caranya di membuat demo download button slide efect

Jika sobat pernah mengunjungi penyedia template sepert BTemplates, ZoomTemplates, ThemeForest dan penyedia template lainnya, sobat akan mendapatkan halaman demo dengan menggunakan toolbar seperti ini. Kelebihan lainnya membuat halaman demo dengan toolbar ini adalah sudah ada link download di toolbar demonya. Nah sekian tentang Cara Membuat toolbar Halaman Demo di Blog blogspot Blogger semoga bermanfaat.
2 Komentar untuk "Cara Membuat Halaman Demo Blog"

masih belum ngerti ni mas, point pertama (BUAT HALAMAN), itu yang dimaksud laman baru ya?
soalnya klo didasbor ku gak ada tulisan HALAMAN adanya cuma LAMAN.
atau HALAMAN yang mas nya maksud, kita harus buat BLOG BARU tapi menggunakan EMAIL yang sama dengan BLOG yang kita gunakan.
Mohon pencerahannya mas. Terima Kasih

Iya mas, point 1 maksud saya laman baru.