Documentation v3 - Textrim

INI ADALAH DOKUMENTASI VERSI LAMA (v3). Untuk mendapatkan dokumentasi versi terbaru, silakan buka artikel Dokumentasi Textrim v4.

Indonesian English

Textrim adalah tema Blogspot gratis tanpa gambar di halaman utama. Sangat ringan, responsif, sederhana, dan bersih. Dioptimalkan dari segi kecepatan loading halaman, SEO, dan posisi penempatan iklan yang strategis.

Kamu bebas mengunduh, memakai, dan mengedit tema ini.

DILARANG menghapus tautan kredit di footer.

Textrim is a free Blogger theme without thumbnail in homepage. It's super light, responsive, simple, and clean. Optimized for page speed, SEO, and strategic ads placement.

You are free to download, use, and modify this theme.

DO NOT remove credit link at footer.

Tutorial available in Bahasa Indonesian only. Please use Google Translate.

Daftar isi

• 1. Cara Install
  • 1.1. Copy HTML
  • 1.2. Upload XML
• 2. Meta Tag
  • 2.1. Kode Tracking
  • 2.2. Keyword
  • 2.3. Info Author
  • 2.4. Gambar Blog
• 3. Mengganti Warna dan Font
• 4. Posisi Iklan
  • 4.1. Iklan Atas Artikel (Bawah Judul)
  • 4.2. Iklan Bawah Artikel
  • 4.3. Iklan Tengah Artikel
  • 4.4. Iklan In-feed
• 5. Menambah Script Lain
• 6. Menu Navigasi di Header
• 7. Multi Related Post Tengah Artikel
• 8. Menu di Footer
  • 8.1. Kotak Subscribe
  • 8.2. Menu Link
  • 8.3. Media Sosial
• 9. Efek Glitch (Grunge)
  • 9.1. Tema Versi 2
  • 9.2. Tema Versi 3
• 10. Menghilangkan Gambar pada Related Post
• 11. Widget Recent Post
• 12. Byline Label
• 13. Kotak Author
• 14. Syntax Highlighter
• 15. Tombol
• 16. Blockquote
• 17. Table

1. Cara Install

Berikut adalah cara memasang template Textrim. Ada dua cara yang bisa dipilih:

1.1. Copy HTML (Recommended)

Cara ini direkomendasikan karena akan langsung menghasilkan tampilan yang 100% sama dengan versi live demo. Resikonya adalah semua isi widget seperti kode iklan, kode Histats, dll akan hilang. Jadi pastikan simpan dulu semua kode widget tersebut sebelum melakukan cara ini.

1. Masuk ke menu Theme > klik Edit HTML.
2. Copy semua kode template yang ada di dalam file hasil download lalu paste ke text editor yang muncul.
3. Terakhir klik tombol Save theme.

1.2. Upload XML

Cara ini aman karena semua widget yang sudah terpasang sebelumnya tidak akan ikut terhapus. Tapi ada kemungkinan letak widget akan berantakan karena tidak sesuai dengan kode HTML template Textrim. Cara memperbaikinya mudah, tinggal geser-geser posisinya di menu Layout (Tata Letak).

1. Masuk ke menu Theme > klik Backup / Restore.
2. Jika ingin melakukan backup pada template yang sedang digunakan, klik tombol Download theme.
3. Setelah itu langsung upload template Textrim dengan klik tombol Choose File dan cari lokasi file .xml berada.
4. Terakhir, klik tombol Upload.

2. Meta Tag

Bagian ini cukup penting sebagai bagian dari SEO dan pelengkap properti saat link dibagikan di media sosial. Ganti kode berikut menggunakan milik kamu sendiri.

2.1 Kode Tracking

Untuk verifikasi Google Search Console dan Bing Webmaster. Jika belum punya, hapus saja semua baris kode ini. Jika sudah ada, silakan ganti yang ditandai.

<!-- Your Tracking Verification Code -->
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>

2.2. Keyword

Ganti dengan keyword atau kata kunci pencarian blog. Pisahkan menggunakan tanda koma.

<!-- Keyword -->
<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' name='keywords'/>
<meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' property='article:tag'/>

2.3. Info Author

<!-- Facebook, Twitter, and Pinterest Meta Tag -->
<meta content='article' property='og:type'/>
<meta content='Your Name' name='author'/>
<meta content='Your Name' property='article:author'/>
<meta content='xxxxxx' property='fb:admins'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxxx' property='article:publisher'/>
<meta content='@YOURusername' name='twitter:site'/>

• Your Name: nama kamu
• xxxxxx: ID dari akun Facebook atau Fanspage (Halaman)
• @YOURusername: Username Twitter

2.4. Gambar Blog

