Belajar Membuat Theme WordPress

Posted: Januari 24, 2012 in torutorial

PART 1

Seperti yang sudah saya janjikan pada artikel yang kemarin http://www.binushacker.net/membuat-toggle-sederhana-css-dan-jquery.html , nah sekarang kita lanjutkan pembahasan tentang web desainnya, bahasan yang sekarang akan saya angkat yaitu Membuat theme wordpress step by step… Ini adalah PART 1

Dikarenakan komponen dari theme wordpress itu bejibun, jadi disini saya akan membahasnya satu persatu, kenapa? selain agar kalian dapat lebih mengerti hirarki dalam tema wordpress, kalian juga akan mengerti tag tag yang dipake oleh wordpress dalam penyusunan front end nya.

Kita siapkan dulu bahan bahan yang akan kita gunakan.

=[1]= Template html dasar

[ Disini saya akan menggunakan template HTML yang sudah banyak betebaran di google, untuk download dasarnya silakan download disini http://freehtml5templates.com/downloads/free/butterflybrilliance.zip ]

=[2]= Text editor untuk mengedit template dasarnya, disini saya menggunakan Dream Weaver 8, bagi yang tidak ada silakan pake text editor e.g notepad, notepad++,

=[3]= Teh manis, camilan, rokok untuk menemani membaca artikel ini, jangan lupa puter mp3 kesayangan kalian untuk mebuat mood kalian oke….

======== Step 1 [ Pre Editing ] =========

Sebelum kita memulai mengerjakan membuat tema ini, alangkah baiknya jika kita mengenal dulu hirarki dalam tema wordpress itu.

===> Menurut wprainbow (wprainbow.com) dituliskan pada artikel

http://www.wprainbow.com/memahami-hirarki-theme-template-wordpress/

Disebut kan,

Theme Template WordPress memiliki alur eksekusi berdasarkan aturan tertentu. Artikel kali ini akan membantu anda untuk memahami alur dari Theme Template

Prasyarat yang dibutuhkan

Sebelum Anda meneruskan untuk membaca artikel ini, pastikan Anda telah membaca artikel saya sebelumnya yang berjudul Menggunakan File Theme Template dan Mengenal Anatomi WordPress Theme.

Hirarki Theme Templates

Seperti yang telah kita tahu sebelumnya bahwa sebuah WordPress Theme minimal memiliki 2 file yaitu style.css dan index.php maka ketika sebuah WordPress Theme tidak memiliki file Theme Template diatas, maka akan digantikan fungsinya oleh Theme Template lainnya berdasarkan urutan hierarki yang telah ditentukan oleh WordPress.

Misal ketika pengunjung mengakses blog, maka engine WordPress pertama kali akan mencari file Theme Template home.php. Jika WordPress Theme yang aktif sekarang tidak memiliki file home.php maka yang akan digunakan adalah file index.php. Contoh lain ketika pengunjung membuka Category tertentu maka yang pertama kali dicari oleh engine WordPress adalah file category-id.php, jika tidak ditemukan maka file category.php-lah yang akan digunakan, jika masih tidak ditemukan maka file archieve.php. Terakhir jika masih belum ditemukan maka akan menggunakan file index.php.

Berikut ini bagan hirarki wordpress:

======== Step 2 [ Editing ] =========
Setelah kalian tadi download template html nya, sekarang extract dalam folder,
seperti yang terpampang di bagan diatas, kita bisa mengambil kesimpulan, hirarki tema wordpress paling paling sederhana, berikut susuannya.

1. Style.css
2. index.php
3. footer.php
4. header.php
5. comments.php
6. single.php
7. page.php
8. archive.php
9. functions.php

Itu lah susunan yang akan kita pakai sebagai dasarnya,
Sekarang kita cek tema html yang tadi kita download apakah sudah ada file file yang kita butuh kan itu atau belum? Yang pastinya belum, maka tugas kita selanjutnya adalah membuat file yang belum ada.

File yang sudah ada hanyalah style.css, maka untuk file yang lainya kita buat terlebih dahulu, sekarang buat file ber-extensi *php dari notepad, buat satu file “text document ” dan save as index.php

Setelah itu kita copy paste file index.php itu, buat 6 lagi, dan rename menjadi footer,header,single,page,comments,functions dan archieve.

Tugas kita selanjutnya, adalah mengisi header.php
Sekarang buka file index.html yang disertakan di temlpate html tadi, open with notepad.
berikut isi dari index.html

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>

<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>

<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>

<section id=”main”><!– #main content and sidebar area –>
<section id=”content”><!– #content –>

<article>
<h2><a href=”#”>First Article Title</a></h2>
<p><img src=”images/orangebutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

<article>
<h2><a href=”#”>Second Article Title</a></h2>
<p><img src=”images/coolbutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

</section><!– end of #content –>

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>

</section><!– end of #main content and sidebar–>

<footer>
<section id=”footer-area”>

<section id=”footer-outer-block”>
<aside>
<h4>Friends</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #first footer segment –>

<aside>
<h4>Awesome Stuff</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>

<aside>
<h4>Coolness</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #third footer segment –>

<aside>
<h4>Blahdyblah</h4>
<p>© 2010 <a href=”#”>yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!– end of #fourth footer segment –>

</section><!– end of footer-outer-block –>

</section><!– end of footer-area –>
</footer>

</div><!– #wrapper –>
<!– Free template created by http://freehtml5templates.com –>
</body>
</html>

Setelah terlihat isi indexnya, kita copy paste kedalam header.php
Berikut source yang akan kita copas.

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>

<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>

<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>

<section id=”main”><!– #main content and sidebar area –>

Sekarang tinggal kita edit source yang ada supaya dapat berjalan di blog wordpress kita,

<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />

Seperti yang kita liat di tag diatas, tag itu tidak akan di eksekusi oleh wp engine, sekarang kita ubah sedikit agar dapat berjalan di blog wp kita

Tertulis disana href=”styles.css” jika dalam wordpress tag yang digunakan untuk memanggile style.css seperti ini <?php bloginfo (‘stylesheet_url’);?> maka dari itu, tulisan style.css kita ganti dengan tag diatas.,, maka akan menjadi seperti ini

<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’);?>” type=”text/css” media=”screen” />

Disana juga terdapat *.css yang lain

<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

Maka untuk memanggilnya kita gunakan tag kedua,

<?php bloginfo (‘template_url’);? />

Tambahkan tag itu di depan print.css maka hasilnya seperti ini

<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo (‘template_url’);?>/ print.css” media=”print” />

Oke, setelah itu kita sisipkan tag

<?php wp_head(); ?>

Sebelum </head>

Setelah itu kita SAVE.

Hasil akhirnya seperti ini

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’);?>” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo (‘template_url’);?>/ print.css” media=”print” /> <!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>

<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>

<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>

<section id=”main”><!– #main content and sidebar area –>

Sebelum kita lanjut pada tahap selanjutnya, sedikit akan saya bahas apa saja sih yang bisa dimasukan kedalah header.php ini??

Disini kita bisa sisipkan favicon.

Contoh pemanggilan faviconya seperti ini

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />

Untuk perjumpaan yang sekarang saya cukupkan sampai disini dulu, udah magrib, saatnya saya untuk mandi dan solat, so kita lanjutkan pada perjumpaan yang selanjutnya..

Oke, have a niceday and GBU

PART 2

Oke kawan, selamat morning, kali ini kita akan membahas Belajar Membuat Theme WordPress Part 2.
Kita awali pagi dengan senyuman, oke

Oke, sebelum kita lanjutkan pembahasan yang kemaren, http://www.binushacker.net/belajar-membuat-theme-wordpress-p1.html, mungkin diantara kalian yang membaca dan menyimak tutor ini bertanya tanya, kenapa tag html nya berbeda dari html yang biasa kita jumpai?

Jadi begini kawan, dunia internet semakin berkembang, dan para developer web pun mengembangkan source supaya lebih mudah dan simple, maka dari itu, sedikit demi sedikit saya akan membiasakan dalam tutor desain yang saya berikan itu menggunakan HTML5+css3, karena dalam dalam dunia webdis (web desain) source ini sedang di gandrungi

Oke, sekarang kita lanjut ke step selanjutnya….
Setelah kemaren kita membuat file header.php
Sekarang kita akan membuat pasanganya, yaitu footer.php

Sedikit kita review… tag index yang kemaren…

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>

<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>

<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>

<section id=”main”><!– #main content and sidebar area –>
<section id=”content”><!– #content –>

<article>
<h2><a href=”#”>First Article Title</a></h2>
<p><img src=”images/orangebutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

<article>
<h2><a href=”#”>Second Article Title</a></h2>
<p><img src=”images/coolbutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

</section><!– end of #content –>

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>

