Textrim v3 - Cara Optimasi dan Mempercepat Template

Cara Optimasi Blogger Template (Textrim)

Pada artikel Off Topic ini sebenernya cuma catatan Viennalate aja dalam mengoptimasi template Textrim, buat kamu yang juga menggunakan atau user template desain dari Igniel ini, mungkin bisa kamu ikuti tutorial dibawah ini. Jangan lupa tinggalkan komentar juga ya buat sharing ke temen" lain yang user Textrim ini (v3).

Oiya, Textrim sendiri sudah terbilang cukup ringan, responsif, sederhana, dan bersih. Jadi apalagi yang harus dipercepat atau dioptimasi lagi? :D

Daripada kelamaan mending langsung simak aja yuk:


Cara Mengoptimasi Theme Text Only

Sangat sederhana, untuk melakukan Optimasi template Textrim ngga sampai 5 menit udah kelar kok.

1. Membuat Meta Tag SEO Friendly

Hal pertama yang viennalate ganti adalah meta tag, untuk kode Defaultnya adalah seperti ini
  <!-- Tracking Code -->
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>
<!-- 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'/>
<!-- Meta Tag -->
<b:if cond='data:view.isHomepage or (data:view.isSearch and !data:view.isLabelSearch and !data:blog.searchQuery)'>
<title><data:view.title.escaped/></title>
<meta expr:content='data:view.title' property='og:title'/>
<meta expr:content='data:view.title' property='og:image:alt'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:view.title' name='twitter:image:alt'/>
<b:elseif cond='data:view.isSingleItem or data:view.isSearch or data:view.isArchive'/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' property='og:title'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' property='og:image:alt'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='twitter:image:alt'/>
<b:elseif cond='data:view.isError'/>
<title>Page Not Found - <data:blog.title/></title>
<meta expr:content='"Page Not Found - " + data:blog.title' property='og:title'/>
<meta expr:content='"Page Not Found - " + data:blog.title' property='og:image:alt'/>
<meta expr:content='"Page Not Found - " + data:blog.title' name='twitter:title'/>
<meta expr:content='"Page Not Found - " + data:blog.title' name='twitter:image:alt'/>
<b:else/>
<title><data:view.title/></title>
<meta expr:content='data:view.title' property='og:title'/>
<meta expr:content='data:view.title' property='og:image:alt'/>
<meta expr:content='data:view.title' name='twitter:title'/>
<meta expr:content='data:view.title' name='twitter:image:alt'/>
</b:if>
<!-- 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'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<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'/>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<!-- Other -->
<meta content='width=device-width, minimum-scale=1, initial-scale=1, shrink-to-fit=no' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content='IE=Edge'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<b:if cond='data:view.isArchive or data:view.isSearch or data:view.isLabelSearch or data:view.isError'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:include data='blog' name='all-head-content'/>

Silahkan kamu ganti dengan dibawah ini, caranya:
1. Buka Menu Tema
2. Klik tombol Edit HTML
3. Setelah itu ganti dengan dibawah ini
  <!-- Blog Title -->
<b:if cond='data:view.isError'><title>Error 404: Page Not Found</title></b:if>
<b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/></title></b:if>
<b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.search.query'><title>Search : <data:view.search.query/></title></b:if>
<b:if cond='data:view.search.label'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:view.isArchive'><title>Blog Archive in : <data:blog.pageName/></title></b:if>
<b:if cond='data:view.search and !data:view.search.label and !data:view.search.query and !data:view.isArchive'><title>Blog : <data:blog.title/></title></b:if>
</b:if>

<!-- Meta Title -->
<b:if cond='data:view.isMultipleItems'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.pageTitle' property='og:image:alt'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta expr:content='data:blog.pageTitle' name='twitter:image:alt'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName' property='og:image:alt'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.pageName' name='twitter:image:alt'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>

<!-- Meta Image -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='logo-blog.png' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:view.isMultipleItems'>
<meta content='logo-blog.png' name='twitter:image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:view.isPost'>
<link expr:href='resizeImage(data:blog.postImageUrl, 700)' rel='image_src'/>
</b:if>

