√ Cara Menciptakan Halaman Demo Template Di Blogger Dan Wordpress

Lapaklama.com » Cara Membuat Halaman Demo Template di WordPress

Beberapa waktu yang kemudian dikala saya membagikan artikel kemedia sosial ada anggota group blogger indonesia yang bertanya melalui kolom kementar mengenai cara menciptakan halaman demo template pada blog utama. Sebenarnya malas untuk membagikan panduan ini alasannya yaitu memang caranya cukup gampang dilakukan. bahkan pengguna wordpress pemula saja niscaya dapat melakukannya. Namun demi visitor saya turuti saja apa permintaannya alasannya yaitu memang visitorlah yang mendatangkan uang buat saya hehe.

Karena tutorial ini mudah banget jadi saya akan berbasa busuk terlebih dahulu semoga artikel ini dapat mencapai lebih dari 300 kata. alasannya yaitu itu termasuk kedalam tehnik cara menciptakan artikel SEO. jikalau tidak percaya silahkan baca pada artikel lapaklama yang satu ini. 12 Tips Untuk Membuat Artikel Seo friendly di Blogger

Dengan memakai halaman demo pada setiap template yang kita bagikan di blog kita akan menambah nilai keyakinan pengunjung terhadap blog kita. alasannya yaitu 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 kau pengguna blogger dapat memakai cara yang kedua dan bagi kalian pengguna wordpress silahkan simak tutorialnya dibawah ini.

Cara Membuat Halaman Demo di WordPress

Cara Membuat Halaman Demo Template di WordPress √ Cara Membuat Halaman Demo Template di Blogger dan WordPress Membuah halaman demo template di wordpress lebih gampang jikalau dibandingkan dengan blogger. alasannya yaitu kita hanya perlu menginstall plugin dan sekit menyettingnya.

Buka halaman dasboard wordpress kamu.

Kemudian install plugin yang berjulukan Demo Bar caranya Klik Menu Plugin » Tambah Baru » Cari Plugin kemudian klik Install dan Aktifkan.

Setelah plugin ter install maka akan ada hidangan gres di dasboard wordpress kau yang berjulukan Demo Bar.

Sebelum kita melaksanakan setting di plugin Demo Bar. Buat terlebih dahulu Halaman Baru kasih judul Demo atau terserah yang kau mau.

Kembali lagi ke Halaman Demo Bar. Pilih Sub Menu Setting. dihalaman ini kau dapat melalukan settingan pada halaman demo template kau nanti seperti:
- Logo: Masukan Logo Blog kamu.
- Background Color: Pilih warna background yang kau inginkan
- Show Responsive: Ceklis jikalau kau ingin mengaktifkan fitur responsive dihalaman demo tersebut.
- Show Purchase: Aktifkan jikalau kau ingin menambahkan tombol Download
- Show Close: Jika kau aktifkan akan muncul tombol Close disamping tombol Download.
- Demo Page: Silahkan pilih halaman Demo yang tadi saya suruh buat diatas.
- Jika semuanya sudah jawaban kau setting jangan lupa klik tombol Save

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 kau buat.
- Site URL: Isi dengan Link/URL Demo Template.
- Download URL: Tambahkan link d0wnl0ad template tersebut.

Selesai. Kamu dapat melihat daftar Demo Template yang sudah kau buat pada Sub Menu Site

Live Demo WordPress

Cara Membuat Halaman Demo di Blogger