</section><!– end of #main content and sidebar–>

<footer>
<section id=”footer-area”>

<section id=”footer-outer-block”>
<aside>
<h4>Friends</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #first footer segment –>

<aside>
<h4>Awesome Stuff</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>

<aside>
<h4>Coolness</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #third footer segment –>

<aside>
<h4>Blahdyblah</h4>
<p>© 2010 <a href=”#”>yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!– end of #fourth footer segment –>

</section><!– end of footer-outer-block –>

</section><!– end of footer-area –>
</footer>

</div><!– #wrapper –>
<!– Free template created by http://freehtml5templates.com –>
</body>
</html>

Dari source diatas kita akan ambil bagian footernya,
Here we go……..

</section><!– end of #main content and sidebar–>

<footer>
<section id=”footer-area”>

<section id=”footer-outer-block”>
<aside>
<h4>Friends</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #first footer segment –>

<aside>
<h4>Awesome Stuff</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>

<aside>
<h4>Coolness</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #third footer segment –>

<aside>
<h4>Blahdyblah</h4>
<p>© 2010 <a href=”#”>yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!– end of #fourth footer segment –>

</section><!– end of footer-outer-block –>

</section><!– end of footer-area –>
</footer>

</div><!– #wrapper –>
<!– Free template created by http://freehtml5templates.com –>
</body>
</html>

Dalam footer ini ga ada yang aneh, secara keseluruhan hampir sama dengan header, so just place this code<?php wp_footer(); ?> before </body>,

Berikut fungsi wp_footer menurut
http://www.wpdesigner.com

The wp_footer() function is often used by plugins to insert PHP codes after everything else on your page. According to WordPress.org theme development documentation, you should place the wp_footer() function in the footer, which would be in the footer.php file.

One detail that WordPress.org doesn’t mention is that most plugins (i.e: Spam Karma 2, PodPress, and FireStats), using the wp_footer() function, tend to break your theme. A well-designed and well-built theme is nothing without a safely placed wp_footer() function.

Here’s my advice. Don’t place the wp_footer() function right before the end; that’s usually the closing body tag. Instead, place that function within a DIV or container. For example:

Posts

Sidebar

If you do that, no matter what a certain plugin does to the footer of your theme, it doesn’t expand beyond the container or DIV containing the wp_footer() function. You can open up the footer.php file of the Greed theme for an example.

Update:
Place the wp_footer() function within a style-less container (usually the outermost div with no backgrounds and images) that your layout doesn’t depend on. Otherwise, you might end up with an incomplete layout while waiting for a slow loading plugin.

Jadi secara harfiah fungsi dari wp_footer adalah sebagai tolak ukur penggunaan plug-in jika ingin plug-in nya itu berjalan seperti sebagai mana mestinya.
Jadi final source untuk footer.php ada lahah seperti ini.

</section><!– end of #main content and sidebar–>

<footer>
<section id=”footer-area”>

<section id=”footer-outer-block”>
<aside>
<h4>Friends</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #first footer segment –>

<aside>
<h4>Awesome Stuff</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>

<aside>
<h4>Coolness</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #third footer segment –>

<aside>
<h4>Blahdyblah</h4>
<p>© 2010 <a href=”#”>yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!– end of #fourth footer segment –>

</section><!– end of footer-outer-block –>

</section><!– end of footer-area –>
</footer>

<?php wp_footer(); ?>

</div><!– #wrapper –>
<!– Free template created by http://freehtml5templates.com –>

</body>
</html>

So thats all our leason for today, hope you understand.
And than have a great day and GBU
See ya in next step….

PS: Untuk berdiskusi silakan ke: http://forum.binushacker.net

PART 3

Malam, begadang nih, dari pada ga ada kerjaan mending kita lanjutin materi yang sebelumnya gue bahas yaitu membuat footer.php
langsung aja dah,

Step selanjutnya adalah membuat isian dari index.php
Sebelumnya kita ulas dulu isi dari header.php dan footer.php

header.php

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>ButterflyBrilliance</title>
<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’);?>” type=”text/css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo (‘template_url’);?>/ print.css” media=”print” /> <!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>
</head>
<body>
<div id=”wrapper”><!– #wrapper –>

<header><!– header –>
<h1><a href=”#”>Butterfly Brilliance</a></h1>
<h2>Your interesting tag line goes here</h2>
</header><!– end of header –>

<nav><!– top nav –>
<div>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav><!– end of top nav –>

<section id=”main”><!– #main content and sidebar area –>

footer.php

</section><!– end of #main content and sidebar–>

<footer>
<section id=”footer-area”>

<section id=”footer-outer-block”>
<aside>
<h4>Friends</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #first footer segment –>

<aside>
<h4>Awesome Stuff</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>

<aside>
<h4>Coolness</h4>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
<li><a href=”#”>three linkylinks</a></li>
</ul>
</aside><!– end of #third footer segment –>

<aside>
<h4>Blahdyblah</h4>
<p>© 2010 <a href=”#”>yoursite.com</a> Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</aside><!– end of #fourth footer segment –>

</section><!– end of footer-outer-block –>

</section><!– end of footer-area –>
</footer>

<?php wp_footer(); ?>

</div><!– #wrapper –>
<!– Free template created by http://freehtml5templates.com –>

</body>
</html>

Oke sekarang kita buat index nya, buka file index.php nya
Dan masukan 2 code ini:

<?php get_header()?>

<?php get_footer();?>

Sekarang buka file index.html dari tema yang kemaren kita download dan copy paste code ini di antara kedua code diatas,dan hasilnya seperti ini.

<?php get_header()?>
<section id=”content”><!– #content –>

<article>
<h2><a href=”#”>First Article Title</a></h2>
<p><img src=”images/orangebutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

<article>
<h2><a href=”#”>Second Article Title</a></h2>
<p><img src=”images/coolbutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Maurismassa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

</section><!– end of #content –>

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>
<?php get_footer();?>

Sampai disini sebenarnya template ini sudah siap di tes (tapi belum layak pakai)
Tugas kita selanjutnya adalah menampilkan hasil dari postingan kita.

Seperti yang tertulis dari code index diatas, disana terdapat dua tag article, kita buang saja satu,
Hasilnya seperti ini:

<?php get_header()?>
<section id=”content”><!– #content –>

<article>
<h2><a href=”#”>First Article Title</a></h2>
<p><img src=”images/orangebutterfly.png” alt=”” />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</article>

</section><!– end of #content –>

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>
<?php get_footer();?>

Sekarang kita akan memasangkan jamu pemanggil postingan kita,
Here we go…..

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

Kita pasangkan di tag article kita, final code is right here.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php endwhile; ?>

<?php endif; ?>

Jadi hasil dari kerja kita malam ini menghasilkan source index.php seperti ini:

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>
<?php get_footer();?>

Untuk sekarang di cukupkan dulu, kita akan lanjutkan nanti pada tahap pembuatan single.php
So keep stay in www.BinusHacker.net for more useable article.
Good nite and have a great dream to night.

See ya

PART 4

Yah baru sempet posting lagi.. beberapa hari ini agak disibukan ma tunggakan tugas yang udah musti kelar buat sarat ikut UAS, ditambah lagi repot beresin porum komunitas, tutor nya jadi terbengkalai dah….

Berhubung hutang itu harus di bayar, jadi ane lanjutin lagi dah tutor nya…

Mungkin dari kalian semua ada yang berpendapat kenapa tutor nya ga disatuin aja, kenapa musti dibagi bagi gini??
gini gan, dulu ane pernah singgah disalah satu blog tutor, disana menerapkan one week one content.dan itu ternyata berhasil, karena kita akan lebih fokus dalam satu ulasan itu, tanpa terpengaruh oleh yang lain, nah konsep seperti itu mulai ane terapin dihampir semua site garapan ane,ane harap sih, kalian semua bisa menerima cara penyampaian yang ane jalankan, sukur sukur agan semua kaga puas dengan apa yang udah ane sampein, jadi bisa bertanya dan lebih ngulik lagi soal bahasanya, tambah banyak kan tambah ilmu. right?

Lanjut setelah kemaren kita buat index.php..
http://www.binushacker.net/belajar-membuat-theme-wordpress-p3.html

Enaknya kita ngelancong kemana dulu ya??
Yang pendek pendek dulu aja kalia ya.. oke deh,, hari ini kita akan bahas sidebar.php
Sebelum nya review dulu isian dari idex.php

index.php

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>
<?php get_footer();?>

Dalam html5, sudah disediakan tag sidebar, yaitu “aside” jadi kita buka file sidebar.php
dan index.php nya,

Cut code ini dari index.php

