Stuktur Template Blooger

Sebelum merancang sebuah template, terlebih dahulu anda harus memiliki gagasan tentang bentuk struktur dasar dari template anda. Pada umumnya, struktur dari setiap template tidak sama. Namun, dengan mengetahui struktur dasar, anda dapat dengan mudah mendapatkan ide-ide tentang bagaimana cara untuk merubah template yang ada, mendesain template, dan bagaimana mengubahnya menjadi template yang berbeda.

Bagian dari struktur template dapat anda lihat di browser pada blog: seperti header, footer, dan bagian posting. Tapi ada beberapa bagian tertentu (saya menyebutnya bagian blok atau kontainer) yang tidak terlihat pada layar komputer, karena berisi kode HTML yang tidak terbaca secara langsung di browser.

Untuk memulai, struktur template pada dasarnya mengandung bagian dari kontainer yang terlihat seperti ini:

Body

Body

Header

Sidebar1

Main

Post

Sidebar2

Footer

... Out Wrapper

... Content-Wrapper

---

Kita Mulai dari yang terbesar hingga ke sub bagian yang mencakup didalam sebuah template :

1. Body :
Bagian ini merupakan blok terluar dari body template (pada dasarnya semua yang meliputi layar komputer).
2. Outer-wrapper :
Bagian ini mencakup seluruh template anda (body template). Secara umum, anda akan membuat sebuah Outer-wrapper untuk menempatkan beberapa bagian-bagian blok di dalamnya. Blok yang terdapat dalam bagian Outer-wrapper adalah Header, Content, dan Footer.
3. Header :
Blok ini berada paling atas di blog anda. Dalam Header anda akan memiliki sub-blok seperti Judul header, Deskripsi Header, dan lain-lainnya seperti baner Adsense, atau sebuah menu bar, dll. Dan untuk membungkus semua sub-blok dalam dalam Header digunakan Header-wrapper.
4. Content :
Pada bagian bawah Header terdapat Content-wrapper. Bagian ini merupakan bagian yang cukup penting karena dalam Content-wrapper ini terdapat blok Sidebar (sidebar1 atau sidebar2) dan merupakan blok utama dari sebuah blog (yang berisi posting Anda, komentar, atau beberapa iklan).
5. Footer :
Footer adalah wadah yang paling bawah dari template Anda. Kebalikan dari bagian Header dan anda juga akan memerlukan Footer-wrapper untuk membungkusnya (di dalamnya dapat anda tambahkan bagian-bagian blok kecil).
6. Main :
Main adalah pembungkus blok posting di dalam Content-wrapper. Di dalam main terdapat blok Post, blok Komentar, Header Tanggal, dan widget lain yang dibuat dari opsi Tambah Elemen Halaman blogger.
7. Sidebar :
Sidebar 1 dan sidebar 2 adalah blok yang berisi semua widget tepi template Anda, misalnya About Me, Label, Arsip, Teks, HTML, Adsense, dll. Pada template Blogger standar, Anda biasanya akan menemukan hanya 1 sidebar atau template 2 kolom (Utama dan Sidebar) . Sebenarnya sepele untuk menambah hal-hal lainnya. Yang paling umum adalah 2 sidebars atau template 3 kolom. Anda akan belajar dari tutorial ini bahwa setelah Anda memahami struktur template, semua sebenarnya mudah dalam menambah atau memindahkan sidebars ke kiri atau kanan kontainer blok Anda, sesuka hati anda.
8. Blog Post :
blok ini berisi hal-hal penting mengenai tulisan Anda, yang di dalamnya terdapat Artikel Posting, Penulis, Tombol berbagi, Label, dll.

Jika di tampilkan dalam bentuk struktur terperinci. Mulai dari wadah terbesar untuk sub-kontainer, struktur itu akan terlihat seperti ini:

1. Body
   
   1. Outer-wrapper
      
      1. Header-wrapper
         
         1. Blog Title
         2. Blog Description
         3. Other widgets
      2. Content-wrapper
         
         1. Sidebar-wrapper (1,2,3...)
         2. Main-wrapper
            
            1. Date Header
            2. Posts
               
               1. Post Title
               2. Post Content (atau disebut Post Body)
               3. Post Footer (Author, Labels, etc)
            3. Comments
            4. Feed Link
            5. Other widgets (mostly ad units)
      3. Footer-wrapper
         
         1. Footer text (disclaimer, copyrights, etc)
         2. Other widgets