<!-- Meta Description -->
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

<!-- Meta Keywords -->
<meta expr:content='data:blog.title + ", " + data:blog.pageName' name='keywords'/>
<meta expr:content='data:blog.title' property='article:tag'/>

<!-- Meta Link -->
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<!-- Meta Owner -->
<meta content='Nama Anda' name='Author'/>
<link href='https://www.facebook.com/userfb' rel='me'/>
<link href='https://www.facebook.com/userfb' rel='author'/>
<link href='https://www.facebook.com/linkFanspage' rel='publisher'/>
<meta content='000000000000999' property='fb:admins'/>
<meta content='000000000000999' property='fb:pages'/>
<meta content='00000000000099988' property='fb:app_id'/>
<meta content='https://www.facebook.com/000000000000999' property='article:author'/>
<meta content='https://www.facebook.com/000000000000999' property='article:publisher'/>
<meta content='@akun.twitter' name='twitter:site'/>
<meta content='@akun.twitter' name='twitter:creator'/>
<meta expr:content='data:blog.title' name='copyright'/>

<!-- Meta Icon -->
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='.../s300/logo-blog.png' rel='apple-touch-icon'/>
<link href='.../s57/logo-blog.png' rel='apple-touch-icon' sizes='57x57'/>
<link href='.../s72/logo-blog.png' rel='apple-touch-icon' sizes='72x72'/>
<link href='.../s76/logo-blog.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='.../s114/logo-blog.png' rel='apple-touch-icon' sizes='114x114'/>
<link href='.../s120/logo-blog.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='.../s144/logo-blog.png' rel='apple-touch-icon' sizes='144x144'/>
<link href='.../s152/logo-blog.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='.../s180/logo-blog.png' rel='apple-touch-icon' sizes='180x180'/>

<!-- Meta Theme Color -->
<meta content='#fff' name='theme-color'/>
<meta content='#fff' name='msapplication-navbutton-color'/>
<meta content='#fff' name='apple-mobile-web-app-status-bar-style'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>

<!-- Meta Blogger Rss -->
<meta content='blogger' name='generator'/>
<link href='https://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.url' rel='openid.delegate'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='"//www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>

<!-- Meta Open Graph -->
<meta content='article' property='og:type'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='summary_large_image' name='twitter:card'/>

<!-- Meta Robots Search -->
<meta content='width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=5.0' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='all-language' http-equiv='Content-Language'/>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='id' name='geo.country'/>
<meta content='ID-BT' name='geo.region'/>
<meta content='id' name='language'/>
<meta content='global' name='target'/>
<meta content='global' name='distribution'/>
<meta content='general' name='rating'/>
<meta content='1 days' name='revisit-after'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='index, follow' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='all' name='spiders'/>
<meta content='all' name='WEBCRAWLERS'/>

<!-- Owner Sife Verification -->
<meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>

Sumber: https://blog.jagodesain.com/2020/01/meta-tag-seo.html

Eiits, jangan salah paham dulu, Text Only (Textrim) sangat DILARANG Untuk di Hapus. Jadi untuk Optimasi, kita cuma mengganti menjadi Nofollow.

