Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas Cara Membuat Halaman Demo Template Blog, Postingan ini masih berhubungan dengan Artikel Template Blog. Artikel Tutorial Blog.
Cara membuat tombol live demo template blog dengan toolbar tombol close dan download - Halo sobat siabdi, setelah sebelumnya saya sudah nembagikan artikel mengenai panduan belajar ngeblog untuk pemula, maka pada kesempatan kali ini saya akan sedikit memberikan tutorial mengenai cara membuat halaman live demo template blog.
Tutorial ini sangat cocok bagi sobat yang ingin mengoleksi template blog dan ada keinginan membuat gallery template blog seperti halnya templateseores. Mungkin bagi sobat yang terbiasa bergonta-ganti template mungkin judul di atas sudah tidak asing lagi, jadi sobat siabdi saya anggap sudah mengerti. Oke langsung saja perhatikan langkah-langkah di bawah ini!
2. Kemudian, silahkan sobat buka template editor dan silahkan cari kode ]]></b:skin>
3. Setelah kode di atas sobat temukan, selanjutnya silahkan copy kode di bawah ini dan paste di atas kode ]]></b:skin>
4. Selanjutnya, silahkan cari kode <body>
5. Silahkan letakkan kode di bawah ini tepat di bawah kode di atas.
6. Langkah terakhir, silahkan cari kode </body> dan letakkan kode di bawah ini tepat diatas kode tersebut.
Keterangan :
Silahkan ganti kode yang saya block di atas, warna kuning silahkan ganti dengan alamat blog sobat dan warna hijau silahkan ganti dengan alamat halaman statis kosong yang sobat buat pada langkah nomor 1 di atas. Dan untuk warna cyan silahkan ganti dengan nama blog sobat.
Penyesuaian :
1. Warna Kuning : Silahkan ganti dengan alamat halaman statis kosong yang sudah sobat buat seperti pada langkah nomor 1 di atas
2. Warna Hijau : Silahkan sobat ganti dengan alamat blog yang akan sobat jadikan sebagai live demo.
3. Warna Orange : Silahkan ganti dengan alamat download yang akan sobat gunakan sobat.
Kesimpulan :
Dari langkah-langkah di atas, maka sobat sudah dapat membuat halaman live demo dengan toolbar tombol download dan close. Untuk live demo silahkan gunakan tombol live demo di bawah ini!
Demikian tutorial kali ini mengenai cara membuat halaman live demo template blog, bila sobat siabdi masih memiliki pertanyaan ataupun kebingunan, silahkan tinggalkan komentar sobat melalui kotak komentar yang telah tersedia. Happy blogging :)
Pada Artikel kali ini kita akan membahas Cara Membuat Halaman Demo Template Blog, Postingan ini masih berhubungan dengan Artikel Template Blog. Artikel Tutorial Blog.
Cara Membuat Halaman Demo Template Blog
Advertisement
Tutorial ini sangat cocok bagi sobat yang ingin mengoleksi template blog dan ada keinginan membuat gallery template blog seperti halnya templateseores. Mungkin bagi sobat yang terbiasa bergonta-ganti template mungkin judul di atas sudah tidak asing lagi, jadi sobat siabdi saya anggap sudah mengerti. Oke langsung saja perhatikan langkah-langkah di bawah ini!
Cara Membuat Halaman Live Demo
1. Langkah pertama, yang perlu sobat lakukan yakni membuat halaman statis. Silahkan beri judul halaman demo dan kemudian silahkan publikasikan halaman kosong tersebut.2. Kemudian, silahkan sobat buka template editor dan silahkan cari kode ]]></b:skin>
3. Setelah kode di atas sobat temukan, selanjutnya silahkan copy kode di bawah ini dan paste di atas kode ]]></b:skin>
#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;
}
4. Selanjutnya, silahkan cari kode <body>
5. Silahkan letakkan kode di bawah ini tepat di bawah kode di atas.
<b:if cond='data:blog.url != "http://www.siabdi.xyz/p/demo.html"'>
6. Langkah terakhir, silahkan cari kode </body> dan letakkan kode di bawah ini tepat diatas kode tersebut.
</b:if>
<b:if cond='data:blog.url == "http://www.siabdi.xyz/p/demo.html"'>
<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://siabdi.xyz/'>Demo</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 Frame</a>
</div>
<iframe id='view'/>
<style>
body {
background:white; }
</style>
</b:if>
Keterangan :
Silahkan ganti kode yang saya block di atas, warna kuning silahkan ganti dengan alamat blog sobat dan warna hijau silahkan ganti dengan alamat halaman statis kosong yang sobat buat pada langkah nomor 1 di atas. Dan untuk warna cyan silahkan ganti dengan nama blog sobat.
Penerapan Tombol Live Demo Pada Postingan
Untuk menerapkannya di dalam postingan, silahkan copy kode di bawah ini dan silahkan masukkan kedalam artikel sobat dalam mode HTML. Ingat, mode HTML lho ya bukan Compose!http://blog-anda.blogspot.com/p/demo.html?url=URL Demo disini&download=URL Download di sini
Penyesuaian :
1. Warna Kuning : Silahkan ganti dengan alamat halaman statis kosong yang sudah sobat buat seperti pada langkah nomor 1 di atas
2. Warna Hijau : Silahkan sobat ganti dengan alamat blog yang akan sobat jadikan sebagai live demo.
3. Warna Orange : Silahkan ganti dengan alamat download yang akan sobat gunakan sobat.
Kesimpulan :
Dari langkah-langkah di atas, maka sobat sudah dapat membuat halaman live demo dengan toolbar tombol download dan close. Untuk live demo silahkan gunakan tombol live demo di bawah ini!
Demikian tutorial kali ini mengenai cara membuat halaman live demo template blog, bila sobat siabdi masih memiliki pertanyaan ataupun kebingunan, silahkan tinggalkan komentar sobat melalui kotak komentar yang telah tersedia. Happy blogging :)
EmoticonEmoticon