We Are Creative Design Agency

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, fuga, consectetur sequi consequuntur nisi placeat ullam maiores perferendis. Quod, nihil reiciendis saepe optio libero minus et beatae ipsam reprehenderit sequi.

Find Out More Purchase Theme

Our Services

Lovely Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

Great Concept

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

User Friendly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

Recent Work

Kamis, 28 Maret 2024

cara membuat read more

 

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika ingin supaya postingan yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

1. Buka menu Layout kemudian pilih Edit HTML.

2. Kasih tanda cek (centang) pada cekbox "expand widget template"

3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

kotak "expand widget templateny" dicentang dulu.

<div class='post-body entry-content'>


kalo ketemu maka dibawahnya ada kode ini :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode yang ini <p><data:post.body/></p> menjadi seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>


Tulisan "Read More....." itu bisa diubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">
</span>

8. Kemudian Simpan.

9. Ketika memposting, disana ada 2 tab pilihan, yang "Compose" dan "Edit Html", pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">

</span>


10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

11. Selesai


B. Teknik Read More yang lain


Kalau read more yang sebelumnya, kalau kita klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita. Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lai. Berikut ini langkah-langkahnya:



1. Login ke Blogger

2. Pilih Layout --> Edit HTML

3. Kalau mau memback-up template kamu dulu klik tulisan Download Template lalu simpan.

4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget

5. Kopi kode berikut ini dan taruh tepat diatas kode </head>


<script src='https://kendhin.890m.com/Readmore.js'

type='text/javascript'/>


6. Kalo sudah cari kode dibawah ini

<div class='post-header-line-1'/>


(letaknya kira-kira di bagian tengah kebawah)


7. D ibawahnya ada kode <div class='post-body entry-content'> ganti kode tersebut menjadi seperti ini:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>


8.Terus dibawahnya ada kode gini <p><data:post.body/></p>

9. Tambahkan kode ini dibawahnya.

<b:else/>

<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. jadi seluruh kodenya akan menjadi seperti ini :



<div class='post-header-line-1'/>

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>



<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>


12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.



<span id="fullpost">

</span>
selesai....


Kalau memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>

Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini? caranya :

'Read more' yang lama kodenya seperti ini :



<div class='post-header-line-1'/>

<div class='post-body entry-conten'>


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>


<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>

</b:if>

hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas, lalu ikuti langkah berikut ini :


1. Pilih menu Setting -->> Formatting

2. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.


<span id="fullpost">

</span>


bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".

Our Blog

55 Cups
Average weekly coffee drank
9000 Lines
Average weekly lines of code
400 Customers
Average yearly happy clients

Our Team

Tim Malkovic
CEO
David Bell
Creative Designer
Eve Stinger
Sales Manager
Will Peters
Developer

Contact

Talk to us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iusto fugit esse soluta quae debitis quibusdam harum voluptatem, maxime, aliquam sequi. Tempora ipsum magni unde velit corporis fuga, necessitatibus blanditiis.

Address:

9983 City name, Street name, 232 Apartment C

Work Time:

Monday - Friday from 9am to 5pm

Phone:

595 12 34 567

Diberdayakan oleh Blogger.

cara membuat read more

  Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan terlalu panjang maka hal tersebut akan membuat p...

Cari Blog Ini

?max-results=10">More
');
    ?orderby=published&alt=json-in-script&callback=labelposts1\"><\/script>");
?max-results=10">More
');
    ?orderby=published&alt=json-in-script&callback=labelposts\"><\/script>");

Recent Posts

About

recent comments

Facebook

Featured

Popular Posts