Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tampilan landing page menggunakan efek gelembung di blogger
Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Landing Page
Banyak sekali cara dalam membuat tampilan landing page di blogger, salah satunya landing page dengan efek animasi CSS gelembung, landing page ini sangat responsif untuk di gunakan di blogger, kamu bisa menampilkan halaman landing page tersebut pada halaman beranda alias home di dalam blog, jika kamu belum mengetahui apa itu landing page? Secara singkat landing page adalah suatu halaman khusus yang di buat untuk menampilkan berbagai macam informasi seperti produk, layanan atau juga hal yang lainnya seputar bisnis gitulah
Responsive di beranda
Seperti kebanyakan landing page, biasanya di tampilkan pada halaman beranda alias home, seperti yang sudah pernah saya jelaskan pada artikel sebelumnya bahwa landing page seharusnya di tampilkan dalam halaman home alias beranda, tetapi juga tidak terkhusus pada halaman beranda bisa juga di tampilkan pada halaman inti blog atau juga halaman page blog sesuai selera aja, karena memang pengguna landing page kebanyakan mencampur antara penggunaan landing page dan juga penggunaan postingan terutama di blogger
Dibuat menggunakan CSS
Tampilan landing page pada halaman beranda ini hanya di buat menggunakan kode CSS saja tanpa ada unsur penggunaan kode Javascript di dalamnya, nah jika kamu ingin memasang landing page di dalam blog silahkan baca terus artikel ini hingga selesai ok
Contoh Tampilan
Baiklah jika kamu penasaran dengan contoh tampilan landing page tersebut kamu bisa melihat seperti contoh landing page di bawah ini
Happily used by 10.000+ Customers.
Get ready for the surprise 10.000 our Customers and 6.000 customer active. 👏 Congratulation
Info: Bagaimana sobat dengan contoh tampilan dari landing page tersebut, selebihnya kamu bisa tambahkan sendiri atau bisa menggunakan landing page Informasi bisnis kamu bisa pelajari nya disini
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat tampilan landing page dengan efek gelembung keren di blogger, baca terus dan terus ok
Kode CSS
Seperti biasanya kamu bisa menyalin kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>
/* Landing page */ .rah1{z-index: 2; position: relative;}.rah1,.rahmyhero-footer{width:100%;background-size:cover}.rahmyhero-footer{position:absolute;z-index:1;bottom:-10px;left:0;height:auto}.rahmyhero-footer img{width:100%;height:100%}#search-bar,.rah1{text-align:center}#search-bar{display:block;position:relative;padding:10px;width:100%;z-index:10;margin:25px auto}
#search-bar input#sq{border-radius:50px;background:#fff;color:#2d2d2d;margin:0;padding:0 20px;outline:0;line-height:48px;transition:all .1s;font-size:14px;font-weight:400;border:none;width:100%}#search-bar input#sq:focus{color:#333;background:#eee}
#search-form1{position:relative;margin:auto}#searchsubmit{text-align:center;border:0;border-radius:0 50px 50px 0;color:#4c4c4c;display:inline-block;position:absolute;right:0;background:linear-gradient(45deg,#fbdc03 0,#ff3030 100%);background:-webkit-linear-gradient(45deg,#fbdc03 0,#ff3030 100%);top:0;padding:0 25px;height:48px;-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s;}
#searchsubmit:active,#searchsubmit:focus,#searchsubmit:hover{color:#fff;cursor:pointer;outline:0;background:#eacd00}
#search-bar input#sq:-ms-input-placeholder,#search-bar input#sq::-webkit-input-placeholder{color:#777}#search-bar input#sq:-moz-placeholder,#search-bar input#sq::-moz-placeholder{color:#777;opacity:1}#search-bar a{color:#fff}button.search-form-icon{top:7px;right:11px;position:absolute;cursor:pointer;outline:0;font-size:24px;background:none;border:none;color:#fff}
button.search-form-icon svg{width:20px;height:auto;fill:white}.rah1{padding:1rem 0 3rem;display:block;top:-12px;overflow:hidden;line-height:1.8em;color:#fff;background-color:var(--rah-home-color);background-image:linear-gradient(242deg,rgba(32, 64, 154, 1.0) 1%,rgba(32, 64, 154, 1.0) 48%,rgba(32, 64, 154, 1.0)),linear-gradient(180deg,rgba(17,17,17,.5),rgba(17,17,17,.5)),url(https://1.bp.blogspot.com/-K4WZgnyLukc/Xsl2Xo7SgPI/AAAAAAAAAEw/HAu246tJnhgeHkMeDTwYU60IMzjjP_sXgCLcBGAsYHQ/s1600/overlay.png)}.rah1 h3{color:#fff;font-size:35px!important;margin:0 0 10px;line-height:1}.rahround1{position:absolute;width:500px;height:500px;background:rgba(255,255,255,.1);border-radius:100%;top:-50%;left:-10%;z-index:0}.rahround2{position:absolute;width:200px;height:200px;z-index:0;border:50px solid rgba(255,255,255,.1);border-radius:100%;right:-10%;bottom:-10%}.rahmybg{padding:4rem 0}.rahmycircles,{left:0;z-index:2;position:absolute;right:0}.rahmycircles{top:0;bottom:0;overflow:hidden;margin:0}.rahmycircles li{position:absolute;display:block;list-style:none;width:20px;height:20px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:rgba(255,255,255,.13);animation:animateku 45s linear infinite;bottom:-150px;z-index:0}.rahmycircles li:nth-child(1){left:25%;width:60px;height:60px;animation-delay:0}.rahmycircles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s}.rahmycircles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s}.rahmycircles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0;animation-duration:18s}.rahmycircles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0}.rahmycircles li:nth-child(6){left:75%;width:90px;height:90px;animation-delay:3s}.rahmycircles li:nth-child(7){left:35%;width:130px;height:130px;animation-delay:7s}.rahmycircles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s}.rahmycircles li:nth-child(9){left:20%;width:5px;height:5px;animation-delay:2s;animation-duration:35s}.rahmycircles li:nth-child(10){left:85%;width:130px;height:130px;animation-delay:0;animation-duration:11s}
@keyframes animateku{0{transform:translateY(0) rotate(0);opacity:1;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
100%{transform:translateY(-1000px) rotate(720deg);opacity:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}}#sectionmy53 a{padding-top:60px}#sectionmy53 a span{position:absolute;top:0;left:0;right:0;height:40px;transition:all .3s}#sectionmy53 a:hover span{opacity:.8}#sectionmy53 a span::before{position:absolute;content:'';top:-22px;left:-22px;width:44px;height:44px;box-shadow:0 0 0 0 rgba(255,255,255,0.1);border-radius:100%;opacity:0;-webkit-animation:sdb 3s infinite;animation:sdb 3s infinite}#sectionmy53 a span::after{position:absolute;content:'';width:12px;height:12px;margin:-8px 0 0 -6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.insightly{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;transform:translate(0,-50%);color:#fff}@media screen and (max-width:980px){.rahround1{left:-40%}.rahround2{right:-30%;bottom:-25%}.rahround2{right:-35%}}@media screen and (max-width:800px){.rah1{padding:1rem 0}#search-bar{}.rahmybg{padding:2rem 0 5rem}}@media screen and (max-width:768px){#search-bar{width:100%}.rah1 h3{font-size:28px!important}}@media screen and (max-width:480px){.rahround1{top:-70%;left:-60%}#searchsubmit{right:0}button.search-form-icon{right:10px}}@media screen and (max-width:414px){#search-bar input#sq{width:100%}}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di di atas
Kode HTML
Langkah selanjutnya untuk membuat tampilan landing page di blogger, kamu bisa menyalin lagi kode HTML di bawah ini, kemudian kamu bisa meletakkannya tepat di bawah kode <body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='rah1'>
<div class='rahround1'>
</div>
<div class='rahround2'>
</div>
<div class='rahmybg'>
<span class='rahmycircles'>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</span>
<h3>
Happily used by 10.000+ Customers.
</h3>
<p>
Get ready for the surprise 10.000 our Customers and 6.000 customer active. 👏 Congratulation
</p>
<div id='search-bar'>
<form expr:action='data:blog.homepageUrl + "search"' id='search-form1' itemprop='potentialAction' itemscope='' itemtype='https://schema.org/SearchAction' method='get'>
<input id='sq' name='q' placeholder='Hi who you? Find something free...' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
<button class='search-form-icon'>
<svg viewbox='0 0 310.42 310.42'>
<path d='M273.587,214.965c49.11-49.111,49.109-129.021,0-178.132c-49.111-49.111-129.02-49.111-178.13,0 C53.793,78.497,47.483,140.462,76.51,188.85c0,0,2.085,3.498-0.731,6.312c-16.065,16.064-64.263,64.263-64.263,64.263 c-12.791,12.79-15.836,30.675-4.493,42.02l1.953,1.951c11.343,11.345,29.229,8.301,42.019-4.49c0,0,48.096-48.097,64.128-64.128 c2.951-2.951,6.448-0.866,6.448-0.866C169.958,262.938,231.923,256.629,273.587,214.965z M118.711,191.71 c-36.288-36.288-36.287-95.332,0.001-131.62c36.288-36.287,95.332-36.288,131.619,0c36.288,36.287,36.288,95.332,0,131.62 C214.043,227.996,155,227.996,118.711,191.71z'>
</path>
<path d='M126.75,118.424c-1.689,0-3.406-0.332-5.061-1.031c-6.611-2.798-9.704-10.426-6.906-17.038 c17.586-41.559,65.703-61.062,107.261-43.476c6.611,2.798,9.704,10.426,6.906,17.038c-2.799,6.612-10.425,9.703-17.039,6.906 c-28.354-11.998-61.186,1.309-73.183,29.663C136.629,115.445,131.815,118.424,126.75,118.424z'>
</path>
</svg>
</button>
</form>
<a href='https://xmltemakawe.blogspot.com' target='_blank'>
<b>
Partner with xmltemakawe
</b>
</a>
</div>
</div>
<div class='insightly' id='sectionmy53'>
<a href='#myrahcontroll'>
<span>
</span>
</a>
</div>
<div class='rahmyhero-footer'>
<img alt='bgfooter' src='https://1.bp.blogspot.com/-mrE9htdAyD8/Xn5xydUrTyI/AAAAAAAAAkM/8ieT-nOc6dQsaQnoYj5gA7yR6BJLjiergCLcBGAsYHQ/s1600/bg.png' title=''>
</img>
</div>
</div>
</b:if>Info: Fungsi dari kode HTML di atas adalah untuk menampilkan landing page dengan efek animasi gelembung tersebut
Penjelasan Kode
Biar kamu gak kebingungan, admin bakalan menjelaskannya sedikit oke! Tampilan landing page pada peletakan kode HTML di bawah kode <body> akan menampilkan landing page pada halaman body blog tepat di bawah header blog, sedangkan untuk menampilkan landing page pada seluruh halaman blog hapus kode seperti di bawah ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- hapus kode di atas -->
<!-- Kode HTML Landing page nya -->
<!-- Hapus kode di bawah -->
</b:if>Info: Hanya kode yang di tampilkan seperti di atas yang di hapus ok maka tampilan landing page akan muncul di seluruh tampilan blog