<aside id=”sidebar”><!– sidebar –>
<h3>Things To Do</h3>
<ul>
<li><a href=”#”>Play Games</a></li>
<li><a href=”#”>Chat With Friends</a></li>
<li><a href=”#”>Swap Stories</a></li>
<li><a href=”#”>Sell Stuff</a></li>
<li><a href=”#”>Buy Stuff</a></li>
<li><a href=”#”>Trade Stuff</a></li>
</ul>

<h3>Sponsors</h3>
<img src=”images/ad125.jpg” alt=”” /><br /><img src=”images/ad125.jpg” alt=”” /><br /><br />

<h3>Connect With Us</h3>
<ul>
<li><a href=”#”>Twitter</a></li>
<li><a href=”#”>Facebook</a></li>
</ul>

</aside><!– end of sidebar –>

Dan paste-kan di sidebar.php

Sekarang buka lagi file index.php nya, kita akan masukan tak pemanggil sidebar.
Here we go….

<?php get_sidebar(); ?>

Nah, sekarang pasang fungsi itu di index.php

Jadinya seperti ini….

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<?php get_sidebar(); ?><?php get_footer();?>

Setelah itu save file index.phpnya, sekarang buka file sidebar.php
Nah berikut fungsi yang biasa diisikan di file sidebar.php

<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>
<?php wp_list_cats(); ?>
<?php wp_get_archives(‘type=monthly’); ?>
<?php related_posts(10, 10, ‘<li>’, ‘</li>’, ”, ”, false, false); ?>

Fungsi diatas masih bisa agan semua modifikasi lagi,silakan lihathttp://codex.wordpress.org/Customizing_Your_Sidebar jika ingin mengetahui lebih dalam tentang costumasi sidebar. untuk sekarang saya hanya akan menggunakan sebagian saja biar tidak riweuh… wkwkwk

Ini hasil akhir untuk file sidebar.php

<aside id=”sidebar”><!– sidebar –>
<h3>
<?php _e(‘Categories:’); ?>
</h3>
<ul>
<?php wp_list_categories(‘title_li=‘); ?>
</ul>

<h3>
<?php _e(‘Pages:’); ?>
</h3>
<ul>

<?php wp_list_pages(‘title_li=’); ?>

</ul>

<h3>
<?php _e(‘Archiev:’); ?>
</h3>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>

</aside><!– end of sidebar –>

Save and done…

Oke cukup dulu ah....
Mau lanjut lagi ngerjain makalah. so keep stay @ binushacker.net
and see ya.
GBU

PART 5

Yang langsung nyantol di link ini, nih ane kasih part part sebelum mulai beranjak untuk membaca part 5 ini. silakan di pelajari dan di komentari

Kemaren kita udah buat file sidebar.php, dan berhubung sekarang waktu ane sangat sangat singkat banget, jadi kita mulai dengan hal file yang simple dulu kali ye…

Oke yang sekarang akan kita bahas adalah membuat file comments.php

Berhubung ane sendiri sampe sekarang masih agak bingung tentang costumasi file comments.php jadi ane kasih mentahnya aja untuk kalian copas di file comments.php yang sebelumnya telah kita buat.

Silakan pastekan function ini di comments.php

<?php // Do not delete these lines
if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Please do not load this page directly. Thanks!’);

if (!empty($post->post_password)) { // if there’s a password
if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
?>

<p>This post is password protected. Enter the password to view comments.</p>

<?php
return;
}
}

/* This variable is for alternating comment background */
$oddcomment = ”;
?>

<!– You can start editing here. –>

<?php if ($comments) : ?>
<h2 id=”comments”>Comments</h2>

<div>
<?php wp_list_comments2(); ?>
</div>

<?php else : // this is displayed if there are no comments so far ?>

<?php if (‘open’ == $post->comment_status) : ?>
<!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>
<!– If comments are closed. –>
<p>Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

<?php if (‘open’ == $post->comment_status) : ?>

<div id=”respond”>
<h3 id=”respond_title”>Post a comment</h3>

<div>
<small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
<p>You must be <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>”>logged in</a> to post a comment.</p>
<?php else : ?>

<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
<div>
<?php theme_google_300_ads_show(); ?>
</div>

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a href=”<?php echo wp_logout_url(get_permalink()); ?>” title=”Log out of this account”>Log out »</a></p>

<?php else : ?>

<p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”22″ tabindex=”1″ <?php if ($req) echo “aria-required=’true’”; ?> />
<label for=”author”><small>Name <?php if ($req) echo “(required)”; ?></small></label></p>

<p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”22″ tabindex=”2″ <?php if ($req) echo “aria-required=’true’”; ?> />
<label for=”email”><small>Mail (will not be published) <?php if ($req) echo “(required)”; ?></small></label></p>

<p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”22″ tabindex=”3″ />
<label for=”url”><small>Website</small></label></p>

<?php endif; ?>

<!–<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>–>

<p><textarea name=”comment” id=”comment” cols=”100%” rows=”10″ tabindex=”4″></textarea></p>

