Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Membuat Halaman Demo dengan Toolbar di Blog

Bagi rekan-rekan Blogger yang sering membagikan template, tutorial pembuatan widget atau tutorial edit template, akan memerlukan suatu media untuk menjelaskan hasil dari pekerjaan yang sedang dibahas. Biasanya mereka menyajikan sebuah screenshot untuk menjelaskan tampilan template atau hasil dari pembuatan widget. Namun terkadang hanya dengan screenshot saja tidak memberi penjelasan yang lengkap bagi para pembaca.

Agar bisa memberikan penjelasan yang lebih baik, kita bisa menyajikan sebuah live demo. Berbeda dengan sebuah screenshot yang hanya menampilkan sepenggal gambar, dengan live demo kita bisa menyajikan langsung hasil dari pekerjaan yang sedang dibahas, seperti widget dan template.

Contoh dari live demo ini sering kita jumpai pada situs-situs yang menjual atau membagikan secara gratis template-template blog. Di dalam artikel yang membahas sebuah template, di sana selalu ada link "live demo" sehingga kita bisa melihat preview yang menampilkan penampakan asli sebuah template yang dibahas. Live demo seperti itu lah yang kali ini akan kita bahas pada artikel ini.

Membuat Halaman Demo

Biasanya penyajian live demo ini akan membuka halaman baru keluar dari artikel. Kita bisa mengarahkannya ke tempat objek yang ingin kita jadikan penjelasan itu berada, entah tetap di halaman blog atau pun keluar menuju blog lain. Kita harus kreatif dalam menyajikan live demo ini, pilihlah teknis yang paling sederhana, jelas dan tidak menyulitkan pengunjung.

Nah jika sebuah objek yang di jadikan pembahasan terdapat di halaman blog lain, kita bisa menerapkan sebuah trik agar objek tersebut seolah-olah terdapat di halaman blog kita sendiri. Yaitu dengan memasang sebuah toolbar demo, kemudian toolbar tersebut bisa membaca halaman lain. Untuk lebih jelasnya silakan pasang halaman demo dengan toolbar ini.

Membuat Halaman Demo dengan Toolbar di Blog

Toolbar ini dapat membaca sebuah halaman yang di dalamnya terdapat objek yang ingin dijadikan sebagai bahan penjelasan. Dilengkapi dengan tombol download jika memang terdapat sebuah file yang perlu di download di dalam pembahasan yang kamu sajikan. Namun cukup banyak kode yang perlu kalian personalisasi, maka silakan simak artikel ini dengan baik.

Karena ini hanya merupakan toolbar, jadi pembuatan halaman demo juga harus dilakukan. Maka terlebih dahulu persiapkan atau buatlah sebuah halaman yang isinya terdapat objek yang ingin di jadikan sebagai bahan penjelasan. Saya sendiri membuat blog baru yang berisi sebuah objek untuk menjelaskan suatu widget. Kita sebut saja itu adalah halaman demo, silakan perhatikan contohnya di bawah ini.

Kemudian untuk membuat halaman demo dengan toolbar, kita harus melakukan beberapa tahapan.

Membuat halaman Toolbar

Buatlah sebuah halaman statis di Dashboard Blogger > Laman > Laman baru. Kemudian isi judul halaman terserah kalian, misalnya "Demo BLOGKAMU" dan untuk isinya kita kosongkan saja, kemudian publikasikan. Halaman ini kita buat untuk mewadahi Toolbar. Selanjutnya halaman tersebut akan memiliki url, betul? Simpanlah url halaman baru tersebut.

Scripting Toolbar

Pada dasboard Blogger, masuklah ke menu Template dan klik Edit HTML. Kemudian dengan tombol ctrl + f carilah kode ]]></b:skin> dan letakan script CSS berikut di atas kode ]]></b:skin>.
/*** Demo ***/
#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: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:#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: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(https://2.bp.blogspot.com/-2fcplb-XxgA/VwfstMoxzwI/AAAAAAAAHJw/F2yGFEPgWQAM_1RL0YE4JP5JoI1ypyKKQ/s1600/Untitled-1.png)no-repeat left center; background-size: 50px 50px;
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;
}
/*** Demo ***/

Kamu bisa mengganti url berlatar kuning dengan url logo Blog yang kamu miliki.
Kemudian cari kode <body dan letakkan script berikut tepat di bawah kode <body.
<b:if cond='data:blog.url != &quot;http://www.b-tutorial.com/p/demo-b-tutorial.html&quot;'>

Ubahlah url berlatar kuning dengan url halaman toolbar yang kamu buat sebelumnya.
Kemudian cari kode </body> dan letakan script berikut di atas kode </body>.
</b:if> 

<b:if cond='data:blog.url == &quot;http://www.b-tutorial.com/p/demo-b-tutorial.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.b-tutorial.com'>B-T 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>

Ubahlah url berlatar kuning dengan url halaman toolbar yang kamu buat sebelumnya.

Dengan ini pembuatan halaman demo dengan toolbar telah selesai. Tahap selanjutnya adalah pembuatan link demo.

Cara Penulisan Link Demo

Di dalam artikel yang menyajikan sebuah pembasahan, kemudian kita menyertakan sebuah demo untuk bahan penjelasan. Biasanya terdapat sebuah link untuk mengarahkan kita menuju halaman demo tersebut. Nah kali ini kita juga harus membuat link seperti demikian. Saat menulis posting, silakan tulis sebuah frasa misalnya "Live Demo". Kemudian buatlah link dengan memasukkan url pada teks tersebut, dan cara penulisan url nya adalah seperti berikut.
http://www.b-tutorial.com/p/demo-b-tutorial.html?url=URL Demo disini&download=URL Download di sini

Ubahlah url berlatar kuning dengan url halaman toolbar yang kamu buat sebelumnya. Kemudian untuk tulisan berlatar hijau, ubah dengan url halaman demo yang sebelumnya sudah kalian buat / persiapkan. Dan untuk tulisan berlatar biru ubahlah dengan url halaman download file, jika memang terdapat file yang perlu di download pada pembahasan yang kamu sajikan.

Artikel terkait : Membuat Halaman Demo dengan Toolbar di Blog

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved