Seventheme Themplate Documentation

Written by Galih Budi Prakoso

Seventheme Themplate Documentation - Seventheme adalah template blogger yang berhasil saya buat setelah tujuh kali percobaan. Maklum nubie. Template ini sudah saya buat sempurna dengan berbagai macam fitur diantaranya adalah:

1. Responsive
2. SEO
3. Fast Loading
4. Sticky Header
5. Sticky Sidebar
6. Footer Menu
7. Footer Credit
8. Dll.

Installation

1. Masuk ke Blogger > Tema > Edit HTML.

2. Silahkan backup template yang sebelumnya kamu gunakan dengan cara tekan tombol CTRL + A lalu CTRL + C. Kemudian Paste di Notepad. (Beri nama sesuai keinginan, diikuti dengan format xml. Contoh: temaku.xml).
3. Silahkan buka template Seventheme yang sudah kamu unduh, menggunakan Notepad. Copy semua kode dan Paste di Edit HTML Blogger.
4. Klik Simpan.

Kembali ke Dasboard Blogger, Tema, lalu nonaktifkan tampilan mobile.

Navigation

Masuk ke Edit HTML Blogger, ganti semua kode # dengan alamat url yang kamu inginkan. Untuk nama link juga bebas.

<nav class='menu' id='menu'>
 <ul class='dropdown'>
   <li><a href='/' itemprop='url' title='Home'><span itemprop='name'>Home</span></a></li>
   <li><a href='#' itemprop='url' title='Info'><span itemprop='name'>Info</span></a>
  <ul>
    <li><a href='/p/about.html' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
   <li><a href='/p/contact-form.html' itemprop='url' title='Contact Form'><span itemprop='name'>Contact</span></a></li>
  </ul>
  </li>
  <li><a href='#Link' itemprop='url' title='Link'>Portfolio</a>
   <ul>
    <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
    <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
    <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#Link' itemprop='url' title='Link'>Work</a>
  <ul>
   <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
   <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
   <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
   <li><a href='#Link' itemprop='url' title=' Link'> Link</a></li>
  </ul>
  </li>
  <li><a href='#Link' itemprop='url' title='Link'>Playground</a>
   <ul>
    <li><a href='#Link' itemprop='url' title='Link'>Link  </a></li>
    <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
    <li><a href='#Link' itemprop='url' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#Link' itemprop='url' title='Link'>Sitemap</a></li>
 </ul>
 </nav>

Bottom Navigation

Masuk ke Dashboard Blogger > Edit Tata Letak  > Ganti list halaman sesuai keinginan.

SEO Meta Tag

Agar blog kamu bisa masuk ke  halaman pertama Google, tentunya template yang kamu gunakan harus mendukung SEO dong? Ubahlah tag xxxxxx berikut ini sesuai yang kamu inginkan.

<meta content='https://www.facebook.com/xxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@xxxxxx' name='twitter:site'/>
<meta content='@xxxxxx' name='twitter:creator'/>

BANNER IKLAN

Template ini sudah menyediakan slot untuk kamu yang ingin memasang iklan (misalnya Adsense) di Blog. Masuk ke Dashboard Blogger > Edit Tata Letak > Pilih widget BANNER.

Atau bisa juga langsung klik tambah Widget. Pilih HTML/ Javascript.

IMAGE CAPTION

Anak Gembala

SUBSCRIBE WIDGET

Masuk ke Tata Letak > Edit Widget Langganan. Cari dan ganti xxxxxx dengan id Feedburner milikmu dan alamat akun sosialmu.

<div id="kiddieNewsletter">
  <div class="email__">
    <div class="email">
      Dapatkan artikel terbaru setiap hari
      <form action="https://feedburner.google.com/fb/a/mailverify?uri=xxxxxx" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=xxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
        <input name="email" class="email" onblur="if (this.value==&quot;&quot;){this.value=&quot;Contoh: nama@mail.com&quot;;}" onfocus="if (this.value==&quot;Contoh: nama@mail.com&quot;){this.value=&quot;&quot;;}" type="text" value="Contoh: nama@mail.com" />
        <input name="uri" type="hidden" value="igniel" /> <input name="loc" type="hidden" value="en_US" />
        <button type="submit"></button>
      </form>
    </div>
  </div>
  <div class="medsos__">
    <div class="medsos">
      <a class="facebook" title="Facebook" href="https://www.facebook.com/xxxxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
      <a class="twitter" title="Twitter" href="https://twitter.com/xxxxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
      <a class="googleplus" title="Google+" href="https://plus.google.com/xxxxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z"></path></svg></a>
      <a class="youtube" title="Youtube" href="https://www.youtube.com/c/xxxxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
      <a class="instagram" title="Instagram" href="https://www.instagram.com/xxxxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
    </div>
  </div>
 </div>

Featured Post

Masuk ke Tata Letak > Pilih widget Pinned > Ganti artikel yang ingin di PIN di semua halaman Blog.

Responsive Youtube Video Embed

Gunakan tag HTML berikut ini jika kamu menambahkan sebuah video dari luar.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/ssSbv6LkXCI">
</div>
</div>
</div>

Untuk kode yang saya tandai merah, silahkan ganti dengan alamat URL Video yang kamu pasang.

DROP CAPS

Kode berikut ini akan membuat huruf pertama pada kata pertama kalimat postingan Blog menjadi besar seperti yang sering digunakan koran-koran jaman dulu. 

<span class="first-letter">Your First Letter here</span>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

BUTTON

<div style="text-align: center;">
<a class="demo" href="https://draft.blogger.com/u/1/YOUR-LINK-HERE" target="_blank">DEMO</a>
<a class="download" href="https://draft.blogger.com/u/1/YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></div>
<div class="clear">
</div>

DEMO
DOWNLOAD

POST TABLE

<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Heading 1

Heading 1

Heading 1

Heading 1

Heading 1

Heading 1

Tak selamanya jagung itu direbus. Nyatanya hari ini dibakar.

Jika ada pertanyaan, silahkan hubungi kami melalui formulir kontak galihdesign.com terima kasih.