Membuat Kotak Pembatas Untuk Blog

Kotak pembatas sangat di perlukan pada postingan yang ada pada blog kita,  Dengan tujuan untuk menonjolkan hal-hal penting yang berkaitan degan artikel kita . kombinasi warna latar (background) dan warna garis batas (border) sangat menentukan .! Itu di tujukan agar pembaca menjadi nyaman dengan apa yang kita tampilkan ?
Kita langsung aja .. ya .!!

Pilih salah satu kode HTML yang sobat inginkan dengan pilihan kombinasi warna yang saya sudah tampilkan di bawah ini ,,!!

background Blanchedalmond

<div style="background: #FFEBCD ; border: 0px dotted #000000; padding:5px;">
Tulis teks yang di inginkan</div>

background Aquamarine

<div style="background:  #7FFFD4 ; border: 0px dotted #000000; padding: 5px;">
Tulis teks yang di inginkan</div>

background Khaki

<div style="background: #F0E68C; border: 0px dotted #000000; padding: 5px;">
Tulis teks yang di inginkan</div>

background Lightblue

<div style="background: #ADE8E6; border: 0px dotted #000000; padding: 5px;">
Tulis teks yang di inginkan</div>

background Greenyellow

<div style="background: #ADFF2F; border: 0px dotted #000000; padding: 5px;">
Tulis teks yang di inginkan</div>

background Lightpink

<div style="background: #FFB6C1; border: 0px dotted #000000; padding: 5px;">
Tulis teks yang di inginkan</div>

background Plum

<div style="background: #DDA0DD; border: 0px dotted #000000; padding: 5px;">
Tulis teks yang di inginkan</div>

Pilih warna yang yang sobat inginkan .! kode HTML sudah tertera pada masing-masing warna di atas .
Atau mungkin sobat ingin berkreasi sendiri mengkombinasikan warna yang sobat inginkan ?
caranya mudah perhatikan tulisan background: #DDA0DD pada kode HTML/javascript jenis background Plum di atas ,, ganti kode #DDA0DD dengan kode warna yang di inginkan dan untuk mempertebal garis pinggirnya tinggal mengganti border: 0px menjadi border: 1px atau 2px, 3px sesuai keinginan sobat ...

Motif yang lain untuk kotak pembatas

<table bgcolor="Plum" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Blanchedalmond" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

<table bgcolor="Lightpink" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Aquamarine" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

<table bgcolor="Greenyellow" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Khaki" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

<table bgcolor="Khaki" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Lightblue" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

<table bgcolor="Lightblue" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Greenyellow" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

<table bgcolor="Khaki" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Lightpink" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

<table bgcolor="Blanchedalmond" border="1" padding:5px="" style="width: 100%px;"><tbody> <tr> <td bgcolor="Plum" style="border-style: inset;">teks yang di inginkan&nbsp;</td> </tr> </tbody></table>

READ MORE - Membuat Kotak Pembatas Untuk Blog

Teks berjalan beserta icon mini pada blog

Seperti yang tertera pada judul di atas "Teks berjalan beserta icon mini pada blog" Artikel kali ini saya mau membahas tentang teks berjalan yang di sisipkan icon atau gambar di antara kata-kata yang kita tulis . berawal dari saya melihat teks berjalan dan gambar berjalan . dan saya bertanya-tanya ?
apakah ada teks berjalan di sertai gambar di antara kata-kata yang kita inginkan ?.
saya mencari tapi tetap tidak ketemu, kebanyakan sahabat blogger membuat artikel tentang teks yang berjalan dan Gambar berjalan yang keduanya di pisah .! Tapi tidak ada teks sekaligus gambar berjalan yang saya temukan . karena tidak ketemu apa yang saya inginkan .. akhirnya saya membuat sendiri kode HTML/javascript

Caranya mudah ;

1. Masuk ke akun blogger sobat.
2. Pilih rancangan.
3. Tambahkan gadget HTML/javascript

gambar 1

1. Dan masukkan kode di bawah ini

<center><marquee scrollamount="2" width="100%"><img height="30" src="URL gambar" width="30" />Tulis teks yang di inginkan<img height="30" src="URL gambar" width="30" /><b></b></marquee></center>

Keterangan ;
scrollamount untuk menentukan kecepatan pergerakan kata
yang berwarna biru letakkan URL gambar atau icon yang sobat inginkan
lalu di SIMPAN ,, selsai


