Kompi Landing Page, Free Responsive Landing Page Blogger Template

Ditulis oleh: Adhy Suryadi
Ditulis pada: 4/01/2016

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.

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, 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYK0A042S9tYPBqkaOH4kj8JJik2F0W9-DV7xx4gvi8ZkOh-lav7JigVt_2DtZEhwzqLW1dz0kwKQ4dsMlcpmqaeC-c07wguW9igjlloh62CJdoqIxa3MzzH8J9yBz5E36KQVJQ1umN0P-/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/AVvXsEhXJtLcdAfxFEjDQGNmo45zKWjouLQQVrXUy4cf4YRxQH6Cg7rE2Bv3WILxrLX9wBbawxnCr7pmN9BBdMHH2KKWfR0M_HR34dS-shyohqKfsPJw-_2BlfD2t1SfRqb7826znO4vh2Xu7W3R/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/AVvXsEgMwHS-SZ5GSPfl4dxapDuECUtSnxg9gfOpqSYic7_ujaFaWo4Te3YdI5SfOREdRrZFOidwR7D2cONGGpqHoex7JSigLI8tgAXzpjsGNxfc_kItGvvvof2jEdadYUNFHNUyXVDfdkFMM6wR/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/

Kompi Landing Page, Free Responsive Landing Page Blogger Template

Ditulis oleh: Adhy Suryadi Ditulis pada: 4/01/2016

UPDATE:

Berbagi itu peduli:

Comment Policy:

Menarik Untuk Dibaca Juga:

Ditulis oleh: Adhy Suryadi
Ditulis pada: 4/01/2016