Daftar Isi Slide in Top Bar

Saat membuka http://www.blogger.com/, coba pilih bahasa Indonesia, pada sisi kiri dibawah tulisan BLOG DI UPDATE PADA ..., tampak tulisan yang berubah-ubah setiap saat. Jika anda menaruh cursor di atasnya text tersebut akan link ke alamat blog saat di klik.

Sebenarnya trik tersebut bisa juga jadi solusi bagi pengguna blog yang ingin artikel lamanya tetap exist dan tampil pada layout halaman meskipun tak lagi jadi headline.

Jika ada yang tertarik menggunakannya, berikut adalah scriptnya :

<script type="text/javascript">

var delay = 4000;
var maxsteps=30;
var stepdelay=40;
var startcolor= new Array(255,255,255);
var endcolor=new Array(0,0,0);

var fcontent=new Array();

begintag='<div style="font: bold 11px verdana; padding: 2px;z-index:125">';

function srk(json) {
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++)
{
var entry = json.feed.entry[i];
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
fcontent[i]=json.feed.entry[i].title.$t.link(posturl);
}
}
closetag='</div>';

</script>
<script src="http://abgamal.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=srk"></script>

<script>
var fwidth='450px';
var fheight='10px';

var fadelinks=1;


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}


function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>=1){
for (i=0;i<=obj.length-1;i++)
obj[i].style.color=getstepcolor(step);
}
}


var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);

}
}


function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<=2;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4DOM2)
document.write('<div id="fscroller" style="border:0px solid black;z-index:125;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>


Bagian yang berwarna merah ganti dengan alamat blog anda,
kemudian buka TATA LETAK > TAMBAH GADGET > HTML/JAVASCRIPT >
Copy Paste script diatas

Kemudan di Save
Semoga sukses
Selanjutnya...

Daftar Isi Scroll Bar

Daftar isi blog anda sudah terlalu banyak, anda malas melihatnya terlalu panjang ke bawah, sehingga seakan mengganngu penampilan blog anda. Jika Anda ingin mengakalinya sedemikian rupa agar tampak lebih simple tapi komplit, sebaiknya gunakanlah LAYER WITH SCROLLBAR. Prinsipnya, daftar isi blog dimasukkan ke dalam layer, kemudian layer kita atur lebar dan panjangnya, sehingga jika daftar isi melebihi panjang layer maka halaman secara otomatis di scroll dengan scrollbar.

Tag html layer adalah :

<ilayer clip="0,0,170,150" width="170" height="150">
<layer width="170" height="150"
bgcolor="lightyellow">
<div style="width:200px;height:250px;background-color:lightyellow;overflow:auto;display:block;font-family:trebuchet;font-size:11px;color:#000000;padding:5px">

Disini anda masukkan script daftar isi anda

</div>
</layer>
</ilayer>

Selengkapnya adalah :
.......Bagian Awal Yang Harus Anda Copy Paste.....

<script>
function hyoga(json) {
document.write('<ilayer clip="0,0,170,150" width="170" height="150">');
document.write('<layer width="170" height="150" bgcolor="lightyellow">');


document.write('<div style="width:200px;height:250px;background-color:lightyellow;overflow:auto;display:block;font-family:trebuchet;font-size:11px;color:#000000;padding:5px">');

for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {


var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

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, "");

document.write('<font color="#006400"><b>');
document.write(posttitle);
document.write('</b></font>');


if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);
document.write('<br><br/>');
}

}



}
document.write('</div>');
document.write('</layer>');
document.write('</ilayer>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>

<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=hyoga"></script>


......Bagian Akhir yang harus anda copy paste....

Ganti tulisan yang berwarna merah dengan alamat blog anda di blooger.com, setelah itu buka webside http://www.blogger.com, isi account anda, buka Tata Letak > Tambah Gadget > Javascript/HTML >
Copy Paste script diatas kemudian save/simpan

Selanjutnya...

Daftar Isi Auto Scroll

Anda mungkin ingin menampilkan Daftar Isi Artikel yang sudah diposting, tertata secara berurut ke bawah pada sidebar blogger anda, tapi anda kurang sreg melihat daftar isi tersebut terlalu panjang kebawah. Tak perlu bingung. Anda dapat mensiasatinya dengan menggunakan MARQUEE VERTICAL WITH PAUSE, yaitu sroll secara automatis keatas (vertical) yang saat mouse diletakkan diatasnya (mouse over), tulisan berhenti scroll dan sebaliknya jika mouse keluar (mouse out), tulisan akan bergerak kembali. Seperti contoh yang terlihat pada RECENT COMMENT

Selain itu dengan tehnik yang sama, Daftar Komentar juga bisa anda buat seperti itu.

Tehniknya mudah
Pertama-tama, buka blogger.com. pilih Tata Letak > Tambah Gadget > HTML/Javascript >

Copy Pasta Script dibawah ini

<script>
function gml(json) {

document.write('<marquee scrolldelay="180" direction="up" onmouseover="this.stop()" width="170px" onmouseout="this.start()">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {

document.write('<p style="padding : 2px">');
var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

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, "");

document.write(posttitle);

if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</p>');
}


document.write('</marquee>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>


<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=gml"></script>

Ganti tulisan yang berwarna merah dengan alamat blog anda di Blogger

kemudian simpan (save)

Untuk Daftar Komentar

script dibawah ini

<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=gml"></script>

ganti dengan

<script src="http://infomediss.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=gml"></script>

tulisan yang berwarna merah ganti dengan alamat anda yang ada di blogger

kemudian Simpan (save)
Selanjutnya...

Daftar Isi Slide in Page

Mungkin Anda tertarik membuat Daftar Isi Artikel yang anda posting ditampilkan secara slide in pada halaman layout anda, seperti contoh yang terlihat pada RECENT POST ini. Anda bisa menampilkan semua postingan anda, tanggal publish dan sekelumit informasi tentang artikel.

Untuk membuat Daftar isi Slide In Page, tidak terlalu sulit. Cukup menggunakan javascript. Dibawah ini adalah tag-tag scriptnya:

Langkah Pertama adalah buka blogger.com, masuk ke Tata Letak > Edit html

kemuadian sebelum tag </head> anda ketikkan script berikut


<style>#contentwrapper{width: 170px;height: 190px;border: 0px solid black;background-color: #ffffff;padding: 0px;}
.billcontent{width: 100%;display:block;}</style>

Lalu Tekan Simpan (Save)

Setelah itu buka Element Halaman > tambah gatget > add html/javascript, kemudian copy paste script dibawah ini

<script type="text/javascript">

var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]

//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.

var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).

