Membuat Halaman Demo di Blogger / Blogspot - Apa kabar sahabat? setelah lama ga posting, sehubungan malas ngurusin isu klonengan dan berbagai kesibukan, akhirnya saat ini saya kembali membagikan tutorial Cara Membuat Halaman Demo di Blogger.halaman demo

Update : Untuk pengguna self hosted seperi WP, Joomla atau Drupal, sobat bisa kunjungi link ini

Halaman demo ini cocok bagi sahabat yang sering membagikan template. bagi sobat yang belum faham, mungkin apabila sobat mengunjungi penyedia template blogger sering mendapatkan halaman demo dengan menggunakan toolbar seperti di BTemplates, ZoomTemplates, ThemeForest, dll.

Banyak saya temukan tutorial pembuatan halaman demo ini, namun saya bagikan sesuatu yang beda, diantaranya :

1. Dibuat di halaman statis
2. Tidak perlu membuat blog baru.
3. Menggunkan tag kondisional pengingkaran, sehingga loading lebih cepat.
4. Penambahan link Download otomatis.

halaman demo


Silahkan sobat simak cara pembuatannya :

Langkah 1 : Buat Halaman Statis dengan judul Demo atau Demo Template dll.
Pada bagian isi, terserah tulis apa saja, atau kosongkan juga tidak apa-apa. Lalu publish.

Langkah 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: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(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;
}

Langkah 3 : Simpan kode ini tepat di bawah <body>

<b:if cond='data:blog.url != &quot;http://blog.kangismet.net/p/template-demo.html&quot;'>

Ganti kode yang ditandai dengan URL halaman blog demo sobat, seperti : http://namablogsobat.blogspot.com/p/demo.html

Langkah 4 : Simpan kode ini tepat di atas </body>

</b:if> 

<b:if cond='data:blog.url == &quot;http://blog.kangismet.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://blog.kangismet.net'>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>

Ganti lagi kode yang ditandai dengan URL halaman blog demo sobat.

Format Penulisan


Untuk pemanggilan URL template dan link download, gunakan format seperti ini :

http://blogsobat.blogspot.com/p/demo.htm?url=URL Demo disini&download=URL Download di sini

Untuk lebih jelasnya silahkan perhatikan kembali demonya.


Silahkan sobat diskusikan apabila masih ada permasalahan yang ingin ditanyakan. Semoga bermanfaat....

155 komentar

Pertamax nya saya amankan dulu ya kang :D

Balas

boleh kang ini dicoba makasih sudah berbagi :D

Balas

Wah boleh nih di coba kang :) hihi Tombol demonya baru :-bd

Balas

wkwkwkwk koment dulu amankan posisi.. cek cek...

Balas

wow keren.
bookmark dulu ah. penting nih. :D

#ModusCrew

Balas

belum punya yang di tampilkan, ijin nyimak dulu bos...

Balas

beuh.. mantep kang, bener jadi ga perlu bikin blog lagi,
tapi mau tanya nih kang, kan itu untuk 1 demo blog ya kang, kalau misal dua demo atau beberapa demo,. apa kode nya ditambah lagi, atau gimana kang? hihi :P

Balas

heuheu jadi kepengen hehe, keren banget kang :D

Balas

wah mantep kang..

lama ga kliatan, skali muncul ngluarin jurus baru hehe

Balas

saya ijin menyimak aja kang, ntar kalau sdh bisa berbagi template mau saya praktekkan :D
kalah cepet nich pertamaxnya sama sista friska, huhuhu ^_^

Balas

wah keyen nih mastah hehehe

Balas

heheh.. silahkan dicicipi semuanya

Balas

udah lama ah.. udah 2 postingan kebelakang :D

Balas

tinggal ganti url belakangnya.. dari mulai ?url... dst, bahkan bisa ribuan demo :D

Balas

jadi kita tidak perlu membuat halaman di statis ya kang? kok sedikit bingung saya?

Balas

silahkan ambil aja sob :D

Balas

wkwkkw... iya nih jurus dari Eyang Sinto Gendeng :D

Balas

cocok nya buat blog bertema download template

Balas

sory ada yang ketinggalan langkah pertamanya, membuat halaman statis :D pantes bingung... silahkan cek lagi updatenya

Balas

nembe tiasa posting, keren kang sae..... kin dicobian :D
trims

Balas

nah.. kan ini yang saya bingung hehehe.. padahal kalau halaman statis tidak ada pasti error 404 hehehe :ngakak:

Balas

hahaha... makasih atas kejeliannya :-bd

Balas

memang untuk penyedia template sob.. :D

Balas

muhun abdi seueur kagiatan.. mangga diraosan :D

Balas

Mantep kang buat inponya, ijin bookmark kang :-d

Balas

kenapa tidak bisa di scrool mas ?
setting dimana ya biar bisa di scrooll :(

Balas

coba pada #view tambah, overflow:auto

Balas

hehe masih Lola kang @@, , di cerna hela ah supaya napel, hehe atau di coba langsung praktek, supaya rada ngartos .. hehe :D

Balas

Terimakasih mas sudah saya terapkan dan berhasil :)

Balas

Menarik Kang Tutorialnya ijin nyoba
Dan simak dulu agar lebih paham. terima kasih :)

Balas

wah baru nongol si akang yeuh kamana wae ateuhh hehe

Balas

Saya nyimak aja deh, kayaknya cocok buat blog tutor kayak punya KI ini :)

Balas

gagal maning....gagal maning... :(

pertamax...mana pertamax...

Balas

sekalinya kang ismet online templatenya langsung ada yg berubah lol

Balas

Saat ini belum membutuhkan, belum ada template atau bahan yang akan dishare! Walaupun selama ini saya penasaran cara membuatnya, trims ulasannya ... puas, disini kutemukan jawabannya!

Balas

Wah ini baru mantap Kang, cocok buat blog yang selalu sharing template

Balas

selamat pagi :) wah Kang Ismet baru hadir nih...lama gak jumpa hehe...saya sikat dulu bang buat tutorialya !!

Balas

tipsnya bermanfaat tolong follow blog saya Kang Ismet
http://blanter-forever.blogspot.com

Balas

@kangismet : sip kang tutor barunya

@frika lee : itu foto asli ? *ehem jomblo :D

Balas

Kalau misalnya script dan css nya ditaruh di static page gimana, bukan di semua tempat, kan rugi kalau ga dipanggil tapi dipasang ?

Balas

tu gambar guild di Lost Saga ( foto profil ) ?

Balas

jirr hade euy...bisaan si akang eta. Alus aya keur Dl-na...xixixi

beben-iframe.googlecode.com/svn/trunk/Beben-iFrame.html?iframe=http://blog.kangismet.net/2014/01/membuat-halaman-demo-di-blogger-blogspot.html

undercover-blogger.blogspot.com/2012/02/url-redirection-beben.html?url=http://blog.kangismet.net/2014/01/membuat-halaman-demo-di-blogger-blogspot.html

CONTO eta mah urang mah nyak, lain nyeupam...shauhsauhsuahuhas

KABUuuurrrrr.....sing ngambeuk nu bogana....

Balas

Mantafff.. baru mampir lagi kesini hehehehe :ngakak:

Balas

kan sudah dikasih tag kondisional.. jadi kayaknya kagak masalah..

Balas

maaf kang oot di sini nih, saya kan buat tampilan homepage saya jadi 2 kolom, tapi page static nya jadi berantakan, mau tanya solusi buat page static saya yang berantakan gimana ya??
contoh page static saya --> mbah-siyam.blogspot.com/p/link-exchange-mbah-siyam.html

Balas

ooo jadi o*o*t di sini gak boleh ya??

Balas

update lagi nih.....nyimak dulu ahhh

Balas

kurang ieu euy left: 0; dina #tab-demo (jigana)

Balas

naon atau aya epekan teu ngasupkeun tag conditional di jero tag body???

Balas

hehe ngiring raos weh ah abdi mah .

Balas

Cari Kemana-mana akhirnya ketemu disini juga kang, makasih tutorialnya :D

Oh iya kang, maaf bisa request tutorial gk? tutorial membuat thumbnail post warna-warni sesuai kategori seperti blog KI, yg di blog Zhinto saya kurang paham kang @@,

Balas

emang harus dicoba biar legih faham :D

Balas

cibuk kang.. barilieur ngurus klonengan

Balas

heheh iya sob.. bagi yang suka bagi2 template kaya saya cocok

Balas

ga berubah.. cuman buat demo aja

Balas

hehehe.. mungkin satu saat membutuhkan, silahkan kembali lagi ke sini :D

Balas

iya sob.. adarequest soalnya

Balas

betul kata yusuf.. kan itu fungsi tag kondisional..
bisa aja disimpan di halaman langsung, cuman susah membuat pengingkaran

Balas

wkwkkwkw..panasaranku BTemplates kang, aya link downloadna

Balas

berantakan gimana ya? sayaliat normal2 aja

Balas

dicoba didieu pas kang, tapi benul pas di coba di blog sanes aya space.. tengkyu kang.. urang tambihan :-bd

Balas

selama ieumah sigana teu masalah kang, soalna sababaraha hiji tag kondisional di tag body blog ieu tos lami.. cobi atuh cari info deui

Balas

sekarang ketemu ya? heheheh

Balas

gimana lagi ngejelasinnya ya.. hehhe.. soalnya saya juga pake tutorial zhinto, tapi nanti saya coba lah

Balas

wih keren nih kang
perlu dicoba :D

Balas

makasih kang ismet tutorialnya, sebenarnya saya mau tanya tapi nggak tahu apa namanya :v

Balas

oiya kang ismet mau tanya kalau menghilangkan tombol download gimana "http://prntscr.com/2m4tv7"
makasih :)

Balas

pada langkah ke 4 (tutorial diatas) hapus kode ini :

<a class='dlbutton' href='' id='dl'>Download</a>

Balas

kloning ASU nya kang hahaha .. strezz jelema eta mah wkwkwk

Balas

mantab kang, saya ketinggalan 2 artikel nih, makasih :)

Balas

wah mantep banget mas, :D
ijin coba sekalian ijin share yaa tutorialnya :)

Balas

Ijin share d blog saya kang tutorial yang di atas.. yg pastinya pakai link sumnber ;)

Balas

sungguh bermanfaat mas untuk blog tutorial ane :)

Makasih mas :)

Balas

wakwak, kebetulan saya lagi nyari - nyari tutorial kayak gini.

Nice post kang Ismet.

HaturNuhun :)

Balas

bagus kang ,, ada yang muncul dalam benak saya , bisa nggk semua itu dilihat dalam bentuk lightbox ,, jadi tanpa harus meninggalkan halaman tersebut ,,, supaya tidak ribet-ribet ... :D

Balas

di bookmark dulu nih kang :p boleh kan?

Balas

emang kue kang di icip icip...
nih mah script kalo di icip icip...
celemotan deh jadi nya...
hahahaaa

Balas

Mas ini yang saya cari2 dari dulu. Makasih mas :)

Balas

Kang mau tanya nih, Kalau kita klik "DOWNLOAD" kenapa langsung kedownload ya ?
Misal: Kita letak file nya di situs box[.]com apakah akan hilang frame demonya?

Balas

sukses kang, matur nuwun :D

Balas

bisa sob.. di iframe aja

Balas

emang sengaja supaya langsung ke download.. kalau ke box pasti hilang framenya, kecuali kita ambil link downloadnya langsung

Balas

Kang mohon dijawab lagi ya, kalau ke box tanpa hilangin frame nya gimana ya kang?

Balas
Komentar ini telah dihapus oleh pengarang.

Kok kode < body > gk ada di tamplate saya ya ?

Balas

ada ini <body class='index'>

Balas

kayaknya harus buat frame baru sob...

Balas

berhasil Kang :) maaf OOT nih...untuk menghapus menu download pada kode apa ya Kang ??

Balas

di atas ada http://blog.kangismet.net/2014/01/membuat-halaman-demo-di-blogger-blogspot.html?showComment=1390577418072#c8180147154205252230

Balas

Terima Kasih Kang :) walau komentar saya kena block :( tapi di jawab juga :-d

Balas

kang ismet, kok aneh ya, page demonya di blog saya nggak bisa full screen biar bisa agar layarnya penuh gimanya ya kang ?
makasih, sebelumnya :)

Balas

Sangat Membantu, dan menambah pengetahuan kang ... :D

Balas

ini kang
http://www.pram-software.com/p/download.html?url=http://blog.kangismet.net
gimana kang ngatasinya, makasih

Balas

CSSnya ada yang ga fungsi, coba pindah ke static page langsung CSSnya

Balas

udah jadi kang ismet, ternyata kode cssnya harus di taruh di atas
</style>
kalau di template blog saya, makasih :)

Balas

Saya sudah punya Blog Demo yang mirip, versinya berbeda sedikit, Tapi Tutorial ini menginspirasi sesuatu :D terima kasih
mungkin sedkit tambahan coba ditambahkan Tombol "Back to Post" atau "Back To Tutorial" di toolbarnya

Balas

demo, asalkan bukan bemo kang. :D praktek yah. :)

Balas

Format penulisannya itu ditulis dimana ya kang ??

Balas

langsung tambahin aja dibelakang url halaman gan :)

Balas

halaman yg di postingan ato rul halaman yg di template ?
maklum nubie mas :D

Balas

disimak lagi artikelnya gan :)

Balas

kang, ane masih bingung sama tutor ini, kalau buat naro script templatenya dmn ? ane coba taro di laman gak bisa kang. fast respone kang penting

Balas

keren kang kaya diwebsite template terkenal :)

Balas

tombol download nya untuk 1 demo, kalo 2-3 demo gimana cara ubah link download tanpa harus tambah script

Balas

Saya mau tanya gan.kalau setiap template yang baru yang akan kita share,caranya seperti apa gan untuk membuat halaman statisnya?

Balas

thanks gan, keren tutorialnya...

Balas

sangat membantu sekali nih, ijin coba yah :D

Balas

GEBEAR HARGA PROMO TERPERCAYA DI DINA SHOP
Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:085-77966-5033 ATAU KLIK WEBSET RESMI KAMI http://dina-shop7.blogspot.com/.

Ready Stock!
BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock!
BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock!
BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock!
Blackberry Curve 9320.Rp.700.000,-
Ready Stock!
Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock!
Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock!
Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock!
Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock!
Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock!
Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock!
Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000,-
Ready Stock!
Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
Ready Stock!
Nokia Lumia-710-whiteRp. 900.000,-
Ready Stock!
Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
Ready Stock!
Nokia Lumia 710 - Black.Rp. 900.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari XL) - Black.Rp.1.200.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
Ready Stock!
Apple iPod Touch 4 Gen 8GB.Rp.700.000.
Ready Stock!
APPLE iPod Nano 8GB - Pink.Rp.500.000,-
Ready Stock!
Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
Ready Stock!
Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
Ready Stock!
Acer TravelMate TM8481-2462G32.Rp. 1.400.000
Ready Stock!
Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.000,-
Ready Stock!
Nikon D7000 kit 18-105mm.Rp.1.700.000.
Ready Stock!
Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
Ready Stock!
Nikon Coolpix L 120 Red.Rp. 900.000
Ready Stock!
Nikon Coolpix P 500 Black.Rp 1.000.000

