Simple Read more

Berikut ini saya tampilkan hasil belajar javascript dan HTML untuk membuat read more, semuanya sudah dijelaskan dalam script, jadi yang mau download ya silahkan ini read[more] nya, jangan lupa buka menggunakan notepad lalu di save as menjadi extensi .html (karena wordpress hanya memperbolehkan jenis file upload berupa file jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx, key.) dan kalo yang mau mengikuti ya sumonggo simak script di bawah ini 🙂 

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE HTML>
<html>
<head>

<title>Simple Read[more]</title>

<style type="text/css">
body{
width: 85%;
margin: 0 auto;
padding: 0 10px 10px 10px;
font-size: 14px;
box-shadow: 0 0 1px gray;
-o-box-shadow: 0 0 2px gray;
-moz-box-shadow: 0 0 2px gray;
-webkit-box-shadow: 0 0 2px gray;
}
.post{
width: 98%;
margin: auto;
}
.post h1{
margin: 0;
padding: 5px 0;
font-weight: normal;
color: #333333;
}
.post p{
margin: 3px 0 6px 0;
line-height: 143%;
color: #333333;
}
.post p:first-letter{
color: black;
font-size: 17px;
font-weight: bold;
}
.post .excerpt_kontent{
display: none;
}
.post .excerpt_kontrol{
color: blue;
text-decoration: none;
}
.post .excerpt_kontrol:hover{
color: red;
}
</style>

<script type="text/javascript">

/** kontrol , lengkap , teks_lengkap
* pemanggilan disesuaikan dengan kebutuhan
* kontrol,lengkap,teks_lengkap bisa diganti
* pada event onclick sesuai dengan id masing"
* Sehingga fungsi ini bisa dipakai berulang-ulang
*/
function readmore( kontrol , lengkap , teks_lengkap ){

// menyembunyikan kontrol setelah di klik
document.getElementById(kontrol).innerHTML = '';

// buat variabel yang mengambil isi dari teks_lengkap
var text = document.getElementById(teks_lengkap).innerHTML;

// atur isi tempat teks pelengkap dengan variabel text
// variabel text sudah berisi teks dari teks lengkapnya
document.getElementById(lengkap).innerHTML = text;

}

</script>
</head>

<body onload="sets()">

<div>
<h1>Hello world</h1>
<p>
Aku is yours. Whatever you think, you do, you try, or you decline...
I'm yours. Whatever you think, you do, you try, or you decline...I'm yours.
Whatever you think, you do, you try, or you decline...I'm yours. Whatever
<a class="hiddenSpellError" id="kontrol_1"></a>onclick="readmore('kontrol_1','kontent_1','kontent_1_')" href="#">[more]
<span id="kontent_1"><!-- <span class="hiddenSpellError" pre="">Kosongi</span> --></span>
<span id="kontent_1_">
you think, you do, you try, or you decline...I'm yours. Whatever you think,
you do, you try, or you decline. I'm yours. Whatever you think, you do, you
try, or you decline...I'm yours. Whatever you think, you do, you try, or you
decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours.
Whatever you think, you do, you try, or you decline.
</span>
</p>
</div>

<div>
<h1>Hi guys</h1>
<p>I'm yours. Whatever you think, you do, you try, or you decline...I'm yours.
Whatever you think, you do, you try, or you decline...I'm yours. Whatever you
think, you do, you try, or you decline...I'm yours. Whatever you think, you do,
you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline.
<a id="kontrol_2" onclick="readmore('kontrol_2','kontent_2','kontent_2_')" href="#">[more]</a></p>
<span id="kontent_2"><!-- <span class="hiddenSpellError" pre="">Kosongi</span> --></span>
<span id="kontent_2_">
<p>Firstly I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline</p>
<p>Second I'm still yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline...I'm yours. Whatever you think, you do, you try, or you decline</p>
</span>
</div>

</body>
</html>

<!--

<div id="post"></pre></pre>
<h1>Judul artikel</h1>
<pre>
<pre>
<p>
Aku is yours. Whatever you think, you do, you try, or you decline... I'm
<a id="<span class="></a>kontrol" onclick="readmore('kontrol','lengkap','selengkapnya')" href="#">[more]
<span id="<span class=">lengkap</span>">
<span id="<span class=">selengkapnya</span>" style="display: none;">
yours. Whatever you think, you do, you try, or you decline...I'm yours.
think, you do Whatever you think, you do, you try, or you decline...I'm
yours. Whatever think, you do you think, you do, you try, or you.
</span>
</p>

</div>

Penjelasan :

1. tag a memiliki attribute id , href dan event onclick
id = sebagai inisial tag tersebut [agar memiliki identitas saat dimanipulasi]
href = tuliskan saja # karena kita tidak akan nge-link kemanapun
onclick = fungsi javascript yang dijalankan saat tag tersebut di klik [value di dalamnya bisa diganti sesuai kebutuhan]
'kontrol' = id dari tag a yang di klik
'lengkap' = id dari tempat text yang akan dimunculkan [lihat baris selanjutnya pada
'selengkapnya'= id dari teks selengkapnya yang tersembunyi [lihat baris selanjutnya pada

-->

Pada intinya lihat bagian tag head dan implementasinya dalam tag p (artikel)

Advertisements