Cara membuat Jump Break Link dengan Membuat Tulisan Read More

Membuat Link Read More di postingan website atau kalau saya menyebutnya sebagai highlight postingan blog di home screen kita atau kerennya sih disebut jump break merupakan hal penting karena memberikan informasi secara singkat bagi pengunjung apa saja postingan terbaru kita di blog. Selain itu, hal ini akan memberikan nilai lebih ke pengunjung dengan membuat page view visitor kita meningkat ketika pengunjung mengekliknya. Keuntungan lainnya adalah dengan adanya jump break ini maka akan mempercepat proses loading karena akan memperkecil file yang di download.

Di postingan kali ini, kita akan mempelajari:

1. Cara agar postingan kita dapat ditampilkan secara singkat dengan menggunakan link Read More.
2. Menentukan berapa banyak teks yang ingin ditampilkan pada ringkasan singkat di home page yang kita buat.
3. Menjadikan gambar yang kita postkan di blog menjadi ikon thumbnail yang dtunjukkan pada ringkasan homepage.
4. Menentukan ukuran dari thumbnail tersebut.

Langsung saja ke Bagaimana Cara Menambah Read More di Bogspot.com

Langkah 1. Di blogger dashboard tampilan lama anda masuk ke menu design. Kalau Anda masih berada di dashboard versi baru sebaiknya anda pindah tampilan dengan melihat info cara mengubah tampilan dashboard versi baru ke tampilan dashboard versi lama berikut ini. Setelah masuk, pilih blog yang anda ingin ubah. Lalu,Pilih Edit HTML> Pilih download full Template > kemudian centang The Expand Widget Templates Box yang ada dihalaman Edit HTML tersebut. Full Download template tersebut sangat penting untuk mengantisipasi terjadinya kesalahan ketika edit HTML code dilakukan yang membuat template kita tidak bekerja.

Langkah 2. Temukan kode berikut ini di kolom HTML edit yang kita buka.

</head>

Langkah 3. Lalu letakkan kode berikut ini di atas code </head> dengan caramengkopi pastenya.

<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>

Catatan penting:

summary_ noimg= 430; menunjukkan panjang dari ringkasan teksyang kita inginkan tanpa danya thumbnail gambar.

summary_img = 340; menentukan panjang dari teks yang kita inginkan dengan menyertakangambar thumbnail yang ada.

null_thumb_height = 120; menentukan tinggi thumbnail yangdiingikan.

null_thumb_width = 120; Menentukanlebar thumbnail yang ada di web home kita.

Langkah 4. Temukan dan ganti script <data:post.body/> dengancode di bawah 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>

Langkah 5. KlikTombol Save yang ada dibagian pojok kanan bawah dari edit HTML. SELESAI....

IT' WORKS?!!

Related Article:

Posted By John Cobra

My real name is Fauzan Ahmadi, i used the name of john cobra because people are used to called me john. I am a person that always have dreams to be achieved and always never gived up in everything i have started eventhough the difficulties is so tight. Right now i am still studying in an university and still doing my hobby to share information that i have got in every article that i read. I really like to make friends more and more contact me

Thank You