var filterid=Math.floor(Math.random()*billboardeffects.length)

document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('</style>\n')

var selectedDiv=0
var totalDivs=0

function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}

function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>=2){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<=totalDivs-2)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}

function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}

if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill

</script>

<script>
function rp(json) {

document.write('<div id="contentwrapper">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {

document.write('<div id="billboard' + i + '" class="billcontent">');

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

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, "");

document.write(posttitle);

if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</div>');

}


document.write('</div>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>

<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>


Yang berwarna biru anda ganti dengan alamat blog anda

setelah itu baru anda simpan (save)
Selanjutnya...

Daftar Isi Blogger Debug/error javascript

Jika Anda sempat membaca artikel saya tentang "Daftar Isi Blogger Tanpa direktori Eksternal", maka artikel ini merupakan kelanjutannya. Artikel itu saya buat karena ketika membuat daftar isi blogger, saya mencoba mengatur berapa jumlah judul postingan yang ingin saya tampilkan, saat itu artikel yang sudah saya posting ada 6, jadi pada setting scriptnya saya ubah seperti ini


<script>
var numposts = 6;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>

Pada layout halaman blog, tampaknya tak ada masalah, aman-aman saja,

Nah, saya coba-coba bereksperimen, bagaimana jika setting scriptnya saya ubah menjadi 100, seperti ini

<script>
var numposts = 100;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>

kelihatannya tak ada masalah, tak ada yang aneh, daftar isi postingan tetap ditampilkan. Tapi tanpa sengaja saya melihat pada statusbar muncul kode seperti ini,



setelah saya klik muncul warning dengan kata-kata seperti ini
Error : 'title' is null or not an object

Ini menandakan bahwa sebenarnya telah terjadi kesalahan atau error javascript. Saya mencoba menelusuri kesalahannya, ternyata masalahnya begini : Jika anda mengganti nilai numposts kurang atau sama dengan jumlah postingan, maka tidak akan terjadi error, tapi jika anda mengganti nilai numposts lebih dari jumlah postingan akan terjadi error javascript.

Solusinya adalah
Pastikan nilai numposts selalu kurang atau sama dengan jumlah postingan anda, jangan pernah setting nilainya diatas jumlah postingan anda.

Jika jumlah posting sudah banyak dan sudah lupa mengingat jumlahnya berapa, anda bisa menggunakan kode script dibawah ini

json.feed.openSearch$totalResults.$t

dan ganti pada tulisan yang berwarna biru

for (var i = 0; i < numposts; i++)

jadi seperti ini

for (var i = 0; i < json.feed.openSearch$totalResults.$t ; i++)

Hanya masalahnya, judul postingan akan ditampilkan semua pada layout halaman blogger, jika jumlahnya masih kurang dari 50 postingan mungkin tak masalah, tapi bayangkan kalau jumlah postingan sudah melebihi 100 atau bahkan 1000, malah menjadi kurang sreg karena membuat halaman blog menjadi terlalu panjang kebawah. Jika hal tersebut terjadi, untuk mengatasinya saya memberikan 2 solusi :

1. Batasi jumlah judul postingan pada daftar isi yang ingin ditampilkan sesuai selera anda, yang penting syaratnya nilainya jangan melebihi jumlah total postingan anda
2. Buat Auto Scrolling Daftar Isi atau manual scrolling daftar isi atau Slide in Page Daftra Isi. Dengan Cara ini seluruh jumlah postingan berapa pun jumlahnya dapat ditampilkan dalam sebuah box kecil yang bisa diatur ukurannya sesuai selera. Jika ingin melihat judul postingan, anda cukup melakukan scrolling secara manual/autoscoll atau biarkan animasi slide yang mengubahnya sesuai interval waktu yang bisa kita setting sendiri.(Pembahasan Tentang hal ini dapat anda buka di artikel "Daftar Isi Scrolling page" atau "Daftar isi Slide in page").

Selanjutnya...