Cara Menciptakan Read More Otomatis Ringan Dan Rapi
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 yaitu konten yang terletak sesudah jump link tidak akan ditampilkan di homepage. Contoh kasus yang biasa terjadi yaitu gambar.
Jika gambar tersebut terletak sesudah jump link, maka gambar tidak akan ditampilkan, sebab prinsip jump link yaitu memotong postingan.
Kelemahan lain yaitu tidak samanya komposisi postingan yang ditampilkan di homepage, sebab jump link sanggup diletakkan di mana saja di dalam postingan. Panjang aksara tiap postingan yang ditampilkan di homepage biasanya berbeda satu sama lain.
Nah, kali ini blog akan membahas cara menciptakan read more secara otomatis. Kaprikornus 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 aksara 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 arahan ]]></b:skin>
3. Cari arahan </head> dengan fitur search (CTRL+F). Kemudian paste-kan j4vascript berikut di atasnya.
Keterangan arahan berwarna merah :
4. Kemudian cari arahan <data:post.body/> dengan fitur search lagi. Saya menemukan dua arahan <data:post.body/> di dalam template saya.
5. Hapus <data:post.body/> yang kedua atau yang terakhir (yang terletak lebih bawah), lalu gantikan dengan arahan berikut.
Tulisan merah merupakan anchor text link, sanggup Anda ubah dengan goresan pena lain, contohnya Baca Selengkapnya. Untuk lebih memahami wacana 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 j4vascript. Jika masih bingung, silahkan sampaikan pertanyaan Anda pada kotak komentar di bawah. Sumber http://duarupa.blogspot.com
Selain itu, kelemahan lain yaitu konten yang terletak sesudah jump link tidak akan ditampilkan di homepage. Contoh kasus yang biasa terjadi yaitu gambar.
Jika gambar tersebut terletak sesudah jump link, maka gambar tidak akan ditampilkan, sebab prinsip jump link yaitu memotong postingan.
Kelemahan lain yaitu tidak samanya komposisi postingan yang ditampilkan di homepage, sebab jump link sanggup diletakkan di mana saja di dalam postingan. Panjang aksara tiap postingan yang ditampilkan di homepage biasanya berbeda satu sama lain.
Nah, kali ini blog akan membahas cara menciptakan read more secara otomatis. Kaprikornus 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 aksara 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 arahan ]]></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 arahan </head> dengan fitur search (CTRL+F). Kemudian paste-kan j4vascript berikut di atasnya.
<script type='text/j4vascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/j4vascript'>
//<![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/j4vascript'>
//<![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 arahan berwarna merah :
- summary_noimg = banyak aksara kalau postingan tidak mengandung gambar
- summary_img = banyak aksara kalau 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 arahan <data:post.body/> dengan fitur search lagi. Saya menemukan dua arahan <data:post.body/> di dalam template saya.
5. Hapus <data:post.body/> yang kedua atau yang terakhir (yang terletak lebih bawah), lalu gantikan dengan arahan 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/j4vascript'>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/j4vascript'>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 wacana 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 j4vascript. Jika masih bingung, silahkan sampaikan pertanyaan Anda pada kotak komentar di bawah. Sumber http://duarupa.blogspot.com
0 Response to "Cara Menciptakan Read More Otomatis Ringan Dan Rapi"
Posting Komentar