Caranya:
1. Buka Menu Tema
2. Klik tombol Edit HTML
3. Ganti Script dibawah ini
<script> //<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('D e=["\\z\\r\\m\\I\\C\\o","\\r\\m\\h\\s\\o\\h\\p\\A\\h\\y\\h\\w\\o","\\a\\a\\b\\F\\a\\a\\c\\j\\a\\a\\c\\j\\a\\a\\c\\a\\a\\a\\c\\i\\a\\a\\i\\H\\a\\a\\d\\f\\a\\a\\d\\f\\a\\a\\b\\i\\a\\a\\b\\j\\a\\a\\b\\p\\a\\a\\d\\p\\a\\a\\c\\i\\a\\a\\c\\j\\a\\a\\b\\G\\a\\a\\c\\j\\a\\a\\b\\q\\a\\a\\b\\i\\a\\a\\b\\G\\a\\a\\b\\n\\a\\a\\b\\n\\a\\a\\c\\q\\a\\a\\d\\p\\a\\a\\b\\q\\a\\a\\b\\f\\a\\a\\d\\f\\a\\a\\b\\c\\a\\a\\b\\F\\a\\a\\d\\f\\a\\a\\b\\q\\a\\a\\b\\c\\a\\a\\b\\p\\a\\a\\b\\q\\a\\a\\b\\u\\a\\a\\b\\n\\a\\a\\d\\f\\a\\a\\b\\d\\a\\a\\b\\n\\a\\a\\b\\f\\a\\a\\b\\c\\a\\a\\b\\c\\a\\a\\b\\u\\a\\a\\c\\d\\a\\a\\d\\f\\a\\a\\b\\L\\a\\a\\b\\G\\a\\a\\c\\i\\a\\a\\c\\j\\a\\a\\b\\u\\a\\a\\c\\d\\a\\a\\d\\f\\a\\a\\c\\j\\a\\a\\b\\u\\a\\a\\c\\F\\a\\a\\c\\j\\a\\a\\c\\d\\a\\a\\b\\q\\a\\a\\b\\L\\a\\a\\d\\f\\a\\a\\c\\b\\a\\a\\i\\i\\a\\a\\d\\p\\a\\a\\b\\H\\a\\a\\c\\i","\\s\\z\\M\\w\\r","\\o\\m\\O\\h","\\z\\m\\r","\\y\\s\\o\\r\\v","","\\A\\h\\w\\Z\\o\\v","\\U\\m\\t\\y\\n\\v\\s\\m\\n\\t\\x\\h","\\s\\C\\C\\h\\w\\x\\n\\v\\I\\A\\x","\\X\\t\\x\\M","\\m\\h\\y\\t\\Y\\h"];!J(){D l=K[e[1]](e[0]),k=e[2];l[e[3]]=e[4];l[e[5]]=J(l){D k,B=l[e[6]](/.{1,4}/g)||[],E=e[7];V(k=0;k<B[e[8]];k++){E+=P[e[9]](N(B[k],S))};Q E}(k),K[e[R]][e[T]](l),l[e[W]]()}()',62,62,'||||||||||x30|x36|x37|x32|_0x7c9f|x46||x65|x33|x34|_0x1902x2|_0x1902x1|x72|x43|x74|x45|x39|x63|x61|x6F|x35|x68|x6E|x64|x6D|x73|x6C|_0x1902x3|x70|var|_0x1902x4|x38|x31|x41|x69|function|document|x44|x79|parseInt|x75|String|return|11|16|10|x66|for|12|x62|x76|x67'.split('|'),0,{}));

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

Dengan ini
<script>//<![CDATA[
window.addEventListener("load", function() {
$(document).scroll(function() {
return $(document).scrollTop() > 300 ? $(".ignielToTop").addClass("show") : $(".ignielToTop").removeClass("show")
}), $(".ignielToTop").click(function() {
return $("html,body").animate({
scrollTop: "0"
})
}), $(".textrimMenu .inner ul li a:not(:only-child)").click(function(e) {
if (e.preventDefault(), $(this).next("ul").slideToggle(100), $(this).parent().toggleClass("open"), $(this).parent().hasClass("open")) {
document.querySelector(".textrimMenu > .inner > ul > li").getBoundingClientRect().left;
$(".textrimMenu .inner > ul").css({
overflowX: "unset",
left: -Math.abs($(".textrimMenu .inner > ul").scrollLeft())
})
} else $(".textrimMenu .inner > ul").removeAttr("style")
})
});
//]]></script>

Note: You are free to use and modify this theme but NOT ALLOWED to remove the credit link at footer.

So, karna viennalate sangat menghargai author, jadi tolong, jangan dihapus ya teman".

Langkah berikutnya mengganti Theme by <a href='https://www.igniel.com' rel='noopener' target='_blank' title='Igniel'>Igniel</a> dengan ini: Theme by <a href='https://www.igniel.com' rel='nofollow noopener noreferrer' target='_blank' title='Igniel'>Igniel</a>.

Nofollow: Robot web crawler tidak akan merayapi tautan backlink yang diberikan.
Noopener: Melindungi halaman baru untuk diakses oleh properti window.opener yang memastikan kedua website berjalan dalam proses terpisah.
Noreferrer: Menunjukkan tidak ada informasi pengarah yang bocor mengikuti tautan.

Cara Mempercepat Theme Text Only

Berikut cara yang bisa kamu gunakan untuk meringankan dan mempercepat loading halaman Template Textrim.

1. Menghapus dan Memindahkan CSS

Berikut cara mempercepat dengan memindahkan css
1. Buka Menu Tema
2. Klik tombol Edit HTML
3. Hapus dan ganti
  <b:skin><![CDATA[ /*
Isi CSS
]]> </b:skin>

Dengan ini
<style>
Isi CSS
</style>

Kalo pengen nyembunyiin Tag b:skin seperti viennalate
<b:if cond='2 == 1'>

</b:if>

Fungsi: Terlihat rapi saat dilihat (CTRL+U)

Sumber: https://rizkysaskiaputra.blogspot.com/2018/11/cara-menghapus-tag-bskin-blogger.html

Kemudian tambahkan Fonts dibawah ini
<style>
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:400;src:local(&#39;Montserrat Regular&#39;),local(&#39;Montserrat-Regular&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2)format(&#39;woff2&#39;);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:400;src:local(&#39;Montserrat Regular&#39;),local(&#39;Montserrat-Regular&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2)format(&#39;woff2&#39;);unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:400;src:local(&#39;Montserrat Regular&#39;),local(&#39;Montserrat-Regular&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2)format(&#39;woff2&#39;);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:400;src:local(&#39;Montserrat Regular&#39;),local(&#39;Montserrat-Regular&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2)format(&#39;woff2&#39;);unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:400;src:local(&#39;Montserrat Regular&#39;),local(&#39;Montserrat-Regular&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2)format(&#39;woff2&#39;);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:600;src:local(&#39;Montserrat SemiBold&#39;),local(&#39;Montserrat-SemiBold&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gTD_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:600;src:local(&#39;Montserrat SemiBold&#39;),local(&#39;Montserrat-SemiBold&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:600;src:local(&#39;Montserrat SemiBold&#39;),local(&#39;Montserrat-SemiBold&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gbD_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:600;src:local(&#39;Montserrat SemiBold&#39;),local(&#39;Montserrat-SemiBold&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:600;src:local(&#39;Montserrat SemiBold&#39;),local(&#39;Montserrat-SemiBold&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2)format(&#39;woff2&#39;);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:900;src:local(&#39;Montserrat Black&#39;),local(&#39;Montserrat-Black&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_epG3gTD_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:900;src:local(&#39;Montserrat Black&#39;),local(&#39;Montserrat-Black&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_epG3g3D_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:900;src:local(&#39;Montserrat Black&#39;),local(&#39;Montserrat-Black&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_epG3gbD_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:900;src:local(&#39;Montserrat Black&#39;),local(&#39;Montserrat-Black&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_epG3gfD_u50.woff2)format(&#39;woff2&#39;);unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:&#39;Montserrat&#39;;font-style:normal;font-weight:900;src:local(&#39;Montserrat Black&#39;),local(&#39;Montserrat-Black&#39;),url(//fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2)format(&#39;woff2&#39;);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
</style>

Dan menambahkan dengan link rel Preload
Penempatan <link rel="preload"> ini pada bagian <head> setelah meta viewport.
<link as='font' crossorigin='' href='https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2' rel='preload' type='font/woff2'/>
<link as='font' crossorigin='' href='https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2' rel='preload' type='font/woff2'/>
<link as='font' crossorigin='' href='https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2' rel='preload' type='font/woff2'/>

Multiple Related Posts berfungsi untuk menampilkan banyak related post sekaligus, sehingga membuat loading blog menjadi berat. Agar blog kamu lebih ringan, kamu bisa menghapusnya atau menonaktifkannya saja.

Berikut cara menghapus Multiple Related Posts
1. Buka Menu Tema
2. Klik tombol Edit HTML
3. Klik CTRL+F kemudian cari textrimMultiRelated dan hapus.

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

Kalo ingin tau source code nya:
<script> //<![CDATA[
// Multiple Related Posts by igniel.com
(function() {
var jumlah = 4;
let post=document.querySelectorAll(".post-body br, .post-body p"),a=jumlah+1,b=post.length/a;c=Array.from({length:jumlah},(e,t)=>t+1);for(let e=0;e<c.length;e++){let t=c[e],o=parseInt(b*t),l=document.createElement("div");l.className="ignielMultiRelated","P"==post[o].nodeName?post[o].parentNode.insertBefore(l,post[o]):post[o].parentNode.insertBefore(l,post[o].nextSibling)}
})();
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function related_results_labels(e){for(var r=0;r<e.feed.entry.length;r++){var l=e.feed.entry[r];relatedTitles[relatedTitlesNum]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){relatedUrls[relatedTitlesNum]=l.link[t].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),r=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],r.length+=1,r[r.length-1]=relatedTitles[l]);relatedTitles=r,relatedUrls=e}function contains(e,r){for(var l=0;l<e.length;l++)if(e[l]==r)return!0;return!1}
//]]> </script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
</b:loop>
</b:if>
<script> //<![CDATA[
(function ignielMultiRelated() {
var text = 'Related:';
let r=Math.floor((relatedTitles.length-1)*Math.random()),i=0,jumlah=document.querySelectorAll(".ignielMultiRelated");for(;i<relatedTitles.length&&i<jumlah.length;)for(let e=0;e<jumlah.length;e++)jumlah[e].innerHTML='<span class="content"><span class="text">'+text+'</span><a href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'">'+relatedTitles[r]+'</a></span><span class="icon"></span>',r<relatedTitles.length-1?r++:r=0,i++;
})();
//]]> </script>

Selengkpanya bisa kamu lihat pada artikel: https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html

3. Custom Komentar

Secara default, komentar blogger menggunakan iframe yang sangat memberatkan, solusinya adalah custom komentar, kalau dalam istilah gaul blogger lama mungkin komentar hack atau Threaded Comment.

Untuk tutorial ini mungkin akan saya posting dalam artikel Out Off Topic Berikutnya :D

4. Optimasi Google Analytics

Untuk kode standar pelacakan yang akan kamu dapatkan biasanya seperti berikut ini
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Silahkan kamu ganti dengan dibawah ini
<b:if cond='data:blog.analyticsAccountNumber'>
<script>
// Global site tag (gtag.js) - Google Analytics
var analyticsAccountNumber=&quot;<data:blog.analyticsAccountNumber/>&quot;
//<![CDATA[
var fired=!1;window.addEventListener("scroll",function(){if(0!=document.documentElement.scrollTop&&!1===fired||0!=document.body.scrollTop&&!1===fired){function e(){dataLayer.push(arguments)}!function(){var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id="+analyticsAccountNumber;var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],e("js",new Date),e("config",analyticsAccountNumber),fired=!0}},!0);
//]]></script>
</b:if>

Pastikan kamu sudah memasang Google Analytics pada Blogger

Caranya seperti ini
1. Di menu sebelah kiri, klik Settings kemudian pilih Other.
2. Pada bagian "Google Analytics", masukkan Tracking ID Analytics. ID tersebut menggunakan format: UA-XXXXX-XX.
3. Klik Save settings, pada sudut kanan atas.

Modifikasi / Redesign Textrim

Tutorial baru di update nih tapi komentarnya mana? aduhh, dasar pengunjung gada akhlak, jangan" cuma mau copas, eh bercanda.

Random Post di Textrim

Entah kenapa kalau related post tanpa ide lain serasa kurang untuk pengunjung daripada kembali ke homepage, maka dari itu saya telah membuat artikel random yang akan mengisi artikel ketika di klik guna menemukan ide lain untuk dibaca, langsung simak aja tutorialnya dibawah ini.

Cara membuat artikel terkait (pilihan) di Textrim v2
1. Buka Menu Tema
2. Klik tombol Edit HTML
3. Klik CTRL+F kemudian cari <b:includable id='textrimRelated' var='post'> dan pasang kode dibawah ini setelah related post dari bawaan textrim.
<center><button class='btnRandom' type='button'>Find more posts</button></center>
<div class='randomPosts'/>

Kemudian ganti //---- DELETE me and REPLACE with your code ----// dengan dibawah ini
// Random artikel by viennalate.blogspot.com
document.getElementsByClassName("btnRandom")[0].addEventListener("click",e=>{document.getElementsByClassName("randomPosts")[0].innerHTML="",fetch("/feeds/posts/summary?alt=json&max-results=0").then(e=>e.json()).then(e=>{let t=e.feed.openSearch$totalResults.$t,n=[],r=[];for(let e=0;e<t;e++)n.push(e+1);for(var l=e=>{let t=e[Math.floor(Math.random()*e.length)];return((e,t)=>{for(let n=0;n<e.length;n++)if(e[n]==t)return!0;return!1})(r,t)?l(e):(r.push(t),t)},a=0;a<6;a++)for(var s=1;s<=1;s++)fetch(`/feeds/posts/summary?alt=json&max-results=1&start-index=${l(n)}`).then(e=>e.json()).then(e=>{let t,n,r;for(let l=0;l<e.feed.entry.length;l++){for(let t=0;t<e.feed.entry[l].link.length;t++)if("alternate"===e.feed.entry[l].link[t].rel){n=e.feed.entry[l].link[t].href;break}t=e.feed.entry[l].title.$t,r="media$thumbnail"in e.feed.entry[l]?e.feed.entry[l].media$thumbnail.url.replace("s72-c","s260"):"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL8AAAB7CAMAAAASTaGWAAAAA3NCSVQICAjb4U/gAAAAHlBMVEV4ltJCZ7I1VJRie64/ZK9riMU6XKJzkMpDaLRpg7l7izpNAAAAX3pUWHRSYXcgcHJvZmlsZSB0eXBlIEFQUDEAAAiZ40pPzUstykxWKCjKT8vMSeVSAANjEy4TSxNLo0QDAwMLAwgwNDAwNgSSRkC2OVQo0QAFmJibpQGhuVmymSmIzwUAT7oVaBst2IwAAAO5SURBVHic7ZeLluogDEWhAoH//+HJi4KOV53eSnStHLVQSHU3JKGG+N0K1gD/Kee3lfPbyvlt5fy2cn5bOb+tnN9Wzm8r57eV89vK+W3l/LZyfls5v62c31bObyvnt5Xz28r5beX8tnJ+W53EX0+0+pPO4a8lxoRtKjFxG6mlszi9a+FO5WM65YfP8v+WSsE3i9uqA6kPybt2IzI544fP8j/jJTxGOlYERXcX+vBc4Q6d10qdSCZn/PJJ/md+jJdCAcStDOgajMXQXqTXGTrJ/72hTpK2ygAHSiLYWunNU/o5QW+vn1Vv5E3y+m8r57fV3/nrtm2J8pFarC+bqM/2861Ql4t8IUO5YNOqv5uVuA0dyPJj/PQgwPwp4QlKhyLXS+Yqwk9PEXyjkU3pEjJDI92soxiz/o5/kB9dVYVfvLa7Wkr+8DuuCx9TlVFZO7lWvU02/dJ1/Fv6B/84kRiRQGHDJIvRFyYO/uM6zF/SM/64p4Ia0hxfoAYYfamHYUrHHkgP80vSTvzbff9P/BU18afdDT2Vl/GXMmM98D/ijYWi1C4Tf+r1R5/w1vGn9Nv/d+MfM7bMF0juF3F27fz8aHfsGekgvwaHpGOtM7+eIJK044Zjj/+q0D1+YhUt5JeyLvWEN4C+/LIb7PW/b3TK3xdM6n8vY8vrf4paw0c2x5uNdZSZK/+XKeG3Hj/7d6zgJ02pVuXPeJrm7iRimsx/je7/8A/o65/f0ncr5O9WcH2bcmtAbWtNzlhjvrV9SMeB2n6ZtqBGMOznL3mjLpcLaCvHhi8Zknk841FQkwB4FnCUo1VtgU1orOlXNDF+uwSAIYHJUFnbcYvKfZc/dydw/zLf/Cr+zPzhMT+3kHf+RhWDbxuP2ZIfOESe8bP/80VmJapY0M2bxs9q/h3kOb/qOv7VXCZ2m0XFXNOzvRY/j/il/vCXSXeJ1PXhtfh5xC8yiR+BfCV+soaJZEO/YEpag/xtGr24C9FNADZtj17g7MajbA6YoE3DhT0vuxSOAUuSGPrJAk37F4xsvpof2X21D+TL8HWPrSl/F61D95O0cOs6gDGk4zC1cGs3XbA0jFwu11NB5iy3xngirB1UwwPCUtkJ1MXnTnr2hIZTuAtgP4hFFhNr5lm4SSEsHZEO8GGB7wgHMvalg5MIjhONbcOaP1svijxMTiYyxEVGbomZsIlZ+Hkd2OCj+Nmj9Kc26IYUaDUyDXZoXqOg8QOSFp8oGM2nIrpcLpfL5XK5XC6Xy+VyuVwul+vt+gHlbFh7RC+RFQAAAABJRU5ErkJggg==",document.getElementsByClassName("randomPosts")[0].innerHTML+=`<div class="item"><div class="thumb"><a href="${n}" title="${t}"><img alt="${t}" src="${r}" title="${t}"/></a></div><div class="content"><a href="${n}" title="${t}">${t}</a></div></div>`}}).catch(e=>console.error(e))}).catch(e=>console.error(e)),e.currentTarget.innerHTML="Continue find more posts Vienalatte"},{once:!1});

Terakhir kamu bisa kreasikan sendiri CSS nya, kalo default viennalate seperti ini
.btnRandom{outline:0;background:var(--background-color);border:1px solid var(--background-color);padding:6px 12px 7px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;cursor:pointer;-webkit-transition:background 0.3s;-o-transition:background 0.3s;-moz-transition:background 0.3s;transition:background 0.3s}
.btnRandom:hover{background:var(--link-hover-color)}
.randomPosts{margin:20px 0 0;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:-moz-box;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.randomPosts .item{width:32%;margin-right:2%;margin-bottom:20px}
.randomPosts .item:nth-of-type(3n){margin-right:0}
.randomPosts .item .thumb{overflow:hidden;height:160px}
.randomPosts .item .thumb img{-o-object-fit:cover;object-fit:cover;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:100%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #f6f6f6;transition:all .3s ease}
.randomPosts .item .thumb img:hover{transform:scale(1.1);filter:brightness(80%);-webkit-filter:brightness(80%)}
.randomPosts .item .content{margin-top:10px}
.randomPosts .item .content a{color:var(--text-color);font-size:14px;text-align:left;padding:7px 0 0;line-height:1.5em}
.randomPosts .item .content a:hover{color:var(--background-color)}

Demo

Cukup sekian dan terima kasih.. Heyy, jika kamu belajar hal baru hari ini, tolong bagikan kepada teman kamu. jangan lupa untuk meninggalkan komentar juga.

Akhir kata: Benarkan jika Vienalatte ada salah, hehe.


Pencarian terkait: Cara menghapus Theme by Igniel, Cara Menampilkan gambar di template textrim, cara memasang gambar textrim di homepage, cara menampilkan thumbnail di homepage Textrim, cara mengganti author textrim, cara agar sidebar textrim sticky, sidebar textrim sticky, cara membuat sidebar melayang di template textrim, cara seo textrim, optimasi template textrim.
Blogger, Content Creator, Graphic Designer, UI / UX Designer.

Post a Comment

© DhikaMedia. All rights reserved. Developed by Jago Desain