<p><input name=”submit” type=”image” src=”<?php bloginfo(‘template_url’)?>/images/comm_sub.gif” id=”submit” tabindex=”5″ value=”Submit Comment” />
<?php comment_id_fields(); ?>
</p>
<?php do_action(‘comment_form’, $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>

Dari pengalaman ane selama ini mengostumasi file comments.php, ane hanya mengetahui beberapa dari ratusan bahkan ribuat trik untuk membuat menarik comments kalian…

Kalian bisa mempercantik tag tag html nya dengan mengcostumasinya di style.css

So thats it for today.

Semoga kalian tidak puas dan terus bertanya.

Stay connect with us @ http://www.binushacker.net

And forum @ http://forum.binushacker.net

See ya and have a nice day……

PART 6

Yo yo yo. selamat malam kawan semuanya…. mari kita lanjutkan pembelajaran kita pada pembahasan pembuatan tema wordpress.

Ga kerasa sekarang itu udah memasuki tuto yang part 6,

Yang sekarang akan kita bahas adalah cara membuat file single.php, oh iye, tutor ini ane dah susun mulai dari depan hingga belakang secara berurutan, seperti pada part 1 kita membahas membuat header, dan footer pada part 2, dilanjutkan dengan index pada part 3, disusul oleh sidebar pada part 4, dan comments pada part 5, jadi menurut hemat saya, maka selanjutnya adalah single, so lets start….
pada dasarnya, single.php itu sama dengan index.php hanya saja ada beberapa tambahan pada page single. seperti komentar, similiar post, etc.

Jadi untuk membuat single.php kita buka dulu file index.php
Dan copas isinya ke single.php….

Berikut adalah isi dari index.php renewal yang udah di refisi pada part 4,

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<?php get_sidebar(); ?><?php get_footer();?>

Nah sekarang tambah kan code pemanggil comment

Berikut code nya…

<?php comments_template(); ?>

Letakan sebelum endwhile, maka hasil akhirnya seperti ini…

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php comments_template(); ?>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<?php get_sidebar(); ?><?php get_footer();?>

Save code diatas dengan nama single.php,
Mudah kan.. oke sekarang mah belajarnye pendek pendek aje dulu ye.. cz takut muntah klo di jejelin bejibun code dalam sekali lahap, Pelan pelan aje ye, supaya tar kalian pada bisa dan berkarya dengan ilmu,,

So thats it for today..
I’ll teach you all in next meeting..
Have a great day, and see ya…

NB : keep learning and join us @ forum.binushacke.net

PART 7

Selamat malam semuanye… pa kabar nih?? bertemu lagi dengan angga a.k.a anggamovic, setelah kemaren kita buat file single.php sekarang kita akan membahas page.php

Sebenernye sama aja dengan single.php cuma page.php ini akan didipake sebagai default page yang kita buat.

Sekarang kita buka lagi file single.php nya.. dan copy semua source yang ada, copas ke file page.php

Maka file page.php akan menjadi seperti ini

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php comments_template(); ?>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<?php get_sidebar(); ?><?php get_footer();?>

Ada satu lagi trik di file page.php ini. ane nemu trik ini setelah beberapa waktu lalu ane mau buat page galery di blog ane, tapi rasanya canggung klo pake template page bawaan tema. makanya ane cari sumber lain dan ga jauh jauh.. ketemunye di instalan wordpress juga, tepatnye di tema bawaan wordpress.. nah hal yang perlu kalian tambahkan untuk membuat page yang kalian ingin kan dan pastinya beda dari page.php yang ada. silakan kalian modifikasi sebagus mungkin file page.php nya. setelah itu save as, ubah namanya terserah kalian, disini saya kasih contoh galery.php nah setelah itu kalian tambah kan code ini tepat di atas

<?php get_header();?>

Berikut codenya

<?php /*

Template Name: Galery

*/ ?>

Nah jadinya seperti ini

<?php /*

Template Name: Galery

*/ ?>

<?php get_header()?>
<section id=”content”><!– #content –>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article>
<h2><a href=”<?php the_permalink() ?>” ><?php the_title(); ?></a></h2>
<p><img src=”<?php bloginfo(‘template_directory’); ?>/images/orangebutterfly.png” alt=”” />

<?php the_content(‘Read more »’); ?></p>
</article>

<?php comments_template(); ?>

<?php endwhile; ?>

<?php endif; ?>

</section><!– end of #content –>

<?php get_sidebar(); ?><?php get_footer();?>

Oke untuk kostumasinya saya akan tampilkan jika tutorial ini sudah selesai dan tema hasil buatan kita ..

So have a nice day and nice day

Membuat Snake Game Dengan HTML5

Posted: Januari 24, 2012 in torutorial

Halaman 404 ato maintenance adalah suatu masa dimana kita harus menyiapkan page khusus untuk itu, nah begitu pun saya, dan kemaren kemaren saya coba belajar tentang canvas yang notabenya adalah tag baru yang di muncukan pada html5, nah sekarang sialakan di nikmati hasil nya

Silakan di coba
Demo : http://anggamovic.co.tv/demo/snake.php

Source :

<!documentTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Play Snake Game</title>
<style type=”text/css”>
body {text-align:center;}
canvas { border:5px dotted #ccc; }
h1 { font-size:50px; text-align: center; margin: 0; padding-bottom: 25px;}
</style>
<script type=”text/javascript”>
function play_game()
{
var level = 160; // Game level, by decreasing will speed up
var rect_w = 45; // Width
var rect_h = 30; // Height
var inc_score = 50; // Score
var snake_color = “#006699″; // Snake Color
var ctx; // Canvas attributes
var tn = []; // temp directions storage
var x_dir = [-1, 0, 1, 0]; // position adjusments
var y_dir = [0, -1, 0, 1]; // position adjusments
var queue = [];
var frog = 1; // defalut food
var map = [];
var MR = Math.random;
var X = 5 + (MR() * (rect_w – 10))|0; // Calculate positions
var Y = 5 + (MR() * (rect_h – 10))|0; // Calculate positions
var direction = MR() * 3 | 0;
var interval = 0;
var score = 0;
var sum = 0, easy = 0;
var i, dir;
// getting play area
var c = document.getElementById(‘playArea’);
ctx = c.getContext(’2d’);
// Map positions
for (i = 0; i < rect_w; i++)
{
map[i] = [];
}
// random placement of snake food
function rand_frog()
{
var x, y;
do
{
x = MR() * rect_w|0;
y = MR() * rect_h|0;
}
while (map[x][y]);
map[x][y] = 1;
ctx.fillStyle = snake_color;
ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);
}
// Default somewhere placement
rand_frog();
function set_game_speed()
{
if (easy)
{
X = (X+rect_w)%rect_w;
Y = (Y+rect_h)%rect_h;
}
–inc_score;
if (tn.length)
{
dir = tn.pop();
if ((dir % 2) !== (direction % 2))
{
direction = dir;
}
}
if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y])
{
if (1 === map[X][Y])
{
score+= Math.max(5, inc_score);
inc_score = 50;
rand_frog();
frog++;
}
//ctx.fillStyle(“#ffffff”);
ctx.fillRect(X * 10, Y * 10, 9, 9);
map[X][Y] = 2;
queue.unshift([X, Y]);
X+= x_dir[direction];
Y+= y_dir[direction];
if (frog < queue.length)
{
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
}
else if (!tn.length)
{
var msg_score = document.getElementById(“msg”);
msg_score.innerHTML = “Thank you for playing game.<br /> Your Score : <b>”+score+”</b><br /><br /><input type=’button’ value=’Play Again’ onclick=’window.location.reload();’ />”;
document.getElementById(“playArea”).style.display = ‘none’;
window.clearInterval(interval);
}
}
interval = window.setInterval(set_game_speed, level);
document.onkeydown = function(e) {
var code = e.keyCode – 37;
if (0 <= code && code < 4 && code !== tn[0])
{
tn.unshift(code);
}
else if (-5 == code)
{
if (interval)
{
window.clearInterval(interval);
interval = 0;
}
else
{
interval = window.setInterval(set_game_speed, 60);
}
}
else
{
dir = sum + code;
if (dir == 44||dir==94||dir==126||dir==171) {
sum+= code
} else if (dir === 218) easy = 1;
}
}
}
</script>
</head>
<body onload=”play_game()”>
<h1>Play Snake Game</h1>
<div id=”msg”></div>
<canvas id=”playArea” width=”450″ height=”300″>Sorry your browser does not support HTML5</canvas>
</body>
</html>

Keep learning
Silakan di kembangkan
Demo : http://anggamovic.co.tv/demo/snake.php

Cara Reset Printer EPSON T11

Posted: Januari 24, 2012 in torutorial

Ada beberapa jenis printer yang sering mengalami blinking adalah printer yang bermerk epson dan canon, untuk epson seperti tipe T10, T11, T20, C41, C45, C90 untuk printer canon misalnya IP100, IP1600, atau seri IP lainnya. Untuk kali ini akan saya bahas adalah cara reset printer sendiri untuk tipe epson t10 dan t11 yang biasanya tipe ini sudah di modifikasi dengan menggunakan tinta infus. kelebihan dan kekurangan printer infus dan tidan infus akan saya bahas nanti. Oke langsung saya ikuti langkah-langkahnya cara reset printer epson t10 dan t11.

Download file reset Download reseter printer EPSON T10 dan T11

Ekstrak File Menggunakan Winzip, 7Zip atau Winrar
Double Klik Loader.exe (Ingat!! Jangan klik AdjProg.exe)
Klik Accept
Klik Select Untuk memilih Jenis printer.
Klik Particular adjustment Mode
Cari Tulisan Waste Ink pad Counter
Klik OK
Klik Check untuk mengecek Main pad Counter
Klik Initialization
Matikan Printer jika di minta.
Nyalakan kembali
Klik Finish

Selamat Mencoba!

Membuat Mail Server + Virtual Domain di Ubuntu

Posted: Januari 24, 2012 in torutorial

KALI INI KITA AKAN MEMBUAT MAIL SERVER DENGAN UBUNTU 9.10

apache2 , mysql , postfix, dovecot , squirellmail senjata utamanya

postfix adalah sebuah program pengirim email sebagai pengganti dari sendmail.

Postfix is a free and open-source mail transfer agent (MTA) that routes and delivers electronic mail.

It is intended as a fast, easier-to-administer, and secure alternative to the widely-used Sendmail MTA. (wiki)

Dovecot is an open source IMAP and POP3 server for Linux/UNIX-like systems, written primarily with security in mind. Developed by Timo Sirainen, Dovecot was first released in July 2002. Dovecot primarily aims to be a lightweight, fast and easy to set up open source mailserver. (wiki)

1. Persiapan sistem untuk Ubuntu 9.10

Agar nantinya tidak terdapat broken system alangkah baek nya install ubuntu dengan build essential

sudo apt-get install build-essential

2. Install file utama

sudo apt-get install postfix postfix-msql php5-imap dovecot-pop3d dovecot-imapd

php5-mysql squirrelmail apache2

3. Cek system apakah apache2 postfix dan dovecot ny udah ada lum disystem

service apache2 status && service postfix status && service dovecot status

4. Buat Database Untuk Postfix

  root@kaitokid:~# mysql -u root -p     // -p masukkan passwd mysql nya
  mysql> create database postfix; mysql> grant all privileges on postfix.* to 'postfix'@'localhost' identified by 'postfixpassword'; mysql> grant all privileges on postfix.* to 'postfix'@'127.0.0.1' identified by 'postfixpassword'; mysql> exit
  // ganti 'postfixpasswd' sesuai pasword yang di inginkan & 'postfix'
     sesuai dengan user yang dinginkan

5. Download postfixadmin untuk mempermudah administrasi mail

 http://sourceforge.net/projects/postfixadmin/

6. Extract hasil download postfixadmin dan pindahkan ke /var/www

 root@kaitokid:~# cd /var/www/ root@kaitokid:/var/www# tar xzf /home/kaitokid/postfixadmin-2.**.tar.gz root@kaitokid:/var/www# mv postfixadmin-2.**/ postfix root@kaitokid:/var/www# chown -R www-data.www-data /var/www

7. Setup config.inc.php postfixadmin

root@kaitokid:~# nano /var/www/postfix/config.inc.php

   // Database Config
   // mysql = MySQL 3.23 and 4.0
   // mysqli = MySQL 4.1
   // pgsql = PostgreSQL
  $CONF['database_type'] = 'mysqli'; //sesuaikan dg sql nya untuk mysql seri 4 keatas gunakan mysqli
  $CONF['database_host'] = 'localhost';
  $CONF['database_user'] = 'postfix';   // user database di mysql  lihat nomer 4
  $CONF['database_password'] = 'postfixpassword';  // user database mysql lihat nomer 4
  $CONF['database_name'] = 'postfix';  $CONF['database_prefix'] = '';  //default kosong

8. Setup postfix admin

buka web browser firefox kemudian buka URL

http://127.0.0.1/postfix/setup.php

// waktu instalasi pastikan tidak ada error & untuk ppostfixadmin series 2.3 file setup tidak perlu dihapus

//pastikan web server di komputer udah jalan

9. Konfigurasi MySQL postfix

//konfigurasi user & passwd sesuai dg nomer 4

nano /etc/postfix/mysql_virtual_alias_maps.cf
    user = postfix
    password = postfixpassword
    hosts = 127.0.0.1
    dbname = postfix
    table = alias
    select_field = goto
    where_field = address
nano /etc/postfix/mysql_virtual_mailbox_maps.cf
    user = postfix
    password = postfixpassword
    hosts = 127.0.0.1
    dbname = postfix
    table = mailbox
    select_field = maildir
    where_field = username
    #additional_conditions = and active = '1'
nano /etc/postfix/mysql_virtual_mailbox_limit_maps.cf
   user = postfix
   password = postfixpassword
   hosts = 127.0.0.1
   dbname = postfix
   table = mailbox
   select_field = quota
   where_field = username
   #additional_conditions = and active = '1'

nano /etc/postfix/mysql_virtual_domains_maps.cf
  user = postfix
  password = postfixpassword
  hosts = 127.0.0.1
  dbname = postfix
  table = domain
  select_field = domain
  where_field = domain
  #additional_conditions = and backupmx = '0' and active = '1'

nano /etc/postfix/mysql_relay_domains_maps.cf
   user = postfix
   password = postfixpassword
   hosts = 127.0.0.1
   dbname = postfix
   table = domain
   select_field = domain
   where_field = domain
   #additional_conditions = and backupmx = '1'
  chgrp postfix /etc/postfix/mysql_*.cf
  chmod 640 /etc/postfix/mysql_*.cf
  groupadd -g 5000 vmail
  useradd -m -g vmail -u 5000 -d /home/vmail -s /bin/bash vmail

10. konfigurasi postfix main.cf

   nano /etc/postfix/main.cf
   # Virtual Mailbox Domain Settings
  //konfigurasi default main.cf untuk opreknya tunggu di part 2 mail server 

  myhostname = ubuntu  //sesuaikan dg hostname komputer yang dipakai mail server
  virtual_alias_maps = mysql:/etc/postfix/mysql_virtual_alias_maps.cf
  virtual_mailbox_domains = mysql:/etc/postfix/mysql_virtual_domains_maps.cf
  virtual_mailbox_maps = mysql:/etc/postfix/mysql_virtual_mailbox_maps.cf
  virtual_mailbox_limit = 51200000
  virtual_uid_maps = static:5000
  virtual_gid_maps = static:5000
  virtual_mailbox_base = /home/vmail
  virtual_transport = virtual

   # Additional for quota support
  virtual_create_maildirsize = yes
  virtual_mailbox_extended = yes
  virtual_mailbox_limit_maps = mysql:/etc/postfix/mysql_virtual_mailbox_limit_maps.cf
  virtual_mailbox_limit_override = yes
  virtual_maildir_limit_message = Sorry, the your maildir has overdrawn your diskspace
                       quota, please free up some of spaces of your mailbox try again.
  virtual_overquota_bounce = yes
  alias_maps = hash:/etc/aliases
  alias_database = hash:/etc/aliases
  mydestination =
  relayhost =
  mynetworks = 127.0.0.0/8 [::ffff:127.0.0.0]/104 [::1]/128
  mailbox_size_limit = 0
  recipient_delimiter = +
  inet_interfaces = all

11. Konfigurasi Dovecot POP3 dan IMAP4

nano /etc/dovecot/dovecot.conf
   protocols = imap pop3
   disable_plaintext_auth = no
   default_mail_env = maildir:/home/vmail/%u/
   first_valid_uid = 5000
   first_valid_gid = 5000
   # SQL database
    passdb sql {
   # Path for SQL configuration file
   args = /etc/dovecot/dovecot-sql.conf
   }
   # SQL database
   userdb sql {
   # Path for SQL configuration file
   args = /etc/dovecot/dovecot-sql.conf
   }
nano /etc/dovecot/dovecot-sql.conf
   driver = mysql
   connect = host=127.0.0.1 dbname=postfix user=postfix password=postfixpassword
   default_pass_scheme = CRYPT
   user_query = SELECT maildir, 5000 AS uid, 5000 AS gid FROM mailbox WHERE username = '%u'
   password_query = SELECT password FROM mailbox WHERE username = '%u'

ok sampai disini dulu happy mailing and happy ubuntu

Encrypt & Decrypt Email

Posted: Januari 24, 2012 in torutorial

Email, tidak sepenuhnya pribadi. Server menyimpan email tanpa batas, dan account ini adalah beberapa yang paling mudah untuk di hack. Pesan yang dikirim melalui Facebook tampaknya lebih rentan daripada email. Tetapi untuk hal ini anda bisa melakukan Encrypt Gmail, Facebook dan Text pesan.
Encipher.it dapat Encrypt Gmail, Facebook dan Text pesan, asalkan penerima memiliki password yang dibutuhkan untuk mendekripsi itu. Encipher.it dirancang untuk bekerja dari bookmark. Jika anda menggunakan Firefox atau Chrome, anda cukup drag dlm kode biru link ke panel bookmark anda. Jika anda menggunakan Internet Explorer, klik kanan link dan menambahkannya ke favorit anda.

image thumb182 Encrypt Gmail, Facebook dan Text pesan

Selanjutnya Pergi ke situs dari mana anda ingin mengirim pesan terenkripsi. Gmail, Facebook dan bahkan Hotmail akan bekerja dengan Encipher.it. Ketik pesan anda, lalu klik link bookmark yang baru saja dibuat.

step2 Encrypt Gmail, Facebook dan Text pesan
Encipher.it kemudian akan meminta anda untuk membuat kunci enkripsi. Masukkan sandi. Penerima pesan anda juga akan membutuhkan password ini untuk melihat pesan yang terenkripsi. Setelah anda membuat password pesan email atau text pesan secara otomatis pesan akan berubah menjadi sebuah kata yang acak dan untuk ini pesan siap untuk dikirim.
image thumb185 Encrypt Gmail, Facebook dan Text pesan

Penerima kemudian harus mengunjungi encipher.it dan menginstal alat penunjuk, atau paste pesan tersebut ke dalam kotak teks di bagian bawah situs encipher.it. Dan penerima harus memiliki kunci enkripsi pesan untuk menguraikan isi pesan dari sang pengirim.

image thumb186 Encrypt Gmail, Facebook dan Text pesan

Enkripsi hanya menyediakan lapisan tambahan perlindungan dan tidak sepenuhnya menjamin kerahasiaan tetapi setidaknya ini akan membantu anda untuk penggunaan email yang dirasa rahasia atau penting anda bisa gunakan untuk Encrypt Gmail, Facebook dan Text pesan.
Untuk mencoba anda bisa langsung kunjungi situs berikut ini.

ENCRYPT & DECRYPT

Enkripsi USB Drive Menggunakan Truecrypt

Posted: Januari 24, 2012 in torutorial

Kali ini kami akan berbagi video bagaimana caranya agar kita bisa melakukan enkripsi USB yang kita miliki menggunakan Truecrypt.

Truecrypt

Hal ini bertujuan untuk apa?
Untuk mengamankan USB kita dari pencuri sehingga data sensitif kita menjadi lebih aman dan nyaman.
Disamping itu juga agar data private anda akan jauh lebih terjaga + kalau USB hilang kita tidak khawatir dengan isi data yang ada di dalam USB

Sambil lalu silakan download toolnya disini:

Untuk petunjuk langkah-langkah dan detailnya bisa langsung di lihat di video berikut.
Oke, langsung saja kita tonton videonya:

Semoga artikel di atas bermanfaat & tingkatkan kemampuan anda

Cara Mempercepat Kinerja Komputer

Posted: Januari 24, 2012 in torutorial

MEMPERCEPAT KINERJA WINDOWS OS

Mempercepat kinerja komputer sangat diperlukan bagi kita yang sering bekerja dengan komputer. Ada kalanya saat kita sedang asyik mencari data di komputer kita, kita menggunakan Windows Explorer. Namun di sela-sela keasyikan kita untuk menelusuri folder demi folder dengan menggunakan Windows Explorer, fasilitas scrolling yang ada pada Windows Explorer mengalami macet dan begitu berat serta lamban, sehingga sulit untuk menggulung layar ke arah bawah.

Tentu kita akan merasa sangat jengkel dan merasa terganggu karena pekerjaan kita menjadi terhambat oleh lambatnya kinerja scrolling yang berat dan lamban. Ada kalanya juga komputer kita sering hank dan ngadat, atau bahkan mati total.

Untuk menghindari hal-hal tersebut, sobat bisa mengikuti tips-tips berikut ini :

Mempercepat Kinerja Windows XP:

Mempercepat Kinerja Windows XP :

Menonaktifkan atau mengurangi semua fitur grafik dan efek di WinXP.

Caranya : klik kanan di My Computer – Properties – Advanced – ada 3 menu setting – pilih Setting Performance (paling atas) , matikan semua fitur yang anda rasa tidak perlu dengan menghilangkan tanda centangnya atau anda bisa memilih adjust for best performance untuk menonaktifkan semuanya.

Hapus Prefetch.

Caranya : klik-kanan menu start – explore – windows – Prefetch – hapus semua yang ada di folder Prefetch tersebut. ini boleh anda lakukan setiap waktu bila isi folder Prefetch sudah banyak.

Percepat start-up menu.

Caranya : klik satrt – run – ketik regedit – klik OK – masuk Registry Editor – klik-HKEY_CURRENT_USER – Control Panel – Desktop – pada jendela kanan double klik MenuShowDelay – ganti Value data yang defaultnya 400 menjadi 0 (nol) – klik Ok – tutup Registry Editor.

Menonaktifkan start-up program yang tidak perlu.

Caranya : klik start – run – ketik msconfig – klik Ok – masuk System Configuration Utility – klik startup (kanan atas) hilangkan centang pada list program yang anda anggap tidak perlu-restart PC anda.

Sesering mungkin mendefrag dan melakukan clean up. Terutama setelah men-download file yang cukup besar.

Defragment ini juga bisa membersihkan hardisk dari data-data yang tidak berguna. Sehingga jika anda melakukan defragment hardisk ini akan menambah free spac penyimpananan hardisk anda. Caranya : My Computer -> C: (sesuai dengan hardisk yang anda ingin bersihkan) -> Klik Kanan -> Properties -> (tab) Tools -> Defragment Now.

Lakukan Disk Cleanup.

Disk Cleanup ini akan membersihkan file-file bekas yang sudah tidak dibutuhkan lagi sehingga dapat menghemat space hardisk anda. Caranya : My Computer -> C: (sesuai dengan hardisk yang anda ingin bersihkan) -> Klik Kanan -> Properties -> Disk Cleanup.

Melakukan Tweaking dengan Software.

Banyak software yang tersedia yang mampu meningkatkan performa komputer anda. Diantaranya Tune Up Utilities, CCleaner, RegCleaner dan masih banyak lagi. Tools-tools tersebut juga bisa membersihkan registry anda dari kesalahan-kesalahan / Error. Anda dapat mencari sofware – software tersebut di google maupun indowebster.

Optimalkan Virtual Memori.

Caranya : My Computer -> Klik Kanan -> Properties -> (Tab) Advance -> (Performance -> Setting) -> Advanced -> (Virtual Memori -> Change) Nah disitu ada bagian custom size anda isi disitu sesuai dengan yang ada di Reccomended

Mempercepat Kinerja Windows 7:

Singkirkan Font yang tidak digunakan.Kecuali anda bekerja di bagian percetakan, ada banyak sekali font yang tidak digunakan namun tetap di load saat anda menggunakan Windows 7. Hal ini menyebabkan berkurangnya kapasitas memory kosong yang sebenarnya dapat digunakan oleh proses lain. Untu menyingkirkan font yang tidak digunakan, ikuti langlah-langkah di bawah ini.
- Buat folder baru sebagai folder backup font.
- Buka control panel dan lanjutkan dengan membuka folder fonts.
- Pilih font yang tidak biasa anda gunakan dan pindahkan ke folder backup yang telah anda buat tadi. Jangan menghapus font yang tidak anda gunakan karena mungkin pada saat yang lain anda membutuhkannya. Jika ingin mengaktifkan font yang telah anda pindah, hanya perlu mengembalikannya ke folder semula.
Percepat waktu booting. System windows 7 akan booting lebih cepat jika anda menggunakan tips berikut ini.
- Klik start, lanjutkkan dengan mengetik msconfig pada Start Search dan tekan tombol enter.
- Klik tab Boot dan pergi ke bagian Advanced Options.
- Ketik jumlah nomor processor yang digunakan saat proses pada kolom Number of Processors.
- Klik Apply dan restart system untuk melihat efeknya.
Nonaktifkan System Sound.Jika anda tidak tertarim menggunakan system sound, anda dapat menonaktifkannya dengan melakukan langkah di bawah ini. Hal ini akan mempercepat proses saat loading system.
- Klik start, lanjutkkan dengan mengetik mmsys.cpl pada Start Search dan tekan tombol enter.
- Buka tab Sound dan pilih No Sound pada pilihan yang ada.
- Klik Apply untuk mengaplikasikannya dan restart Windows 7 anda.
Nonaktifkan Index Search di Windows 7.
- Klik start, lanjutkkan dengan mengetik services.msc pada Start Search dan tekan tombol enter.
- Cari Windows Search, klik kanan dan kemudian dan nonaktifkan service tersebut.
Nonaktifkan Service yang tidak digunakan.Beberapa service windows masih berjalan pada system meskipun kita sendiri tidak memerlukannya. Hal ini akan memakan memory yang sebenarnya dapat digunakan untuk proses lain yang lebih penting. Untuk menonkatifkan service yang tidak digunakan, ikuti petunjuk berikut ini.
- Buka Start menu, All Programs dan kemudian lanjutkan ke Administrative Tools Options. Pilihan ini mungkin tidak ada jika anda login sebagai Guest, bukan sebagai admin.
- Klik tab Advanced dan lihat nama service yang ada pada bagian bawah.
- Hilangkan tanda check-box pada service yang tidak digunakan dan biarkan service yang masih anda gunakan.
- Restart windows 7 untuk melihat efeknya.
Kurangi Start-up Windows 7.Banyak apliaksi yang di-load secara otomatis oleh windows padahal anda sendiri jarang menggunakannya. Untuk menonaktifkan Start-up program, ikuti langkah berikut ini.
- Klik start, lanjutkkan dengan mengetik msconfig pada Start Search dan tekan tombol enter.
- Buka tab Startup.
- Nonaktifkan start-up aplikasi yang tidak digunakan dan restart windows 7 anda.

Dari tips di atas, sebenarnya masih banyak tips lain yang dapat anda gunakan untuk mempercepat system Windows dengan catatan anda harus mengerti bagaimana system bekerja. Ikuti tips-tips selanjutnya.

MEMPERCEPAT KINERJA LINUX OS

Telah kita ketahui bersama bahwa Microsoft Windows bisa di Tweaking guna meningkatkan performanya. Lalu bagaimana dengan Ubuntu? Apakah kita bisa melakukan optimasi terhadap sistem Ubuntu guna meningkatkan performa seperti hal-nya kita meningkatkan performa dari Microsoft Windows? Dengan bangga (maaf bila sedikit terkesan euforia), saya katakan, Ya, kita bisa lakukan hal yang sama terhadap Ubuntu yang kita miliki. Berikut langkah-langkahnya :Matikan/Disable Fitur IPV

Saat ini hampir semua server telah menggunakan IPv4, sehingga penggunaan IPv6 sudah kurang begitu efektif (jika tidak mau di bilang conflict). Efek yang paling terasa dari penggunaan IPv6 ini adalah lambatnya kinerja web browser pada saat kita berinternet. untuk mematikan fitur IPv6, bukalah terminal atau konsole dan ketikkan :

#sudo gedit /etc/modprobe.d/bad_list

ketikkan / isikan perintah berikut ini :

#alias net-pf-10 off

setelah itu save & exit, silahkan reboot Ubuntu anda untuk melihat perubahan efek nya.

Matikan / Disable Swapping

Bila komputer / laptop kita memiliki memory 1 Gb atau lebih, kita bisa mematikan fitur yang dinamakan swappinguntuk menaikan performa ubuntu secara keseluruhan. Nilai swapping ini berada di rentang 0 sampai 100. pada nilai 100, kernel akan mencari program yang tidak aktif dan akan men-swapp out-nya dari cache. Cara untuk menonaktifkan swapping ini adalah dengan cara : buka terminal dan ketikkan :

#sudo gedit /etc/sysctl.confscroll

ke bagian bawah file dan masukkan line berikut :

vm.swappiness=0

Akhiri dengan menekan tombol save & exit dan reboot lah komputer anda untuk melihat efek dari perubahannya.

Aktifkan / Enable Dual Core Processors

Secara default Ubuntu tidak mengaktifkan Dual Core Processors, sehingga kemampuan atau performa komputer menjadi kurang maksimal. Agar Ubuntu mengaktifkan fasilitas atau feature Dual Core Processors ini, kita harus mengaktifkannya secara manual. Caranya buka terminal / konsole dan ketikkan:

#sudo gedit /etc/init.d/rc.

Cari tulisan CONCURRENCY=none. dan bila telah ketemu, ganti nilai none menjadi CONCURRENCY=shell, setelah itu klik save & exit dan rebootkomputer untuk melihat perubahannya

Speeed Up Ubuntu Menus

Apakah anda merasa respon komputer sedikit lambat saat kita mengakses menu di Ubuntu ? bila iya, kita bisa mempercepat loading menu dengan cara klik Places -> Home Folder. Disini kita perlu untuk membuat satu buah file yang bernama .gtkrc-2.0. caranya, klik kanan di area bebas di Home Folder dan pilih Create Document -> Empty File dan beri nama / Rename dengan .gtkrc-2.0.Ingat, jangan lupa untuk memberi titik(.) di depan nama gtkrc-2.0 yang berarti file tersebut nantinya akan bersifat hidden. Setelah itu klik 2x pada file .gtkrc-2.0 dan masukkan baris perintah berikut ini:gtk-menu-popup-delay=0

Akhiri dengan menekan tombol Save & Exit. Anda harus Logout dan Login kembali untuk melihat efek perubahannya. Bila ternyata nilai 0 terlalu cepat, kita bisa menggantinya dengan nilai yang lebih tinggi misalnya 100. pada kasus yang penulis coba, penulis mendapatkan speed ideal dengan mengeset .gtkrc-2.0 dengan nilai 100.

Dan apabila ternyata anda tidak menginginkan fungsi ini dikarenakan mungkin, komputer anda menjadi tidak stabil atau mungkin tombol shutdown di pojok kanan atas komputer anda jadi trouble, anda dengan bebas dapat menghapus file .gtkrc-2.0 untuk kembali ke settingan awal sebelumnya.

Masih banyak lagi tweaking yang akan saya jelaskan di lain kesempatan icon smile Tweaking Ubuntu (Mempercepat Kinerja Ubuntu)

MEMPERCEPAT KINERJA MAC OS

Activity Monitor

Activity Monitor adalah sebuah aplikasi kecil yang bermanfaat, karena kita dapat melihat apa yang sedang dijalankan didalam OS. Di aplikasi ini anda akan melihat beberapa proses seperti: Usage, System Memory, Disk Activity danNetwork Performance. Semua keterangan disitu menunjukkan apa yang sedang terjadi pada Hardware Mac anda. Aplikasi ini dapat anda gunakan sebagai petunjuk jika terjadi sesuatu, buka Aplikasi ini secara berkala supaya anda paham betul bagaimana berjalannya Mac anda.

Perintah “Quit” Aplikasi

Setiap pengguna Mac yang masih nubi, pasti tidak mengerti jika setiap mereka menutup sebuah Aplikasi dengan menekan tombol silang di pojok kiri atas tidak akan memberhentikan Aplikasi tersebut secara total. Jika anda ingin menutup sebuah aplikasi dan tidak akan dijalankan lagi, dapat anda lakukan dengan memilih nama Aplikasi tersebut pada MenuBar lalu klik “Quit”, ini akan menutup / memberhentikan Aplikasi tersebut secara total. Jika anda menggunakan Mouse, anda dapat klik kanan Icon di Dock lalu klik “Quit” pada pop-up menu yang ada. Quit ini dapat memberikan ruang yang longgar bagi kinerja Mac jika anda membuka banyak Aplikasi dan lebih baik beberapa Aplikasi yang tidak terpakai ditutup karena setiap Aplikasi juga membutuhkan kinerja extra bagi Mac anda.

Flip User dan LogOff User lain yang Tidak Digunakan

Jika anda membuat beberapa akun pada Mac, pastikan tidak ada Aplikasi yang berjalan ketika anda sedang bekerja pada akun anda. Tutuplah Aplikasi yang berjalan pada akun lain dan lakukan LogOff bagi akun yang tidak dipakai. Sewaktu anda melakukan LogOff dan berpindah ke akun lain, anda akan melihat layar Mac anda berputar ketika berganti akun.

Matikan Widget yang Tidak Penting

Widget memang menarik bagi pengguna Mac, dan dengan berjalannya waktu mungkin anda semakin senang menambahkan Widget ke dalam DashBoard Mac anda. Tutuplah beberapa Widget yang sekiranya tidak anda gunakan, karena mereka juga memakan tenaga Mac anda. Tekan Option pada Widget lalu klik tanda silang pada Widget.

Lakukan Update secara Berkala

Mac anda seperti biasa akan melakukan Update secara otomatis jika anda sedang terhuung dengan Internet. Lakukan Update untuk menjaga Mac anda stabil seperti yang Apple harapkan.

Selalu Ingat akan Permission

Satu Tool kecil ini dapat menyelamatkan beberapa kesalahan / error pada Mac anda. Lakukan secara berkala jika sewaktu-waktu anda menemukan error pada Mac. Semudah menekan tombol Scan lalu klik Repair Permissions.

Lakukan Perawatan dengan Scripts

Seperti halnya Sistem Unix, OS X secara rutin dapat melakukan perawatan setiap hari, minggu atau bulanan untuk menjaga kesehatan sistem. Anda dapat melakukan perawatan ini secara otomatis dengan menuliskan script pada Apple Script atau anda juga dapat menggunakan Aplikasi seperti: Onyx atau Cocktail untuk mempermudah perawatan.

Hapus Cache

Satu hal yang sering ditemui pada Mac jika terasa menjadi pelan adalah, kurangnya perhatian pada File Temporary yang semakin lama semakin bertambah besar menumpuk pada sistem. Temporary Files tersebut seperti: User dan Font Caches, File Temporary dari setiap Aplikasi. Anda dapat gunakan beberapa Aplikasi untuk menghapusnya seperti CleanMyMac atau sejenisnya, atau anda juga dapat lekukan melalui Terminal.

command diatas akan menghapus semua temporary files.

Lakukan Restart Setelah…

Setelah melakukan beberapa tahap yang disebutkan diatas, anda mungkin dapat melakukan Restart Mac anda, supaya OS kembali Fresh.

Bersihkan Cache Safari

Seperti halnya Font Cache, Safari juga menumpuk berbagai informasi browsing anda, anda dapat membersihkan file-file ini dengan menekan Option+Command+E pada Safari. Untuk hasil pembersihan yang lebih bagus lagi, lakukan restart Safari anda setelah menghapus Cache.

Preferences

Anda mungkin tidak pernah menduga jika file sebesar 4 KB pada dokumen anda dapat mempengaruhi kinerja Aplikasi. Tetapi file ini juga dapat membuat Mac anda lebih sering memunculkan Spinning Beach Ball jika tidak diperhatikan, terlebih jika file tersebut adalah sisa dari Aplikasi yang sudah tidak anda Instal lagi didalam Sistem. Lakukan pembersihan secara berkala dengan menggunakan Aplikasi seperti PreferenceCleaner, atau sejenisnya.

Login Items

Pada Sistem Mac, anda tidak akan menemukan list aplikasi yang di load pada start Up awal. Tetapi Mac mempunyai setting Start Up juga walaupun hanya sedikit list yang ada didalamnya. Anda dapat Non-Aktifkan mereka di dalam Preference – Accounts – Login Items

Bersihkan Desktop

Mungkin hanya anda yang kurang memperhatikan bersihnya Desktop jika Desktop anda dipenuhi File-File entah apapun itu, akan lebih baik jika anda meng-organisir file-file yang bertebaran pada desktop anda, dan masukkan ke dalam Folder yang mudah anda ingat.

Perhatikan Sisa HarDisk

Seperti Desktop diatas, HardDisk adalah media penyimpan pada Mac anda, lakukan pembersihan pada file-file yang sudah tidak dipakai lagi, dapat anda pindahkan ke CD / DVD / pindahkan ke External HardDisk, supaya HardDisk anda sedikit lebih longgar untuk Mac bekerja.

Lepaskan Peripheral yang Tidak Dipakai

Seringkali Peripheral seperti USB Disk anda tertancap setiap waktu anda bekerja pada Mac. Lepaskan mereka jika sudah tidak dipakai lagi

Pilih Defrag atau Tidak ?

Sudah lama hal tentang Defrag pada Mac ini diperdebatkan, tetapi tidak ada salahnya juga jika kita lakkan penyusunan ulang file sistem pada Mac dengan men-Defrag nya. Anda dapat menggunakan iDefrag untuk melakukan ini.

Firmware Update

Firmware Updates biasanya tidak sering dilakukan Apple seperti halnya OS Update. Update Firmware ini tidak ada pada Software Update bawaan Mac, biasakanlah selalu lakukan Cek di website Apple jika ada Update Firmware ini.

Me-Reset PRAM

Hal ini seperti halnya me-Repair Permission, PRAM (Parameter RAM) dan SMC (System Management Controller) memang bukan hal yang harus anda perhatikan didalam Sistem, tetapi jika anda lakukan ini dapat memperbaiki jika anda mendapat masalah dengan Power pada Mac, Lag pada Mouse atau beberapa Setting lainnya. Untuk melakukan Reset ini tekan dan tahan Command+Option+P+R, untuk melakukan Reset SMC sedikit lebih rumit, bacalah artikel tersebut disini.

Non Aktifkan Language yang tidak Terpakai

OS X membawa sekitar 15 Language / Bahasa didalam Installannya, mungkin anda bisa me-Non Aktif kan bahasa-bahasa yang tidak terpakai itu, karena mereka hanya menumpuk file di dalam HardDisk dan tidak akan anda pakai.

Shadow

Untk versi Mac OS yang lama, Efek yang ada sebagai fitur didalamnya dapat memakan resource CPU yang cukup lumayan. Anda dapat me-Non Aktifkan Drop Shadow pada iPhoto. Apple menjelaskan bahwa drop shadow yang ada pada Mac sebenarnya tidak berpengaruh pada Sistem. Tetapi jika mungkin anda melakukan Downgrading dari Leopard ke Tiger, Shadow ini mungkin akan mengganggu kinerja pada Sistem. Mau dihilangkan atau tidak itu terserah anda.

Dock 2D atau 3D

Dock pada sistem Leopard terlihat sedikit berubah jika dibandingkan dengan versi Tiger, Leopard menggunakan efek 3D pada Docknya. Dock tersebut jika anda lihat seperti mempunyai efek Gelas / Glassy, anda dapat hilangkan efek tersebut melalui terminal dengan mengetikkan:

defaults write com.apple.dock no-glass -boolean YES

lalu lanjutkan dengan:

killall Dock

Jika anda ingin mengembalikan Efek Gelas tersebut, lakukan langkah tersebut dan tinggal pilih Opsi YES atau NO.

Mulai Semuanya dari Awal Lagi

Lakukan Install ulang OS X anda jika terjadi Error yang tidak dapat diselesaikan, sebelumnya cari dahulu info bagaimana cara mengatasi masalah pada Mac anda sebelum melakukan Install ulang yang tidak perlu dilakukan pada Mac OS X. Jika anda lakukan Install Ulang maka anda harus bersabar untuk melakukan tahapan Update kembali dari awal.

Universal Bin

Ketika Apple memutuskan untuk berpindah dari PowerPC ke Intel, mereka melakukan beberapa perubahan terhadap Aplikasi-Aplikasi yang mereka anggap Obsolete dan merubahnya menjadi Aplikasi yang stabil untuk dijalankan. Jika anda belum merencanakan upgrade ke Mac versi Intel dan masih menggunakan PowerPC, mungkin upgrade Aplikasi ke Universal ini tidak perlu anda lakukan

RAM Upgrade

Lakukan upgrade pada RAM jika anda mempunyai uang extra.

Ganti HardDisk

Tips ini tidaklah terlalu penting, hanya jika anda menginginkan upgrade pada HardDisk, anda dapat lakukan ini untuk menambah extra ruang pada Drive anda untuk menyimpan file.

Jangan Dualbooting Windows ?

Jika anda inginkan OS X bekerja secara optimal, anda bisa berpikir untuk tidak menginstall windows jika keperluan anda hanya sedikit.
Install atau tidak itu tergantung kebutuhan anda.

Source » *.blogspot.com & *.wordpress.com

Carding U-File Credit Card Database Hacking

Posted: Januari 24, 2012 in hacker

U-file Credit Card Database Hacking

This is a basic tutorial for hacking u-file database order forms
it will teach you how to get u-file cc database so lets start

open this link

http://www.miamionlineflowers.com/orderformterra_anniversary_eng.htm

as you can see its an order form page.
1st step : (all you need to do is to view the source) go to view tab
then click the page source or view source.after you have viewed the source the

2nd step : (prest ctrl f then find u-file=) after you have found the “u-file=”
you will see this code <!–webbot bot=”SaveResults” U-File=”_private/form_results.txt”
all you need to get from the u-file is the “_private/form_results.txt”

3rd step :after getting the u-file this will be the last step just put the
u-file code besides the website like this.

http://www.miamionlineflowers.com/_private/form_results.txt

how to search in google : flowers orderform .htm | u-file=
so it will base on the string you use in searching for u-file database

here you go enjoy.

Buka Kode Keamanan Segala Jenis HP

Posted: Januari 24, 2012 in hacker

Pusing ketika kita lupa password kode keamanan HP kita? Bingung mau nyari nyari kemana gak ketemu. Trus kita pergi ke counter dengan membayar kurang lebih “Rp.50.000 – Rp.200.000″? Apalagi buat anak kost, wih gile banyak abis duit segitu, apalagi buat anak sekolah sama kuliahan. Ampon dah.. Uang jajan bisa abis buat benerin HP gara² lupa security doank! Nah, ni gw kasi toolsnya. Tinggal download dan gunain deh. Gampang kok, gak bakal nyampe 50.000 degh. Kcuali lw sambil maen game sampe 10 Jam di warnet buat download sambil nge-game. Wkwkw.. Yok dah kite mulai..

Nah, tools ini adalah sebuah aplikasi untuk Unlocking Nokia, Siemens, Vitel, Maxel, Panasonic, LG, AEG, Samsung, dan Motorola. Nih penjelasan detailnya”

WorldUnlock Kalkulator adalah sebuah aplikasi gratis untuk Nokia, Siemens, Vitel, Maxel, Panasonic, LG, AEG, Samsung, dan Motorola untuk membuka kode keamanan dan security lainnya.

Include MasterCode kalkulator yang dapat me-reset kode pengaman handphone.

Panduan:
1. Pilih model telepon dari daftar.
2. Masukkan nomor IMEI telepon Anda (Tekan * # 06 # pada telepon)
3· Pilih negara dan penyedia layanan di mana ponsel dibeli.
4· Tekan tombol: Calculate!
5· Nah selanjutnya muncul beberapa unlock codes.
6. 7 kode akan ditampilkan, gunakan kode pertama dimulai dari +7.
7· Jika belum bekerja, coba +1 dan yang terakhir +5.
8· Bila telepon menampilkan “Sim restriction off” itu berarti sudah tidak terkunci.
9· Jika hanya dua kode yang ditampilkan (+1 dan +2) masukkan code tersebut bersamaan!
Kode akan ditampilkan pada form: # pw + CODE + n #
Untuk memperoleh huruf: p, w atau +, tekan tombol * beberapa kali.

Masukkan kode dengan benar dengan menghapus semua simcard dari telepon, kemudian hidupkan telepon kembali dan kemudian masukkan kode.

Fitur “WorldUnlock Codes Calculator” adalah:

· Unlock Nokia
· Unlock LG
· Unlock Panasonic
· Unlock Maxon
· Unlock Samsung
· Unlock AEG/Telital
· Unlock Alcatel
· Unlock Siemens
· Unlock Sony
· Unlock Vitel

NOTE: XP/Vista/7 Is OK

DOWNLOAD

Enjoy & Eat It!

Selamat Tahun Baru, Dapet HP Baru Kelupaan Passwordnya. Shit!

Kzkzkz.. q:D

Password Breaker Tools

Posted: Januari 24, 2012 in hacker

Hallo semua, share untuk hack password nih:

Windows Admin password, PDF passwords, ZIP files passwords, Document passwords, RAR passwords and much more.. I am sure you will like this post, XP Hacking tools.

Isi Password Hacking Kit Consists – Password Hacking Breaking Tools:

1. PDF Password Remover

2. Windows XP Admin Password Remover

3. Zip File Password Cracker.

4. SQL Password Remover

5. Microsoft Office Password Remover.

6. Microsoft Windows Vista Password Remover.

7. Rar File Password Cracker

8. Windows Password Recovery Kit

9. Password Changer.

10. Distributed File Password Recovery..

11. Dll

Cara penggunaan:

1. Download the Password Hacking Kit Disini:

DOWNLOAD TOOLS HERE

2. Extract filenya & Install.

3. Kemudian register & tinggal gunakan.

– Selamat Menikmati –