Balas
Komentar ini telah dihapus oleh pengarang.
Komentar ini telah dihapus oleh pengarang.

terimakasih infonya, salam kenal :)

Balas

Thanks buat infonya kang....

Sangat bermanfaat ;)

Balas

Makasih bang, Ini sangat Membantu Sekali....:)

Balas

ningalian w DEMO na wungkul ah... kirang ngartos.... ^-~

Balas

kang mohon solusina kok, jadi nyengsol ka handap nya iye, contoh na kang http://prntscr(.)com/3kmts9
http://aregalank(.)blogspot(.)com/2014/05/demo-template(.)html

Balas

mikum... langkah satu oke. langkah ke 2 eror kang ( kode yg di tmplkan ke bwah body eror ) mksih

Balas

bingung gan,
newbie ane

Balas

Meskipun aku paling bawah ndak masalah :(


Tapi tutor ini saya CAP :-d

Balas

mohon bantuannya kang! tampilannya semerawut :(
http://b4sharing.blogspot.com/p/template-demo.html?url=http://masgusmarket.blogspot.com&download=http://adf.ly/p0rsG

Balas

Mantap Artikelnya Sangat Bermanfaat Kunjungi Blog Ini ya http://ornoxlous.blogspot.com/ thank (y)

Balas

akhirnya ketemu juga tutor buat beginian, terima kasih kang

Balas

kalo dipake template download nggk bisa kang ?

trus solusinya gimana kang ?

Balas

berhasil di terapkan.:)
terima kasih kang atas ilmunya .

Balas

saya malah ngga nampil :(
kenapa yahhhh...

Balas

Mas pnya saya kok load aj trus, gk keluar2 demo template nya :(

Balas

Makasih Om, tutor ini dah ane cari"
akhirnya ketemu juga,..

Ane boleh Copas gak gan biar tambah banyak yang bisa, jadi ilmunya bisa bermanfaat,,.. jgn takut,.. sumbernya pasti ane tempel koq..

Balas

simple juga ya kang...dan gak berat loadingnya. nyari kemana-mana malah ketemu yang muantab di sini. makasih kang

Balas

Infonya sangat bermanfaat gan. saya rasa artikel ini membuat saya lebih tahu dan lebih paham.
oh iya gan perkenalkan saya seorang blogger pemula yang masih belajar tentang blog.
makanya saya semangat cari info-info lain yang mungkin saja bermanfaat buat saya peribadi.
Oh iya gan posting artikel tentang artikel ini donk.
Cara Membuat Blog dengan Blogger
Cara Memasang Animasi Burung Twitter Melayang di Blog
Cara Memasang Widget Alexa Rank di Blog
Cara Membuat About Me Di Blog
Cara Membuat Buku Tamu Tersembunyi Pada Blogger
Sepertinya artikel-artikel seperti itu banyak orang yang mencarinya.blog baru saya baru
saya posting Cara Membuat Buku Tamu Tersembunyi di Blog

Ok gan. terimakasih lagi atas infonya, semoga agan rajin updatenya dan sukses selalu.
salam kenal dari saya.

Balas

kang masih binggung nih -_- template statis itu bikinnya di laman ya? kalo udah terus cara menggunakannya gmana? terimakasih ^_^

Balas

kang selamat sore numpang tanya, kenapa halaman demo page nya ga mau penuh, cuma ngumpul di pojok kiri atas saja?. makasih kang ditunggu pencerahannya http:/lagi-oke.blogspot.com

Balas

http://lagi-oke.blogspot.com/p/demo-page.html?url=http://bon-template.blogspot.com&download=http://lagi-oke.blogspot.com

Balas

hahaha kang biar halamannya bisa penuh terpaksa saya tambahain kode begini kang >>> iframe frameborder='0' height='1200px' id='bg' width='100%' , bagaimana menurut akang ada pengeruh ga? makasih

Balas

ada cara buat hiden toolbar iframe nya nggk kang???

Balas

Poskan Komentar


×
Chat