Textrim Theme Documentation

62 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 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 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 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 Dowload theme.
  3. Setelah itu langsung upload template Igniplex 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

62 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
  11. ======================================
    TEXTRIM: Free Blogger Theme - Made by Igniel (igniel.com)
    ======================================
    Name : TEXTRIM
    Version : 3
    Date : January 27, 2020
    Demo : textrim.blogspot.com
    Type : Free
    Designer : Igniel
    Country : Indonesia
    Website : www.igniel.com
    ***************************************
    You are free to use and modify this theme but NOT ALLOWED to remove the credit link at footer.
    ***************************************

    can i remove this from html ?

    ReplyDelete
  12. im having problem with pages gadget

    i added gadget under header and it showing vertical list
    it suppoased to show horizontal tab Is it a Bug ? can u fix it
    please please

    Tip: In Design, reposition the gadget to change its appearance.
    Tabs — move gadget under header
    List of links – move gadget to side column

    ReplyDelete
  13. cara merubah warna link gimana mas

    ReplyDelete
  14. How to set Fevicon ??
    Please help me.

    ReplyDelete
    Replies
    1. Read here https://www.igniel.com/2018/10/favicon-blogger.html

      Delete
  15. kak untuk membuat taable denga style overflow-x scroll gmana ya?

    ReplyDelete
  16. Can you make textrim for WordPress ?

    ReplyDelete
    Replies
    1. There's a chance. I'm still working on it.

      Delete
    2. Dilihat-lihat su Athena X Stories ini banyak permintaan ...
      Padahal ini gratisan ..
      :D

      Delete
  17. there is a problem that 'related' amid post is misplacing when we use table. Check the link please

    https://www.questionbaba.com/2020/03/patna-university-b-com-part-3-2002.html

    ReplyDelete
    Replies
    1. It's not "misplacing". Related posts are spread within paragraph. The location is depends on how many line break the article has. Based on that calculation, one of the available spot is inside the table.

      Delete
    2. If you're not comfortable with "related post", you can remove it. Read the tutorial above (see number 7)

      Delete
    3. I am comfortable. But, I hope you will resolve it with tables. Thanks is advance.

      Delete
  18. Mbak, apa keyword article tagnya gak bisa keisi sendiri secara otomatis?

    ReplyDelete
  19. mbak mohon solusinya, ko di halaman utama atau di tag yang muncul cuman 1 artikel saja ya. sudah baca di blog lain kebanyakan karena cara buat artikelnya di word, padahal sya tidak. mohon koreksinya.
    https://deretanharga.blogspot.com/

    ReplyDelete
    Replies
    1. Kasih jump break di setiap postingan
      https://www.igniel.com/2019/09/solusi-artikel-muncul-sebagian-di-home.html

      Delete
  20. Kan headernya mau di rubah jadi gambar/logo blog, trus ngebesarinnya gimna mas

    ReplyDelete
    Replies
    1. Pake logo yang memanjang ke samping. Jangan kotak.

      Delete
  21. Ijin pakai template nya mbak

    https://www.lokerpku.web.id

    ReplyDelete
  22. kak kalo ubah favicon gimana ??

    ReplyDelete
    Replies
    1. Di Layout (Tata Letak) kaya biasa.
      Kalau ga ada widget favicon, ganti dulu pake editor lama Blogger.

      Delete
  23. Infeed lebih dari satu bisa ga mbk?

    ReplyDelete
    Replies
    1. Bisa.
      https://www.igniel.com/2018/11/cara-pasang-iklan-infeed-adsense.html

      Delete
  24. bagus..bagus..bagus

    ketemu juga template yg teks yg bagus...

    saya baru bikin blog
    ijin pake templatenya mba
    HATURNUHUN

    https://www.catatanauditor.com/

    ReplyDelete
  25. mba ignel sebelumnya terima kasih templetnya , mau tanya buat memunculkan related post gimana yah ka soalnya gak ada di bawah ?

    ReplyDelete
  26. Mau tanya mbak Igniel:
    1. Cara menghilangkan next/previous post di dalam postingan itu bagaimana ya?
    2. Apakah template textrim ini sudah terpasang jquery?
    3. Di punya saya kok tidak ada back to topnya ya mbak? Padahal punya saya itu yang v3 lho. Web saya di tulisanib,blogspot,com , silahkan cek.
    4. Cara melebarkan tombol subscribenya gimana ya mbak (melebarkan yang warna birunya aja)?

    ReplyDelete
    Replies
    1. Saya tidak jadi tanya mbak. Tolong hapus dua komentar saya ini ya mbak. Terimakasih banyak.

      Delete
  27. please tell how to create toc in your theme, please request

    ReplyDelete
  28. Replies
    1. halo mbak, tema yang aku download kok gak bisa pake em tag ya? jadi invisible gitu, disini tapi kok bisa

      terus cara munculin tombol delete di commentar gimana ya?

      Delete
  29. request tambahin TOC kyk wordpress dong, yang bisa kebaca di google search

    ReplyDelete
  30. mba igniel, kenapa feature post nya tidak tampulya di blog saya mohon jawabannya ya mba.? Terimakasih.

    alamat blog https://cergas-id.blogspot.com/

    ReplyDelete
    Replies
    1. sudah bisa mba. bila berkenan hapus saja komentar ini mba. terimakasih ya mba templatenya saya izin pakai

      Delete
  31. please how can i remove dropdown menu on the navigation bar

    ReplyDelete
  32. How to add 'table of contents' in fiksioner theme as it is added in this post?

    ReplyDelete
  33. I am unable to remove thumbnail in related post though I did it as per your instruction. Please help.

    ReplyDelete
  34. Nunggu update textrim 😄

    ReplyDelete
  35. Ijin pake template nya kakak

    ReplyDelete

Post a Comment

Subscribe Our Newsletter