Kompi Landing Page, Free Responsive Landing Page Blogger Template

Ada beberapa sahabat Kompi yang request dibuatkan template landing page Blogger, namun saya baru bisa memenuhi permitaannya sekarang ini karena beberapa kesibukan dan keadaan kesehatan saya. Saya namakan template ini Kompi Landing Page.

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

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


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.


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, jika 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 membuat halaman-halaman ini yaitu buatlah judul terlebih dahulu sebelum menulis kontennya. Berikan judul About untuk halaman About dan Privacy untuk halaman Privacy sehingga menu 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 kode 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://3.bp.blogspot.com/-KIKZs9hBB9w/Vv2-_iVPrCI/AAAAAAAAmBw/8cU_XfsqdaUcB25d74g31Ne_Alh1-IVRg/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://1.bp.blogspot.com/-dY1GlGkUeBg/Vv2-_feYLiI/AAAAAAAAmBs/IDR0BtTyp8YdAEZQWp6Gen5PegFMvYPKQ/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://1.bp.blogspot.com/-c1Xa30Ani8E/Vv2--VpheDI/AAAAAAAAmBo/3muVZfuzqDs-mPM5K6L-sHL-4tp4VrQXg/s1600/phones.png'/>
<div class='clear'/>
                </div>
  <div class='clear'/>
  </div>
    </div>


5. Mengganti widget untuk sticky widget sidebar di halaman postingan silahkan ganti kode PlusFollowers1 dengan ID Widget yang ingin dibuat 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, karena hosting Google Drive sudah dinonaktifkan oleh Google, silahkan perbaiki beberapa kode di bawah ini

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

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

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

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

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

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

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

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

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

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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments