Cara Auto Read More Blogger

Thursday, December 22, 2011

Cara Membuat Read More di Blogger Blogspot secara manual dan otomatis. Memberi Read More atau Baca Selengkapnya pada artikel posting di blog kita itu perlu terutama kalau artikel kita cukup panjang, lebih dari 2 paragraf. Read More di Blogger Blogspot disebut juga dengan Jump Break, Baca Selengkapnya atau Baca Selanjutnya.
Oleh Tim Multimedia Ponpes Al-Khoirot

DAFTAR ISI

Tujuan Memasang Read More

Cara Membuat Read More Manual di Blogger

Cara Membuat Auto Read More di Blogger dengan Javascript

Cara Bikin Auto Read More di Blogger Tanpa Javascript

Apa itu Favicon?

Cara Membuat Favicon

Memasang Favicon Cara Baru (lebih mudah)

Memasang Favicon Cara Lama (via Edit HTML, lebih sulit)

TUJUAN MEMAKAI READ MORE

1. Agar halaman utama tampak rapi dan tidak terlalu panjang.
2. Waktu loading (waktu pengunjung membuka blog) juga lebih singkat. Ini bisa menambah SEO.
4. Agar pembaca blog kita betah berlama-lama di situs kita. Minimal mereka dua halaman blog kita yaitu halaman utama dan halaman setelah "Read More".
5. Sebagai teaser (penggoda) supaya pembaca lebih penasaran.

CARA MEMBUAT READ MORE MANUAL DI BLOGGER
Ada dua cara.

Cara pertama, waktu menulis artikel klik Edit HTML di kanan atas. Tambahkan kode . Artikel yang akan disembunyikan taruh di bawah kode, sedang artikel yang akan ditampakkan di halaman utama letakkan di atas kode.

Supaya mudah, simpan kode tersebut di notepad dan taruh di Desktop. Sewaktu-waktu diperlukan tinggal copy/paste.

Cara Kedua

Kotak posting dalam keadaan "Compose". kemudian klik menu Jumpbreak yang berada di samping menu Video. Lihat gambar bawah:

Kalau Anda sudah mengikuti kedua cara tersebut, tapi "read more"-nya tidak muncul, maka lakukan setting/setelan "Pilih Editor Entri yang Dimutakhirkan."

Caranya, ikuti tip berikut:

1. Caranya, masuk ke Blogger.com -> Pengaturan -> Dasar -> Setting Global (paling bawah) ->
2. Centang / kasih tanda tik pada "Editor yang dimutakhirkan."
3. Jangan lupa klik Simpan Setelan.

Kelebihan cara manual adalah lebih fleksibel. Artinya, untuk artikel pendek yang cuma satu atau dua paragraf tidak perlu memakai Read More.

CARA MEMBUAT AUTO READ MORE DENGAN THUMBNAIL DI BLOGGER DENGAN JAVASCRIPT

Pertama yang harus dilakukan adalah klik Rancangan -> Edit HTML -> tanda tik/centang Expand Widget Template. Setelah itu ikuti panduan di bawah.

Penting: coba dulu di blog eksperimen. Jangan di blog utama.

1. Cari kode </head>
2. Letakkan kode berikut di atasnya kode no. 1 (klik View plain untuk mengcopy)

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Catatan: angka-angka di atas dapat dirubah sesuai selera.

3. Cari kode berikut: <data:post.body/>
4. Ganti kode tersebut dengan kode di bawah

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

5. Klik Simpan Template. Selesai.

CARA MEMBUAT AUTO READ MORE DENGAN THUMBNAIL DI BLOGGER TANPA JAVASCRIPT

Memakai auto read-more yang dilengkapi dengan thumbnail (gambar kecil) di halaman muka atau homepage blogger tanpa javascript membuat loading blog/website akan lebih ringan. Caranya sebagai berikut:

1. Masuk/login ke blogger.com
2. Klik Template -> Lanjutkan -> Edit HTML
3. Beri tanda tik/centang pada Expand Widget Template
4. Cari kode </b:skin>
5. Taruh kode berikut sebelum atau di atasnya kode nomor 4:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

