Cara Membuat Judul Posting Menjadi Auto Read More

Ada pengalaman baru nih saat ngoprek template baru yang dibuat dengan Halfmoon. Tepatnya pada saat posting artikel yang ke-14 terkait fungsi "Read More". Adapun script read more yang digunakan yang seperti tautan berikut yang memiliki baris kode yang ditempatkan sebelum tag </head>.

Dan error ini juga sempat terjadi saat membangun theme berdasarkan Bootstrap. Errornya juga terlihat sama namun saya lupa itu muncul pada saat posting artikel yang keberapa.

Karena sebab itulah akhirnya saya mengganti script auto read more yang lama pada theme Bootstrap yang digunakan sebagai template blog ini. Dan kode yang digunakan yaitu script auto read more tanpa javascript.

Kemudian, seiring waktu saya belajar membuat template lagi dari nol. Kali ini menggunakan Halfmoon sebagai dasarnya. Dan untuk memunculkan read more awalnya menggunakan script yang lama.

Namun setelah muncul error ketika posting artikel yang ke-14 mulai mencari alternatif lain. Sampai akhirnya ketemu script auto read more dari Romeltea. Dan script inilah yang cocok saya gunakan untuk theme baruku.

Teman-teman blogger ada yang tertarik dengan pengalaman saya hari ini? Mari kita simak tulisan selengkapnya tentang cara membuat judul posting auto read more berikut ini.

Cara Membuat Judul Posting Menjadi Auto Read More

Script auto read more yang digunakan kali ini tidak memunculkan tombol atau gambar atau tulisan read more. Melainkan judul artikel yang baru kita posting tersebut bisa berfungsi seperti tombol read more.

Adapun cara-cara yang ditempuh untuk menjadikan judul posting menjadi auto read more adalah seperti tahapan berikut:

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Paste kode di bawah ini dan letakan sebelum tag </head>.

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style> .thumb img {float: left;margin: 0 20px 5px 0;width: 180px;height: 100px;padding:0 0 5px} h2.post-title {font-size: 18px; margin-bottom: 8px;} .post-body {font-size: 100%;line-height:1.3;position: relative;} .post-footer,h2.date-header {display:none} .post {margin: 0 0 15px 0;border-bottom: 1px solid #none; padding:0 0 15px;} </style> </b:if> </b:if>

4. Cari kode <data:post.body/> menggunakan fitur pencarian. Ini biasanya ditemukan di beberapa tempat. Namun yang terbukti pada theme saya yang dibuat dari nol terletak pada <data:post.body/> yang kedua.

5. Jika sudah ketemu silahkan timpa dengan kode di bawah ini. Namun untuk meminimalisir hal yang tidak diinginkan silahkan backup theme terlebih dulu.

<b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <a expr:href='data:post.url'><img expr:src='data:post.thumbnailUrl'/></a> </div> <b:else/> <div class='Image thumb'><a expr:href='data:post.url'> <img alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxgZyG805mfAm7rqx4EZ_GJ24WTpqlnH360SRhGWpnD79fZv41tFX0S2x1MMhHZrWISY9imaZ5k8KPFI6Wz_2qNnsCqvOjqt1WCzRQXA9W7249YkMiG2CXiVpwCT4aIPP0n8nY4rUq0cQ/s1600/no_available_image.png' width='180'/> </a></div> </b:if><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.title'> <h2 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h2> </b:if> </b:if> </b:if> <data:post.snippet/> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if> </b:if>

6. Kemudian cari kode <a expr:name='data:post.id'/>. Di bawah kode ini ada baris kode yang menampilkan breadcrumbs jika sebelumnya pernah memasang seperti yang saya alami. Kode baris untuk menampilkan breadcrumbs ini terlihat misalnya seperti berikut:

<b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'>Home</span></a> </span> <b:if cond='data:post.labels'> <b:loop index='num' values='data:post.labels' var='label'>  ›  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/>  ›  Does not have category </b:if> </div> </b:loop> </b:if>

7. Kode breadcrumbs di atas biarkan saja. Dan bagi yang belum memasangnya nanti terlihat ada kode berikut:

<b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if>

8. Nah, kode yang terlihat pada nomor tujuh silahkan hapus saja. Atau bagi yang masih ragu bisa menonaktifkan baris kode tersebut tanpa menghapus. Caranya dengan menambahkan karakter <!-- dan --> pada awal dan akhir kode. Fungsi tersebut akan menjadikan baris kode tersebut menjadi komentar yang tidak akan dieksekusi.

9. Langkah berikutnya silahkan pastekan baris kode berikut ini:

<b:if cond='data:blog.pageType == "item"'><b:if cond='data:post.title'><h1 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h1></b:if></b:if>

10. Letakan kode javascript di bawah ini sebelum tag </body>.

<script type='text/javascript'> //<![CDATA[ function replaceText(){if(!document.getElementById){return;} bodyText = document.getElementById("Blog1"); theText = bodyText.innerHTML; theText = theText.replace(/s72-c/gi, "s200-c"); bodyText.innerHTML = theText; }replaceText(); //]]> </script>

11. Dan kode di bawah ini yang juga diletakan sebelum tag </body>. Katanya agar gambar thumbnail tidak buram dan tidak terpotong. Nah, untuk poin ini sepertinya fungsi javascript tidak berfungsi dengan baik pada theme baru saya. Atau mungkin ada kesalahan lain yang belum saya ketahui.

<script type='text/javascript'> //<![CDATA[ function thumbnyabener(e,t){for(var g=document.getElementById(e),m=g.getElementsByTagName("img"),r=0;r<m.length;r++)m[r].src=m[r].src.replace(/\/s72\-c/,"/s"+t),m[r]}thumbnyabener("Blog1",1600); //]]> </script>

12. Klik Save untuk menyimpan perubahan pada template.

13. Hasil bisa dilihat seperti pada tautan di bawah ini.

Demo

 

Kesimpulan

Penggunaan script auto read more merupakan modal penting untuk membangun sebuah template. Dan dalam dunia blogspot ini sangatlah banyak tutorial yang membahas hal tersebut. Dengan demikian, saya berharap semoga dengan membagikan pengalaman pribadi saya tentang script auto read more ini bisa bermanfaat untuk yang lain.

Salam perdjoeangan dari blogger jabalekat.

Baca Juga