›

Kompi Landing Page, Free Responsive Landing Page Blogger Template

Selasa, 18 September 2018 Add Comment Edit
Ada beberapa sobat Kompi yang request dibuatkan template landing page Blogger, namun aku gres dapat memenuhi permitaannya kini ini alasannya yaitu beberapa kesibukan dan keadaan kesehatan saya. Saya namakan template ini Kompi Landing Page.

Untuk tampilan landing page template ini aku ambil dari bootstrap landing page yang lalu aku terapkan pada template Kompi Simple sebagai blog-nya. Landing page hanya tampil di homepage saja dan di homepage aku juga menyembunyikan blog semoga yang tampil hanya landing page sementara untuk masuk ke blog aku sediakan link show blog pada hidangan di kanan atas. Di homepage (landing page) aku menambahkan juga contact form dan maps.

Untuk tampilan homepage / landing page menyerupai tampak pada gambar di bawah ini.

DEMO

Fitur-fitur dari template ini:
  • Fast Loading
  • Contact Form
  • Google Maps
  • Valid HTML5 dan Struktur Data
  • Sharing Button with counter
  • Defer Blogger Comment
  • Floating widget sidebar di postpage
  • Responsive
Bagi yang ingin mencoba menggunakannya, silahkan unduh pada link di bawah ini.

DOWNLOAD

Kustomisasi template:

1. Untuk Tombol Follow Social Media
Silahkan sesuaikan dan lengkapi tombol follow sosmed dengan url profil sosial media Anda.

Untuk tombol yang atas:

 
                         <ul class='list-inline intro-social-buttons'>
                             <li>
                                 <a class='btn btn-default btn-lg' href='#'><i class='fa fa-twitter fa-fw'/> <span class='network-name'>Twitter</span></a>
                             </li>
                             <li>
                                 <a class='btn btn-default btn-lg' href='#'><i class='fa fa-facebook fa-fw'/> <span class='network-name'>Facebook</span></a>
                             </li>
                         <li>
                             <a class='btn btn-default btn-lg' href='#'><i class='fa fa-google-plus fa-fw'/> <span class='network-name'>Google+</span></a>
                         </li>
                             <li>
                                 <a class='btn btn-default btn-lg' href='#'><i class='fa fa-linkedin fa-fw'/> <span class='network-name'>Linkedin</span></a>
                             </li>
                         </ul>


Untuk tombol yang bawah:

 
                     <ul class='list-inline banner-social-buttons'>
                         <li>
                             <a class='btn btn-default btn-lg' href='#'><i class='fa fa-twitter fa-fw'/> <span class='network-name'>Twitter</span></a>
                         </li>
                         <li>
                             <a class='btn btn-default btn-lg' href='#'><i class='fa fa-facebook fa-fw'/> <span class='network-name'>Facebook</span></a>
                         </li>
                         <li>
                             <a class='btn btn-default btn-lg' href='#'><i class='fa fa-google-plus fa-fw'/> <span class='network-name'>Google+</span></a>
                         </li>
                         <li>
                             <a class='btn btn-default btn-lg' href='#'><i class='fa fa-linkedin fa-fw'/> <span class='network-name'>Linkedin</span></a>
                         </li>
                     </ul>


2. Google Maps
Silahkan buat Google Maps, bila belum mengerti silahkan ikuti triknya DI SINI. Kemudian silahkan ganti URL iframe Google Maps di bawah ini dengan URL iframe Google Maps Anda.

 
 <div class='content-section-a' id='maps'>
 <div class='container'>
 <script type="text/javascript">
 //<![CDATA[
 document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15815.64098708776!2d108.6540917!3d-7.6927812!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x87c06a93566bfd91!2sKompiAjaib.com!5e0!3m2!1sen!2sid!4v1459470975027" style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe></div></div>');
 //]]>
 </script>
   <div class='clear'/>
   </div>
     </div>


3. Membuat Halaman About dan Privacy
Silahkan buat halaman statis untuk halaman About dan juga untuk halaman Privacy. Yang perlu diperhatikan dalam menciptakan halaman-halaman ini yaitu buatlah judul terlebih dahulu sebelum menulis kontennya. Berikan judul About untuk halaman About dan Privacy untuk halaman Privacy sehingga hidangan di kiri atas untuk About dan Privacy akan otomatis berfungsi.

