Peek A Boo for Title Post

Apakah sobat sudah mengacak-ngacak blogger dari negara spanyol bloggers de buffalo state. Jika kalau diperhatikan secara seksama, blogger dari spanish ini ada kemiripan didalam bagian next dan previous. Dimana ada unsur expand didekat judul postingannya. Jika kita klik akan terbuka postingan tanpa berpindah. Trik ini Beben kenal sebagai PeekABooPost.
Memang itu kelebihannya dari trik tersebut. Menyembunyikan dengan bantuan javascript dan bisa kita lihat kembali. Coba sobat masuk ke blog ciudadblogger lalu klik bagian next (Anterior ») Maka perhatikan screenshot berikut

Paham lah ya ;) Langkah yang harus sobat ikuti untuk bisa merasakan fitur ini, yaitu: Backup full template terlebih dahulu ► Expand Widget Templates

Simpan script berikut diatas tag </head>

<script type='text/javascript'>
//<![CDATA[
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
//]]>
</script>
<script src=".../CiudadBlogger/Scripts/Expandibles.js" type="text/javascript"></script>

Expandibles.js

// Entradas expandibles

function showFullPost(id) {
 var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
         if (spans[i].id == "fullpost")
             spans[i].style.display = 'inline';
         if (spans[i].id == "readmore")
             spans[i].style.display = 'none';
    }
}

function showFull(id) {
 var post = document.getElementById(id);
    var spans = post.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
         if (spans[i].id == "fullpost")
             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 < spans.length; i++) {
         if (spans[i].id == "fullpost")
             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 < spans.length; i++) {
         if (spans[i].id == "fullpost")
             found = 1;
         if ((spans[i].id == "showlink") && (found == 0))
             spans[i].style.display = 'none';
    }
}

function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
    alturl = entry.link[k].href;
    break;
  }
}
alturl = alturl.replace("#", "#comment-");

if (entry.content) {
  comment = entry.content.$t;
} else if (entry.summary) {
  comment = entry.summary.$t;
}

  var re = /<\S[^>]*>/g;
  comment = comment.replace(re, "");
  document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
  if (comment.length < numchars)
     document.write(comment + '<br/><br/>');
  else
     document.write(comment.substring(0, numchars) + '...<br/><br/>');
}

}

Silahkan hosting Expandibles.js diatas oleh sobat :) Setelah itu cari kode<b:includable id='main' var='top'>Tambahkan kode-kode (tulisan warna biru) ini menjadi seperti susunan berikut...

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expand Here'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

Save

Jika tidak ada kesalahan dalam langkah² maka sukses :D Happy blogging \m/

Resource: http://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html