Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template
Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template
Sebuah blog yang mengupas #tips blogger yang sering malakukan edit template untuk dijual dalam bentuk Template Premium atau hanya sekedar dibagikan dalam bentuk Free template untuk menarik pengunjung, pasti akan memerlukan sebuah halaman demo (live view) untuk membuat tampilan blog lebih terlihat profesional.
Live Demo pada template blogger dibuat dengan menggunakan Java Script yang memanfaatkan Iframe yang dibuat pada salah satu Laman Blogger Template (bersifat statik) untuk menampilkan halaman website/website lain dalam suatu tampilan blog/website.
Membuat halaman laman blogger untuk membuat live menu demo sangat disarankan untuk blogger yang sering membagikan template atau menjual template, tetapi tidak dianjurkan kepada blogger yang hanya menulis artikel dan tidak memerlukan live demo karena beresiko adanya perubahan tampilan, hingga dapat membuat loading menjadi berat.
Live Demo
Untuk kalian yang ingin membuat Live Demo menggunakan Java Script yang memanfaatkan Laman Blogger Template, silahkan ikuti cara berikut :
1. Langkah Pertama
Sebagai langkah pertama, silahkan buat menu Laman Blogger, dengan judul demo sehingga membentuk formathttp://namablog.blogspot.com/p/demo.html
2. Langkah Dua
Letakkan kode css dibawah ini tepat diatas kode]]></b:skin>, saya menggunakan svg icon :
/* START:Live_Demo */
#view {padding:0;margin: 0;border: 0;position: fixed;top:50px;left:0;right:0;bottom:0;width:100%;height:calc(100% - 50px);
transition:all .4s ease-out;}
#tab-demo{width:100%;background:linear-gradient(-50deg,rgba(242,193,78,.95),rgba(247,129,84,.95));
box-shadow: 0 4px 12px 0 rgba(0,0,0,.2);height:50px;top:0;left: 0;color:#e2e2e2;font-size:13px;z-index:99999;position:fixed;}
#tab-demo a{color:#fff;text-decoration:none;}
.dm{position:relative;text-align:center;line-height:50px;}
.lg{float:left;padding-left:20px;text-transform:uppercase;font-weight:600;font-size:20px;}.btn{float:right;padding-right:20px;}
.btn a{border:1px solid #fff;border-radius:50px;padding:7px 13px;margin:0;margin-left:5px;transition:background-color 1s ease-out 0s;}.btn a:hover{background-color:#f78154;border-color:#f78154;color:#fff !important;}
.btn .close, .btn .dl{position:relative;padding-left:30px;}
.btn .close:after,.btn .dl:after{content:'';display:inline-block;vertical-align:top;position:absolute;top:0;left:2px;line-height:30px;height:30px;width:30px;}
.btn .close:after {background:url("data:image/svg+xml,<svg height='15' width='15' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z M382.5,346.8l-35.7,35.7 L255,290.7l-91.8,91.8l-35.7-35.7l91.8-91.8l-91.8-91.8l35.7-35.7l91.8,91.8l91.8-91.8l35.7,35.7L290.7,255L382.5,346.8z' fill='rgb(255, 255, 255)'></path></svg>") no-repeat center center;}
.btn .dl:after {
background:url("data:image/svg+xml,<svg height='15' width='15' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M437.1 165.8C429 90.6 365.4 32 288 32c-51.2 0-96.3 25.6-123.4 64.7-8.3-3.4-17.4-5.3-26.9-5.3-39.1 0-70.8 34.4-71.4 73.4C26.4 177.5 0 216.5 0 257.5 0 307.7 40.7 352 90.9 352H243V211c0-7.2 5.8-13 13-13s13 5.8 13 13v141h152.1c50.2 0 90.9-44.3 90.9-94.5 0-44.7-32.3-84.1-74.9-91.7zM243 435.9l-47.9-47.2c-5.1-5-13.3-5-18.4.1-5 5.1-5 13.3.1 18.4l70 69c2.5 2.4 5.8 3.7 9.1 3.7 1.7 0 3.4-.3 5-1 1.5-.6 2.9-1.6 4.1-2.7l70-69c5.1-5 5.2-13.3.1-18.4-5-5.1-13.3-5.2-18.4-.1L269 435.9V352h-26v83.9z' fill='rgb(255, 255, 255)'></path></svg>") no-repeat center center;}
/* END:Live_Demo */
3. Langkah Tiga
Selanjutnya letakkan kode dibawah ini tepat dibawah<body> :
<b:if cond='data:blog.url != "http://namablog.blogspot.com/p/demo.html"'>4. Langkah Empat
Selebihnya kita buat iframe, dengan meletakkan kode dibawah ini tepat diatas<body> :
<b:else/>
<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'>
<div class='dm lg'>
<a href='javascript:void(0)' itemprop='url'><data:blog.title/></a>
</div>
<div class='dm btn'>
<a class='dl' href='javascript:void(0)' id='dl'>Download</a>
<a class='close' 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>
</div>
<iframe id='view'/>
</b:if>
5. Langkah Lima
Simpan Template → kemudian coba live demo Laman Blogger yang telah dibuat dengan format :https://warokdesign.blogspot.com/p/demo.html?url=URL_Demo&download=URL_Download
Sebagai contoh penulisan Live Demo Laman Blogger :
https://warokdesign.blogspot.com/p/demo.html?url=https://setneg.blogspot.com&download=http://setneg.blogspot.com/p/download.html
Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template yang dibuat diatas merupakan cara yang sangat sederhana, silahkan dikembangan sendiri.
