Template SEO Simple Blogger

Assalamualaikum teman -teman, pada kesempatan kali saya akan membagikan template blogger yang responsive dan ringan.karya romeltea & kompi

SEO Simple adalah template blogger ringan , tampilan yang sederhana namun sangat cepat di akses, mudah digunakan serta fleksibel untuk menambahkan

berbagai widget.

Berikut tampilan Template SEO Simple Blogger

Tampilan Desktop

Tampilan Mobile

Fitur yang dimiliki Template Simple SEO

• Responsif, bisa diakses lewat gadget maupun desktop
• SEO, responsif,ringan dan simple
• Dominan warna Silver terutama bagian header dan overlaynya.
• Tersedia Slot widget iklan,posting,sidebar,dll dan fleksibel bisa diubah sesuka hati.

Cara Menggunakannya

Pertama, ubah header di tata letak hapus gambar Folio lalu ubah sesuai dengan keinginan sobat.

Ubahlah Navigasi Bar Simple SEO sesuai kebutuhan.

<div class='navbar-collapse collapse' id='navbar'>
            <ul class='nav navbar-nav'>
              <li class='active'><a href='/'>Home</a></li>
              <li><a href='/p/about.html'>About</a></li>
              <li><a href='/p/kontak.html'>Contact</a></li>
              <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
              <li class='dropdown'>
                <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='#'>Action</a></li>
                  <li><a href='#'>Another action</a></li>
                  <li><a href='#'>Something else here</a></li>
                  <li class='divider' role='separator'/>
                  <li class='dropdown-header'>Nav header</li>
                  <li><a href='#'>Separated link</a></li>
                  <li><a href='#'>One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class='nav navbar-nav navbar-right'>
              <li>
<form class='navbar-form navbar-right' expr:action='data:blog.homepageUrl + &quot;search&quot;' role='search'>
        <div class='form-group'>
              <input class='form-control' name='q' placeholder='Search' type='text'/>
        </div>
        <button class='btn btn-default' type='submit'>Submit</button>
      </form>
</li>
            </ul>
          </div>

(Opsional)

Jika kalian ingin mengubah warna Navigasi Bar, Tambahlah code dan ubah nilai hex color-nya dibawah ini diatas '</style>',jika tidak maka warna navbar default

/* navbar */
.navbar-default {
    background-color: #ffffff;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

Selain itu kalian bisa mengedit widget-widget di tata letak blogger, dan dibawah ini link Demo dan Downloadnya

Sekian dari postingan ini semoga bermanfaat :)

Sumber Refrensi : romeltea.com

Arnando

Minat dibidang elektronika sering membuat project kecil"an tentang Embedded System dan Internet of Things semasa di perkuliahan.

Share this post