Setelah Anda memahami struktur dasar, semoga akan lebih mudah untuk belajar tentang struktur kode template Blogger. Belajar struktur kode blogger tidak harus menguasai penuh HTML atau CSS, tapi yang paling penting tentang bagaimana kode template diatur, seperti bagaimana struktur container diatur atau bagaimana membuat sebuak blok dalam blok. Ini akan sangat berarti jika dengan sedikit pengetahuan tentang pemrograman web, terus hasilnya Anda dapat menyesuaikan template Anda dengan baik hanya dengan memahami struktur dasar dan beberapa bahasa CSS. Bagaimana, hebat bukan?

cara membuat template blogger sederhana secara offline bagian+3

Rancangan gambar template blogger.

Kali ini kita akan membuat rancangan gambar template blogger dengan tampilan seperti berikut :

Keterangan:

• Warna ini adalah ruang lingkup body
• Warna ini adalah ruang lingkup wrapper
• Warna ini adalah ruang lingkup header
• Warna ini adalah ruang lingkup post wrapper
• Warna ini adalah ruang lingkup post
• Warna ini adalah ruang lingkup sidebar
• Warna ini adalah ruang lingkup footer

Contoh Kode Html dan Css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Belajar Buat Template Blogger</title>
<style>
/*
Title : Belajar Buat Template Blogger
Design : Yanto Cusoy
Site : http://codestyle.blogspot.com
Deskripsi : Best Learning Template
Design : http://codestyle.blogspot.com
Work : 11-01-2012 *home
*/
body {background-color:#999;}
#wrapper {margin:15px auto; width:90%; height:auto; border:1px solid black; background:yellow; color:black; padding:5px}
#header {width:99%; height:auto; margin:5px auto; border:2px dotted red; background:green; color:white}
#post-wrap {max-width:99%; overflow:auto; margin:5px auto; border:2px dotted blue; background:#ff55aa; color:red;}
#post {width:70%; margin:5px; border:2px dotted blue; background:#553322; color:white; float:left;}
#sidebar {width:25%; margin:5px; border:2px dotted brown; background:#ccaa33; color:white; float:right}
#footer {width:99% auto; margin:5px auto; border:2px dotted white; background:#116666; color:white; }

</style>
</head>

<body>

<div id='wrapper'>
<div id='header'>Header
</div>
<br />
<br />
<br />
<div id='post-wrap'>
<div id='post'>Posting
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id='sidebar'>Sidebar
<br />
<br />
<br />
<br />
</div>
</div>
<div id='footer'>Footer
<br />
<br />
<br />

</div>
</div>

</body>
</html>

Coba salin kode diatas dan simpan dengan eksistensi file belajar.html, lalu jalankan pada browser kamu

Nah pada bagian selanjutnya kita akan membahas kode xml blogger pada template buatan kita.

Baca lanjut :
Judul: cara membuat template blogger sederhana secara offline bagian+4.

cara membuat template blogger sederhana secara offline bagian+2

Struktur Template Blogger

Oke, Kali ini kita lanjutkan cara membuat template blogger sederhana secara offline bagian+1, yang dapat di jadikan dasar hingga terbentuknya sebuah template yang terstruktur rapi.

Kita harus mengenal gambaran umum struktur template blogger yang jika saya bahasakan sendiri pembagiannya antara lain sebagai berikut :

1. Head Meta,
2. Style CSS, dan
3. Body Html.

1. Head Meta
   Head meta berisi identitas blog, yang di dalamnya mencakup title dan meta tag blog kamu.
   Peranannya cukup penting dalam posisi pencarian Search Engine. Dalam beberapa kasus, posisi meta tag di buat se SEO mungkin, agar trafik blog meningkat dan semakin bersahabat dengan mesin pencari ^Θ.
   Contoh bagian Head Meta :
   

   <?xml version="1.0" encoding="UTF-8" ?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
   <head>
   <b:include data='blog' name='all-head-content'/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <title><data:blog.pageName/></title>
   <b:else/>
   <title><data:blog.pageTitle/></title>
   </b:if>
   <meta content='your description here' name='description'/>
   <meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
   <meta content='INDEX, FOLLOW' name='ROBOTS'/>
   <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCTD-eIROkC3yIq5OvdWdzQsLrGtW9-MbWUFL5oNJMrVg2WycRJkuU_HK4Ke5hiZRypV_sn0g6ZMat20OPcOXgj8vPYbnHTm45nUx0bXNCvEv8vscMg1kdl-zY5mRZLucEYnU_BP8GSg/s1600/Gear.png' rel='shortcut icon' type='image/x-icon'/>

2. Style CSS
   Style CSS merupakan bagian yang cukup penting yang sangat berpengaruh pada tampilan blog. Bagian ini di susun dari bahasa CSS.
   Dari sinilah sumber pengaturan tinggi, lebar, warna, garis, gaya tulisan, dan sebagainya berasal. Atau dengan kode seperti .posting {color:#55aa44;},#wrapper {backgroud-image:url(http://...);} dan sebagainya.
   
   Style css dapat di tulis dengan 3 cara yaitu :
   
   
   • Menggunakan sumber css dari web direktori lain :
     
     Contoh :
     

     <link rel="stylesheet" href="http://alamat.css" type="text/css" />

   • Di tulis di antara kode tag <b:skin><![CDATA[/* dan ]]></b:skin>
     
     Contoh :
     

     <b:skin><![CDATA[/*
     
     body {}
     .post {}
     #sidebar {}
     @media {}
     
     ]]></b:skin>
     </head>

   • Di tulis dalam apitan Kode Tag HTML
     
     Contoh :
     

     <div style='font-style:italic;'>contoh css dalam body</div>

3. Body Html
   Body html pada umumnya di tulis dengan bahasa html. Bagian ini mempunyai peranan penting sebagai output kode template yang kita tulis ke browser. Jadi html boleh di katakan sebagai penampil grafik struktur blog yang kita buat.
   
   Kode html template blogger terletak antara tag <body> dan </body>.
   Contoh bagian body html template blogger :
   

   <body>
   <!-- skip links for text browsers -->
   <span id='skiplinks' style='display:none;'>
   <a href='#main'>skip to main </a> |
   <a href='#sidebar'>skip to sidebar</a>
   </span>
   <!-- sesi penting bloogger 1. heading -->
   <b:section class='header' id='kepala-blog' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Best Template (Header)' type='Header'/>
   </b:section>
   <!-- sesi penting bloogger 2. Blog Posting-->
   <b:section class='post' id='blog-posting' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   <!-- sesi penting bloogger 3. sidebar-->
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='HTML1' locked='false' title='ads1' type='HTML'/>
   </b:section>
   <!-- sesi penting bloogger 4. footer-->
   <b:section class='footer' id='sidebar' preferred='yes'>
   <b:widget id='Footer' locked='false' title='footer' type='footer'/>
   </b:section>
   </body>

   
   Keterangan :
   * kalimat yang berwarna hijau adalah sesi penting dalam body template blogger

Baca lanjut : Judul: cara membuat template blogger sederhana secara offline bagian+3.

Membuat animasi bergerak dengan css3 tanpa gambar dan javascript

Di kesempatan kali ini saya mau berbagi trik lagi menggunakan efek animasi css3. Bagaimana membuat sebuah objek bergerak tanpa javasript dan gambar seperti objek di bawah ini?

CodeStyle
Animation

Tentu kita berpikir objek ini terbentuk dari gambar atau dari pengaruh javascript yang di tuliskan pada halaman artikel atau yang di tanam pada pengaturan kode html. Hilangkan prasangka tersebut, karena css3 mampu melakukan hal ini.

Coba simak kode berikut sebagai referensi dan praktekan pada browser anda.

Berikut Kodenya :

<style>
#animated_div {
width:100px;
height:60px;
background:#92B901;
color:#000;
position:relative;
font-weight:bold;
font-size:20px;
text-shadow:1px 1px 3px #000;
margin-left:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 4px 8px #000;
}


@keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

</style>
<div id="animated_div"><a title='membuat animasi dengan css3' href='http://codestyle.blogspot.com'>CodeStyle</a><br><span style="font-size:12px;color:white;">Animation</span></div>

demikian posting kali ini. semoga saja bermanfaat buat kita semua, hitung-hitung saling berbagi ilmu..

Spyning icon Rotasi pada gambar menggunakan css3

Kali ini kita akan membuat rotasi pada gambar menggunakan kode html dan css3. Trik ini dapat anda gunakan untuk menu animasi, header animasi dan lain-lain yang ada animasinya.

Seperti biasanya kita mulai dengan kode CSS..
Berikut kode CSS3 nya :

<style>

#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Berputar bolak balik 360 derajat jika mouse mendekati objek

<div id="socialicons">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar 60 derajar jika mouse mendekati objek atau menjauhi

<div id="socialicons2">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar terbalik 360 derajar jika mouse mendekati objek saja

<div id="socialicons3">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Bagaimana, mudah bukan? segalanya kini lebih mudah dengan adanya fitur html5 dan css3. semoga bermanfaat ...

Membuat animasi bintang di background blog

Halo sob, kali ini kita akan membuat latar blog kita dengan animasi bintang seperti malam hari.

Sangat cocok buat yang halaman blognya agak gelap, karna di situlah kita akan merasakan bahwa malam berbintang adalah... Bla..Bla..Bla... Alahh udah...

Langsung aja ini kodenya yang kamu masukan dalam widget atau posting kamu :

<SCRIPT LANGUAGE="JavaScript">
// by ycusoy admin-belajar.blogspot.com
<!-- Begin
SmallStars = 30;
LargeStars = 10;
SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed= new Array();
Largespeed= new Array();
ns=(document.layers)?1:0;
if (ns) {
for (i = 0; i < SmallStars; i ) {
document.write("<LAYER NAME='sn" i "' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
for (i = 0; i < LargeStars; i ) {
document.write("<LAYER NAME='ln" i "' LEFT=0 TOP=0 BGCOLOR='#FFFFFF' CLIP='0,0,2,2'></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < SmallStars; i ) {
document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>');
}
document.write('</div>');
document.write('</div>');
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < LargeStars; i ) {
document.write('<div id="li" style="position:absolute;top:0;left:0;width:2px;height:2px;background:#ffffff;font-size:2px"></div>');
}
document.write('</div>');
document.write('</div>');
}
WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i = 0; i < SmallStars; i ) {
SmallYpos[i] = Math.round(Math.random() * WinHeight);
SmallXpos[i] = Math.round(Math.random() * WinWidth);
Smallspeed[i]= Math.random() * 5 1;
}
for (i = 0; i < LargeStars; i ) {
LargeYpos[i] = Math.round(Math.random() * WinHeight);
LargeXpos[i] = Math.round(Math.random() * WinWidth);
Largespeed[i] = Math.random() * 10 5;
}
function fly() {
var WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < LargeStars; i ) {
LargeXpos[i] -= Largespeed[i];
if (LargeXpos[i] < -10) {
LargeXpos[i] = WinWidth;
LargeYpos[i] = Math.round(Math.random() * WinHeight);
Largespeed[i] = Math.random() * 10 5;
}
if (ns) {
document.layers['ln' i].left = LargeXpos[i];
document.layers['ln' i].top = LargeYpos[i] hscrll;
}
else {
li[i].style.pixelLeft = LargeXpos[i];
li[i].style.pixelTop = LargeYpos[i] hscrll;
}
}
for (i = 0; i < SmallStars; i ) {
SmallXpos[i] -= Smallspeed[i];
if (SmallXpos[i] < -10) {
SmallXpos[i] = WinWidth;
SmallYpos[i] = Math.round(Math.random()*WinHeight);
Smallspeed[i] = Math.random() * 5 1;
}
if (ns) {
document.layers['sn' i].left = SmallXpos[i];
document.layers['sn' i].top = SmallYpos[i] hscrll;
}
else {
si[i].style.pixelLeft = SmallXpos[i];
si[i].style.pixelTop = SmallYpos[i] hscrll;
}
}
setTimeout('fly()', 10);
}
// End -->
</script>

dan hasilnya pasti bisa di simak..

Oke sampai di sini dulu yah. Kamu boleh nyebar artikel ini, tapi jangan lupa dari mana manusia berasal.. Eh salah..Kamsudnya dari mana sumbernya.. Bye