Cara Membuat Daftar Isi Slide In Page

Banyak tutorial blog yang membahas tentang daftar isi dan formatnya juga bermacam-macam, seperti daftar isi / sitemap dengan jquery accordi...

Banyak tutorial blog yang membahas tentang daftar isi dan formatnya juga bermacam-macam, seperti daftar isi / sitemap dengan jquery accordion dan juga daftar isi perlabel, daftar isi dan lain-lain. Nah kali ini Blogger Bondowoso akan share tentang cara membuat daftar isi dengan slide in page. Sesuai dengan judulnya kalau daftar isi ini menggunakan slide di homepage / halaman utama blog. Apabila anda penasaran bagaimana bentuk / format daftar isi slide in page, simak cara membuatnya dibawah ini.
Cara Membuat Daftar Isi Slide In Page

Cara Membuat Daftar Isi Slide In Page :
1. Langsung aja menuju Templates
2. Pilih Edit HTML => Lanjutkan
3. Cari kode </head> dan letakkan kode dibawah ini diatasnya

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

4. Simpan dulu template anda

5. Lalu masuk ke dasboard blogger lagi
- Pilih Tata Letak
- Pilih Tambah Gadget
- Pilih HTML/JavaScript dan masukkan kode berikut kedalamnya

<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 = "(Readmore)";
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://bloggerbondowoso24.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>
Keterangan :
Ganti url Blogger Bondowoso dengan url blog anda

6. Simpan

Demikianlah tutorial blog mengenai Cara Membuat Daftar Isi Slide In Page, semoga bermanfaat untuk anda semua, happy blogging.

COMMENTS

Name

Activator,3,Adobe,1,aneka resep,35,AntiVairus,1,coreldraw,22,Data Recovery,1,Driver,3,education,6,IDM,1,kesehatan,21,komputer,22,Multimedia,1,news,7,photoshop,42,relegius,19,seo,27,Serial Key,4,tips wanita,10,tutorial blog,117,
ltr
item
Full Version Download: Cara Membuat Daftar Isi Slide In Page
Cara Membuat Daftar Isi Slide In Page
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBWyLMq45pLjrDQyvtzNzqa568-ZISSD5_2U8U0h20lqlgQWDYzKfjSo3e-BR6GNoVvPQQV6rMqIKgpWl3v-eYgocs1xhWVFmWCc1ziaEM6yP_YSEqnlMf42OCoDQSwAC2rlEGvdtj6s/s1600/daftar-isi-slide-in-page.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBWyLMq45pLjrDQyvtzNzqa568-ZISSD5_2U8U0h20lqlgQWDYzKfjSo3e-BR6GNoVvPQQV6rMqIKgpWl3v-eYgocs1xhWVFmWCc1ziaEM6yP_YSEqnlMf42OCoDQSwAC2rlEGvdtj6s/s72-c/daftar-isi-slide-in-page.jpg
Full Version Download
https://bloggerbondowoso24.blogspot.com/2013/03/cara-membuat-daftar-isi-slide-in-page.html
https://bloggerbondowoso24.blogspot.com/
https://bloggerbondowoso24.blogspot.com/
https://bloggerbondowoso24.blogspot.com/2013/03/cara-membuat-daftar-isi-slide-in-page.html
true
7143853511036504925
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy