Kompi Landing Page, Free Responsive Landing Page Blogger Template

Kompi Landing Page, Free Responsive Landing Page Blogger Template

Bola Hero Gawai

Kompi Landing Page, Free Responsive Landing Page Blogger Template

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.

Kompi Landing Page

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...

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

17 Comments Add Comment

mantep, bagi ilmunya dong kang, asa hoyong jadi tukan desain template.

Balas

Mangga atuh kang ehehe... :D

Balas

Thank you :-bd
It's a great template

Balas

You're welcome sir :D

Balas

Keren blognya, saya yang baru saja berkunjung di bawah ini. Apalagi bila ngelihat sedang bagi-bagi landing page. Makin sip aja deh.

Balas

kalo lihat yang baru nih suka pengen nyoba

Balas

wuiiihh... keren kak adhy templatenya :D Izin pakai templatenya ya kak...
hihihi... ini websitenya www.hornbillinflight.com

Balas

makasih banyak templatenya,, manfaat banget buat jualan 1 jenis barang

Balas

Kang ady, ini kalau di pakai di about halaman statis bisa ga?

Balas

Matur Nuwun sanget kang,

Balas

pak kalau tampilan blog post nya bisa full width gitu gak

Balas

Pak Adhy, Untuk form kirim pesan itu masuknya kemana ya.

Btw, templatenya keren banger.

Balas

Otomatis masuk ke admin blog mas.

Balas

Pak adhy saya mau download kog tidak bisa ini ? :D

Balas

Menu atas kanan utk mobile kok gak berfungsi mas?

Balas

Mas adhi untuk form kirim pesan tidak berfungsi ya,,

Balas

Berfungsi mas, email masuk ke admin blog.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×