Cara Membuat Halaman Demo Template di Blogger dan WordPress

Membuat Halaman Demo Template
5/5 (1)

Lapaklama.com » Cara Membuat Halaman Demo Template di WordPress

Beberapa waktu yang lalu ketika saya membagikan artikel kemedia sosial ada anggota group blogger indonesia yang bertanya melalui kolom kementar mengenai cara membuat halaman demo template pada blog utama. Sebenarnya malas untuk membagikan panduan ini karena memang caranya cukup mudah dilakukan. bahkan pengguna wordpress pemula saja pasti bisa melakukannya. Namun demi visitor saya turuti saja apa permintaannya karena memang visitorlah yang mendatangkan uang buat saya hehe.

Karena tutorial ini simpel banget jadi saya akan berbasa basi terlebih dahulu supaya artikel ini bisa mencapai lebih dari 300 kata. karena itu termasuk kedalam tehnik cara membuat artikel SEO. jika tidak percaya silahkan baca pada artikel lapaklama yang satu ini. 12 Tips Untuk Membuat Artikel Seo friendly di Blogger

Dengan menggunakan halaman demo pada setiap template yang kita bagikan di blog kita akan menambah nilai kepercayaan pengunjung terhadap blog kita. karena blog akan terlihat profesional.

Membuat Halaman Demo Template

Di artikel ini saya ingin membagikan 2 Cara Membuat Halaman Demo Template di Blogger dan WordPress. jadi buat kamu pengguna blogger bisa menggunakan cara yang kedua dan bagi kalian pengguna wordpress silahkan simak tutorialnya dibawah ini.

Cara Membuat Halaman Demo di WordPress

Membuah halaman demo template di wordpress lebih mudah jika dibandingkan dengan blogger. karena kita hanya perlu menginstall plugin dan sekit menyettingnya.

  1. Buka halaman dasboard wordpress kamu.
  2. Kemudian install plugin yang bernama Demo Bar caranya Klik Menu Plugin » Tambah Baru » Cari Plugin lalu klik Install dan Aktifkan.
  3. Setelah plugin ter install maka akan ada menu baru di dasboard wordpress kamu yang bernama Demo Bar.
  4. Sebelum kita melakukan setting di plugin Demo Bar. Buat terlebih dahulu Halaman Baru kasih judul Demo atau terserah yang kamu mau.
  5. Kembali lagi ke Halaman Demo Bar. Pilih Sub Menu Setting. dihalaman ini kamu bisa melalukan settingan pada halaman demo template kamu nanti seperti:
    • Logo: Masukan Logo Blog kamu.
    • Background Color: Pilih warna background yang kamu inginkan
    • Show Responsive: Ceklis jika kamu ingin mengaktifkan fitur responsive dihalaman demo tersebut.
    • Show Purchase: Aktifkan jika kamu ingin menambahkan tombol Download
    • Show CloseJika kamu aktifkan akan muncul tombol Close disamping tombol Download.
    • Demo Page: Silahkan pilih halaman Demo yang tadi saya suruh buat diatas.
    • Jika semuanya sudah selesai kamu setting jangan lupa klik tombol Save
  6. Untuk menambahkan halaman demo template silahkan pilih Sub Menu Add Site didalam Menu Demo Bar.
    • Add New Site: Beri judul pada halaman demo template yang ingin kamu buat.
    • Site URL: Isi dengan Link/URL Demo Template.
    • Download URL: Tambahkan link download template tersebut.
  7. Selesai. Kamu bisa melihat daftar Demo Template yang sudah kamu buat pada Sub Menu Site

Live Demo WordPress

Cara Membuat Halaman Demo di Blogger

Untuk panduan membuat halaman demo template di blogger ini saya kutip dari artikel mas Adhy Suryadi pemilik blog Kompiajaib.com. Oke simak tutorialnya.

  • Masuk kehalaman dasboard blogger kamu.
  • Kemudian buat halaman statis untuk menampilkan halaman demo, Kemudian simpan kode dibawah ini pada halaman postingan tersebut dengan mode penulisan HTML bukan Compose.