6. Cari kode berikut: <data:post.body />
7. Hapus kode nomor 6 dan ganti dengan kode di bawah:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lihat contoh pemasangan kode dalam gambar di bawah:

Auto read more thumbnail tanpa javascript

Contoh live lihat http://www.alkhoirot.net/

PERHATIAN:

1. Kalau kode <data:post.body /> lebih dari satu, maka coba kode yang kedua. Kalau tidak berhasil, coba kode yang pertama atau ketiga.

2. Kelemahan dari auto read-more tanpa javascript ini adalah snippet/post-summary atau kata yang tampil sebelum read-more sangat sedikit. Sekitar dua baris. Ini berbeda dengan auto read more dengan javascript yang jumlah kata dalam snippet dapat diatur.

_____________________________________

Memasang dan menambahkan favicon di blog berbasis blogger.com baik yang memakai blogspot atau custom domain akan menambah blog kita menjadi semakin tampak personal atau khas. Karena caranya mudah dan gratis, tidak ada salahnya Anda menambahkan favicon ke blog Anda untuk meningkatkan "citra diri". Ikuti Tutorial Cara Membuat Favicon (Favorite Icon) di Blogger Blogspot blog di sini.

1. APA ITU FAVICON

Favicon singkatan dari Favorite Icon adalah gambar kecil ukuran 16x16 (disarankan) atau 32x32 pixel yang berada berdampingan dengan alamat URL sebuah website pada browser. Favicon Alkhoirot.net dapat dilihat berada di sebelah kiri berdampingan dengan kata www.alkhoirot.net di atas. Favicon bisa berupa gambar apa saja. Termasuk foto close-up Anda sendiri yang penting filenya harus dalam format png (dianjurkan), jpg, gif.

Contoh, lihat gambar:

2. CARA MEMBUAT FAVICON

Ikuti langkah-langkah berikut:

1. Buat gambar kecil seukuran 16x16 pixel.
2. a. Anda bisa membuat sendiri apabila menguasai CorelDraw atau Photoshop. Gambar dalam format .png atau .gif.
2.b. Kalau tidak bisa memperkecil sendiri, buat secara online di salah satu situs berikut:
picresize.com.
resize2mail.com.

3. CARA MEMASANG FAVICON CARA BARU VIA RANCANGAN (LEBIH MUDAH)

Saat ini, blogger.com semakin mempermudah cara memasang favicon sendiri tanpa harus melalui Edit HTML. Cukup memasukkan gambar langsung di menu Rancangan. Ikuti panduan berikut:

1. Klik Layout/Rancangan
2. Di Favicon (kiri atas) -> klik Edit
3. Klik Browse -> masukkan gambar icon dari komputer
4. Klik Simpan/Save. Selesai.

Catatan: Butuh waktu beberapa menit atau jam agar favicon tersebut muncul di browser Anda. Untuk mempercepat, bersihkan cache browser (Firefox: Tools -> Clear Recent History)

4. CARA MEMASUKKAN FAVICON CARA LAMA KE BLOG VIA EDIT HTML

1. Buat entri/posting baru -> upload gambar favicon tersebut.
Copy link gambarnya, caranya klik Edit HTML. Contoh, lihat di sini.
2. Copy kode berikut dan masukkan link gambar favicon Anda di tempat yang ditentukan (setelah link href='gambar di sini'):
< link href='link gambar favicon di sini' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
3. Masukkan kode di atas pada Blogger.com -> Rancangan -> Edit HTML -> di atas kode <b:skin>
4. Klik Simpan Template. Selesai.

Terima kasih. Bolehkah saya memakai Favicon milik alkhoirot.net atau putri.alkhoirot.com?

Boleh. Silahkan copy dan paste kode berikut dan letakkan di atasnya kode <b:skin>

1. Kode favicon untuk putri.alkhoirot.com (gambar perempuan berjilbab).

2. Kode favicon untuk www.alkhoirot.net (logo pesantren al-khoirot).