Textrim Theme Documentation

19 comments
Ads code below title / Kode iklan bawah judul
Textrim Blogger Theme Tutorial Documentation

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 the credit link in footer. Turorial is in Indonesian only, but you can use Google Translate. Below is a complete and full documentation to guide you to modify this theme.

Textrim 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 memodifikasi tema ini. DILARANG menghapus link kredit di footer. Berikut adalah dokumentasi lengkap sebagai panduan dalam memodifikasi tema ini.

1. Cara Install

Berikut adalah cara memasang template Fiksioner. 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 dowload 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 Fiksioner. 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 Dowload theme.
  3. Setelah itu langsung upload template Fiksioner 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://1.bp.blogspot.com/-Wlq5R5atCZk/Xi69_ZGEQfI/AAAAAAAAIVU/lYW59L0DDx0siEOFpbF8Kn0auFxvzNZBwCPcBGAYYCw/s1600/Textrim-Documentation.png' property='og:image'/>
<meta content='https://1.bp.blogspot.com/-Wlq5R5atCZk/Xi69_ZGEQfI/AAAAAAAAIVU/lYW59L0DDx0siEOFpbF8Kn0auFxvzNZBwCPcBGAYYCw/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.
Ganti Warna Textrim

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 ----//
}

  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.
Menu Navigasi Textrim

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

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

Kotak Media Sosial Textrim

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.

Textrim Related Posts

11. Widget Recent Post

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

Recent Post WIdget Textrim

Masukkan alamat feed secara lengkap. Formatnya:

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

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

Recent Post Blogger Tanpa Javascript

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.
    Cara Ganti Teks Byline Blogger
  2. Aktifkan centang di bagian nama dan tanggal. Ganti teksnya sesuai keinginan lalu klik tombol Save (Simpan).
    Tulisan di Depan Author dan Tanggal
Info Author dan Tanggal

13. Kotak Author

  1. Masuk ke Layout dan klik edit (ikon pensil) di Blog Posts.
    Cara Memunculkan Profil Author Bawah Post
  2. Aktifkan centang di bagian Show Author Profile Below Post.
    Author Box Textrim
  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.
    Kotak Penulis di Bawah Artikel
  4. Tab baru akan terbuka. Isi kotak isian pada bagian Introduction (Perkenalkan Diri Anda) lalu tekan tombol Save Profile (Simpan Profil).
    Cara Memasang Kotak Author di Bawah Artikel

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 1Judul 2Judul 3
Konten 1Konten 2Konten 3
Konten 1Konten 2Konten 3
Konten 1Konten 2Konten 3
Ads code below article post / Kode iklan bawah post artikel
Igniel
Stimulate your passion!
Newest Older

Related Posts

19 comments

  1. Cara buat daftar isi itu gimana ya mbk?

    ReplyDelete
    Replies
    1. https://www.igniel.com/2018/08/daftar-isi-table-of-contents.html

      Delete
  2. Mba buat tutorial cara hapus tombol delete di komentar dong kyk di blog ini.

    ReplyDelete
  3. tombol share nya tambahin untuk telegram plis..

    ReplyDelete
  4. I got a problem please help me
    Only 2 blog posts showing in main page
    I set number of posts on main page to 5 still showing 2 only 😓😓

    ReplyDelete
    Replies
    1. The problem is on your post. Give "jump break" to every posts after the first pharagraph.

      Read this article for full explanation https://www.igniel.com/2019/09/solusi-artikel-muncul-sebagian-di-home.html

      Delete
    2. i found the error
      it happening when i post posts in Telugu language
      i removed telugu language post and its working fine

      Delete
  5. Mbak gambar profil sya gak muncul, di author box dan komentar list, persis kayak blog textrim.blogspot.com ini, supaya muncul, pengaturannya dimana ya?

    ReplyDelete
    Replies
    1. Itu diatur di profil Blogger, bukan di template.
      Ikuti tutorial ini https://www.igniel.com/2019/08/foto-profil-blogger.html

      Delete

  6. Can i place more than 5 keywords?

    ReplyDelete
  7. meta content='Keyword 1, keyword 2, keyword 3, keyword 4, keyword 5, etc' property='article:tag'

    property='article:tag' Can you please explain what keywords i need to place in property article tag

    ReplyDelete
    Replies
    1. "article:tag" is for Facebook and Pinterest.
      It's same as "meta name='keyword" but it's for social media.

      So, just write exactly like your meta keyword.

      Delete
  8. Script parse maksudnya gimana gan? Di parse kayak gimana??

    ReplyDelete
    Replies
    1. Parse di sini http://www.blogcrowds.com/resources/parse_html.php

      Delete
  9. Untuk postingan artikel sma fetured post suapaya ada banner nya gimana mbak? Itukan gada bannernya untuk postingan artikel

    ReplyDelete
    Replies
    1. Gambar thumbnail maksudnya? Ini kan konsepnya template text only. Gak pake gambar.

      Delete
  10. Bro is it possible to create dropdown submenu in submenu?

    ReplyDelete

Post a Comment

Subscribe Our Newsletter