November 2010

Pada posting kali ini kita akan belajar membuat gambar atau banner iklan berjalan di blog kita.
Cara pertama anda bisa memanfaatkan marque caranyapun tergolong simpel, anda tinggal copas saja code berikut, dan anda ganti link gambar dengan link gambar anda.

<marquee direction="LEFT" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="5" height="60" align="justify">
<a href='Link Tujuan Gambar' target="_blank" ><img alt="Mung Bisnis" border="0" width="460"
src="Link Lokasi Gambar" height="60" /></a>
<a href='Link Tujuan Gambar'target="_blank" ><img border="0" width="460"
src="Link Lokasi Gambar" height="60" /></a>
</marquee>
Keterangan: yang saya beri warna kuning, silahkan anda ganti sesuai kebutuhan.

Cara berikutnya ini tergolong sedikit njlimet kalau melihat scriptnya, karena banyak banget, tentunya karena kodenya panjang model berjalanya bannerpun berbeda, lebih keren tentunya. caranya juga sama, tinggal copas saja kode dibawah ini, dan atur lokasi gambar anda, selesai.
<script language="JavaScript1.2">
/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='480px'
var scrollerheight='60px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000


//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="Link Tujuan Gambar"><img src="Link Lokasi Gambar" border=0"></a>'
slideimages[1]='<a href="Link Tujuan Gambar"><img src="Link Lokasi Gambar" border=0"></a>'
slideimages[2]='<a href="Link Tujuan Gambar"><img src="Link Lokasi Gambar" border=0"></a>'
//extend this list

///////Do not edit pass this line///////////////////////

var ie=document.all
var dom=document.getElementById

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgcolor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>



Keterangan: yang saya beri warna kuning, silahkan anda ganti sesuai kebutuhan.
Contoh hasilnya disini.

Bagi yang gak ada waktu dan gak  mau repot cara membuat dan mengedit blog, serahkan saja kepada Mung Bisnis | Jasa Pembuatan Blog.

Membuat Site Map atau bisa juga dikatakan daftar Isi dengan model Otomatis versi ke 2 ini cukup keren, mau coba? anda tinggal copas saja kode berikut dan langsung pasang di dalam posting blog anda, ingat! copasnya mode edit html agar kode bekerja.

Ini kodenya:

<script style="text/javascript" src="http://kodeku.googlecode.com/files/blogtocmin.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

1. Pastikan anda sudah terdaftar di Mybloglog
2. Kalo sudah, sekarang kembali ke Blogger, lalu tuju langsung kehalaman Edit HTML. Cari tag
</head>  kemudian copy-paste saja semua script dibawah ini dan letakan diatasnya. (jangan lupa di save dulu)

<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)
version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/
if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}

//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

//metto tutto minuscolo perchè indexOf è case sensitive

