CARA MUDAH MEMBUAT DAFTAR ISI SLIDE IN PAGE

Translate

Daftar Isi Blog dengan Slide
Setelah memposting tentang CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Tutorial blogspot kali ini membahas mengenai cara membuat daftar isi slide in page. Daftar isi blog atau sitemap berguna untuk mempermudah pengunjung melihat menu artikel blog.

Ada banyak macam cara membuat daftar isi seperti daftar isi accordion atau daftar isi biasa, nah kali ini Blog ‘waones articles’ akan share cara membuat widget daftar isi yang menggunakan slide.

Untuk anda yang penasaran ingin melihat bagaimana bentuk dari daftar isi slide yang akan dibuat ini, silahkan simak tutorial dibawah ini sampai tuntas (untuk demo, silahkan dicoba langsung di blog anda karena pasti berhasil).



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 templates
5. Selanjutnya pilih Tata Letak => Tambah Gadget => HTML/JavaScript dan masukkan kode berikut 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 = "(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://teknik-blog-tutorial.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Keterangan :
Ganti url yang berwarna merah dengan url anda

6. Klik Simpan / Save

Selamat mencoba Membuat Daftar Isi Slide In Page, semoga bermanfaat and happy blogging.
Sekian dahulu tutorial yang begitu singkat ini.CARA MUDAH MEMBUAT DAFTAR ISI SLIDE IN PAGE
Selamat mencoba untuk mengganti titel / judul blog dengan logo atau gambar, happy blogging.

Dan setelah  membuat daftar isi slide anda berhasil, mungkin anda tertarik untuk memasang iklan dengan menempelkan iklan banner pada blog anda, silahkan anda baca pada artikel Cara Membuat Iklan Banner Berganti Secara Otomatis atau CARA MEMASANG LOGO DI HEADER BLOGSPOT

Semoga postingan CARA MUDAH MEMBUAT DAFTAR ISI SLIDE IN PAGE diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

merchant 

Artikel Menarik Lainnya :