Cara membuat daftar isi slide pada blog

Sobat ingin tahu cara  membuat daftar isi pada halaman artikel dengan efek slide?

Berikut ini langkahnya:

1.  Login  blog

2. Rancangan

3. Edit html

4. Letakkan  kode berikut di atas</head>

<style>#contentwrapper{width: 170px;height: 190px;border: 0px solid black;background-color: #000;padding: 0px;}

.billcontent{width: 100%;display:block;}</style>

Kemudian simpan.

5. Letakkan kode berikut di posting artikel atau widget sidebar 

<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('

');

document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {

document.write('

');

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://codecyber.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

6. Simpan

Dan lihat hasilnya

Semoga tutorial cara membuat daftar isi slide bermanfaat.

Socialize It →:

Tweet

Artikel terkait Lainnya