if (autore != ""){
alt="MyBlogLog: " + autore;

myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>
3. Masih pada halaman Edit HTML, beri tanda centang pada Expand Widget Templates. Kemudian cari kode dibawah:
<b:loop values='data:post.comments' var='comment'>
Kalau sudah, silahkan copas semua kode dibawah ini dan letakan kembali dibawah kode diatas.
<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>
4. Simpan dan lihat hasilnya.
Untuk melihat contoh hasilnya di komentar blog ini.

Selamat mencoba.

Sumber: o-om.com

POPULAR YOUTUBE




==============================================================
==============================================================


Pengunjung Teraktif



Posting kali ini hanya ingin berbagi informasi seputar Informasi Penerimaan CPNS Kabupaten Semarang Tahun 2010.
Berdasarkan PENGUMUMAN Nomor : 810/04257/2010 Tentang Pengadaan Calon Pegawai Negeri Sipil Daerah dari Pelamar Umum Pemerintah Kabupaten Semarang Formasi Tahun 2010. Pendaftaran dimulai tanggal 16 s.d. 25 Nopember 2010 secara On line dengan mengakses website Pendaftaran CPNSD Provinsi Jawa Tengah http://cpns.jatengprov.go.id/ .

Jenis, jumlah formasi yang dibutuhkan dan kualifikasi pendidikan yang disyaratkan:

A.Tenaga Guru : 91 formasi
B.Tenaga Kesehatan : 60 formasi
C.Tenaga Teknis : 50 formasi

Selengkapnya dapat anda unduh DI SINI (PDF) 

Yang mau jadi PNS, segera persiapkan diri anda mulai sekarang juga, belajar, dan teruslah berdoa.

Kebutuhan blog yang didedikasikan sebagai blog education saya kira tidak akan lepas dari menampilkan materi pembelajaran bisa berupa presentasi maupun hasil penilaian peserta didik. Dalam kondisi offline kita dengan mudah membuat file dokumen, presentasi dan laporan daftar nilai siswa dengan menggunakan program aplikasi dari Ms. Office atau menggunakan open office, namun apabila kita ingin menampilkan secara online kadang kita bingung bagaimanile-file dokumen kita secara mudah dan cepat. Sebenarnya fasilitas ini sudah lama disediakana cara menampilkan file yang sudah kita buat di komputer ke blog secara online, dan mudah untuk di edit apabila ada kesalahan. Ternyata eh ternyata, Google sebagai perusahaan raksasa di Internet sudah menyediakan software yang mampu mengonlinekan f Google, cuma kadang kita tidak menggunakanya karena belum adanya kebutuhan untuk menggunakan fasilitas ini.


Pada kesempatan ini kita akan belajar bagaimana cara menampilkan file SpreedSheet (Excel) di blog. Misal disini saya akan menampilkan file daftar nilai siswa.
  1. Login ke halaman http://docs.google.com  dengan account gmail anda, atau bisa juga menggunakan email lain (yahoo atau ymail) yang sudah terverifikasi google.
  2. Upload file excel yang sudah dibuat dikomputer anda
     
  3. Sebelum mengklik tombol start upload beri centang pada convert documents, presentations, and spreedsheet to the coresponding Google Docs formats.
  4. Kemudian buka file excelnya, contoh: klik daftarnilai

  5. Setelah terbuka, kemudian klik Share pilih Publish as a web page dipojok kanan atas.

  6. Kemudian akan muncul kotak yang berisi tentang pilihan dari sheet mana aja yang akan ditampilkan atau bisa juga di pilih semua, lalu klik Start Publishing
  7. Selanjutnya pada pilihan Get a link to publish data pilih HTML to embed in a page

  8. Copy kode yang tampak ke postingan di blog.
  9. Selesai
Kelemahan dari lampiran file di blog ini akan membuat loading page menjadi lambat karena update dari file tersebut dilakukan setiap 5 menit dan data tersebut akan selalu terupdate apabila ada perubahan pada file sumbernya di docs.google.com

Dibawah ini contoh file excel daftarnilai yang sudah berhasil di upload ke doc.google.com


Catatan:
Kode tersebut dimasukan di dalam posting blog dalam mode edit html (bukan compose).

Update 13 April 2012
Pada langkah ke 5 diatas tampilan terbaru setelah file office yang sudah kita upload hasilnya seperti gambar berikut:
Setelah klik sub menu Publish to the Web, maka akan tampil seperti gambar berikut (sama seperti pada langkah 7):
Setelah kode tampil, silahkan anda copy paste ke dalam posting blog anda.

Mendampingi anak-anak SMP N 1 Kaliwungu Kab. Semarang di Pulau Bali tanggal 18-21 Oktober 2010.
berikut foto action sebelum berangkat dan di pulau bali. narsis mode: on, hehe....


Sebelum berangkat di SMP N 1 Kaliwungu

Cari muka... (nyoting anak2, dan cari momen2 yg keren... :-D )

Di Tanah Lot Bali

Di Tanah Lot Bali

Di Tanah Lot Bali

Di Tanah Lot Bali

Di Tanah Lot Bali

Menari Bali Di Tanah Lot, wakakk...

Di Garuda Wisnu Kencana (GWK)

Di Garuda Wisnu Kencana (GWK)

Di Garuda Wisnu Kencana (GWK)

Pearl Crescent Page Saver Basic (PCPSB) merupakan add-on mozilla firefox yang dapat digunakan untuk mengambil seluruh bagian halaman web dan menyimpanya dalam bentuk  gambar dengan format PNG dan JPG. dan hebatnya lagi bisa digunakan juga untuk merekam aktifitas layar komputer kita, merekam saat browsing dan bisa juga saat anda membuat video tutorial, karena add on ini juga mendukung record audio dalam bentuk wav atau mp3. Add-on ini untuk pengguna Windows XP dan Vista. jadi tenang saja pasti kebagian. hehe....

Untuk mencoba menggunakan add on ini silahkan anda download dan install di link berikut (Pearl Crescent Page Saver Basi ). 
Untuk penggunaanya sangatlah mudah, jika anda ingin mengabadikan tampilan weblog anda dalam bentuk gambar, langkahnya sebagai berikut:
  1. Buka weblog tercinta anda
  2. Setelah tampil sempurna klik kanan ditengah weblog, maka akan tampil menu pilihan seperti gambar berikut:
  3. Ada tiga pilihan:  save image of visible portion ( Menyimpan gambar bagian yang terlihat saja dari web yang sedang dibuka contoh disini) save image of entire page (Menyimpan gambar dari seluruh halaman web yang tampak contoh disini) save page as image (Menyimpan halaman web sebagai gambar - Pilihan ini memberi kita kesempatan untuk memilih area mana saja yang akan di ambil gambarnya dengan cara di geser-geser seperti croping gambar). 
  4. Misalnya Kllik save image of entire page kemudian tentukan type gambarnya, PNG atau JPG.
  5. Klik tombol Save. Selesai.
Sebagaimana saya sampaikan diatas, Add-On Pearl Crescent Page Saver Basic mempunyai kemampuan merekam aktifitas di layar monitor kita. Cara penggunaanya adalah:
  1. Setelah proses instalasi PCPSB ini berhasil maka akan ada tambahan tool dipojok kanan bawah, berupa gambar kamera dan waktu . Klik gambar kamera untuk memulai proses perekaman layar, nanti akan tampil seperti gambar berikut:

    Disini anda bisa mengatur mulai dari kwalitas video, pengaturan perekaman suara, dll.
  2. Untuk memulai Perekaman, tinggal anda klik tombol Start Capturing.
  3. Untuk menghentikan proses perekaman anda klik kembali Gambar kamera di pojok kanan bawah. maka akan tampil jendela baru seperti gambar berikut:

  4. Terakhir, silahkan anda simpan hasil rekaman layar anda.
Selamat mencoba, semoga bermanfaat.

      MKRdezign

      Formulir Kontak

      Nama

      Email *

      Pesan *

      Javascript DisablePlease Enable Javascript To See All Widget

      Label