Perhatian penting !!
Untuk menambahkan gambar di tengah-tangah kata ? tinggal menambakhan kode images di bawah ini
<img height="30" src="URL gambar" width="30" /><b> di antar kata-kata yang di inginkan tadi

Contoh ;

<center><marquee scrollamount="2" width="50%"> Negara <img height="30" src=" http://agusarnold.files.wordpress.com/2009/07/bendera.jpg " width="30" />  dan negara <img height="30" src=" http://www.glministry.com/images/bendera_usa.jpg " width="30" /><b> hendahnya berkerja sama dengan negara <img height="30" src=" http://www.indexmundi.com/flags/ic-lgflag.gif " width="30" /> agar selalu maju <b></b></b></marquee></center>

Hasilnya sperti di bawah ini 

Negara dan negara hendahnya berkerja sama dengan negara agak selalu maju

READ MORE - Teks berjalan beserta icon mini pada blog

Apakah Labels Itu dan Bagaimana cara membuatnya

Label, istilah yang asing bagi blogger yang baru terjun di dunia pembloggeran terutama saya ? Awalnya saya tidak tahu fungsi label itu apa ?. Sehingga secara asal-asalan saya menulis label tersebut . ?
Secara sederhana labels itu adalah kategori yang befungsi untuk mengelompokkan artikel atau postingan yang berhubungan.

Dan  tujuannya adalah supaya pengunjung bisa lebih mudah untuk menemukan artikel yang ingin dicari. selain itu, label mempermudah mesin pencari mengindeks artikel kita. Jadi, beri label yang sesuai dengan artikel kita.

Setelah saya tahu fungsi label tersebut sangat besar, maka saya mulai renovasi semua label yang ada di artikel saya , agar tertata rapi sesuai dengan kelompok artikel yang berhubungan . Seperti artikel yang sekarang judulnya "Apakah Labels Itu dan Bagaimana cara membuatnya" saya berikan label Blogger ..!! karena artikel ini berkaitan dengan blogger itu sendiri .

Banyak jenis tampilan Label yang dapat kita temukan, yang sudah sobat-sobat blogger munculkan .pada artikel mereka . Label pun sudah tersedia di Widgat tapi dengan tampilan yang sederhana .
Caranya mudah ;

1. Masuk ke akun blogger sobat
2. Pada dasbor pilih rancangan
3. Dan widgat/gadget
4. pilih Labels

Gambar 1

Gambar 2

Dan yang terakhir di simpan .. Selesai .

Selanjutnya di mana tempat kita menulis label tersebut ?

Kita menulisnya di Entri ! Di bagian bawah.?
seperti gambar di bawah ini .

Gambar 3

READ MORE - Apakah Labels Itu dan Bagaimana cara membuatnya

cara membuat recent post blogger

Recent post di sebut juga artikel terbaru yang sudah di tampilkan pada blog, Recent post itu sendiri adalah widgat unggulan yang sering di pakai untuk mempercantik tampilan blog sobat ? Banyak jenis artikel tentang recent post yang sudah di posting oleh sobat-sobat blogger yang lain ....
tapi saya ingin menjelaskan sedikit tentang recent post ????

Seperti yang kita ketahui recent post ini salah satu widgat penyokong untuk melengkapi sebuah blog . di widgat sudah tersedia jenis recent post di sebut feed.. tapi dengan tampilan yang sederhana ,,,
caranya ......:

1. Masuk ke akun blogger sobat
2. Pada dasbor pilih rancangan
3. Dan widgat/gadget
4. Pilih Feed

gambar widgat feed

    5. Setelah itu masukkan alamat blog sobat di URL yang di sediakan

    6. Dan di simpan ..... selsai

Selanjutnya  Recent post  yang berkaitan dengan kode HTML/javascript yang bayang memiliki trik-trik dan daya tarik ...nah yang saya gunakan di blog saya . itu termasuk Recent post  yang menggunakan HTML/javascript ??? banyak jenis yang bisa kita cari dan banyak variasi yang menarik yang dapat kita jumpai .....

• Login ke Blog kamu.
• Pilih Add Gadget HTML Java Script.
• Copy kode di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

</script>

<style media="screen" type="text/css">

<!--

#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;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#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 = 20;
home_page = "http://pelanetgameyuenabhi.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Catatan penting !!!
jangan lupa  Ganti URL http://pelanetgameyuenabhi.blogspot.com/ yang berwarna biru dengan URL alamat blog sobat ..
Lalu di simpan .. Selsai

