Dokumentasi Blogger Landing Page
- Getting Started
- Welcome
- License
- Instalasi
- Pengenalan Layout
- Customization
- kode pemanggil
- Kode Fitur
- Ganti Teks & Gambar
- Kode Tombol-tombol
- Kode Text Box
- Kode Border Warna-warni
- Text Style
- Efek Animasi
- Kombinasi Fitur
Getting Started
Welcome
Terima kasih sudah membeli template blogger landing page?Template blogger landing page merupakan template blogger yang di desain untuk membuat sebuah landing page dengan tampilan yang flat dan dilengkapi fitur-fitur yang menarik sehingga membuat tampilan landing page anda lebih rapi.
Jika anda mengalami kesulitan, jangan sungkan untuk menghubungi saya. (Via Nomor WhatsApp di bagian footer)
License
Lisensi template ini adalah "Personal Use License" dan "Unlimited Domain", sehingga anda boleh menggunakan template ini di banyak blogspot milik anda sendiri, tapi tidak boleh untuk dijual ke client anda.Jika anda ingin memiliki Lisensi Developer untuk membuka jasa pembuatan website, maka anda harus upgrade lisensi menjadi Developer dengan biaya sebesar Rp 195.000,- saja.
Sebelum memutuskan untuk upgrade lisensi, silahkan dipelajari dulu template ini supaya nantinya tidak kesulitan dalam membuatkan web untuk client.
Instalasi Template
Install Template Blogger Landing Page- Log in ke akun blogger.com anda
- Buat blog baru
- Pilih menu "Tema" >> pilih "Edit HTML",
- Hapus semua script yang ada di kotak HTML editor (tekan "ctrl + a" lalu tekan tombol "Delete"),
- Pilih Salah satu file XML Template BLandingPages yang sudah anda download sebelumnya,
- Buka file xml dengan notepad / notepad ++ / Macromedia Dreamweaver, atau html editor lain yang anda punya
- Pilih semuanya (ctrl + a) lalu copy (ctrl + c),
- Masuk Lagi ke edit html di blogger
- Paste semua kode yang sudah anda copy tadi di kotak HTML editor blogger,
- Klik Simpan Tema (Warna Orange).
- Selesai, Blogger anda sudah jadi landing page
- Klik menu "Tema" di blogger,
- Pada Pengaturan seluler, pilih pilihan ke 2 (Tidak. Tampilkan tema desktop di perangkat seluler.)
- Klik Simpan
Saya sudah sediakan template kode html untuk membuat halaman order dan kontak (file ada di dalam folder "Kode fitur"), file tersebut saya beri nama "kode halaman Order" dan "kode halaman kontak". Copy semua kodenya dan paste kan kode tersebut di halaman anda (menggunakan mode HTML)
- Klik menu "Laman",
- Klik "laman baru" untuk membuat halaman baru,
- Beri Judul halaman sesuai selera anda,
- Pada kotak content, masuklah ke mode HTML (sebelah kiri atas kotak content)
- Paste kode yang sudah anda copy tadi,
- Klik "Publikasikan" (Warna Orange).
- Setelah itu anda bisa mengedit isi halaman kontak dan order sesuai dengan data anda
Sales Letter ditulis dengan posting blog. Postingan yang akan tampil di halaman home adalah postingan paling terakhir.
- Klik menu "Postingan",
- Klik "Entri Baru" untuk membuat postingan baru (Warna Orange),
- Beri Judul sesuai selera anda,
- Pada kotak content, masuklah ke mode HTML (sebelah kiri atas kotak content)
- Tulis Sales Letter anda, bisa copy paste dari kode fitur-fitur BLandingPages yang tersedia. Pilihlah fitur-fitur yang anda sukai.
- Saya juga sudah menyediakan contoh content Sales Letter sesuai demo. Kodenya bisa anda ambil di file "Kode Contoh Sales Letter".
- Klik "Publikasikan" (Warna Orange).
- Setelah itu anda bisa mengedit isi Sales Letter sesuai dengan kebutuhan anda.
Pengenalan Layout Blandingpage
- Favicon. Gadget ini digunakan untuk mengganti icon yang muncul di browser
- Mobile Menu. Gadget ini hanya terlihat ketika web diakses menggunakan perangkan HP android (potret)
- Top Menu. Gadget ini terlihat di semua perangkat, kecuali di HP android (potret)
- Header Utama. Gadget header utama yang terlihat di semua perangkat
- Main Menu. Gadget ini tidak terlihat ketika web diakses menggunakan perangkan HP android (potret)
- Gadget Kontak Form. Gadget ini saya sembunyikan, hanya terlihat ketika di post/page disisipkan kode pemanggil.
- Pengaturan Posting. Saya sarankan sebaiknya diatur 1 posting saja yang terlihat di halaman utama web.
- Footer Menu. Gadget footer menu ini menyatu dengan gadget back to top
- Footer. Gadget ini bisa diisi dengan gambar maupun tulisan.
Customizing Template
Kostumisasi yang dimaksudkan di sini adalah mengedit setiap fitur-fitur yang tersedia untuk dimasukkan ke sales letter anda supaya mendapatkan kalimat dan gambar yang sesuai dengan kebutuhan anda.Untuk melakukan kostumisasi template blogger landing page ini, anda harus masuk ke mode HTML. Memang sedikit ribet bagi anda yang belum terbiasa dengan bahasa HTML, tapi sedikit demi sedikit anda pasti akan terbiasa dan memahami polanya.
Supaya lebih mudah, anda bisa meng editnya dengan menggunakan software notepad ++ atau Macromedia Dreamweaver atau Compozer, karena disana ada pemisahan warna antara kode HTML dengan Teks biasa yang bisa anda edit.
Semua kode fitur blogger landing page bisa anda lihat di folder "kode Fitur". Silahkan buka file .html dari fitur yang kamu inginkan dengan software Notepad ++ atau Macromedia Dreamweaver atau Compozer (Jika tidak Punya silahkan bisa cari di google).
Pengenalan kode pemanggil ( class )
untuk mempermudah dalam pengeditan, maka semua style di template ini sudah saya sederhanakan menjadi kode-kode pemanggil yang singkat yang dapat dipanggil dengan tag "class".Contoh:
<div class="kode-pemanggil">...........</div>kode-pemanggil diganti dengan kode pemanggil yang dibutuhkan
Berikut ini kode pemanggil yang sering digunakan
- oke --> adalah kode untuk menyesuaikan lebar ketika web diakses di perangkat yang lebarnya lebih dari 1154px.
- fitur --> adalah kode yang digunakan di setiap fitur dengan fungsi memberikan jarak pada fitur sehingga tidak berdesakan dengan fitur yang lain.
- konten --> adalah kode untuk memberikan margin kanan dan kiri pada konten.
- headline = tengah--> adalah kode untuk membuat align teks/gambar menjadi center / rata tengah.
- x-besar --> adalah kode untuk membuat teks menjadi sangat besar.
- besar --> adalah kode untuk membuat teks menjadi besar.
- sedang --> adalah kode untuk membuat teks menjadi medium.
- kecil --> adalah kode untuk membuat teks menjadi kecil.
- tebal --> adalah kode untuk membuat teks menjadi tebal / bold / strong.
- lebar --> adalah kode untuk meberikan margin atas dan bawah pada headline.
- box --> adalah kode untuk memberikan margin sebesar 10px. biasanya digunakan pada kolom dan box.
- namawarna (contoh: merah) --> adalah kode untuk memberikan warna pada teks.
- border-namawarna (contoh: border-merah) --> adalah kode untuk membuat box / border berwarna pada fitur / kolom. untuk melihat warna yang tersedia, silahkan lihat file short code.
- latar-namawarna (contoh: latar-merah) = bg-namawarna (contoh: bg-merah) --> adalah kode untuk membuat warna background pada fitur /kolom / teks. untuk melihat warna yang tersedia, silahkan lihat file short code.
- list --> adalah kode untuk membuat jarak tinggi tulisan (line height) menjadi lebih renggang.
- berbaris --> adalah kode untuk membuat list menjadi memiliki icon check berwarna merah.
- style1 - style38 --> adalah kode untuk mengganti fariasi font style.
- kol-1, kol-2, kol-3, kol-4, kol-5, kol-6, kol-23 --> adalah kode untuk membuat kolom sesuai dengan yang diinginkan.
- mobileview --> adalah kode supaya konten hanya terlihat jika di akses dengan perangkat hp android.
- mobilehide --> adalah kode supaya konten tidak terlihat jika di akses dengan perangkat hp android.
- headefixed --> adalah kode untuk membuat konten melayang di atas.
- footerfixed --> adalah kode untuk supaya konten melayang di bawah.
Membuat teks menjadi besar, tebal, rata tengah dan berwarna merah
<div class="headline besar tebal merah"> Teks di Sini </div>Membuat box dengan border merah, teks rata tengah, background kuning
<div class="box border-merah tengah latar-merah"> Teks di Sini </div>
Kode Fitur
Ada 40 kode fitur lebih yang bisa anda kombinasikan untuk membuat landingpage yang sesuai dengan yang anda inginkan.Semua kode fitur blogger landing page bisa anda lihat di folder "kode Fitur". Silahkan buka file .html dari fitur yang kamu inginkan dengan software Notepad ++ atau Macromedia Dreamweaver atau Compozer (Jika tidak Punya silahkan bisa cari di google).
Setiap fitur sudah saya beri batas atas dengan kode
<!-- AWAL NAMA FITUR -->
dan batas bawah dengan kode.
<!-- AKHIR NAMA FITUR -->
Tujuannya supaya mudah dalam mengedit salesletter nantinya.
Setiap fitur pasti di dahului dan di akhiri dengan kode wajib dibawah ini
<!-- AWAL NAMA FITUR --> <div class="fitur oke"> <div class="konten"> ............................... ............................... </div> </div> <!-- AKHIR NAMA FITUR -->Kode di atas adalah kode untuk template yang full width
Sedangkan kode wajib untuk template yang tipe box adalah
<!-- AWAL NAMA FITUR --> <div class="fitur"> <div class="konten"> ............................... ............................... </div> </div> <!-- AKHIR NAMA FITUR -->Perbedaannya hanya terletak pada kode "oke"
Kemudain anda bisa memasukkan macam-macam kode di dalam kode tersebut.
Anda tidak usah merasa bingung, ini hanya pengenalan tentang fungsi dari kode yang ada, selanjutnya anda tinggal copy paste fitur-fitur yang sudah saya sediakan, tinggal ganti kata-kata dan gambarnya saja.
Contoh kode fitur 3 kolom
<!-- AWAL FITUR 3 KOLOM --> <div class="fitur oke"> <div class="headline"> <h2>Fitur 3 Kolom B Landing Page</h2> <p >ini adalah contoh fitur 3 kolom keren yang dimiliki oleh B Landing Page yang bisa kamu ganti dengan keunggulan-keunggulan produk yang kamu miliki.</p> </div> <div class="konten tengah"> <div class="kol-3"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_VlwKcy6R0qnlP4Q6OYxSB7ytp30Va8bV8ZJ_OtNkFYQZaO68roSWVJ0um1pY68zapT8QYLLZtQOzDwHat-3VF1SdgD-OX0E4hHSFgQfA5MblS-LWwA9-FdrahFIpcAFZmYydzRPIt4/s1600/blogger-logo.png" /> <h4>Keunggulan 1</h4> <p>Tuliskan deskripsi singkat keunggulan produk yang kamu miliki di sini</p> </div> <div class="kol-3"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_VlwKcy6R0qnlP4Q6OYxSB7ytp30Va8bV8ZJ_OtNkFYQZaO68roSWVJ0um1pY68zapT8QYLLZtQOzDwHat-3VF1SdgD-OX0E4hHSFgQfA5MblS-LWwA9-FdrahFIpcAFZmYydzRPIt4/s1600/blogger-logo.png" /> <h4>Keunggulan 2</h4> <p>Tuliskan deskripsi singkat keunggulan produk yang kamu miliki di sini</p> </div> <div class="kol-3"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_VlwKcy6R0qnlP4Q6OYxSB7ytp30Va8bV8ZJ_OtNkFYQZaO68roSWVJ0um1pY68zapT8QYLLZtQOzDwHat-3VF1SdgD-OX0E4hHSFgQfA5MblS-LWwA9-FdrahFIpcAFZmYydzRPIt4/s1600/blogger-logo.png" /> <h4>Keunggulan 3</h4> <p>Tuliskan deskripsi singkat keunggulan produk yang kamu miliki di sini</p> </div> </div> </div> <!-- AKHIR FITUR 3 KOLOM -->Anda hanya perlu edit tulisan yang berwarna hitam saja. ganti tulisan dan gambar sesuai dengan isi web anda
Mengganti Tulisan dan Gambar
Supaya mudah, buka kode fitur yang sudah saya sediakan dengan software html editor seperti notepad++, macromedia dreamweaver, dll.Karena software tersebut akan memisahkan antara kode dan teks dengan warna yang berbeda. sangat memudahkan anda dalam mengedit kode. apalagi kalo anda memakai macromedia dreamweaver, maka anda bisa melihat tampilan kode dan tampilan compose sekaligus.
Mengganti Tulisan
Anda cukup mengganti atau menghapus atau menambahkan tulisan tulisan yang berwarna hitam, atau tulisan di dalam kode h1, h2, h3, h4, h5, p, span
<h1>Fitur B Landing Page</h1> <h2>Fitur B Landing Page</h2> <h3>Fitur B Landing Page</h3> <h4>Fitur B Landing Page</h4> <h5>Fitur B Landing Page</h5> <p>ini adalah contoh fitur 3 kolom keren....</p> <span>ini adalah contoh fitur 3 kolom keren....</span>Mengganti Gambar
Untuk mengganti gambar, Anda cukup mengganti link url gambarnya saja. Jika gambarnya memiliki link, maka anda juga harus mengganti link nya
Contoh kode gambar tanpa link
<img alt="keyword" src="https://url-gambar.com/nama-gambar.png" />Contoh kode gambar dengan link
<a href="https://url-tujuan.com" > <img alt="keyword" src="https://url-gambar.com/nama-gambar.png" /> </a>Alamat url gambar dari kode di atas adalah "https://url-gambar.com/nama-gambar.png", ganti dengan alamat url gambar milik anda.
Cara upload Gambar
- Buka blogger di tab baru
- Buat post baru atau halaman baru
- masuk mode compose
- Beri judul (contoh: data gambar)
- Klik icon Gambar
- Klik Pilih file
- Cari dan pilih file gambar anda, lalu lakukan proses upload sampai selesai
- setelah itu anda bisa menyimpan (tidak usah diterbitkan) postingan atau halaman ini.
- Klik kanan pada gambar, lalu pilih copy link address / copy image address / copy link location / copy image address (pokoknya yang seperti itu)
- maka kamu akan mendapatkan link url gambar kamu.
- silahkan di paste di kode fitur yang tadi ingin anda rubah gambarnya
Kode Tombol-tombol
Tombol ini sangat multifungsi. bisa dijadikan tombol menu, tombol order, tombol demo, tombol detail, maupun tombol-tombol yang lain sesuai kebutuhan anda
Perhatikan struktur kode tombol-tombol di bawah ini
<a class="btn btn-merah" href="#">Tombol Merah</a> <a class="btn1 btn-merah" href="#">Tombol Merah</a> <a class="btn2 btn-merah" href="#">Tombol Merah</a> <a class="btn3 btn3-merah" href="#">Tombol Merah</a> <a class="btn btn-merah btn-besar" href="#">Tombol Merah</a> <a class="btn1 btn-merah btn-besar" href="#">Tombol Merah</a> <a class="btn2 btn-merah btn-besar" href="#">Tombol Merah</a> <a class="btn3 btn3-merah btn-besar" href="#">Tombol Merah</a>Warna yang tersedia adalah: merah, merahtua, merahmuda, hijau, hijaumuda, hijautua, hijautoska, orange, kuning, kuningtua, kuningmuda, ungu, ungutua, ungumuda, biru, birutua, birumuda, birutoska, abuabu, hitam, putih
Cara menganti warna cukup dengan mengganti kode warna paling belakang. misal ingin mengganti dengan warna hijau maka
<a class="btn btn-merah" href="#">Tombol Merah</a>Diganti menjadi
<a class="btn btn-hijau" href="#">Tombol Hijau</a>Ket: href="#" adalah kode link url, silahkan ganti kode # dengan link url tujuan
Kode Text Box
- Posting tanpa fitur
<div class="oke"> <div class="konten"> paragraf kamu disini </div> </div>atau jika kamu menggunakan template yang box maka kode nya cukup
<div class="konten"> paragraf kamu disini </div>
<div class="post-body-blockquote"> paragraf kamu disini </div>
Kode Text Box Border Berwarna
- Kode Border Berwarna tegas (solid)
<div class="oke konten"> <div class="box border-merah melengkung"> paragraf kamu disini </div> </div>atau jika kamu menggunakan template yang box maka kode nya cukup
<div class="konten"> <div class="box border-merah melengkung"> paragraf kamu disini </div> </div>Adapun short code warna yang tersedia untuk border ini adalah border-merah, border-merahmuda, border-merahtua, border-orange, border-kuning, border-kuningtua, border-kuningmuda, border-biru, border-birutua, border-birumuda, border-birutoska, border-ungu, border-ungutua, border-ungumuda, border-hijau, border-hijautua, border-hijaumuda, border-hijautoska, border-krem, border-kremmuda, border-abuabu, border-hitam, border-hitampekat, border-putih
- Kode Border Berwarna putus-putus (dashed)
<div class="oke konten"> <div class="box border-putus-merah"> paragraf kamu disini </div> </div>atau jika kamu menggunakan template yang box maka kode nya cukup
<div class="konten"> <div class="box border-putus-merah"> paragraf kamu disini </div> </div>Adapun short code warna yang tersedia untuk border ini adalah border-putus-merah, border-putus-merahtua, border-putus-merahmuda, border-putus-orange, border-putus-kuning, border-putus-kuningtua, border-putus-kuningmuda, border-putus-biru, border-putus-birutua, border-putus-birumuda, border-putus-birutoska, border-putus-ungu, border-putus-ungutua, border-putus-ungumuda, border-putus-hijau, border-putus-hijautua, border-putus-hijaumuda, border-putus-hijautoska, border-putus-krem, border-putus-kremmuda, border-putus-abuabu, border-putus-hitam, border-putus-hitampekat, border-putus-putih
- Kode Text Box Ada bayangan Warna-warni (shadow)
<div class="oke konten"> <div class="box border-merah bayangan-merah melengkung"> paragraf kamu disini </div> </div>atau jika kamu menggunakan template yang box maka kode nya cukup
<div class="konten"> <div class="box border-merah bayangan-merah melengkung"> paragraf kamu disini </div> </div>Adapun short code warna yang tersedia untuk bayangan ini adalah bayangan-merah, bayangan-kuning, bayangan-biru, bayangan-ungu, bayangan-hijau, bayangan-hitam
Contoh:
<div class="oke konten"> <div class="border-putus-merah lebar90"> untuk box lebar 90% </div> </div> <div class="oke konten"> <div class="border-putus-merah lebar85"> untuk box lebar 85% </div> </div> <div class="oke konten"> <div class="border-putus-merah lebar80"> untuk box lebar 80% </div> </div> <div class="oke konten"> <div class="border-putus-merah lebar75"> untuk box lebar 75% </div> </div> <div class="oke konten"> <div class="border-putus-merah lebar70"> untuk box lebar 70% </div> </div>atau jika kamu menggunakan template yang box maka kode nya cukup
<div class="konten"> <div class="border-putus-merah lebar90"> untuk box lebar 90% </div> </div> <div class="konten"> <div class="border-putus-merah lebar85"> untuk box lebar 85% </div> </div> <div class="konten"> <div class="border-putus-merah lebar80"> untuk box lebar 80% </div> </div> <div class="konten"> <div class="border-putus-merah lebar75"> untuk box lebar 75% </div> </div> <div class="konten"> <div class="border-putus-merah lebar70"> untuk box lebar 70% </div> </div>Selamat mencoba
Text Style
Pada Bab ini kita akan merubah style teks dengan kode pemanggil, mulai dari align, warna teks, warna background, ukuran teks dan font- Membuat Teks Menjadi Rata Tengah (center)
<p class="headline"> Teks Di sini </p>atau
<p class="tengah"> Teks Di sini </p>
- Membuat Teks Menjadi Rata Kiri (left) dan tebal
contoh:
<p class="teks-kiri tebal"> Teks Di sini </p>
- Membuat Teks Menjadi miring (italic)
contoh:
<p class="miring"> Teks Di sini </p>
- Membuat Background Warna pada Teks atau Fitur
contoh:
<div class="fitur oke"> Teks Di sini </div>menjadi
<div class="fitur oke latar-merah"> Teks Di sini </div>Adapun short code warna yang tersedia untuk fitur ini adalah latar-merah, latar-merahtua, latar-merahmuda, latar-orange, latar-kuning, latar-kuningtua, latar-kuningmuda, latar-biru, latar-birutua, latar-birumuda, latar-birutoska, latar-ungu, latar-ungutua, latar-ungumuda, latar-hijau, latar-hijautua, latar-hijaumuda, latar-hijautoska, latar-krem, latar-kremmuda, latar-abuabu, latar-hitam, latar-hitampekat, latar-putih
- Mengubah Font
Cara untuk mengubah font style sangatlah mudah, cukup dengan menambahkan kode style saja maka font text akan berubah secara ajaib :)
contoh:
<div class="style15"> Teks Di sini </div>Style yang tersedia adalah Style1 - Style38
Untuk melihat tampilan style nya silahkan buka http://www.blandingpage.com/p/font-style.html
- Membuat Teks Berwarna
contoh:
<p class="merah"> Teks Di sini </p>Selamat mencoba
- Mengubah ukuran Teks
contoh:
<p class="x-besar"> Teks Di sini </p>Membuat tulisan menjadi besar dengan menambahkan kode besar
contoh:
<p class="besar"> Teks Di sini </p>Membuat tulisan menjadi medium dengan menambahkan kode sedang
contoh:
<p class="sedang"> Teks Di sini </p>Membuat tulisan menjadi kecil dengan menambahkan kode kecil
contoh:
<p class="kecil"> Teks Di sini </p>
- Membuat Teks Berkedip (blink)
contoh:
<p class="blink"> Teks Di sini </p>
Efek Animasi
Efek animasi ini bisa kamu terapkan di gambar, teks, maupun fitur. adapun animasi yang tersedia di template ini sementara ada 3 yaitu- zoom in
- bounce out
- bounce In
<div class="zoom-in"> Teks atau gambar atau kode fitur Di sini </div>Contoh Tampilan bounce in
<div class="bounce-in"> Teks atau gambar atau kode fitur Di sini </div>Contoh Tampilan bounce out
<div class="bounce-out"> Teks atau gambar atau kode fitur Di sini </div>
Kombinasi fitur
Sekedar Contoh- Membuat Tulisan Besar, Berwarna Kuning, Rata Tengah, Font Costum, dengan background hijau
<div class="besar kuning tengah 10 latar-hijau "> Teks Di sini </div>semua kode pemanggil bisa letakkan untuk semua fitur dan di kombinasikan dengan urutan yang bebas
Dengan kreasi anda, web anda akan tampak profesional dengan template BLandingPage ini. Selamat membuat Landing Page
Selamat Membuat Landing Page
No comments:
Post a Comment