Cara Membuat Read More Otomatis dengan Javascript - Sebelumnya kita telah membahas cara menciptakan read more secara manual, dimana Anda harus menambahkan jump link pada setiap postingan.
Selain itu, kelemahan lain ialah konten yang terletak sehabis jump link tidak akan ditampilkan di homepage. Contoh kasus yang biasa terjadi ialah gambar.
Jika gambar tersebut terletak sehabis jump link, maka gambar tidak akan ditampilkan, alasannya ialah prinsip jump link ialah memotong postingan.
Kelemahan lain ialah tidak samanya komposisi postingan yang ditampilkan di homepage, alasannya ialah jump link sanggup diletakkan di mana saja di dalam postingan. Panjang huruf tiap postingan yang ditampilkan di homepage biasanya berbeda satu sama lain.
Nah, kali ini blog akan membahas cara menciptakan read more secara otomatis. Makara tidak perlu lagi menambahkan jump link pada setiap postingan, postingan yang tampil di homepage akan secara otomatis terpotong dengan komposisi yang sama sehingga lebih rapi dan teratur.
Read more otomatis ini prinsipnya bukan memotong postingan, tetapi hanya menampilkan huruf maksimal postingan yang tampil pada homepage sesuai dengan yang kita tentukan.
Jika dalam postingan terdapat konten lain menyerupai gambar, akan tetap ditampilkan di homepage, walaupun gambar terletak bukan di awal postingan.
1. Pada Dashboard Blogger, masuk ke Template. Pilih Edit HTML.
2. Pasang CSS untuk mengatur tombol Read More.
Letakkan sebelum isyarat ]]></b:skin>
3. Cari isyarat </head> dengan fitur search (CTRL+F). Kemudian paste-kan javascript berikut di atasnya.
Selain itu, kelemahan lain ialah konten yang terletak sehabis jump link tidak akan ditampilkan di homepage. Contoh kasus yang biasa terjadi ialah gambar.
Jika gambar tersebut terletak sehabis jump link, maka gambar tidak akan ditampilkan, alasannya ialah prinsip jump link ialah memotong postingan.
Kelemahan lain ialah tidak samanya komposisi postingan yang ditampilkan di homepage, alasannya ialah jump link sanggup diletakkan di mana saja di dalam postingan. Panjang huruf tiap postingan yang ditampilkan di homepage biasanya berbeda satu sama lain.
Nah, kali ini blog akan membahas cara menciptakan read more secara otomatis. Makara tidak perlu lagi menambahkan jump link pada setiap postingan, postingan yang tampil di homepage akan secara otomatis terpotong dengan komposisi yang sama sehingga lebih rapi dan teratur.
Cara Membuat Read More Otomatis dengan Javascript
Read more otomatis ini prinsipnya bukan memotong postingan, tetapi hanya menampilkan huruf maksimal postingan yang tampil pada homepage sesuai dengan yang kita tentukan.
Jika dalam postingan terdapat konten lain menyerupai gambar, akan tetap ditampilkan di homepage, walaupun gambar terletak bukan di awal postingan.
1. Pada Dashboard Blogger, masuk ke Template. Pilih Edit HTML.
2. Pasang CSS untuk mengatur tombol Read More.
Letakkan sebelum isyarat ]]></b:skin>
CSS
.rmlink {
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}
.rmlink a {
font-family: 'Oswald', Verdana,Sans-serif;
text-transform:uppercase;
background-color:#8AC2E5;
color:#fff;
font-size:10px;
padding:4px 8px;}
.rmlink a:hover {
background:#216792;
}
display: block;
font-size: 12px;
font-weight: bold;
text-align:right;
}
.rmlink a {
font-family: 'Oswald', Verdana,Sans-serif;
text-transform:uppercase;
background-color:#8AC2E5;
color:#fff;
font-size:10px;
padding:4px 8px;}
.rmlink a:hover {
background:#216792;
}
3. Cari isyarat </head> dengan fitur search (CTRL+F). Kemudian paste-kan javascript berikut di atasnya.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
Keterangan isyarat berwarna merah :
- summary_noimg = banyak huruf jikalau postingan tidak mengandung gambar
- summary_img = banyak huruf jikalau postingan mengandung gambar
- img_thumb_height = tinggi gambar postingan yang tampil di homepage
- img_thumb_width = lebar gambar postingan yang tampil di homepage
4. Kemudian cari isyarat <data:post.body/> dengan fitur search lagi. Saya menemukan dua isyarat <data:post.body/> di dalam template saya.
5. Hapus <data:post.body/> yang kedua atau yang terakhir (yang terletak lebih bawah), lalu gantikan dengan isyarat berikut.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> → <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> → <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Tulisan merah merupakan anchor text link, sanggup Anda ubah dengan goresan pena lain, contohnya Baca Selengkapnya. Untuk lebih memahami perihal anchor text silahkan baca Cara Membuat Link HTML di Postingan Blog.
Atau sanggup juga mengubah anchor text dengan gambar, lebih lengkapnya silahkan baca Cara Memasukkan Gambar HTML di Blog.
6. Simpan Template.
Sekian tutorial cara menciptakan read more otomatis dengan javascript. Jika masih bingung, silahkan sampaikan pertanyaan Anda pada kotak komentar di bawah.
Sumber https://duarupa.blogspot.com/
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> → <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Tulisan merah merupakan anchor text link, sanggup Anda ubah dengan goresan pena lain, contohnya Baca Selengkapnya. Untuk lebih memahami perihal anchor text silahkan baca Cara Membuat Link HTML di Postingan Blog.
Atau sanggup juga mengubah anchor text dengan gambar, lebih lengkapnya silahkan baca Cara Memasukkan Gambar HTML di Blog.
6. Simpan Template.
Sekian tutorial cara menciptakan read more otomatis dengan javascript. Jika masih bingung, silahkan sampaikan pertanyaan Anda pada kotak komentar di bawah.
Sumber https://duarupa.blogspot.com/
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Tulisan merah merupakan anchor text link, sanggup Anda ubah dengan goresan pena lain, contohnya Baca Selengkapnya. Untuk lebih memahami perihal anchor text silahkan baca Cara Membuat Link HTML di Postingan Blog.
Atau sanggup juga mengubah anchor text dengan gambar, lebih lengkapnya silahkan baca Cara Memasukkan Gambar HTML di Blog.
6. Simpan Template.
Sekian tutorial cara menciptakan read more otomatis dengan javascript. Jika masih bingung, silahkan sampaikan pertanyaan Anda pada kotak komentar di bawah.
Sumber https://duarupa.blogspot.com/
Related Posts
- Cara Semoga Link Eksternal Terbuka Di Tab BaruSebagian orang mungkin ingin supaya eksternal link yang ada di blog sanggup dibuka pada tab gres secara otomatis tanpa perlu menggantinya secara manu ...
- Cara Mematikan Klik Kanan Pada Gambar Di BlogBagi kalian yang bekerja sebagai Graphic Designer kemudian sering mengupload atau mengunggah gambarnya ke website atau blog, maka Anda perlu menonakt ...
- Cara Menciptakan Web Push Notifications Di BloggerWeb push notifications merupakan pesan atau notifikasi pop-up yang muncul pada layar desktop maupun smartphone Anda dikala membuka halaman website at ...
- Cara Menciptakan Hidangan Navigasi Blog Horizontal Sederhana Salah satu ciri blog yang disukai oleh pengunjung yakni mempunyai hidangan navigasi yang terang sehingga tidak membingungkan pengunjung dalam menelu ...
- Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
- Cara Memasang Gambar Background Random Di Blogger Membuat tampilan blog semakin menarik itu penting, semoga pengunjung situs setia Anda tidak bosan ketika sedang membaca artikel Anda. Banyak seka ...
