Trik Membuat Landing Page pada Blogger

Pada blogger, kita bisa membuat landingpage atau halaman penawaran dengan sedikit bantuan javascript, tanpa perlu merubah template yang kita pakai saat ini, cara membuatnya cukup mudah, sebagai contoh silahkan lihat halaman penawaran Autopost Facebook milik ane, cek TKP : Autopost Facebook

Ane hanya memakai simpel jquery code berikut ini :

Code Jquery

var cloneHead = $("#copy-head").html();
$("head").html(cloneHead);

var cloneBody = $("#copy-body").html();
$("body").html(cloneBody);

Berikut Contoh Pemakaian Code dalam landing page :

<div id='copy-head'>

<!-- Isi dengan code html untuk bagian head -->
<title>Judul Landing Page</title>
<style>body {color:#eee; margin :0; padding:20px;}</style>
<script>alert ("This is my Landing Page")</script>

</div>


<div id='copy-body'>

<!-- Isi dengan code html untuk bagian body -->
<h1>Judul Landing page</h1>
<p>Ini Halaman Landing Page di Blogger ^_^ </p>

</div>

<script type='text/javascript'>
var cloneHead = $("#copy-head").html();
$("head").html(cloneHead);
var cloneBody = $("#copy-body").html();
$("body").html(cloneBody);
</script>

Mudah kan, cukup dengan membuat postingan baru dengan memasukkan code apa saja yang akan kita pakai dalam bagian head, dan body, layaknya sebuah landing page pada umumnya, saat halaman tersebut melakukan loading page, maka jquery akan tereksekusi, dan membuang semua code blogger, kemudian menggantinya dengan code yang sudah kita persiapkan pada landing page.

CATATAN..!

Code Javascript ditas menggunakan Jquery, jadi kalau template blogger yang saat ini agan pakai tidak memakai Jquery, silahkan tambahkan code berikut pada bagian head atau body, kalau agan bingung, silahkan lakukan test terlebih dahulu dengan membuat postingan baru, dan masukkan code yang ane beri diatas, Lihat hasilnya kalau berjalan normal, berarti agan sudah memakai Jquery, kalau tidak berjalan, tinggal tambahkan code berikut ini diatas code tadi :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

---

---