4. Untuk konten landing page silahkan sesuaikan dengan konten blog Anda baik teks maupun gambar pada aba-aba berikut:

 
 <div class='content-section-a' id='service'>
 <div class='container'>
 <div class='kolom-artikel'>
                   <h2 class='section-heading'>Death to the Stock Photo:<br/>Special Thanks</h2>
                    <hr/>
                     <p class='lead'>A special thanks to <a href='http://join.deathtothestockphoto.com/' target='_blank' rel='nofollow' title='Death to the Stock Photo'>Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
             </div>
                 <div class='image-kolom'>
                   <img alt='' class='img-responsive' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5n7tG8lDud4_d-fkNb4NWX2mO4TNY3qpOdOWLVpLtzxDjWQQ5pPdwDLTj6azrg6rAAcOjdMOaIDxRWnkpvVVc3FSl9kcZ_j9gy40FMTQDdx_fXvQt9SHdxdjuxR5fERS1_Itubfy04TV/s1600/ipad.png'/>
 <div class='clear'/>
                 </div>
   <div class='clear'/>
   </div>
 </div>
 <div class='content-section-b'>
 <div class='container'>
 <div class='kolom-artikel-b'>
                   <h2 class='section-heading'>3D Device Mockups<br/>by PSDCovers</h2>
                    <hr/>
                     <p class='lead'>Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by <a href='http://www.psdcovers.com/' target='_blank' rel='nofollow' title='PSDCovers'>PSDCovers</a>! Visit their website to download some of their awesome, free photoshop actions!</p>
             </div>
                 <div class='image-kolom-b'>
                   <img alt='' class='img-responsive' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDNoOqvs4M1ui7tdXvY7_p2LVT1eis2cknoOd-IzWwMOqT31DIyQtFRmCtG7LVWN0St4-KdX-yevV3qn0suB5KriqJt97q_OYptEpxIorcaU2Iu71Px59KVTm7m4vboo7YIl38l8lPabm/s1600/dog.png'/>
 <div class='clear'/>
                 </div>
   <div class='clear'/>
   </div>
             </div>
 <div class='content-section-a'>
 <div class='container'>
 <div class='kolom-artikel'>
                   <h2 class='section-heading'>Google Web Fonts and<br/>Font Awesome Icons</h2>
                    <hr/>
                     <p class='lead'>This template features the &#39;Roboto&#39; font, part of the <a href='http://www.google.com/fonts' target='_blank' rel='nofollow' title='Google Web Font library'>Google Web Font library</a>, as well as <a href='http://fontawesome.io' target='_blank' rel='nofollow' title='icons from Font Awesome'>icons from Font Awesome</a>.</p>
             </div>
                 <div class='image-kolom'>
                   <img alt='' class='img-responsive' src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG8u9CQVHsbhpVZmX3MkYfFSww1FJn0-Y8mNQWbP3YyXtWVaJp0n2rH8U2SLaGJ8R2zxnBbQNxczrGHHWv4AbYoOzRRefFvqDQgsrfHH48sHmEMCV4bJW2meRCE2i0OUupHV_R93qW5qQ1/s1600/phones.png'/>
 <div class='clear'/>
                 </div>
   <div class='clear'/>
   </div>
     </div>


5. Mengganti widget untuk sticky widget sidebar di halaman postingan silahkan ganti aba-aba PlusFollowers1 dengan ID Widget yang ingin dibentuk sticky widget dan tempatkan widget tersebut di paling bawah.

 
 function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("PlusFollowers1");

Semoga bermanfaat...

UPDATE:

Untuk pengguna template Kompi Landing Page, alasannya yaitu hosting Google Drive sudah dinonaktifkan oleh Google, silahkan perbaiki beberapa aba-aba di bawah ini

Silahkan cari aba-aba di bawah ini
https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/kompiland.js

Dan silahkan ganti dengan aba-aba di bawah ini
https://cdn.rawgit.com/KompiAjaib/js/master/kompiland.js

Silahkan cari aba-aba di bawah ini
https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/kompilandpost.js

Dan silahkan ganti dengan aba-aba di bawah ini
https://cdn.rawgit.com/KompiAjaib/js/master/kompilandpost.js

Silahkan cari aba-aba di bawah ini
https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/comment-hack.js

Dan silahkan ganti dengan aba-aba di bawah ini
https://cdn.rawgit.com/KompiAjaib/js/master/comment-hack.js

Silahkan cari aba-aba di bawah ini
https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/threaded-comment.js

Dan silahkan ganti dengan aba-aba di bawah ini
https://cdn.rawgit.com/KompiAjaib/js/master/threaded-comment.js

Saran aku lebih baik silahkan hosting sendiri js-js di atas.

Sumber Landing Page:
http://startbootstrap.com/template-overviews/landing-page/


Sumber https://www.kompiajaib.com/

0 Response to "Kompi Landing Page, Free Responsive Landing Page Blogger Template"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel