Membuat Auto Read More Supaya Homepage Blog Lebih Ringkas

Membuat Auto Read More Supaya Homepage Blog Lebih Ringkas

Membuat Auto Read More Supaya Homepage Blog Lebih Ringkas

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.

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:

membuat auto read more blogger

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:

membuat auto read more blogger

#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 != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><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 == &quot;static_page&quot;'><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 != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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 + &quot;#more&quot;' 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 == &quot;item&quot;'><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

membuat auto read more blogger

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}

Demikian tutorial cara membuat auto read more Blogger. Jika tidak mau repot-repot membuat auto read more, maka Anda bisa memilih template lain dari pihak ketiga.
Buka Komentar