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 :


Trik Membuat Landing Page pada Blogger


<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>



Related Artikel Trik Membuat Landing Page pada Blogger

6 comments:

  1. Sukses gan, terima kasih infonya

    ReplyDelete
    Replies
    1. Sama-sama gan, selamat berjualan gan ^_^

      Delete
  2. Replies
    1. Sama-sama gan, ane dah berkunjung ke blog belajar HTML5 punya agan

      Delete
  3. Wah boleh di coba nich gan, tapi ane msh ruwet sama kode nya nich he..

    ReplyDelete
  4. Duch masih krg paham gan itu tuh gmn ya cara pasang nya. Mksh, saya suka dgn tampilan blog ini

    ReplyDelete