Gambar ini akan muncul saat membagikan link utama (homepage) di media sosial. Ganti yang ditandai menggunakan URL dari gambar banner atau logo blog kamu sendiri.

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTy_4A76IfIil_f2HQuKjsQ-WNHz4lDHIhPFnEn_YeK-RMCQOu9mKMrTRqHZIJECUX91UA8XcmqWxRLZeZLB46yu7o5SEm3txGWhdcjB5wfLAMEoQPFND2b0IAGgXzWUOmn6mRuUvNiY/s1600/Textrim-Documentation.png' property='og:image'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTy_4A76IfIil_f2HQuKjsQ-WNHz4lDHIhPFnEn_YeK-RMCQOu9mKMrTRqHZIJECUX91UA8XcmqWxRLZeZLB46yu7o5SEm3txGWhdcjB5wfLAMEoQPFND2b0IAGgXzWUOmn6mRuUvNiY/s1600/Textrim-Documentation.png' name='twitter:image'/>

3. Mengganti Warna dan Font

Bisa langsung dilakukan di Blogger Theme Designer.

1. Masuk ke Theme > Customize.
2. Pilih Advanced.
3. Atur semua bagian sesuai keinginan.
4. Setelah selesai, klik tombol Apply to Blog.

4. Posisi Iklan

4.1. Iklan Atas Artikel (Bawah Judul)

Cari kode berikut dan ganti dengan kode iklan kamu.

<!-- Ads code below title / Kode iklan bawah judul -->

4.2. Iklan Bawah Artikel

Cari kode berikut dan ganti dengan kode iklan kamu.

<!-- Ads code below article post / Kode iklan bawah post artikel -->

4.3. Iklan Tengah Artikel

Silakan ikuti tutorial Cara Memasang Iklan di Tengah Postingan Blogger.

4.4. Iklan In-feed

Iklan yang muncul di antara feed / daftar artikel di homepage. Cari kode berikut.

<b:if cond='data:infeed == 3'>

Artinya iklan akan muncul setelah artikel ke tiga. Ganti angka yang ditandai sesuai keinginan. Lalu cari kode berikut dan ganti dengan kode iklan kamu.

<!-- Ads code InFeed / Kode iklan InFeed -->

5. Menambah Script Lain

Letakkan script tambahan lain tepat di area yang ditandai.

function textrim() {
  // Put all of your scripts here
  //---- DELETE me and REPLACE with your code ----//
}

6. Menu Navigasi di Header

1. Cari kata kunci 'textrimMenu' (gunakan simbol apostrophe agar lebih mudah mencari).
2. Tepat di bawah kode <ul> terdapat kode HTML untuk menu.
3. Ganti link sesuai keinginan. Jika ingin menambah dropdown, pastikan menulis dan menempatkan posisinya sesuai contoh bawaan pada tema.

7. Multi Related Post Tengah Artikel

Untuk mengurangi jumlahnya, cari kode ini dan ubah angka yang ditandai.

<b:includable id='textrimMultiRelated' var='post'>
  <script> //<![CDATA[
    // Multiple Related Posts by igniel.com
    (function() {
    var jumlah = 4;

Untuk menghapus sepenuhnya, cari kode ini dan hapus.

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='textrimMultiRelated'/>

8. Menu di Footer

8.1. Kotak Subscribe

Pastikan sudah punya akun di Feedburner terlebih dulu. Cari kode ini dan ubah yang ditandai (2 buah) menggunakan username FeedBurner kamu.

<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=igniel", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
  <input autocomplete='off' name='email' placeholder='Email Address' type='email'/>
  <input type='submit' value='Subscribe'/>
  <input name='uri' type='hidden' value='igniel'/>
  <input name='loc' type='hidden' value='id_ID'/>
</form>

8.2. Menu Link

Cari kode ini dan ganti yang ditandai. Simbol # diisi dengan link. Sementara yang lainnya dengan teks.

<nav class='menu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
  <a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a>
  <a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a>
  <a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a>
  <a href='#' itemprop='url' title='Privacy Policy'><span itemprop='name'>Privacy Policy</span></a>
  <a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a>
</nav>

8.3. Media Sosial

Scroll sedikit ke bawah setelah menemukan kode Menu Link di atas. Ganti simbol # dengan username media sosial.
Contoh: ganti https://www.facebook.com/# ke https://www.facebook.com/ignielcom

9. Efek Glitch (Grunge)

9.1. Tema Versi 2

Pada Textrim v2 efek Glitch aktif secara default. Untuk menonaktifkan, cari kode ini dan HANYA hapus yang ditandai.

#header h1, #header h1 a, #header h2 a{
margin:0px;
font-size:30px;
position:relative;
animation:ignielGlitch1 5s infinite;
-moz-animation:ignielGlitch1 5s infinite;
-webkit-animation:ignielGlitch1 5s infinite;
-o-animation:ignielGlitch1 5s infinite;
}
#header h1:before,  #header h1 a:before, #header h2 a:before, #header h1:after,  #header h1 a:after, #header h2 a:after{
content: attr(data-text);
position:absolute;
left:0px;
right:0px;
}
#header h1:before,  #header h1 a:before, #header h2 a:before {
color: #67f3da;
animation:ignielGlitch2 5s infinite;
-moz-animation:ignielGlitch2 5s infinite;
-webkit-animation:ignielGlitch2 5s infinite;
-o-animation:ignielGlitch2 5s infinite;
}
#header h1:after,  #header h1 a:after, #header h2 a:after {
color: #fff;
animation:ignielGlitch3 5s infinite;
-moz-animation:ignielGlitch3 5s infinite;
-webkit-animation:ignielGlitch3 5s infinite;
-o-animation:ignielGlitch3 5s infinite;
}