Untuk panduan menciptakan 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 isyarat 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3h11df_CbSr8-taVm7INjyBrpy89HpnP4Cs-TnR2JTNbf8b2A6_-JJ-2ZVl4g4i8kyE0eNuGAXY6AFv_9uLRVsnlc4v_abOKt9OGtvyFCY0arxwEubOjaQWr3GfIefL3aD2D1o9V6XR4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTW2_7ZySdayBpC7mg1YhCSDO9cHPo49aGFaaii3-i-z-uMJ0eEKAXWRrLGw4fohHjDzFUtArJ06Bk4y2RkeR5yDgLMaHlV9b4pF9hpTLIThk6zJIDfIiCdQzJHjkZ6ebd20JDHmmzUs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTW2_7ZySdayBpC7mg1YhCSDO9cHPo49aGFaaii3-i-z-uMJ0eEKAXWRrLGw4fohHjDzFUtArJ06Bk4y2RkeR5yDgLMaHlV9b4pF9hpTLIThk6zJIDfIiCdQzJHjkZ6ebd20JDHmmzUs/s1600/close.png) 15px 50% no-repeat #579c26}
.dlbutton:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVEkZ4-7mOwhs4kI1PcC2_OV9QKLWwXxgHJcRQjq2Fhz1NAcnr7qYs4rVZSD5MtNlyhyphenhyphenWMCFQ8jYjEOV4Lw4c5ooa2JMGsyD-Y3J0uCP4tcvtuzop4Ojl_5sbmQXjE52Wnd3lU9VDWpQ/s1600/d0wnl0ad.png) 15px 50% no-repeat #579c26}
.dlbutton,a.dlbutton{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZVEkZ4-7mOwhs4kI1PcC2_OV9QKLWwXxgHJcRQjq2Fhz1NAcnr7qYs4rVZSD5MtNlyhyphenhyphenWMCFQ8jYjEOV4Lw4c5ooa2JMGsyD-Y3J0uCP4tcvtuzop4Ojl_5sbmQXjE52Wnd3lU9VDWpQ/s1600/d0wnl0ad.png) 15px 50% no-repeat;padding:0 20px 0 55px;right:158px;text-decoration:none}
.demologo,a.demologo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfg2C2NJuYG9ZqZA3JXX-m1UrvqatCxWuwTPEaJO-hfgKZnaXmavk7zqnwU8V0I6nVt_a7qCDRx942xq08Pt-xcIe_UxqfflRCAChFceLYOGIeOfBvXPx7RtPjQiUFDCUnBm-ShbbvlBc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc4ZmU4MKPlYWO69cmUwDp4dxHDJYVBGW9mwaTWzyNQyGg0bKCMxKSY-7nP4WuaxeUMH6G4SYu1F-YUpKZtwo-H4REkjSrLkHY176ap8douqe_LbLYZ36gIre1WIgjTYwokNlFav4M_hE/s1600/mfemplates.png' title='mftemplates' width='212'/></a>
<ul class='resize-tool'>
<li>
<a href='j4vascript:;' 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='j4vascript:;' 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='j4vascript:;' 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='j4vascript:;' 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='j4vascript:;' 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='j4vascript:;' 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='j4vascript:;' 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='j4vascript:;' 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='j4vascript: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/j4vascript'>
//<![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 kau pada isyarat berikut ini.

<a class='logo' href='http://www.mftemplates.us/'><img alt='mftemplates' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc4ZmU4MKPlYWO69cmUwDp4dxHDJYVBGW9mwaTWzyNQyGg0bKCMxKSY-7nP4WuaxeUMH6G4SYu1F-YUpKZtwo-H4REkjSrLkHY176ap8douqe_LbLYZ36gIre1WIgjTYwokNlFav4M_hE/s1600/mfemplates.png' title='mftemplates' width='212'/></a>

Dibawah ini yaitu format penulisan di dalam postingan untuk menampilkan tombol demo template.

url_halaman_static_demo_template.html?url=url_demo_template

Contohnya menyerupai ini.

http://kompisimplev2.blogspot.com/p/demo-template.html?url=http://www.kompisafelinkv2.ga/

Selesai.

Baca Juga:

5 Penyedia Web Hosting Murah Terbaik di Indonesia

7 Situs Belajar Ngeblog Paling Terpercaya di Indonesia

Cara Membuat Live Chat di Blog Seperti Punya LapakLama

Live Demo Blogger

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

Sumber aciknadzirah.blogspot.com