RSS
My Yahoo
NewsGator
Bloglines
Netvibes
GooglePada template yang saya miliki ini, kalian dapat melihat tampilan daftar isi di kolom sidebar kanan. Jika kalian berminat untuk membuat tampilan daftar isi seperti yang saya miliki, mari ikuti langkah-langkahnya di bawah ini.
Pertama-tama "loginlah" pada blog yang kalian miliki. Kemudian masuklah ke bagian "Tata Letak" dan pilih "Edit HTML". Sampai di sini seperti biasa tugas kalian adalah mencari kode yang berwarna merah ini ]]></b:skin> dan kemudian letakkan kode css tepat di atas kode yang berwarna merah tersebut dan script tepat dibawah kode yang berwarna merah tersebut.
#toc {background: #ffffff;padding:0;width:273px;margin:0;}
.toc-header-col1 {background: #ffd595;color: #000000;padding:3px 0;width:133px;text-align:center;border-bottom:1px solid #ccc;border-left:1px solid #ccc;}
.toc-header-col2 {background: #ffd595;width:59px;padding:3px 0;text-align:center;border-bottom:1px solid #ccc;border-left:1px solid #ccc;}
.toc-header-col3 {background: #ffd595;width:59px;padding:3px 0;text-align:center;border-bottom:1px solid #ccc;border-left:1px solid #ccc;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:3px 3px;font-size:10px;border-bottom:1px solid #ccc;border-left:1px solid #ccc;background-color:#EAE9E9}
.toc-header-col1 a:link, .toc-header-col1 a:visited,
.toc-header-col2 a:link, .toc-header-col2 a:visited,
.toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:10px;text-decoration:none;color:#000;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover,
.toc-header-col3 a:hover {font-size:10px;text-decoration:underline;}<script type='text/javascript'>
//<![CDATA[
var postTitle = new Array();
var postUrl = new Array();
var postDate = new Array();
var postSum = new Array();
var postLabels = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = '';
function loadtoc(json) {
function getPostData() {
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
for (var i = 0; i < numEntries; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postdate = entry.published.$t.substring(0,10);
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\')" title="Klik di sini untuk memilih melalui kategori \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>; ';
}
var l = pll.lastIndexOf(';');
if (l != -1) { pll = pll.substring(0,l); }
}
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
}
// numEntries = json.feed.entry.length;
getPostData();
sortPosts(sortBy);
tocLoaded = true;
}
function filterPosts(filter) {
postFilter = filter;
displayToc(postFilter);
}
function allPosts() {
postFilter = '';
displayToc(postFilter);
}
function sortPosts(sortBy) {
function swapPosts(x,y) {
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
}
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
}
function displayToc(filter) {
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'Judul Post';
var tocTool1 = 'Klik untuk mengurutkan melalui judul';
var tocHead2 = 'Tanggal';
var tocTool2 = 'Klik untuk mengurutkan melalui tanggal';
var tocHead3 = 'Label';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (descending)';
tocTool2 += ' (yang lebih baru dahulu)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (ascending)';
tocTool2 += ' (yang lebih baru dahulu)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (yang lebih baru dahulu)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (Yang lebih lama dahulu)';
}
if (postFilter != '') {
tocTool3 = 'Klik untuk melihat seluruh posting';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a style="color:red" href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a style="color:red" href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a style="color:red" href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a style="color:#0066CC" href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a style="color:#0066CC" href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">Tampilkan seluruh ' + postTitle.length + ' postingan<br/></span>'; }
else {
var tocNote = '<span class="toc-note">Tampilkan ' + numDisplayed + ' kategori post \'';
tocNote += postFilter + '\' dari '+ postTitle.length + ' seluruh postingan<br/></span>';
}
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = tocNote + tocTable;
}
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
}
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
}
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="javascript:hideToc();">Sembunyikan daftar isi</a><br/><br/>';
}
else { alert("Tunggu sebentar.... daftar isi sedang di loading !"); }
}
function hideToc() {
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = '';
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="javascript:showToc();">Tampilkan Daftar isi</a><br/><br/>';
}
//]]>
</script>
<script src='http://nama blog kalian.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc'/>Tulisan yang barwarna biru pada kolom Script di atas kalian ganti dengan nama blog kalian. Kemudian setelah kalian masukkan kedua kode di atas pada posisinya masing-masing, simpan template kalian dan beralihlah ke bagian "Elemen Halaman" dan masukkan kode widget di bawah ini pada kolom sidebar kalian. Untuk penjelasan ini kalian bisa baca di sini.
Kode Widget<div id="toclink">
<center><b>Klik link di bawah ini untuk menampilkan daftar isi!</b></center><br/><br/>
<a href="javascript:showToc();"><center>Tampilkan Daftar Isi</center></a>
</div>
<div id="toc"></div>Oya..,untuk menyesuaikan ukuran tabel daftar isi dengan ukuran kolom sidebar template blog yang kalian miliki, silahkan kalian atur saja kode Css-nya. Good Luck Friends...!!!
0 komentar:
»» LIHAT / TUTUP KOMENTAR
:));));;):D;):p:):((:(\m/:-bdb-(:-L@};-(*)[-X~O)B-):!!:O):-??:-c:X=((:-o:-/:-*:|8-}:)]:ar!=))X_X:-h:-":-t#:-S:-?:-$#-o:-B:bzo-+:o3"Silahkan copy-paste kode shortcut yang ada di bawah gambar untuk menampilkan emoticons pada komentar kamu"
Posting Komentar