Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tampilan landing page di blogger, penggunaan landing page ini support menu layout jadi lebih mudah untuk di gunakan
Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Landing Page
Apa itu landing page? Landing Page adalah suatu halaman khusus yang di buat dengan tujuan spesifik untuk mengarahkan pelanggan melakukan sebuah aksi tertentu, seperti membeli, memesan, atau pun mengisi formulir, dan landing page biasanya di gunakan oleh website penyedia jasa ataupun jual beli barang online sehingga harus menggunakan landing page di dalam website nya
Tampilan Beranda
Seperti kebanyakan pengguna landing page selalu menampilkan landing page pada halaman utama alias halaman beranda atau yang lebih di kenal sebagai Home alias rumah, mengapa landing page di tampilkan di halaman beranda? memang landing page seharusnya di tampilkan pada halaman beranda dan tidak semestinya juga harus pada halaman beranda, soalnya kebayakan landing page mencampur fungsi postingan dan landing page secara bersamaan
Support tampilan layout
Landing page yang bakalan admin jelaskan sebentar lagi ini sangat support pada penggunaan menu layout alias menu Tata letak, jadi kamu bisa mengedit tampilan landing page dengan mudah keinginan kamu
Contoh Tampilan
Jika kamu penasaran dengan Contoh tampilan dari landing page di blogger kamu bisa melihat contoh tampilan dari landing page berikut ini
Info: Tampilan di atas merupakan contoh tampilan dari landing page selebihnya kamu bisa tambahkan sendiri aja hehehehe
Cara penggunaan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat tampilan landing page di blogger terbaru saa ini, baca dan pelajari artikel berikut ini hingga selesai ok
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan untuk membuat landing page di blogger kamu bisa menyalin kode CSS di bawah ini kemudian kamu bisa meletakkan nya di atas kode ]]>/b:skin>
.__rahlanding ul.__rah-page{display:flex;flex-wrap:wrap;margin:40px 0 0}
.__rahlanding ul.__rah-page li{width:33.333%;padding:0 45px;margin-bottom:30px;left:0;right:0;display:block;text-align:center}
.__rahlanding ul.__rah-page li > *{margin:0 auto}
.__rahlanding ul.__rah-page svg{width:45px;height:45px;fill:#767676;margin-bottom:25px}
.__rahlanding ul.__rah-page svg.line{fill:none;stroke:#767676}
.__rahlanding ul.__rah-page .t strong{font-size:1.2rem;font-family:'Rubik', sans-serif;font-weight:900}
.__rahlanding ul.__rah-page .t p{font-size:inherit;font-family:inherit;line-height:1.7em;opacity:.8}
.__rah-landing-cnt{position:relative;padding-top:80px;padding-bottom:80px}.__rah-page-inner .__rah-landing-cnt{background:var(--body-round)}
.__rah-page-inner .widget .title{text-align:center}
.__rah-page-inner .widget .title:after{display:none}@media screen and (max-width:896px){.__rahlanding ul.__rah-page li{width:50%}}@media screen and (max-width:640px){
.__rahlanding ul.__rah-page li{width:100%}}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya untuk menampilkan landing page tersebut kamu bisa langsung menyalin kode CSS di bawah ini sesuai keinginan kamu aja
<b:if cond='data:view.isHomepage'>
<div class='__rahlanding'>
<b:section id='__rahlanding' showaddelement='true'>
<b:widget id='HTML053' locked='false' title='Rah Landing Page' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><div class='secIn'>
<div class='widget HTML'>
<div class='content'>
<h2 class='title'>Keunggulan template ICloudice</h2>
<ul class='__rah-page'>
<li>
<!--[ Icon SVG ]-->
<svg viewbox='0 0 48 48'><path d='M45,10H44V9a2.9,2.9,0,0,0-3-3H24V5a3,3,0,0,0-3-3H3A3,3,0,0,0,0,5V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V13A3,3,0,0,0,45,10ZM24,8H41a.9.9,0,0,1,1,1v1H24ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1v5H12v2H45a1,1,0,0,1,1,1Z'/><path d='M30,19v2h3.59l-7,7H18a1,1,0,0,0-.71.29l-6,6,1.41,1.41L18.41,30H27a1,1,0,0,0,.71-.29L35,22.41V26h2V20a1,1,0,0,0-1-1Z'/></path></path></svg>
<div class='t'>
<strong>Loading lebih cepat</strong>
<p>Dioptimalkan dengan memperkecil ukuran template seperti kompres CSS dan Javascript agar loading lebih cepat</p>
</div>
</li>
<li>
<!--[ Icon SVG ]-->
<svg viewbox='0 0 48 48'><path d='M45,10H44V9a2.9,2.9,0,0,0-3-3H24V5a3,3,0,0,0-3-3H3A3,3,0,0,0,0,5V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V13A3,3,0,0,0,45,10ZM24,8H41a.9.9,0,0,1,1,1v1H24ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1v5H12v2H45a1,1,0,0,1,1,1Z'/><path d='M30,19v2h3.59l-7,7H18a1,1,0,0,0-.71.29l-6,6,1.41,1.41L18.41,30H27a1,1,0,0,0,.71-.29L35,22.41V26h2V20a1,1,0,0,0-1-1Z'/></path></path></svg>
<div class='t'>
<strong>SEO Friendly</strong>
<p>Template didesain SEO Friendly mulai dari breadcrumb yang sudah terindex google sampai schema markup lainnya</p>
</div>
</li>
<li>
<!--[ Icon SVG ]-->
<svg viewbox='0 0 48 48'><path d='M45,10H44V9a2.9,2.9,0,0,0-3-3H24V5a3,3,0,0,0-3-3H3A3,3,0,0,0,0,5V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V13A3,3,0,0,0,45,10ZM24,8H41a.9.9,0,0,1,1,1v1H24ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1v5H12v2H45a1,1,0,0,1,1,1Z'/><path d='M30,19v2h3.59l-7,7H18a1,1,0,0,0-.71.29l-6,6,1.41,1.41L18.41,30H27a1,1,0,0,0,.71-.29L35,22.41V26h2V20a1,1,0,0,0-1-1Z'/></path></path></svg>
<div class='t'>
<strong>Fully Responsive</strong>
<p>Ukuran template flesibel menyesuaikan disetiap layar serta layout yang disusun rapi dengan memaksimalkan kinerja CSS</p>
</div>
</li>
<li>
<!--[ Icon SVG ]-->
<svg viewbox='0 0 48 48'><path d='M45,10H44V9a2.9,2.9,0,0,0-3-3H24V5a3,3,0,0,0-3-3H3A3,3,0,0,0,0,5V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V13A3,3,0,0,0,45,10ZM24,8H41a.9.9,0,0,1,1,1v1H24ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1v5H12v2H45a1,1,0,0,1,1,1Z'/><path d='M30,19v2h3.59l-7,7H18a1,1,0,0,0-.71.29l-6,6,1.41,1.41L18.41,30H27a1,1,0,0,0,.71-.29L35,22.41V26h2V20a1,1,0,0,0-1-1Z'/></path></path></svg>
<div class='t'>
<strong>Dioptimalkan untuk iklan</strong>
<p>Sudah disediakan slot iklan adsense yang siap pakai pada lokasi dengan click rate tinggi</p>
</div>
</li>
<li>
<!--[ Icon SVG ]-->
<svg viewbox='0 0 48 48'><path d='M45,10H44V9a2.9,2.9,0,0,0-3-3H24V5a3,3,0,0,0-3-3H3A3,3,0,0,0,0,5V45a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3V13A3,3,0,0,0,45,10ZM24,8H41a.9.9,0,0,1,1,1v1H24ZM46,45a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1v5H12v2H45a1,1,0,0,1,1,1Z'/><path d='M30,19v2h3.59l-7,7H18a1,1,0,0,0-.71.29l-6,6,1.41,1.41L18.41,30H27a1,1,0,0,0,.71-.29L35,22.41V26h2V20a1,1,0,0,0-1-1Z'/></path></path></svg>
<div class='t'>
<strong>Lebih mudah digunakan</strong>
<p>Sangat mudah untuk mengubah warna, lebar sampai font melalui Desainer Tema Blogger termasuk pengaturan widget pada menu Layout</p>
</div>
</li>
</ul>
</div>
</div>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='pG __rah-page-inner'>
<div class='__rah-landing-cnt'>
<data:content/>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>Info: Taruh di mana kamu ingin menampilkan landing page tersebut
Petunjuk
Jika kamu masih bingung meletakkan kode HTML yang saya berikan di atas kamu bisa mencari kode <b:section kemudian jika sudah ketemu letakkan kode HTML nya tepat diatas kode <b:section atau juga kamu bisa meletakkan kode HTML yang saya berikan di bawah tag kode penutup dari <b:section yakni </b:section, jika masih bingung silahkan hubungi admin melalui WhatsApp ataupun pada kolom komentar, semoga bermanfaat