Saturday, July 14, 2012

Cara Membuat Daftar Isi Sesuai Label Blog



Agar lebih lengkap tutorialnya, walau sudah jadul
tetapi tidak ada salahnya yoa...
Seingkali sobat ingin menampilkan link judul postingan blog di homepage sobat.
hmmm..dengan menyusun html link satu2 adalah pekerjaan yang melelahkan.
So, bagaimana cara agar link tampil otomatis pada kolom daftar isi blog?


Simak deh caranya:
1. Login blog
2. Rancangan dan tambah gadget
3. Pilih "edit html/javascript"
4. Letakkan kode berikut
<div style="font-family: arial; font-size: 12px; overflow: scroll; width: 300px; height: 200px;">
<div style="text-align: left; width: 100%; padding: 0 px; overflow: hidden;">
<script style="text/javascript">
var numposts = 500;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script>
<ul>
<script src="http://www.cybermig.com/feeds/posts/default/-/Mig33%20Eagle%20Hill?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div></div>
Kode berwarna diatas adalah lebar dan tinggi kolom daftar isi,
ubah sesuai keinginan sobat.
 Dan Url link http://www.cybermig.com/feeds/posts/default/-/Mig33%20Eagle%20Hill
Ubah sesuai dengan url blog dan label sobat.
spasi di ganti dengan kode %20


Demikian cara membuat daftar isi sesuai label pada blog.
Semoga tutorialnya bermanfaat.. (•̪(•̪●)̪●)

Labels:

Monday, January 23, 2012

Cara membuat daftar isi efek nudging dengan background gambar pada blog





Contoh seperti gambar   di  atas ya  sobat
So  di bawah ini  caranya:


1. Login blog
2.  entri baru
3.  Letakkan kode pada "edit html" posting editor


<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat scroll 0 0#000;background-position:bottom right; border-radius:8px; text-shadow:1px 2px 1px #000;color:white; border: 2px solid white; height: 310px; overflow: auto; padding: 10px; width: auto;">
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://codecyber.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script></div>
Ganti url gambar dan url blog sobat


4. Simpan

Labels:

Saturday, January 21, 2012

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.

Labels:

Wednesday, December 28, 2011

Cara membuat daftar isi accordion pada blog



Daftar isi dengan efek accordion by abu rahman.
contoh seperti gambar di atas.
Jika sobat ingin membuatnya,
caranya gampang:


Letakkan script kode di editor blog di edit html seperti saat sobat post artikel
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">

</script> <script src="http://codecyber.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">

</script> <script type="text/javascript">

 var accToc=true;

</script> <script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">

</script>


Ganti url warna merah dengan url blog sobat.
Kemudian simpan.
Semoga tutorialnya bermanfaat.

Labels:

Monday, December 26, 2011

Cara membuat daftar isi dengan efek nudging dan accordion pada blog





Daftar isi berefek accordian berfungsi untuk menghemat tempat dimana daftar isi blog banyak.

Membuat daftar isi blog menjadi lebih ringkas dan rapi.

Banyak kita jumpai daftar isi berefek accordion ya...

Bagaimana kalau kita menambahkan efek link nudging yaitu jika link di sorot maka akan bergeser.



Penasaran ingin sekali mempraktekan cara membuat daftar isi dengan

efek link nudging dan accordion di blog sobat?

Yuk ke cara:





  1.  Langkah pertama 

  2. Login blogger anda 

  3. Pada dasbor masuk ke Rancangan

  4. lalu pilih Edit HTML. 

  5. Cari kode ]]></b:skin>

  6. Copy kode dibawah ini dan paste diatas kode ]]></b:skin>



#dafis-acc{

font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:13px;

color:#ff0000;

background:url() repeat-y scroll left center #000;

padding:2px 0;

border:1px solid #ccc;

}

.dafis-label{

background:url() repeat-x scroll 0 0 #000;

font-weight:bold;

line-height:1.4em;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 1px 3px;

outline: none;

cursor: pointer;

text-decoration: none;

padding: 2px 10px;

color: #ff0000;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

border:1px solid #383737;

}

.dafis-label:hover{

background:url() repeat-x scroll 0 0 #383737;

color:#fff;

}

.dafis-daf ol{

margin:0 0 0 30px !important;

padding:0 !important;

}

.dafis-daf ol li{

background-color:#000;

line-height:1.5em;

margin:1px 3px !important;

white-space:nowrap;

text-align:left;

border:1px solid #040C0F;

}

.dafis-daf ol li a{

text-decoration: none !important;

color:#333 !important;

display:block;

padding-left:10px;

}

.dafis-daf ol li a:hover{

background: #ccc;

border-left: 5px #333 solid;

padding-left: 5px;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

}
keterangan: 
warna di ubah sesuai keinginan 


 5. Tempatkan kode di bawah ini di atas kode </head>
<script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
6. Simpan template



Langkah kedua 


 1. Buat postingan, di beri judul daftar isi atau sitemap 
 2. Tempatkan kode di bawah ini di edit html editor blog
<script src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js" type="text/javascript">
</script>
<script src="http://www.cybermig.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Ganti dengan url blog sobat


3. Save dan lihat hasilnya 

Labels: