Tutorial blog kali ini membahas tentang daftar isi blog dengan menggunakan slide, jadi tampilan daftar isi blog berupa gambar slide, menarik bukan? Daftar isi atau sitemap slide in page ini nantinya bisa diletakkan di sidebar blog. Nah simak bagiamana cara memasang daftar isi slide in page dibawah ini.
Cara Membuat Daftar Isi Slide In Page :
1. Login ke blogger
2. Pada dashboard, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode
</head> dan letakkan kode berikut 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 template
5. Kembali ke dashboard blogger, Pilih Tata Letak => Tambah Gadget => pilih 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=0var totalDivs=0function 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://lintas-tutor.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>
Keterangan :
Ganti url saya dengan url blog anda
Silahkan dicoba dan semoga ulasan tentang Cara Membuat Daftar Isi Slide In Page di Sidebar Blog bermanfaat.
