Cara Membuat Baca Selengkapnya (Read More) Pada Postingan Blogspot Anda Secara Otomatis

Lunfix.com - Pada pembahasan kali ini saya akan membahas mengenai bagaimana cara membuat baca selengkapnya (Read More) pada postingan blogspot Anda secara otomatis, bagi Anda para blogger pemula yang belum mengetahuinya bisa Anda simak langkah-langkah cara membuat baca selengkapnya (Read More) pada postingan blogspot Anda secara otomatis di pembahasan ini.

Cara Membuat Baca Selengkapnya (Read More) Pada Postingan Blogspot Anda Secara Otomatis

Para blogger pemula yang membuat blog dengan blogspot, biasanya pada awal membuat blog akan menggunakan tema blog bawaan blogspot. Tersedia beberapa pilihan tema blog bawaan blogspot yang bisa Anda pilih dan digunakan langsung secara gratis.

Ada kemungkinan juga pada awal-awal membuat blog bagi para blogger pemula, belum terlalu memperhatikan tampilan blognya sesudah selesai menulis dan mempostingnya. 

Bila Anda perhatikan, tampilan postingan Anda dengan menggunakan tema blog bawaan blogspot pada halaman depan blog Anda akan tampil secara penuh dengan tulisan yang sudah Anda posting, dan di bawah postingan tersebut terdapat postingan sebelumnya dengan tampilan penuh tulisan juga.

Hal tersebut membuat tampilan blog Anda pada halaman depan blog jadi memanjang ke arah bawah yang menampilkan beberapa postingan Anda secara penuh dengan tulisan yang sudah Anda posting, betul ?

Lama-kelamaan bila Anda serius menekuni dunia blog dan bertekad menggunakan tema blog bawaan blogspot, Anda juga akan bertanya kepada diri sendiri kenapa tampilan blog Anda berbeda dengan tampilan blog orang lain padahal tema blog yang digunakan sama, yaitu menggunakan tema blog bawaan blogspot walaupun beda dalam pemilihan jenis tema blognya.

Bila Anda perhatikan, tidak sedikit blogger yang menggunakan tema blog bawaan blogspot, memang tampilan blognya jadi berbeda dengan tema blog bawaan blogspot aslinya, karena mereka melakukan pengeditan pada tema blog bawaan blogspotnya.

Seperti halnya tema blog yang saya gunakan, saya menggunakan tema blog bawaan blogspot, yaitu tema PT. Keren Sekali (Awesome Inc.). Memang tampilan blog saya belum sempurna, karena saya masih melakukan pengeditan di sana-sini pada tema blog bawaan blogspot yang saya gunakan.

Dan saya bertekad untuk terus melakukan pengeditan pada tema blog bawaan blogspot yang saya gunakan, karena saya yakin tema blog bawaan blogspot yang saya gunakan juga bisa tampil menarik dan enak untuk dilihat, walaupun tidak sesempurna tampilan blog yang digunakan oleh para master blog yang sudah lama berkecimpung di dunia blog, karena saya bukan jagoan coding.

Postingan pada halaman depan bagi yang menggunakan tema blog bawaan blogspot bisa dirubah tampilan postingannya, dari yang tadinya postingan tampil penuh tulisan, menjadi tulisan hanya sebagian saja dan ada tambahan kalimat Baca Selengkapnya (Read More) atau kalimat lainnya seperti Baca Selanjutnya, Selengkapnya, Lanjut Baca atau lainnya sesuai dengan yang Anda inginkan pada kanan bawah, tengah bawah, atau kiri bawah.

Baca juga : Cara Membuat Baca Selengkapnya (Read More) Pada Postingan Blogspot Anda Secara Manual

Langkah-langkah Cara Membuat Baca Selengkapnya (Read More) Pada Postingan Blogspot Anda Secara Otomatis

Buka blogspot (www.blogger.com) Anda.

Masuk ke menu blogspot, pilih Tema, lalu pilih Edit HTML.

Cari </head> pada kotak HTML dengan cara tempatkan kursor di mana saja, klik Ctrl + F, ketikkan </head>, bila sudah ada, masukkan kode di bawah ini di atas </head> :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 100;

summary_img = 100;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};

//]]>

</script>

Perhatikan pada tulisan berwarna merah :

summary_noimg = 100;
summary_img = 100;
img_thumb_height = 120;
img_thumb_width = 120;


Angka-angka tersebut bisa Anda ganti sesuai dengan kebutuhan Anda, fungsinya untuk mengatur jumlah huruf yang akan ditampilkan dan mengatur lebar dan tinggi gambar pada postingan.

Langkah selanjutnya cari <data:post.body/>, bila sudah ada, ganti semua kode <data:post.body/> yang ada di tema blog bawaan blogspot Anda dengan kode di bawah, kalau di tema blog bawaan blogspot yang saya gunakan terdapat 2 kode tersebut, bila pada tema blog bawaan blogspot yang Anda gunakan ada beberapa, misalkan lebih dari 2, ganti semuanya, sebelum disimpan, lihat dulu hasilnya di Pratinjau tema, bila kodenya sudah berfungsi, pilih Simpan tema.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b><div style="border: 1px solid #444; padding: 10px; background-color: #FFFFFF; text-align: left;">Baca Selengkapnya</div></b></a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Perhatikan pada :

'float:left' (tulisan berwarna biru) : fungsinya untuk mengedit letak kalimat Baca Selengkapnya atau kalimat lainnya yang Anda pilih, diganti saja dengan center atau right sesuai dengan selera Anda.

<div style="border: 1px solid #444; padding: 10px; background-color: #FFFFFF; text-align: left;">Baca Selengkapnya</div> (tulisan berwarna merah) : pada kalimat Baca Selengkapnya bisa Anda ganti dengan kalimat lain seperti Read More, Baca Selanjutnya, Selengkapnya, Lanjut Baca atau kalimat lainnya sesuai dengan yang Anda inginkan.

background-color: #FFFFFF : fungsinya untuk mengganti warna background pada kalimat Baca Selengkapnya (Read More), di pembahasan ini saya menggunakan kotak dan background putih pada tulisan Baca Selengkapnya, bila Anda menginginkan warna lain ganti saja FFFFFF dengan warna yang Anda inginkan, tentu saja Anda harus mengetahui terlebih dulu kode warnanya.

Bila Anda menginginkan kalimat Baca Selengkapnya (Read more) tanpa kotak, hapus saja tulisan yang berwarna merah semuanya dan ganti dengan kalimat yang Anda inginkan, nanti yang muncul hanya kalimatnya saja. 

Tetapi bila Anda menginginkan pilihan kotak lainnya atau tanpa kotak tetapi menggunakan warna background pada kalimat Baca Selengkapnya (Read More), Anda bisa menggunakan kode kotak script yang Anda ketahui lalu ganti tulisan merah dengan kode script yang Anda pilih.

Baca juga : Cara Membuat Kotak Script dan Kotak Scroll Pada Postingan Blogspot Anda Dengan Mudah

Kesimpulan

 

Proses cara membuat baca selengkapnya (Read More) pada postingan blogspot Anda secara otomatis sudah selesai. Dengan melakukan langkah-langkah di atas, tampilan postingan pada tampilan blogspot Anda akan berubah dengan adanya kalimat Baca Selengkapnya (Read More) atau kalimat lainnya yang Anda gunakan secara otomatis.

Semoga bermanfaat..