Line Today Template Documentation

Line Today Template Documentation


Panduan Dasar


#1 : Instalasi & Upload Template

Lakukan prosedur instalasi template seperti biasa. File template sudah tersedia didalam folder dengan ekstense .xml. Pastikan anda melakukan backup terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan yang bisa terjadi saat proses instalasi dilakukan.

Setelah melakukan proses instalasi, jangan lupa untuk Menonaktifkan Mobile Version agar tampilan tidak terganggu saat diakses melalui smartphone.


#2 : Merubah ID Verifikasi + Meta Keyword

Ini merupakan Meta Tag yang bisa disesuaikan sesuai dengan kebutuhan blog Anda, Anda bisa mengubahnya sesuai dengan kebutuhan blog Anda sendiri.

<meta content='Nama Kamu' name='Author'/>

<!-- ID Verifikasi Google, BING -->

<meta content='ID Google Webmaster' name='google-site-verification'/>
<meta content='ID Bing Webmaster' name='msvalidate.01'/>
<meta content='ID Alexa Rank' name='alexaVerifyID'/>

<!-- Meta Tag Profile Google+ -->

<link href='ID Google+' rel='publisher'/>
<link href='ID Google+' rel='author'/>
<link href='ID Google+' rel='me'/>

<!-- Meta Tag Kustomisasi Warna Address Tab Browser -->

<meta content='#000000' name='theme-color'/>
<meta content='#000000' name='msapplication-navbutton-color'/>
<meta content='#000000' name='apple-mobile-web-app-status-bar-style'/>

<!-- Meta Tag Open Graph Facebook dan Twitter -->

<meta content='https://www.facebook.com/FACEBOOK-PROFILE' property='article:author'/>
<meta content='https://www.facebook.com/FACEBOOK-PROFILE' property='article:publisher'/>
<meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='FACEBOOK-FANPAGE-ID' property='fb:profile_id'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
<meta content='@USERNAME-TWITTER' name='twitter:creator'/>

<!-- Image Homepage Thumbnail -->

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyUXbPSct3ajC63mgnqGs3ptH1EiiRFbAo-XniIR5_vSOWOWcuyQN6qSJ8eh_nnGG2EJONz9OVprS5X2_pNU3_ljMpwNyBUcyoxxA3EypbXhcXPduKM-7e9wQfDrbhbkUa2e9lCVzf8uw/s1600/dumdum.png' property='og:image'/>

and

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyUXbPSct3ajC63mgnqGs3ptH1EiiRFbAo-XniIR5_vSOWOWcuyQN6qSJ8eh_nnGG2EJONz9OVprS5X2_pNU3_ljMpwNyBUcyoxxA3EypbXhcXPduKM-7e9wQfDrbhbkUa2e9lCVzf8uw/s1600/dumdum.png

Untuk optimasi keyword, Anda bisa mencari lalu memasukkan keyword sesuai dengan kebutuhan disini

Keyword 1, Keyword 2, Keyword 3, Keyword 4, Keyword 5, dsb


Panduan untuk Versi AMP


Introduction

Ini merupakan panduan khusus untuk Versi AMP. Agar template dapat berjalan dengan baik. Pastikan template Anda sudah valid AMP dengan mengunjungi situs https://search.google.com/test/amp atau https://validator.ampproject.org/ Untuk mengecek apakah blog Anda sudah Valid AMP.

#1 : Top Navigation

Silahkan cari dan ubah kode dibawah ini, sesuai dengan kebutuhan yang Anda inginkan.

<a href='/' title='Home'><li class='navgit'>Home</li></a>
<a href='/'><li class='navgit'>Entertainment</li></a>
<a href='/'><li class='navgit'>Lifestyle</li></a>
<a href='/'><li class='navgit'>News</li></a>
<a href='/'><li class='navgit'>Sports</li></a>
<a href='/'><li class='navgit'>Intermezzo</li></a>
<a href='/'><li class='navgit'>Biz & Tech</li></a>

#2 : Footer Menu

Silahkan cari dan ubah kode dibawah ini, sesuai dengan kebutuhan yang Anda inginkan.

<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='/p/contact-me.html'>Contact</a></li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>

#3 : Mengganti URL Related Post

Silahkan cari kode dibawah ini

<div class='super-related'>
       <amp-iframe expr:src='"https://rawgit.com/irfansyahputra/irsyahtra/master/fix-related-post.html?url=linetoday-amp-template.blogspot.com&colortitle=5d5d5d&colordesc=5d5d5d&back=fcfcfc&item=title_only&style=text&label=" + data:label.name' frameborder='0' height='324' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-modals allow-popups'></amp-iframe>