<style type='text/css' scoped=''>
/*<![CDATA[*/
.mega-wrapper,.post-title,.postmeta,.creditpic{display:none}
body {background:white;overflow: auto;}
#tab-demo,#view{width:100%;left:0}
.closebutton,.dlbutton,a.dlbutton{text-align:center;cursor:pointer;top:0;height:50px}
#view{padding:0;margin:0;border:0;position:fixed;top:50px;right:0;bottom:0;height:calc(100% - 50px);background:url(https://2.bp.blogspot.com/-inJ_59r9FJ0/UuEXr4IQn0I/AAAAAAAAGWg/OSIKdAm4Wwg/s1600/loader.gif) center center no-repeat;transition:all .4s ease-out;box-shadow: 0 0 40px rgba(0,0,0,0.2);}
#tab-demo{height:50px;top:0;background:#222;color:#fff;font:400 13px Arial,sans-serif;z-index:99999;position:fixed}
.closebutton,.demologo,.dlbutton,a.demologo,a.dlbutton{line-height:50px;position:fixed;color:#fff}
.closebutton{background:url(https://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png) 15px 50% no-repeat #66af33;padding:0 20px 0 50px;right:0}
a.closebutton{color:#fff;text-decoration:none}
.closebutton:hover{background:url(https://2.bp.blogspot.com/-yDP_V5EQ09U/UuC7diNnwYI/AAAAAAAAGVw/Hez_ZcpmFLE/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://3.bp.blogspot.com/-MHVCwQQDhzQ/UuC7dgZiqvI/AAAAAAAAGV0/llC0hES500M/s1600/download.png) 15px 50% no-repeat;padding:0 20px 0 55px;right:158px;text-decoration:none}
.demologo,a.demologo{background:url(https://2.bp.blogspot.com/-3Z-HuFDHOOg/UuDyIp8DZaI/AAAAAAAAGWQ/81Ev67C13hM/s1600/ki-logo.png) left center no-repeat;padding-left:55px;font-size:17px;font-weight:400;font-family:Oswald,Arial,Sans-serif;text-transform:uppercase;left:15px;text-decoration:none}
.logo{display:inline;float:left;}
ul.resize-tool,ul.resize-tool li{list-style:none}
ul.resize-tool{display:inline;float:left;margin:0 0 0 50px!important}
ul.resize-tool li{display:inline;float:left;height:50px;line-height:50px;margin:0 20px 0 0}
ul.resize-tool li svg{vertical-align:middle}
ul.resize-tool li a:active svg path,ul.resize-tool li a:focus svg path{fill:red}
.w1024{width:1024px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important}
.w960{width:600px!important;height:960px!important;position:absolute!important;margin-bottom:50px!important}
.w600{width:960px!important;height:600px!important;position:absolute!important;margin-bottom:50px!important}
.w414{width:414px!important;height:736px!important;position:absolute!important;margin-bottom:50px!important}
.w736{width:736px!important;height:414px!important;position:absolute!important;margin-bottom:50px!important}
.w320{width:320px!important;height:480px!important;position:absolute!important;margin-bottom:50px!important}
.w480{width:480px!important;height:320px!important;position:absolute!important;margin-bottom:50px!important}
/*]]>*/
</style>

<div id='tab-demo'>
<a class='logo' href='http://www.mftemplates.us/'><img alt='mftemplates' height='50' src='https://3.bp.blogspot.com/-Wt1MJ_SdldQ/WLY0Bxme0UI/AAAAAAAApuE/-nRzTRP21rQiOuePJTBwgg88LaOERmBYACLcB/s1600/mfemplates.png' title='mftemplates' width='212'/></a>
<ul class='resize-tool'>
<li>
<a href='javascript:;' onclick='w1024();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w960();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z' fill='#fff'/>
</svg></a>
<a href='javascript:;' onclick='w600();'>
<svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-7px' viewBox='0 0 24 24'>
    <path d='M19,19H4V3H19M11.5,23A1.5,1.5 0 0,1 10,21.5A1.5,1.5 0 0,1 11.5,20A1.5,1.5 0 0,1 13,21.5A1.5,1.5 0 0,1 11.5,23M18.5,0H4.5A2.5,2.5 0 0,0 2,2.5V21.5A2.5,2.5 0 0,0 4.5,24H18.5A2.5,2.5 0 0,0 21,21.5V2.5A2.5,2.5 0 0,0 18.5,0Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w414();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
<a href='javascript:;' onclick='w736();'>
<svg style='width:24px;height:24px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='w320();'>
<svg style='width:20px;height:20px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
<a href='javascript:;' onclick='w480();'>
<svg style='width:20px;height:20px;-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-bottom:-10px' viewBox='0 0 24 24'>
    <path d='M16,18H7V4H16M11.5,22A1.5,1.5 0 0,1 10,20.5A1.5,1.5 0 0,1 11.5,19A1.5,1.5 0 0,1 13,20.5A1.5,1.5 0 0,1 11.5,22M15.5,1H7.5A2.5,2.5 0 0,0 5,3.5V20.5A2.5,2.5 0 0,0 7.5,23H15.5A2.5,2.5 0 0,0 18,20.5V3.5A2.5,2.5 0 0,0 15.5,1Z' fill='#fff'/>
</svg></a>
  </li>
<li>
<a href='javascript:;' onclick='refresh();'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z' fill='#fff'/>
</svg></a>
  </li>
  </ul>
<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>

<script type='text/javascript'>
//<![CDATA[
function getQueryVariable(e){for(var t=window.location.search.substring(1),n=t.split("&"),r=0;r<n.length;r++){var a=n[r].split("=");if(a[0]==e)return a[1]}return!1}function w1024(){document.getElementById("view").className="w1024";var e=getQueryVariable("url");document.getElementById("view").src=e}function w960(){document.getElementById("view").className="w960";var e=getQueryVariable("url");document.getElementById("view").src=e}function w600(){document.getElementById("view").className="w600";var e=getQueryVariable("url");document.getElementById("view").src=e}function w414(){document.getElementById("view").className="w414";var e=getQueryVariable("url");document.getElementById("view").src=e}function w736(){document.getElementById("view").className="w736";var e=getQueryVariable("url");document.getElementById("view").src=e}function w320(){document.getElementById("view").className="w320";var e=getQueryVariable("url");document.getElementById("view").src=e}function w480(){document.getElementById("view").className="w480";var e=getQueryVariable("url");document.getElementById("view").src=e}function refresh(){location.reload()}window.onload=function(){var e=getQueryVariable("url");document.getElementById("view").src=e};

//]]>
</script>
<iframe id='view'></iframe>
  • Silahkan ganti/sesuikan URL Home Page dan Logo dengan URL kamu pada kode berikut ini.
<a class='logo' href='http://www.mftemplates.us/'><img alt='mftemplates' height='50' src='https://3.bp.blogspot.com/-Wt1MJ_SdldQ/WLY0Bxme0UI/AAAAAAAApuE/-nRzTRP21rQiOuePJTBwgg88LaOERmBYACLcB/s1600/mfemplates.png' title='mftemplates' width='212'/></a>
  • Dibawah ini adalah format penulisan di dalam postingan untuk menampilkan tombol demo template.
url_halaman_static_demo_template.html?url=url_demo_template
  • Contohnya seperti ini.
http://kompisimplev2.blogspot.com/p/demo-template.html?url=http://www.kompisafelinkv2.ga/
  • Selesai.

Baca Juga:

Live Demo Blogger

Nah itulah Cara Membuat Halaman Demo Template di Blogger dan WordPress, Terimakasih sudah mengunjungi blog lapaklama, jika kamu suka dengan konten kami silahkan daftarkan diri kamu menjadi anggota kami bersama 449 anggota lainya. saya tunggu.

Nilai Kualitas Konten

4 thoughts on “Cara Membuat Halaman Demo Template di Blogger dan WordPress

      1. masih bingung cara mengganti gambarnya hehe,, maklum pemula.

        bikin tutor lagi tentang cara membuat gambar thumbnail buat artikel mirip lapak lama donk om. hehe

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *