Pernahkah Anda bertanya-tanya bagaimana cara membuat halaman arahan Profesional di blog Blogger? Ikuti tutorial pamungkas ini untuk membuat WordPress seperti halaman arahan di blog blogspot.
Membuat landing page di blogger tetap menjadi tugas yang melelahkan karena kami tidak memiliki solusi satu klik seperti Sistem Manajemen Konten populer lainnya , misalnya WordPress atau Joomla.
Kita perlu menangani semuanya secara manual dari a hingga z untuk membuat landing page khusus kita di blogger di mana terdapat banyak plugin dan template yang tersedia untuk membuat landing page yang menakjubkan di platform CMS lain seperti WordPress atau Joomla. Klik Klik dan ini dia landing page profesional Anda yang berdedikasi tinggi di platform ini.
Jadi dalam postingan kali ini saya akan membahasnya dan memudahkan semua orang untuk membuat landing page di blog blogger Anda yang sudah ada.
Pada akhir posting ini, Anda akan memiliki landing page Anda sendiri, saya harap demikian. 🙂
Tunggu! Mengapa Anda Membutuhkan landing page?
landing page dirancang untuk fokus hanya pada satu tujuan tertentu yang ingin Anda capai – apakah Anda ingin menerima email untuk mengembangkan daftar email Anda, mempromosikan produk Anda sendiri, atau apa pun. Di landing page, semua hal lain yang dapat mengalihkan perhatian pengunjung seperti sidebar, footer, header, atau area navigasi disembunyikan kecuali konten landing page Anda.
Di bawah ini adalah beberapa jenis landing page yang dapat Anda buat di blog Anda untuk mendapatkan keterlibatan pengguna dan ROI yang maksimal .
1. landing page Segera Hadir
Halaman segera hadir dirancang untuk memberi tahu audiens Anda bahwa kami akan segera meluncurkan blog/situs web/layanan kami. Jadi Anda cukup memasukkan formulir opt-in email dan biarkan pengunjung Anda berlangganan untuk mendapatkan pemberitahuan ketika blog/website/layanan Anda diluncurkan.
2. landing page Terima Kasih
Halaman Terima Kasih adalah halaman yang mungkin sering Anda lihat di blog lain. Bagaimana dan kapan terakhir kali Anda membuka halaman terima kasih? Mungkin Anda pernah mengomentari postingan blog atau mengunduh produk digital.
3. Mulai Di Sini landing page
Halaman Mulai Di Sini dirancang khusus untuk pengunjung pertama kali yang mendarat di blog Anda dan tautan ke sana disertakan di bilah navigasi utama. Pada halaman Mulai Di Sini, Anda dapat menawarkan semua informasi relevan dan tautan yang mereka perlukan untuk memulai. Sertakan tombol ajakan bertindak Anda di paro atas sehingga mereka mengetahui langkah selanjutnya yang harus dilakukan.
4. landing page Khusus Promosi
Apakah Anda mempromosikan beberapa produk afiliasi atau produk Anda sendiri? Maka Anda perlu memiliki landing page khusus promosi khusus untuk produk tertentu tersebut untuk mendapatkan tingkat konversi maksimum. Anda tidak punya pilihan lain. 🙂
5. Lainnya
Anda dapat membuat landing page sesuai dengan tujuan Anda. Seperti pengunjung yang mendarat di blog Anda dari tautan profil jejaring sosial Anda, Anda dapat membuat landing page khusus menyambut pengunjung, menceritakan tentang diri Anda dan apa yang Anda tawarkan dengan tombol ajakan bertindak yang kuat.
Jadi sekarang Anda ingin membuat landing page pertama Anda di blog blogger Anda? Cukup penasaran untuk mengetahui caranya? Pertahankan rasa ingin tahu Anda dan mari kita mulai. 🙂
Demo di bawah ini tidak dihosting di blogger, namun dapat ditambahkan sebagai landing page di blogspot secara gratis. Saya akan segera membagikan tutorialnya. Tinggalkan komentar untuk mendapat pemberitahuan.
Jadi, apakah itu mengesankan bagi Anda? Anda dapat mencapai hasil yang sama pada blog blogspot yang ada, baik Anda menggunakan nama domain khusus atau nama subdomain blogspot gratis. Meskipun Anda perlu mengurus beberapa hal pada nama sub-domain gratis, jadi harap baca dengan cermat semua langkah yang diberikan di bawah ini.
Siap Mendesain landing page Pertama Anda Di Blogger?
Sebelum kita memulai prosesnya, mari kita lihat sekilas cara membuat landing page di halaman terpisah dari blog blogger kita.
Langkah 1. Buat Halaman baru
Pertama-tama Anda perlu membuat halaman baru jadi cukup Login ke akun Blogger > Pilih blog Anda > Buka bagian Halaman dan di atasnya, Anda akan melihat link “Halaman Baru” jadi klik di atasnya.
Sekarang masukkan Nama Halaman Anda di area judul (hati-hati dengan teks judul karena Anda akan mendapatkan alamat Permalink yang sama untuk halaman Anda) dan publikasikan. Lihat tangkapan layar di bawah ini untuk membuat halaman baru.
Sekarang kunjungi halaman baru Anda dan salin URL halaman dari bilah alamat browser Anda.
Catatan: Jika Anda menggunakan nama domain khusus, salin URL halaman Anda apa adanya, tetapi jika Anda menggunakan nama sub-domain blogspot gratis maka Anda perlu melakukan beberapa perubahan seperti yang diberikan di bawah ini:
Mengubah ekstensi khusus negara menjadi . com
Misalnya: Jika Anda berasal dari India maka nama sub-domain Anda akan jadi, http://example.blogspot.npjadi Anda perlu mengubah menjadi .npdi .comakhir URL (jangan tambahkan wwwsetelahnya http://). Mengerti? Bagus. 🙂
Langkah 2. Tambahkan CSS untuk Menata landing page Anda Menggunakan Tag Bersyarat
Sekarang kita akan menambahkan tag kondisional ke kode template kita dan di dalamnya, kita akan meletakkan kode CSS untuk menyembunyikan pembungkus lain yang tidak diinginkan kecuali area konten. Gaya CSS ini akan menggantikan gaya CSS utama template kita dan hanya akan diterapkan pada halaman baru.
Buka bagian Templat > Klik Edit HTML (buat cadangan kode templat Anda terlebih dahulu) sekarang klik di dalam kotak kode dan tekan Ctrl+F untuk membuka kotak pencarian.
Sekarang temukan baris kode ini </b:skin>dan tepat di bawahnya, tempelkan kode yang diberikan di bawah ini setelah melakukan perubahan yang diperlukan (perubahan yang diperlukan diberikan di bawah kode pada langkah Pengeditan jadi bacalah dengan cermat). Setelah menambahkan kode, simpan saja template Anda dan kunjungi halaman Anda lagi untuk melihat hasil yang telah Anda capai. Jangan berharap terlalu banyak pada tahap ini. 😛
<b:if cond=’data:blog.url == "YOUR-BLOG-PAGE-URL"’>
<style type=’text/css’>
/*— Find out all the ids or classes of the main wrappers and add them in below code to hide them—*/
.sidebar-wrapper, .header-wrapper, .post-title, #blog-pager, .post-footer, #footer-wrapper, .comments {
display: none !important; /*– This will hide those main wrappers–*/
}
/*—If you’re using one of the default blogger templates—*/
.header-outer, .column-right-outer, .tabs-outer, .footer-outer {
display: none !important; /*– This will hide header, footer, navbar and sidebar–*/
}
/*—Changing the Content Width to 100%—*/
#content {
width: 100% !important; /*—This will change the content area width to 100%–*/
}
/*—Changing The Body Background Image And Color—*/
body {
background: #FFF url(‘YOUR-IMAGE-URL’) no-repeat scroll top center !important;
margin:0;
padding:0;
}
</style>
</b:if>
Editing : Ganti YOUR-BLOG-PAGE-URL dengan URL halaman yang sudah anda copy tadi. Saya telah menambahkan komentar mendetail pada kode di atas untuk mempermudah. Jika Anda menggunakan templat pihak ketiga khusus maka Anda perlu mengetahui semua kelas atau id pembungkus seperti Header, Bilah Navigasi, Bilah Samping, Footer, dll. Yang ingin Anda sembunyikan di laman landas Anda.
Id atau nama kelas ini mungkin berbeda digunakan oleh pengembangnya masing-masing, jadi jangan berharap kode CSS saya di atas berfungsi sepenuhnya untuk Anda. Anggap saja sebagai referensi dan permulaan yang cepat .
* Terakhir Diperbarui: Nov 2019
Kami telah membagikan templat landing page di situs web kami . Jangan ragu untuk menggunakannya di mana saja. Menikmati!
Menemukan Nama Kelas/Id Menggunakan Mode Pengembang di Browser Anda
Anda dapat menemukan semua id atau kelas ini hanya dengan mengunjungi halaman mana pun yang ada di blog Anda, lalu mulai mode pengembang (Ctrl+Shift+I untuk Chrome) dan periksa elemen di browser Anda. Misalnya, setelah memulai mode pengembang, cukup klik kanan pada sidebar lalu pilih elemen inspeksi dan Anda akan melihat id atau nama kelas elemen yang diperiksa di sisi kanan di bawah tab Gaya .
Sekarang untuk memastikan bahwa Anda menemukan kelas atau id yang tepat untuk disembunyikan, cukup tambahkan satu baris kode display: none;ke gaya elemen tertentu yang diperiksa. Jika tidak lagi muncul, tepuk bahu Anda, Anda baru saja melakukan pekerjaan dengan baik. 🙂
Ganti YOUR-IMAGE-URL dengan URL gambar yang ingin Anda gunakan sebagai latar belakang dan ubah kode warnanya #FFFsesuai kode warna pilihan Anda.
Mengubah lebar area Konten menjadi 100% mungkin berhasil atau mungkin tidak hanya karena nama Id-nya. Kode templat saya menggunakan #contentnama id ini untuk pembungkus konten dan milik Anda mungkin sangat berbeda. Jadi Anda harus mengetahuinya dengan cara yang sama seperti yang saya jelaskan di atas.
Jadi, jika Anda sudah berhasil menemukan semua id atau nama kelas yang ingin disembunyikan dan berfungsi dengan baik, tambahkan saja ke kode CSS di atas untuk menyembunyikannya. Sekarang landing page Anda sudah siap. Setelah menyembunyikan semua gangguan yang tidak diinginkan, kembalilah mengedit halaman sesuai keinginan Anda.
Sekarang apa yang dapat Anda lakukan dengan HTML dan CSS di dalam editor posting Anda sepenuhnya bergantung pada Anda. Saya telah melakukan hal yang sama di landing page saya. Langit adalah batas!
Bagaimana cara menggunakan HTML dan CSS di dalam Post Editor?
Beralih ke mode HTML dan ubah pengaturan halaman dari sisi kanan seperti yang ditunjukkan pada gambar di bawah.
Nah untuk menggunakan CSS maka tinggal masukan kode CSS anda dengan menggunakan tag <style>. Misalnya:-
<style>
#my-landing-page-header {
width: 100%;
background: #000;
font-size: 20px;
padding: 20px 0px;
color: #FFF
}
</style>
Sekarang Anda dapat memanggil gaya CSS di atas dalam HTML untuk menerapkannya. Misalnya:-
<div id=’my-landing-page-header’> Hello World! This is my First Landing Page</div>
Hasilnya adalah ini: –
Halo Dunia! Ini adalah landing page Pertama saya
Ingin tahu apakah kita bisa menggunakan kode CSS yang telah kita tambahkan ke kode template kita menggunakan tag kondisional di dalam editor postingan itu sendiri? Saya melakukan hal yang sama saat mendesain landing page saya dan hasilnya sangat tidak menyenangkan.
Ini pasti berhasil tetapi kode templat dimuat dari direktori root terlebih dahulu dan kemudian segera dirender di browser. Jadi ketika Anda akan menggunakan kode CSS di dalam editor postingan untuk menyembunyikan pembungkusnya, kode tersebut akan muncul selama sepersekian detik sebelum kode CSS Anda di dalam editor postingan akan berlaku untuk menimpanya. Bukankah ini pengalaman pengguna yang buruk?
Bagaimana Anda menyebutnya tampilan profesional jika itu akan terjadi pada landing page saya yang telah saya rancang pada jam bangun larut malam? 🙂
Jadi beginilah cara Anda mendesain landing page kustom Anda sendiri di blogspot. Semua blogger yang akrab dengan CSS dan HTML akan menganggap tutorial ini sangat mudah dan bagi mereka yang baru mengenalnya, silakan menyodok saya kapan saja. Saya pribadi akan mengunjungi blog Anda dan membantu Anda membuat segala sesuatunya menjadi sangat mudah bagi Anda. 🙂
Saat ini tidak ada solusi satu klik untuk membuat landing page Anda, tetapi di masa depan, saya akan mendesain template saya sendiri dan landing page akan menjadi bagian integralnya. Maka Anda tidak perlu memeriksa elemen dan mengacaukan kodenya.