</div>

Lalu ubah linetoday-amp-template.blogspot.com sesuai dengan URL blog kamu.

#4 - Mengganti URL Search Button

Untuk mengganti URL Search Button, silahkan cari <!-- KODE SEARCH -->. Lalu ubah semua URL https://linetoday-amp-template.blogspot.co.id/ yang bisa Anda temukan tepat diantara kode tersebut sesuai dengan link blog Anda.

Namun apabila sudah dirubah dan terjadi error atau tidak berfungsi, silahkan gunakan kode search button yang ada didalam file AMP - Search Code.txt yaitu SEARCH CODE #1.

Hapus seluruh kode search yang sebelumnya sudah terpasang didalam template, mulai dari <!-- KODE SEARCH --> sampai <!-- KODE SEARCH --> juga. Lalu copy kode search SEARCH CODE #1 dan paste kan tepat diantara <!-- KODE SEARCH -->.

Jangan lupa untuk merubah URL sesuai dengan URL blog Anda.

#5 - Mengganti Kode ID Analytic

Silahkan cari dan ubah XXX dengan kode Google Analytic Anda.

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  "vars": {
    "account": "XXX"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

#6 - Fitur Komentar

Secara default fitur komentar untuk template versi AMP adalah menggunakan Facebook Comment dan Disqus. Namun jika kamu ingin menghapus salah satu fitur komentar diatas kamu bisa melakukannya dengan cara.

1. Disqus
Cari kode : <!-- DISQUS COMMENT -->
Lalu hapus semua kode yang terletakn diantara kode diatas.

2. Facebook
Cari kode : <!-- FACEBOOK COMMENT -->
Lalu hapus semua kode yang terletakn diantara kode diatas.

Catatan :
Untuk menggunakan fitur komentar dari Disqus, jika kamu belum mempunyai akunnya silahkan mendaftar terlebih dahulu kesini www.disqus.com
Lanjut, setelah mendaftar dan sudah berhasil login di Disqus, silahkan :
  1. Klik Add Disqus to Site
  2. Isi datanya sesuai blog Anda. Diantaranya adalah Site Name (Nama Situs) dan Category
  3. Simpan url link (shortname) Disqus, misalnya BLOGKU
  4. Setelah selesai, masuk ke dalam dashboard blogger dalam mode Edit HTML Template
  5. Silahkan cari dan ubah
    line-today
  6. Lalu ganti dengan sesuai dengan site name yang sudah kamu buat tadi, yaitu
    BLOGKU

#7 - Penempatan Unit Iklan Adsense

Perlu untuk diketahui, memasang unit adsense untuk web AMP agak sedikit berbeda. Jika biasanya kita hanya copy dan paste kode iklan lalu tinggal tempel. Maka lain halnya untuk web AMP. Ada beberapa penyesuaian yang harus dilakukan agar Iklan dapat tampil dengan sempurna.

Silahkan ambil kode adsense dalam dashboard adsense Anda, boleh responsive atau yang lainnya, kecuali unit tautan/link. Misalnya :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
   style="display:inline-block;width:120px;height:600px"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Silahkan ambil, lalu simpan kode

data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890"


Selanjutnya, silahkan letakkan unit iklan sesuai dengan lokasi yang sudah ada dibawah ini.

Meletakkan iklan dibawah judul artikel

Untuk meletakkan iklan dibawah judul, silahkan cari kode ini

<!-- Tempat Iklan Diatas Artikel -->
Lalu letakkan kode dibawah ini tepat dibawah dari kode diatas dan sesuaikan dengan kode data-ad-client dan data-ad-slot Anda.

<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Meletakkan iklan disamping kiri artikel

Untuk meletakkan iklan disamping kiri artikel, silahkan cari kode ini

<!-- Tempat Iklan Diatas Kiri Paragraf Artikel -->
Lalu letakkan kode dibawah ini tepat dibawah dari kode diatas dan sesuaikan dengan kode data-ad-client dan data-ad-slot Anda.

<amp-ad
layout="fixed-height"
height="250"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Meletakkan iklan dibawah artikel

Untuk meletakkan iklan dibawah artikel, silahkan cari kode ini

<!-- Tempat Iklan Dibawah Artikel -->
Lalu letakkan kode dibawah ini tepat dibawah dari kode diatas dan sesuaikan dengan kode data-ad-client dan data-ad-slot Anda.

<amp-ad
layout="fixed-height"
height="250"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Memasang Iklan di Antara Post Homepage

Untuk meletakkan iklan diantara posti di homepage, silahkan cari <div class='iklan-antar-post'>. Lalu letakkan kode iklan sudah dibuat sebelumnya pada akun google adsense anda tepat dibawah kode ini

<!-- Iklan Antar Post -->

Note :

  • Terdapat 3 slot iklan yang tersedia, silahkan diisi sesuai dengan keinginan
  • Iklan tidak perlu di parser
  • Untuk tipe iklan biasa / responsive bisa langsung dipasang
  • Untuk AMP silahkan dibuat menjadi versi AMP (Bisa diikuti cara pemasangan iklan seperti peletakan iklan dibawah judul yang sudah dijelaskan diatas.

#8 - Cara Post Artikel

Lakukan upload gambar seperti pada biasanya, jika suatu gambar yang kita upload memiliki kode seperti ini

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PxgVV-eNK6Y4Fd34j-AN_xiKk2no3WsNH3fmfMF-2drxq3bfnW2hHIzqlkWQJglwFPMr_ELrV_ajIY7Xt8RsyAiVNo4Occg-w4cq_9ei-o-fECt9fNjTELrLNaYY0SlJT-qyuOHyISo/s1600/160.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PxgVV-eNK6Y4Fd34j-AN_xiKk2no3WsNH3fmfMF-2drxq3bfnW2hHIzqlkWQJglwFPMr_ELrV_ajIY7Xt8RsyAiVNo4Occg-w4cq_9ei-o-fECt9fNjTELrLNaYY0SlJT-qyuOHyISo/s1600/160.png" title="Logo" /></a></div>

Silahkan lakukan panduan dibawah ini, untuk mendapatkan hasil yang sesuai.

Gambar di Dalam Postingan


Silahkan ambil link gambar lalu silahkan ubah menjadi seperti ini

<amp-img 
alt="Curabitur Sodales" 
title="Curabitur Sodales" 
width="500" 
height="335" 
layout="responsive" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm09piVzz-3dHE2z1ObFjwcQsqBKc4fV3rOWnXS0ed3e9PWR4c42istFrEgCI26vC_ZCNngXsk7VoFf5Tg7P6wS3BJQX4uwrV1EdobfZmy_pqGm_yyk0gxsWBo4rwU4FLDSyGGtmTAbT2a/s1600/Classic+Car.jpg"></amp-img>

Note:
Untuk width dan height nya bisa disesuaikan ukuran normal gambar tersebut.

Image Thumbnail

Jika gambar tersebut juga ingin dijadikan sebagai Thumbnail, tambahkan tag <noscript> dengan contoh script dibawah ini.

<noscript><img 
title="Curabitur Sodales" 
alt="Curabitur Sodales" 
width="288" 
height="96" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm09piVzz-3dHE2z1ObFjwcQsqBKc4fV3rOWnXS0ed3e9PWR4c42istFrEgCI26vC_ZCNngXsk7VoFf5Tg7P6wS3BJQX4uwrV1EdobfZmy_pqGm_yyk0gxsWBo4rwU4FLDSyGGtmTAbT2a/s187/Classic+Car.jpg"/></noscript>

Note:
PENTING!!! Untuk mempercepat loading, silahkan ubah s1600 menjadi w288-h96-c pada URL Gambar yang akan dijadikan thumbnail. Sehingga akan menghasilkan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm09piVzz-3dHE2z1ObFjwcQsqBKc4fV3rOWnXS0ed3e9PWR4c42istFrEgCI26vC_ZCNngXsk7VoFf5Tg7P6wS3BJQX4uwrV1EdobfZmy_pqGm_yyk0gxsWBo4rwU4FLDSyGGtmTAbT2a/w288-c-h96/Classic+Car.jpg

#9 - Embed Video Youtube Responsive

Salin kode dibawah ini untuk diletakkan kedalam postingan.

<amp-youtube
    data-videoid="qyZHOcLFjj4"
    layout="responsive"
    width="480" height="270"></amp-youtube>

Selanjutnya, silahkan ubah qyZHOcLFjj4 sesuai dengan ID Video Youtube yang ingin kamu Embed ke dalam postingan kamu.

Panduan untuk NON AMP


Introduction

Ini merupakan panduan khusus untuk Versi NON AMP. Agar template dapat berjalan dengan baik, silahkan ikuti beberapa panduan dibawah ini.

#1 : Top Navigation

Silahkan cari dan ubah kode dibawah ini, sesuai dengan kebutuhan yang Anda inginkan.

<a href='/'>Entertainment</a>
<a href='/'>Lifestyle</a>
<a href='/'>Sports</a>
<a href='/'>News</a>
<a hree='/'>Intermezzo</a>
<a href='/'>Biz & Tech</a>

#2 : Footer Menu

Silahkan cari dan ubah kode dibawah ini, sesuai dengan kebutuhan yang Anda inginkan.

<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='/p/contact-me.html'>Contact</a></li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>

#3 : Menambah Fitur Komentar dari Facebook

Untuk menambah fitur komentar facebook ke dalam blog Anda, silahkan ambil kode yang ada di dalam file NON AMP - Facebook Comment.txt. Lalu cari kode ini <!-- FACEBOOK COMMENT --> dan letakkan kode yang sudah di copy tadi tepat dibawah kode <!-- FACEBOOK COMMENT -->

#4 - Penempatan Unit Iklan Adsense

Ada beberapa macam variasi dan lokasi yang dapat dilakukan dalam melakukan pemasangan unit Adsense, diantaranya adalah :

Meletakkan iklan dibawah judul artikel

<!-- Tempat Iklan Diatas Artikel -->

Meletakkan iklan disamping kiri paragraf artikel

<!-- Tempat Iklan Diatas Kiri Paragraf Artikel -->

Meletakkan iklan ditengah artikel

<!-- Tempat Iklan Ditengah Artikel -->

Meletakkan iklan dibawah artikel

<!-- Tempat Iklan Dibawah Artikel -->

Letakkan script iklan yang sudah di parse* tepat dibawah kode diatas

Memasang Iklan Float Di Kanan Dan Kiri Template


Ini merupakan special feature untuk pengguna template ini, saya sudah menyedikan slot iklan ekslusif yang sangat cocok bagi Anda pemain FB Ads.

  1. Silahkan cari left-float, right-float, dan center-float pada Tata Letak Blogger.
  2. Salin kode adsense yang ingin kamu pasang. Jangan lupa untuk Tambahkan Widget > HTML/Javascript
  3. Bila kamu ingin menambahkan Tombol Close kamu bisa menyalin kodenya didalam file yang sudah include didalam bernama NON AMP - Button Close.txt yang sudah include didalam folder.

Note :
Khusus untuk iklan melayang di tengah. Disini saya menambahkan beberapa kode agar ukuran iklan bisa menyesuaikan ukuran lebar layar. Silahkan copy kode dibawah ini kedalam widget center-float.

<button onclick="parentNode.remove()" title="Close"><i class="fa fa-times"></i> Close <i class="fa fa-times"></i></button>

<style scoped="scoped" type="text/css">
.iklanlineads{width: 600px;height: 75px}@media (max-width:500px){.iklanlineads{width: 468px;height: 60px}}@media (max-width:350px){.iklanlineads{width: 300px;height: 100px}}
</style>

<ins 
class="adsbygoogle iklanlineads"
style="display:inline-block;"
data-ad-client="ca-pub-xxxxx"
data-ad-slot="xxxxx"
></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Silahkan ubah data-ad-client="ca-pub-xxxxx" dan data-ad-slot="xxxxx" sesuai dengan data adsense Anda.

Memasang Iklan di Antara Post Homepage


Untuk meletakkan iklan diantara posti di homepage, silahkan cari <div class='iklan-antar-post'>. Lalu letakkan kode iklan sudah dibuat sebelumnya pada akun Google Adsense Anda tepat dibawah kode ini : 

<!-- Iklan Antar Post -->

Note :

  • Terdapat 3 slot iklan yang tersedia, silahkan diisi sesuai dengan keinginan
  • Iklan tidak perlu di parser
  • Untuk tipe iklan biasa / responsive bisa langsung dipasang

#5 - Cara Embed Video Youtube Responsive

Salin kode dibawah ini untuk diletakkan kedalam postingan.

<iframe allowfullscreen="" height="300" src="https://www.youtube.com/embed/qyZHOcLFjj4" width="100%"></iframe>

Selanjutnya, silahkan ubah qyZHOcLFjj4 sesuai dengan ID Video Youtube yang ingin kamu Embed ke dalam postingan kamu.

Panduan untuk AMP & NON AMP


Membuat Tabel di Dalam Postingan

<table cellpadding="0" cellspacing="0"><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>

Comments

Post a Comment