READ MORE - cara membuat recent post blogger

Bagaimana cara membuat menu vertical

Artikel kali ini ... saya ingin menjelaskan tentang bagaimana cara membuat menu vartical pada blog ? ini sesuai dengan pertanyaan sobat saya .... semua pengaturannya ada di Dasbor langsung saja ......

1. masuk ke Dasbor di akun blogger sobat
2. Coba antarmuka blogger yang diperbaharui
3. Setelah itu pilih/klik Opsi lainnya   
4. Pilih laman seperti gambar di atas 

Setelah masuk ke Laman pada Opsi lainnya akan tampil gambar seperti di bawah ini

Tampilan laman

setelah itu atur halaman yang sobat inginkan ,, dan atur tampilan menu sesuai dengan keinginan kita di perhatikan kata tampilkan laman sebagai ,,nah tinggal sobat pilih apakah sobat mau menu tab atas atau menu tautan samping ,,,, ..

dan yang terahir di simpan  ,,, selsai

tampilan pada rancangan-elemen lama akan muncul seperti gatget pada umumnya ,, bisa di pindah ke kanan atau ke kiri blog sobat ,, sesuai dengan yang sobot inginkan ...

READ MORE - Bagaimana cara membuat menu vertical

Daftar AdSense dengan cepat untuk blogspot

AdSense adalah program kerjasama periklanan melalui media Internet yang diselenggarakan oleh Google. Melalui program periklanan AdSense, pemilik situs web atau blog yang telah mendaftar dan disetujui keanggotaannya diperbolehkan memasang unit iklan yang bentuk dan materinya telah ditentukan oleh Google di halaman web mereka. Pemilik situs web atau blog akan mendapatkan pemasukan berupa pembagian keuntungan dari Google untuk setiap iklan yang diklik oleh pengunjung situs, yang dikenal sebagai sistem pay per click (ppc) atau bayar per klik.
Tapi . sulit untuk di terima dan cara pendaftaranya . ini adalah trikc untuk blogspot yang menggunakan bahasa indonesia . untuk mempermudah dalam masuk ke AdSense

berikut langkah langkah Daftar google adsense terbaru untuk blogspot

Langkah Pertama, Cari ID blog blogspot kita

- Login ke Account Blogspot kamu (www.blogger.com).
- Lalu klik saja pada "Edit Entri"

"Klik Edit Entri"

- Dari halaman Edit Entry, lalu lihat ke bagian URL/link, disana nanti ada ID Blog kamu.

ID Blog (Lihat Bergaris Bawah Merah)

- Setelah itu, catat ID Blog kamu itu, nanti ID Blog tersebut akan kita gunakan untuk mendaftar Google Adsense.

- Buka link berikut http://www.blogger.com/monetize.g?blogID=masukkan ID blog kamu di sini 

dan buka di adress bar link nya

- Setelah kamu buka link tersebut, nanti akan terbuka Halaman Pendaftaran Google Adsense.

Halaman Pendaftaran Google Adsense

-ikuti petunjuk sampe selesai, Kalau Sukses di terima nanti akan dapat konfirmasi kurang lebih begini:

AdSense diaktifkan untuk blog Anda!

Iklan Anda saat ini sedang ditampilkan dengan ID penayang ca-pub-*************Tunggu 48 jam untuk pengkajian akun baru sebelum iklan ditampilkan di blog Anda. Untuk sementara, blog Anda akan menampilkan iklan layanan publik di tempat iklan.... dan seterusnya.....

tinggal menunggu masa Review sampai iklan bisa ditampilkan di blog kamu., memang iklan pertama belum nampak, cuman backgroun kosong aja . karena masih masa review dari google.

Proses menunggu review dari pihak Google Adsense terkadang cepat, namun terkadang bisa sampai beberapa minggu. Setelah proses review selesai kamu akan mendapat kabar lewat email, klik link yang diberikan didalam email untuk verifikasi akun kamu.

Selanjutnya kamu bisa Log In ke Dashboard akun Google Adsense, mulailah dengan melengkapi data diri, data pembayaran, dan sebagainya. Kamudian baru ambillah script iklan dan pasangkan di blog kamu.

NB: Kabar buruk nya google adsense sekarang hanya bisa di domain blogspot saja, kalau pake domain parking sekarang tidak bisa ..

READ MORE - Daftar AdSense dengan cepat untuk blogspot

witgat slide show post pada blog

Kode HTML/java script ini merupakan slide shwo post karna menampilkan postingan agar pengunjung bisa melihat post anda yang terdahulu ... seperti slide .. berganti-ganti 




Cukup mudah untuk membuat widget ini tinggal
Rancangan --> Elemen halaman --> Tambah Widget --> HTMLdan copy code script di bawah ini

<div class='widget-content'>
<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:340px;
width:300px;
}
#spylist ul{
width:390px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:210px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#864513;
border:1px pixed #666666;-moz-border-radius:3.5px;border-radius:3.5px;
}
#spylist li a {
text-decoration:none;
color:#ffffff;
font:verdana;
font-size:10px;
height:12px;
width:28px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#000000;
border:0;
border:1px pixed #333333;-moz-border-radius:3px;border-radius:3px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#ffffff;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#ffffff;
padding:0px 0px;
margin:0px 0px;
}


-->
</style>


<script language='javascript'>


imgr = new Array();


imgr[0] = "http://www.videokl.com/thumbs/no_image.gif";


imgr[1] = "http://www.videokl.com/thumbs/no_image.gif";


imgr[2] = "http://www.videokl.com/thumbs/no_image.gif";


imgr[3] = "http://www.videokl.com/thumbs/no_image.gif";


imgr[4] = "http://www.videokl.com/thumbs/no_image.gif";
showRandomImg = true;


boxwidth = 255;


cellspacing = 6;


borderColor = "#860000";


bgTD = "#000000";


thumbwidth = 60;


thumbheight = 60;


fntsize = 12;


acolor = "#666";


aBold = true;


icon = " ";


text = "comments";


showPostDate = true;


summaryPost = 10;


summaryFontsize = 10;


summaryColor = "#666";


icon2 = " ";


numposts = 5;


home_page = "http://yuenbhai.blogspot.com/";


limitspy=4
intervalspy=3600


</script>


<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>


<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogid=2715999999824144958&widgettype=html&widgetid=html13&action=editwidget' onclick='return _widgetmanager._popupconfig(document.getelementbyid("HTML13"));' target='confightml13' title='edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div></div>

Warna Merah Untuk mengganti warna Back Ground ganti dengan Code warna lainnya
Warna Kuning Untuk mengubah Besar Box
Warna Biru Untuk mengubah Besar Gambar
Warna Ungu Ubah dengan URL blog anda
Ship ..!!  selse terus di SAVE ,, semoga berhasil

READ MORE - witgat slide show post pada blog

Gadget gambar berjalan pada blog

Sesuai dengan pengalaman yang saya peroleh dalam upaya mempercantik blog . saya mencari kode HTML/java script untuk gambar berjalan .. tapi saya cuma menemukan kode HTML/java script yang memiliki gambar 1 sampai dengan 3 jenis gambar yang berbeda ,,, sedangkan saya mau lebih ???
Dan akhirnya ,,, saya merubah kode HTML/java scriptnya menjadi ......
11 gambar yang berbeda ... dan bisa di atur sesuai dengan kebutuhan ,,,,

Kode HTML/java script untuk gambar berjalan

<marquee width="250" direction="up" scrollamount="5" align="center" height="250"><img src=" URL gambar/photo " /><img src=" URL gambar/photo " /><img src=" URL gambar/photo " /><img src=" URL gambar/photo " /><img src=" URL gambar/photo " /><img src=" URL gambar/photo " /><img src= URL gambar/photo " /><img src="URL gambar/photo" /><img src=" URL gambar/photo " /><img src=" URL gambar/photo " /><img src="URL gambar/photo" /></marquee>

• width ,, utuk menentukan lebar kotak tampilan.
• direction ,, untuk menentukan arah gambar dan bisa di ganti dengan "up" ,"down", "left", "right",
• scrollamount ,, untuk menentukan kecepatan pergerakan gambar atau photo.
• height ,, untuk menentukan tinggi kotak tampilan.
• URL gambar/photo ,, bisa di ganti dengan URL photo atau gambar yang di inginkan.

Dan jika ingin mengubah jumlah photo atau gambar bisa disesuaikan dengan yang di inginkan .
tinggal menghapus atau menambah kode <img src="URL gambar/photo" />
dan harus akhiri dengan kode </marquee>  sebagai penutup ..

READ MORE - Gadget gambar berjalan pada blog

wetgat HTML/jave script untuk mempercantik blog

kode HTML/java script kali ini merupakan aplikasi blog yang menambah daya tarik dan blog menjadi lebih menarik

Kode HTML/java script

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="http://yuenbhai.blogspot.com/" src="https://5711191398266097816-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex9/matrix2.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Contoh Kode HTML/java script

READ MORE - wetgat HTML/jave script untuk mempercantik blog

Code Scroll Box teks End Scroll Box images

Saya ingin membagikan pengalaman pada para bloger ,, saya seorang pemula yang baru-baru masuk dalam dunia bloging ,,, saya menuangkan pengalaman saya menjadi sebuah artikel dengan bertujuan membagikan informasi dan sekaligus sebagai arsip saya ,,,,,,, scroll box ,, merupakan media yang berbentuk kotak gulir agar blog yang kita punya menjadi cantik dan rapi dalam penataannya ????

• Scroll Box teks type 1

Code HTML/Java script

<div style="border: 1px solid black; height: 150px; overflow: scroll; width: 300px;">
Ketik Teks Anda Di Sini</div>

Contoh Scroll Box type 1

Malin Kundang 

Pada suatu hari, hiduplah sebuah keluarga di pesisir pantai wilayah Sumatra. Keluarga itu mempunyai seorang anak yang diberi nama Malin Kundang. Karena kondisi keluarga mereka sangat memprihatinkan, maka ayah malin memutuskan untuk pergi ke negeri seberang.

Besar harapan malin dan ibunya, suatu hari nanti ayahnya pulang dengan membawa uang banyak yang nantinya dapat untuk membeli keperluan sehari-hari. Setelah berbulan-bulan lamanya ternyata ayah malin tidak kunjung datang, dan akhirnya pupuslah harapan Malin Kundang dan ibunya.

Setelah Malin Kundang beranjak dewasa, ia berpikir untuk mencari nafkah di negeri seberang dengan harapan nantinya ketika kembali ke kampung halaman, ia sudah menjadi seorang yang kaya raya. Akhirnya Malin Kundang ikut berlayar bersama dengan seorang nahkoda kapal dagang di kampung halamannya yang sudah sukses.

Selama berada di kapal, Malin Kundang banyak belajar tentang ilmu pelayaran pada anak buah kapal yang sudah berpengalaman. Malin belajar dengan tekun tentang perkapalan pada teman-temannya yang lebih berpengalaman, dan akhirnya dia sangat mahir dalam hal perkapalan.

Banyak pulau sudah dikunjunginya, sampai dengan suatu hari di tengah perjalanan, tiba-tiba kapal yang dinaiki Malin Kundang di serang oleh bajak laut. Semua barang dagangan para pedagang yang berada di kapal dirampas oleh bajak laut. Bahkan sebagian besar awak kapal dan orang yang berada di kapal tersebut dibunuh oleh para bajak laut. Malin Kundang sangat beruntung dirinya tidak dibunuh oleh para bajak laut, karena ketika peristiwa itu terjadi, Malin segera bersembunyi di sebuah ruang kecil yang tertutup oleh kayu.

Malin Kundang terkatung-katung ditengah laut, hingga akhirnya kapal yang ditumpanginya terdampar di sebuah pantai. Dengan sisa tenaga yang ada, Malin Kundang berjalan menuju ke desa yang terdekat dari pantai. Sesampainya di desa tersebut, Malin Kundang ditolong oleh masyarakat di desa tersebut setelah sebelumnya menceritakan kejadian yang menimpanya. Desa tempat Malin terdampar adalah desa yang sangat subur. Dengan keuletan dan kegigihannya dalam bekerja, Malin lama kelamaan berhasil menjadi seorang yang kaya raya. Ia memiliki banyak kapal dagang dengan anak buah yang jumlahnya lebih dari 100 orang. Setelah menjadi kaya raya, Malin Kundang mempersunting seorang gadis untuk menjadi istrinya.

Setelah beberapa lama menikah, Malin dan istrinya melakukan pelayaran dengan kapal yang besar dan indah disertai anak buah kapal serta pengawalnya yang banyak. Ibu Malin Kundang yang setiap hari menunggui anaknya, melihat kapal yang sangat indah itu, masuk ke pelabuhan. Ia melihat ada dua orang yang sedang berdiri di atas geladak kapal. Ia yakin kalau yang sedang berdiri itu adalah anaknya Malin Kundang beserta istrinya.

