Bagi para blogger tentu sudah tidak asing dengan halaman demo. Halaman demo sering ditemui saat hendak mendownload template blogger.
Halaman demo sangat berguna untuk mencegah kehilangan pengunjung di blog atau website karena dengan adanya halaman demo maka pageview blog atau website kita tetap dapat dipertahankan walaupun kita memberikan link pada website atau blog orang lain.
Nah... Bagi yang tertarik untuk menerapkan halaman demo pada blognya, berikut cara membuat halaman demo di blogger, tetapi sangat disarankan untuk mencadangkan (backup) template yang telah ada terlebih dahulu untuk menghindari kesalahan saat memasang halaman demo.
- Login ke Blogger
- Pada halaman Dashboard pilih Tema lalu Edit HTML
- Cari (Ctrl + F) kode <body> lalu letakkan kode berikut ini tepat di bawah kode <body> tersebut
- Kemudian cari (Ctrl + F) kode </body> dan letakkan kode berikut ini tepat di atas kode </body>
- Simpan Tema.
- Kemudian di halaman Dashboard pilih Laman, lalu mulailah membuat Laman Baru dengan judul laman Demo
- Tulis konten apa saja atau biarkan kosong lalu Simpan Laman
| <b:if cond='data:blog.url != "http://www.blogkamu.com/p/demo.html"'> |
| <b:if cond='data:blog.url == "http://www.blogkamu.com/p/demo.html"'> <style type='text/css'> body{background:#fff} #view{padding:0;margin:0;border:0;position:fixed;top:60px;left:0;right:0;bottom:0;width:100%;height:94%;transition:all .4s ease-out} #tab-demo{width:100%;height:60px;top:0;left:0;background:#34495e;color:#fff;z-index:99999;position:fixed;-webkit-transform:translateZ(0)} .closebutton{background:#169fe6;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:0;line-height:60px;cursor:pointer;color:#fff;right:20px;transition:all .3s} .closebutton:before{content:'\f00d';position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;} a.closebutton {color:#fff;text-decoration:none;} .closebutton:hover {background:#2c3e50} .closebutton:hover:before {transform:rotate(360deg);} .dlbutton,a.dlbutton{background:#3f5870;text-align:center;height:60px;padding:0 20px 0 57px;position:fixed;top:0;right:146px;line-height:60px;cursor:pointer;color:#fff;text-decoration:none;transition:all .3s} .dlbutton:before{content:'\f019';position:absolute;left:0;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;transition:all .6s;} .dlbutton:hover {background:#2c3e50} .dlbutton:hover:before {transform:rotate(360deg);content:'\f00c';} .demologo,a.demologo{padding-left:75px;font-size:18px;font-weight:700;text-transform:uppercase;line-height:60px;left:20px;position:fixed;color:#fff;letter-spacing:.5px;text-decoration:none} .demologo:before{content:'\f011';position:absolute;left:0;background:#169fe6;font-family:fontawesome;padding:0 20px;font-weight:normal;font-size:22px;} .demologo:after {content: '- Responsive Blogger Template';text-transform:capitalize;opacity:0;visibility:hidden;padding-left:5px;transform:scale(0.9) translate(-34px,0);transition:all.3s;} .demologo:hover:after {opacity:1;visibility:visible;transform:scale(1.0) translate(0,0);} </style> <script type='text/javascript'> //<![CDATA[ function getQueryVariable(e) { for (var r = window.location.search.substring(1), t = r.split("&"), n = 0; n < t.length; n++) { var a = t[n].split("="); if (a[0] == e) return a[1] } return !1 } window.onload = function() { var e = getQueryVariable("url"), r = getQueryVariable("download"); document.getElementById("view").src = e, document.getElementById("dl").href = r }; //]]> </script> <div id='tab-demo'> <a class='demologo' href='http://www.blogkamu.com/'>Demo Theme</a> <a class='dlbutton' href='' id='dl'>Download</a> <a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Remove</a> </div> <iframe id='view' /> <style> body { background: white; } </style> </b:if> </b:if> |
Cara penggunaan :
| http://www.blogkamu.com/p/demo.html?url=http://www.blogtarget.com/ |
Contoh :
Cara Membuat Halaman Demo Di Blogger
Reviewed by Unknown
on
March 30, 2017
Rating:
Reviewed by Unknown
on
March 30, 2017
Rating:
Blogger