Cara membuat daftar isi terupdate otomatis | style accordion

Daftar isi, apa itu daftar isi? Daftar isi adalah daftar yang diberi isi atau isi yang dibuat daftar atau isi yang sedang daftar jadi presiden, bisa juga dikatakan daftar yang isi nya sedang daftar jadi bupati. Bagaimana, anda masih belum paham? Kalau begitu silahkan cari pengertiannya sendiri.

Kali ini judul postingannya adalah cara membuat datar isi terupdate otomatis dengan tampilan menu accordion. Untuk pengertian dari : cara, membuat, daftar, isi, update, otomatis, dengan, tampilan, menu, accordion silahkan anda cari tau sendiri. Accordion , ya itu memang nama alat musik. Tapi Alhamdulillah kali ini kita sama sekali tidak akan membahas mengenai alat musik, karena sudah kita ketahui bersama bahwa musik itu haram. Accordion yang satu ini berhubungan dengan daftar isi yang akan kita buat kali ini, pengertian yang paling tepatnya sih saya sendiri juga tidak tahu tapi singkatnya accordion adalah suatu tema, bentuk, bidang, atau apalah itu saya juga bingung. Yang bentuk dasarnya adalah seperti ini:

Cara membuatnya adalah sebagai berikut:

1. sign in ke blogger, ingat BLOGGER bukan facebook bukan yahoo.

2. ke menu Laman

3. lalu klik dropdown laman baru kemudian pilih laman kosong.

Nanti insyaAlloh akan muncul lembar kerja seperti ini:

Note: kalau tidak muncul silahkan anda pergi keluar rumah ambil batu yang besar dan langsung lempar komputer anda dengan batu tersebut.

4. pindah ke luar negri  tab HTML dan masukkan script berikut:

<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://www.i-khoirudin.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>

5. ganti tulisan berwarna merah dengan url home page blog anda atau kalau anda orang baik url blog saya juga boleh kok.

6. Masukkan judul sesuai keinginan anda terserah mau daftar isi, sitemap, table of content, Barcelona, beranda saya tidak peduli.

7. Pindah ke tab compose dan lihat hasilnya, kosong kan? Tenang itu tidak gagal silahkan anda publikasikan laman tersebut. Lihat hasilnya note: jika gagal silahkan ambil batu yang lebih besar dan lakukan seperti yang sebelumnya.

Selamat mencoba!

Read More

Cara membuat recent post berjalan | tutorial lengkap

Kali ini Admin akan membahas sedikit tentang elemen blog, tepatnya recent post.
Ada yang belum tau recent post? Recent post adalah salah satu elemen blog yang biasanya di pasang di sidebar blog. Selain itu recent post juga sering disebut dengan popular post, popular entry, artikel populer, atau entri populer.
beberapa fungsi/ manfaat recent post berjalan yang akan kita buat ini :
1. menarik pengunjung, bentuk elemen yang akan kita buat ini cenderung elegan dan indah karena akan ada slide show berjalan di sidebar blog anda.
2. dapat menggantikan fitur "Artikel terkait"
3. dapat digunakan sebagai pengganti "Slide postingan"

Masuk ke tahap inti, Admin akan menjelaskan langkah-langkah unntuk membuat Recent post berjalan di blog (khususnya blogger, untuk wordpress belum saya coba) :
1. sign in ke blogger.

2. Tata letak
3. Tambah gadget
4. pilih html/ javascript

5. beri judul yang anda inginkan di kotak 'judul'
6. masukkan kode berikut di kotak 'konten' :

<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:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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.i-khoirudin.blogspot.com/";


limitspy=4
intervalspy=4000


</script>


<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

7. ganti tulisan berwarna merah dengan url home page blog anda.
8. pilih simpan

untuk contohnya bisa anda lihat  disini
insyaAlloh Recent post berjalan ini akan terlihat sangat indah, sebenarnya saya juga ingin memasangnya tetapi html browser saya sedang error jadi tidak bisa memasangnya secara optimal

bila terjadi kegagalan atau kurang jelas silahkan manfaatkan fitur kotak komentar, atau bakar aja rumah anda

Read More

cara membuat tulisan mengikuti pointer

suatu saat saya pernah berkunjung ke blog seseorang disana saya melihat ada tulisan yang mengikuti pointer atau kursor yang saya gerakkan. Spontan saya jadi tertarik dan langsung mencari-cari caranya di google  dengan kata kunci : cara membuat tulisan mengikuti pointer, ternyata hasilnya sangat sedikit sekali blog yang menulis artikel tentang cara membuat tulisan mengikuti pointer. Lalu saya pun mencoba keyword lainnya yaitu cara membuat tulisan mengikuti pointer di blog dan tetap saja hasil yang muncul hanya beberapa saja tetapi malah hasil yang muncul paling banyak justru adalah artikel tentang cara membuat tulisan mengikuti kursor di blog dan cara membuat tulisan mengelilingi kursor di blog. Akhirnya setelah ketemu informasi yang saya cari saya pun lantas punya perasaan ingin berbagi dengan kalian, dan membuat judul postingan ini sebagai cara membuat tulisan mengikuti pointer di blog bukan cara membuat tulisan mengikuti kursor di blog. 
 Bagi anda yang ingin mencoba berikut adalah langkah-langkah untuk membuat tulisan mengikuti pointer di blog :

1. sign in ke blog
2. tata letak
3. tambah gadget
4. pilih menu html/java script
5. masukkan kode ini:

<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;


/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Irfan Khoirudin";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

 6. ubah tulisan berwarna biru menjadi tulisan yang anda inginkan
 7. ubah juga kode angka berwarna merah menjadi kode warna yang anda inginkan. Pilih warna yang anda inginkan, code warna berada di kotak Hex :


8. save, dan lihat hasilnya
jika ada masalah , pertanyaan atau kesulitan silahkan uraikan di kotak komentar,,

Read More