Malin Kundang pun turun dari kapal. Ia disambut oleh ibunya. Setelah cukup dekat, ibunya melihat belas luka dilengan kanan orang tersebut, semakin yakinlah ibunya bahwa yang ia dekati adalah Malin Kundang. "Malin Kundang, anakku, mengapa kau pergi begitu lama tanpa mengirimkan kabar?", katanya sambil memeluk Malin Kundang. Tetapi Kundang segera melepaskan pelukan ibunya dan mendorongnya hingga terjatuh. "Wanita tak tahu diri, sembarangan saja mengaku sebagai ibuku", kata Malin Kundang pada ibunya. Malin Kundang pura-pura tidak mengenali ibunya, karena malu dengan ibunya yang sudah tua dan mengenakan baju compang-camping. "Wanita itu ibumu?", Tanya istri Malin Kundang. "Tidak, ia hanya seorang pengemis yang pura-pura mengaku sebagai ibuku agar mendapatkan harta ku", sahut Malin kepada istrinya. Mendengar pernyataan dan diperlakukan semena-mena oleh anaknya, ibu Malin Kundang sangat marah. Ia tidak menduga anaknya menjadi anak durhaka. Karena kemarahannya yang memuncak, ibu Malin menengadahkan tangannya sambil berkata "Oh Tuhan, kalau benar ia anakku, aku sumpahi dia menjadi sebuah batu". Tidak berapa lama kemudian angin bergemuruh kencang dan badai dahsyat datang menghancurkan kapal Malin Kundang. Setelah itu tubuh Malin Kundang perlahan menjadi kaku dan lama-kelamaan akhirnya berbentuk menjadi sebuah batu karang.

Cerita Rakyat “Malin Kundang” ini diceritakan kembali oleh Kak Ghulam Pramudiana 

• Scroll Box teks type 2

Scroll box ini sama dengan Scroll box teks type 1 ... tapi yang type 2 ini memiliki background untuk memperindah dan mendukung jenis teks yang anda buat

Code HTML/Java script

<div style="background: url(http://www.idrisblog.com/wp-content/uploads/2010/07/GoogleWifi.jpg); border: 1px solid rgb(153, 153, 153); height: 340px; overflow: auto; text-align: left; width: 270px;">TULIS DI SINI</div>

1. Yang berwarna merah bisa anda ganti dengan URL background yang anda inginkan 
2. yang berwarna biru anda tulis Teks 

Cintoh Scroll Box type 2

Aku menaburkan bunga dijalanmu
Kau melangkah dan mulai menginjaknya,
Satu persatu
Aku tidak bersedih bahkan ketika kau tak melihat bungaku
Aku justru khawatir jika kau akan tergelincir jika tak hati-hati
Meskipun aku hancur dan akan mati
Aku tak akan mampu beranjak dari jalan itu
Dan berhenti menabur bunga untukmu
Ada saat aku memang berharap
Kau tak lagi menginjaknya
Ambilah dan siman dalam taman hatimu
Agar aku dapat merekah bersama bungaku
Sampai musin berlalu
Dan bunga itu melayu
Kau masih tak menyadari
Bunga yang kutabur untukmu
Tapi aku tetap akan disini
Tak beranjak dari tempatku
Terus menabur bunga untukmu

• Scroll Box images

Scroll box images merupakan scroll yang di buat khusus untuk menampilkan gambar atau photo dengan background yang bisa di sesuikan ,,, dan kita juga bisa menambahkan teks pada scroll ini ..

Code HTML/java script

  <div style="background-image: url(http://dl.glitter-graphics.net/pub/303/303771ob8r4r0z04.png);
border-color: #FFCCCC; border-style: double; border-width: 4px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 300px; overflow: auto; width: 220px;">

<center><img style="width: 153px; height: 204px;" src="URL GAMBAR KORANG" />
</center>

1. Anda dapat merubah yang berwarna biru dengan alamat URL yang anda inginkanau 
2. Anda bisa merubah URL untuk photp atau gambar yang anda inginkan

Contoh scroll box imanges

yuenbhai

agar mendapat ilmu yang banyak kita harus berani mengambil tantangan

READ MORE - Code Scroll Box teks End Scroll Box images