Senin, 23 Mei 2011

HACK REQUEST 2

Datang dari komentar blog dummie Beben Koben si bloglang anu ganteng kalem tea Embah Google, salah satu sobat blogger berkomentar ...om ajarin donk bikin read more tanpa loading... begitu celetusnya. Memang pada blog dummie akuh dibuat begitu karena biar gaya dikit walaupun blog demo :D Sebenarnya cukup banyak hack dan trik membuat read more tanpa berpindah ke halaman single post. Yang susah itu mencari hacknya yang cocok untuk dipasang pada template.
Aku ambil dari master Hackosphere, semoga cocok dengan keadaan template sobat Dasa Warta sang penanya ;)) Sebelum masuk bagaimana caranya, postingan kali ini akan memberikan bonus berupa 2 buah info template gaya punya.

Pertama-tama yang harus diperlukan sobat Dasa Warta yaitu backup full template ► Expand Widget Templates dan javascript yg peletakannya diatas tag </head> Disikat deh scriptnya disini hackosphere.js or Click expand here hackosphere.js


<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
//<![CDATA[
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
//]]>
</script>
</b:if>

Yang sedikit pusing disini ini nih, susah neranginnya :( Agar berjalan hack ini sobat sudah harus menerapkan trik read more yg telah ada kode berikutPostingan yg tampak
<span id="fullpost">
Postingan yg tidak tampak
</span>
Kalau sudah ada tinggal lanjutin baca postingan ini, kalau belum ada ya harus buat terlebih dahulu ;)) Cara bikin read more untuk editor blog lama Cara Membuat Read More.

Cari kode mirip-mirip kayak begindang

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<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);' style='float:right;color:#a00'>Read More ►►</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);' style='float:right;color:#a00'>Hide it ▲▲</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Kode baris pertama-tama itu yg biasanya mirip² lalu kode yg diberi warna merah & kuning itu yg musti dimasukin :P (atur-atur saja) :D

Save and Good Luck

Bonus tara...

Crowd Blogger Template

Image and Details by: Premium Blogger Templates

Floor

Image and Details by: BestBloggerTemplates

Bye bye :-h

Tidak ada komentar:

Posting Komentar