Agar
tampilan halaman depan atau homepage blog terlihat rapi, kita bisa menggunakan
tampilan read more, yang berupa judul, ringkasan dan thumbnail saja. Tampilan
singkat ini berfungsi untuk menampilkan lebih banyak postingan di halaman
depan.
Pada
template bawaan yang disediakan Blogger, halaman depan biasanya memunculkan
postingan secara penuh (full post). Bayangkan jika Anda menampilkan lima
postingan saja, tentu halaman depan blog Anda akan menjadi sangat panjang dan
kurang efektif. Oleh karena itu, kita perlu meringkasnya dengan membuat auto
read more Blogger.
Seperti
yang ada di blog ini atau banyak blog lain, maka Anda bisa melihat banyak
postingan di halaman depan. Lalu saat Anda klik, baru akan muncul postingan penuhnya.
Nah, kali ini kita akan belajar bagaimana cara membuat auto read more seperti
contoh di bawah ini:
Gambar
berada di sebelah kiri, lalu judul berada di sebelah kanan atas dan diikuti
dengan ringkasan artikel di bawahnya.
Kode
di bawah ini adalah hasil modifikasi dari beberapa kode auto read more yang
beredar di kalangan para blogger.
Membuat Auto Read More Blogger
Cara
ini bisa Anda terapkan pada template Blogger bawaan bernama Simple. Ikuti langkah-langkah
di bawah ini:
#1.
Masuk ke menu “Tema” > klik “Edit HTML”.
#2.
Temukan kode CSS </head>, kemudian letakkan kode berikut ini tepat di
atasnya:
<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: 110px;box-shadow:0;border:0;padding:0;background:#fff}h2.post-title {font-size: 18px;margin-bottom: 8px;}.post-body {font-size: 97%;line-height:1.3;position: relative;}.post-footer {display:none}.post {margin: 0 0 15px 0;border-bottom: 1px solid #f1f1f1;padding-bottom: 15px;}</style></b:if></b:if>
Kode
yang dimiringkan adalah ukuran thumbnail, jadi Anda bisa mengubahnya menjadi
lebih besar atau lebih kecil.
#3.
Masih di halaman “Edit HTML”, cari kode <data:post.body/> dengan
menggunakan CTRL+F. Biasanya akan muncul dua kode yang sama, ganti kode kedua
dengan kode di bawah ini:
<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'><img expr:src='data:post.thumbnailUrl'/></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>
#4.
Jika Anda ingin menambahkan teks “Read more” di bagian bawah deskripsi singkat,
cari kode <data:post.snippet/> lalu sisipkan kode berikut di bawahnya:
<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>
#5.
Berikutnya kita akan mengubah heading tags judul di halaman depan menjadi H2
dan menjadi H1 di halaman posting. Caranya, cari kode <a
expr:name='data:post.id'/>. Nah, di bawahnya pasti ada kode seperti di bawah
ini:
<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>Hapus, kemudian ganti kode tersebut dengan kode di bawah 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>
#6.
Terakhir, jangan lupa simpan template lalu lihat hasilnya. Ada kemungkinan
gagal karena mungkin Anda kurang teliti. Tetapi jika gagal, coba lagi dari
langkah pertama.
Cara Menyembunyikan Tanggal Posting
Secara
otomatis, di bagian atas judul auto read more biasanya akan ada tanggal
posting, link subscribe dan ikon obeng & tang. Jika tidak suka, Anda bisa
menghilangkannya dengan meletakkan kode berikut tepat di atas kode ]]></b:skin>.
.date-header,.quickedit,.feed-links {display:none}