Daftar isi blog merupakan yang bagian yang tidak kalah penting pada sebuh blog, karena tanpa daftar isi, postingan-postingan lama mungkin akan jarang dibuka atau diacuhkan oleh pengunjung, dikarenakan malas membuka postingan lama, atau malas klak klik atau browsing ke postingan-postingan sebelumnya karena itu membutuhkan waktu yang relatif lama.Mengatasi permasalahan itu saya akan berbagi memberikan tips membuat daftar isi seperti yang terlihat disisi samping GeraiBlog, ini bertujuan agar postingan lama dengan mudah bisa ditemukan oleh pengunjung blog, tinggal di scrool kebawah maka daftar postingan akan muncul satu per satu.
Berikut Langkah-langkahnya.
Pertama login ke blog kamu,
Pilih LayOut --> Add Gadget --> HTML/java Script
Untuk Daftar isi Scroll Seperti Daftar isi blog ini KoPas Kode di bawah ini :
<div style="overflow:auto; height:200px;" margin="1px" ;>
<script style="text/javascript" src="http://h1.ripway.com/icalholic/js_daftar_isi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://namablogmu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div><br/><a href="http://www.geraiblog.com/2011/02/tips-cara-membuat-daftar-isi-blog.html">Dapatkan widget disini</a>
Untuk merubahnya "JANGAN LUPA MENGGANTI : http://namablogmu.blogspot.com/ DENGAN NAMA BLOG KAMU, karena kalau tidak dirubah bisa jadi hasilnya akan beda dan bukan daftar postingan blog kamu yang muncul tapi apa ya..........
Ok, selanjutnya tips merubah Daftar Isi Efek Marquee (Berjalan) KoPas kode di bawah ini, caranya tinggal copy paste saja, langsung ke TKP :
<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br /><br /><script style="text/javascript" src="http://h1.ripway.com/icalholic/js_daftar_isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://namablogmu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></marquee><br/>By <a href="http://www.geraiblog.com/2011/02/tips-cara-membuat-daftar-isi-blog.html" target="_blank">mr blog</a>
Nah beres dech..............silahkan dicoba, kalau belum berhasil itu tandanya kita diberikan kesempatan untuk terus belajar, belajar dan belajar. Semoga Sukses...!!
INFO
KENAPA TIDAK BISA MUNCUL ?
Apa itu site feed? Jawabnya ringkas aja sech "site feed merupakan ringkasan dari semua postingan blog ataupun komentar dari blog". Untuk kali akan dijelaskan bagaimana cara mengaktifkan site feed untuk blog, ini berkaitan dengan kejadian yang dialami oleh teman2 yang belum berhasil
Salah satu penyebabnya site feed blog belum aktif, terus apa hubunganya dengan daftar isi otomatis tadi? ok Pada kode java script untuk daftar isi, itu menggunakan site feed blog tepat recent post, kemudian meringkas postingan, yang dimunculkan hanyalah judul postingan saja , untuk site feed sendiri akan berpengaruh untuk anda yang memasang widget recent commnet/Komentar terbaru. So apabila recent koment blog kamu tidak muncul-muncul juga padahal kodenya sudah benar, mungkin site feednya yang bermasalah.
Berikut langkah sederhana untuk mengaktifkan site feed blog.
- Login Ke blog, nanti akan muncul jendela DashBoard, pilih blog yang akan di setting site feedNya. Lalu pilih Setting.
- Pilih Site Feed
- Ada beberapa pilihan, pilih saja Short atau Full
- Setelah itu simpan pengaturan.
Kalau belum juga berhasil, inilah script untuk daftar post berjalan seperti yang saya buat disamping kanan dengan judul
" TERBARU "
<center>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:300px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.alamat blogmu.com";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:300px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.alamat blogmu.com";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>
Free Download BacklinkSpeed (Backlink Software)
- (30 09 2011)(0 comments)
Cara Mendapatkan Backlink Cepat dan Mudah
- (30 09 2011)(0 comments)
