Membuat Auto ~Read More~ Jump Breaks di blogspot anda

Membuat Auto Link "Read More" (Jump Breaks) ke artikel terkait pada blog di blogspot anda adalah merupakan salah satu fitur blogger. Dengan memanfaatkan ini, jika template anda tidak mendukung "pemotongan kalimat" pada artikel untuk di tampilkan oleh halaman utama anda, anda bisa membuatnya secara manual. Link Read More ke artikel terkait ini juga akan ditampilkan pada halaman "search/label/" dan juga halaman arsip tanggal, bulan dan tahun. Pemotongan kalimat pada artikel (Jump breaks) dimaksudkan untuk kemudahan navigasi pengunjung blog anda. Juga mempercepat waktu untuk memuat halaman, Pengunjung dapat memilih artikel mana yang hendak mereka baca. Disamping itu juga, mencegah anda memotong bagian artikel yang ditampilkan dihalaman utama secara manual saat mengedit dokumen, sehingga anda tidak perlu kuatir jika suatu waktu anda lupa melakukannya.

Keunggulan Link Auto Read Mode Paul Crowe

Saya menggunakan script dari Paul Crowe, yang akan secara otomatis mengubah artikel menjadi 'read more' pada ringkasan halaman utama blog anda dengan tambahan image thumb. Berikut ini adalah beberapa fiturnya :

• Memotong artikel panjang anda dengan beberapa baris untuk ditampilkan di halaman utama dan beberapa halaman lain dan secara otomatis memberikan link ke artikel terkait.
• Gambar pertama dari artikel ditampilkan dgn ukuran thumbnail dan ditampilkan di samping ringkasan.
• Anda bisa mengatur berapa banyak teks ditampilkan dalam ringkasan.
• Anda dapat memilih ukuran thumbnail.
• Semua artikel sebelumnya akan diperlakukan sama sehingga anda tidak usah membuka arsip-arsip blog anda.
• Halaman lain seperti pada halaman label dan halaman arsip akan mengikuti seperti pada halaman utama

Langkah-langkah Membuat Membuat Auto ~Read More~ Jump Breaks secara Manual

Langkah 1 :

Log in ke Dashboard blog anda dan Navigasi ke Layout > Edit HTML.

Langkah 2 :

Termukan kode Berikut

</head>

Langkah 3 :

Cari kode dan tambahkan kode dibawah sebelum (diatas) tag . Note : Jika template anda mendukung perangkat Mobile, tempatkan script Javascript ini pada bagian awal javascript pada bagian :

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' >
</script>


Keterangan Pengaturan diatas :

Kode pada tulisan biru mengatur tentang bagaimana ringkasan artikel ditampilkan. Jika artikel mempunyai image, thumbnail image akan ditampilkan disamping ringkasan. Berikut ini keterangannya :

summary_ noimg= 430; --> Panjang ringkasan jika artikel tidak memiliki thumbnail.
summary_img = 340; --> Panjang ringkasan jika artikel memiliki image, image di konversi ke ukuran thumbnail.
null_thumb_height = 120; --> Tinggi Pixels thumbnail.
null_thumb_width = 120; --> Lebar Pixels thumbnail.

Langkah 4 :

Langkah selanjutnya, temukan bagian berikut dari kode pada body blog anda. (Gunakan kombinasi tombol Ctrl + F untuk mempercepat pencarian). <data:post.body>

Langkah 5 :

Kemudian ganti kode <data:post.body> dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'>
<a expr:href='data:post.url' >Read more ... </a>
</span>
</b:if>
</b:if>


Anda bisa rubah tulisan "Read More..." warna biru diatas dengan nama lain, Misal : Baca selengkapnya ... , Baca Artikel .... dan lain-lain.

Langkah 6 :

Klik Simpan Pengaturan Template. Jika terjadi error, itu menandakan adanya bagian yang tidak terinput.



Sumber : http://bloggedtips.blogspot.com/2011/12/insert-automatic-read-more-jump-breaks.html

Views