Kemudian ada lagi yang harus dihapus.

.Blog .entry-title a:hover, .FeaturedPost .entry-title a:hover{
animation:ignielGlitch1 2.5s infinite;
-moz-animation:ignielGlitch1 2.5s infinite;
-webkit-animation:ignielGlitch1 2.5s infinite;
-o-animation:ignielGlitch1 2.5s infinite;
}
.Blog .entry-title a:hover::before, .FeaturedPost .entry-title a:hover::before, .Blog .entry-title a:hover::after, .FeaturedPost .entry-title a:hover::after{
content:attr(data-text);
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
.Blog .entry-title a:hover::before, .FeaturedPost .entry-title a:hover::before{
color:#f16f6f;
animation:ignielGlitch2 2.5s infinite;
-moz-animation:ignielGlitch2 2.5s infinite;
-webkit-animation:ignielGlitch2 2.5s infinite;
-o-animation:ignielGlitch2 2.5s infinite;
}
.Blog .entry-title a:hover::after, .FeaturedPost .entry-title a:hover::after{
color:$(textrim.main.color);
animation:ignielGlitch3 2.5s infinite;
-moz-animation:ignielGlitch3 2.5s infinite;
-webkit-animation:ignielGlitch3 2.5s infinite;
-o-animation:ignielGlitch3 2.5s infinite;
}

9.2. Tema v3

Sementara pada Textrim v3 efek Glitch adalah nonaktif secara default. Untuk mengaktifkannya jauh lebih mudah, cari kode ini.

<body data-glitch='false' itemscope='itemscope' itemtype='http://schema.org/WebPage'>

Ubah false menjadi true.

10. Menghilangkan Gambar pada Related Post

Related post di bawah artikel memiliki gambar thumbnail secara default. Untuk menghapusnya, cari kode ini.

<!-- Related Post Grid by igniel.com -->
  <div class='textrimRelated'>
    <h3 class='title'>Related Posts</h3>
    <script>//<![CDATA[
      var jumlah = 6;
      var thumbnail = true; //true atau false

Ganti true menjadi false.

11. Widget Recent Post

Akses menu Layout > Add Gadget di area Sidebar > pilih Feed.

Masukkan alamat feed secara lengkap. Formatnya:

https://yourdomain.com/feeds/posts/default

Ganti yourdomain.com ke alamat blog kamu dan klik tombol Continue.

12. Byline Label

Byline label adalah teks tambahan yang muncul di depan nama author dan tanggal. Untuk mengubah:

1. Masuk ke Layout dan klik edit (ikon pensil) di Blog Posts.

   

2. Aktifkan centang di bagian nama dan tanggal. Ganti teksnya sesuai keinginan lalu klik tombol Save (Simpan).

   

13. Kotak Author

1. Masuk ke Layout dan klik edit (ikon pensil) di Blog Posts.

   

2. Aktifkan centang di bagian Show Author Profile Below Post.

   

3. Kotak author di bawah artikel hanya akan muncul jika sudah mengisi biodata di pengaturan Blogger. Masuk ke Settings > User settings > klik Edit pada bagian User Profile.

   

4. Tab baru akan terbuka. Isi kotak isian pada bagian Introduction (Perkenalkan Diri Anda) lalu tekan tombol Save Profile (Simpan Profil).

   

14. Syntax Highlighter

Syntax highlighter adalah kotak khusus untuk menuliskan script. Dalam tutorial ini banyak sekali menggunakan Syntax Highlighter. Pastikan script yang akan ditulis sudah di-parse terlebih dulu. Kode untuk menampilkannya:

<pre><code>tulis kode yang sudah di-parse</code></pre>

15. Tombol

Kode untuk menampilkan tombol (button):

<button>DOWNLOAD</button>

Hasilnya:

16. Blockquote

Kode untuk menampilkan blockqoute:

<blockquote>Maybe somewhere out there even a devil may cry when he loses a loved one. Don't you think? - Devil May Cry 3</blockquote>

Hasilnya:

Maybe somewhere out there even a devil may cry when he loses a loved one. Don't you think? - Devil May Cry 3

17. Tabel

Kode untuk menampilkan table:

<table>
  <tbody>
    <tr>
      <th>Judul 1</th>
      <th>Judul 2</th>
      <th>Judul 3</th>
    </tr>
    <tr>
      <td>Konten 1</td>
      <td>Konten 2</td>
      <td>Konten 3</td>
    </tr>
    <tr>
      <td>Konten 1</td>
      <td>Konten 2</td>
      <td>Konten 3</td>
    </tr>
    <tr>
      <td>Konten 1</td>
      <td>Konten 2</td>
      <td>Konten 3</td>
    </tr>
  </tbody>
</table>

Hasilnya:

Judul 1	Judul 2	Judul 3
Konten 1	Konten 2	Konten 3
Konten 1	Konten 2	Konten 3
Konten 1	Konten 2	Konten 3