Ada kalanya seseorang kurang puas dengan nama domain yang dia miliki, mungkin karena ingin mengubah brand atau pindah dari domain gratisan ke berbayar. Tapi disini akan timbul permasalahan, kalau ganti domain berarti berbagai hal yang kita perjuangkan pada domain lama seperti Page Rank, link, dan traffic secara otomatis semuanya akan hilang dong? Disinilah yang akan kita bahas, bagaimana redirect domain lama ke domain baru agar tidak kehilangan traffic pengunjung?

Jika kamu mengubah domain, yang sangat penting untuk kamu perhatikan adalah integritas dari URL lama, sehingga ketika ada orang mengklik link halaman situs lama secara otomatis akan diarahkan ke halaman yang sama pada situs yang baru. Sebagai contoh:

Ketika ada orang yang mengklik halaman www.domainlama.com/internet-masuk-desa/ maka secara otomatis dia akan diarahkan ke halaman www.domainbaru.com/internet-masuk-desa/.

Hal ini mungkin kedengarannya sangat rumit tapi sebenarnya itu cukup sederhana baik di server Linux maupun Windows. Dalam tutorial ini saya akan menunjukkan kepadamu bagaimana menyetting 301 redirect yang akan memberitahukan kepada robot mesin pencari dan pengunjung bahwa domain kamu telah berubah secara permanen dari alamat lama ke alamat baru. 301 redirect ini juga akan menghindarkan situs baru kita dari masalah duplikat konten.

301 Redirect Domain pada Linux Server

301 redirect tidak akan bisa bekerja kecuali jika server kamu memiliki modul Apache ModRewrite hidup. Berdasarkan pengalaman saya, fungsi ini selalu diaktifkan sehingga seharusnya tidak menjadi masalah.

Untuk memulai, pertama buat file baru dengan text editor kemudian simpan dengan nama .htaccess. Biasanya file .htaccess sudah ada pada web host, tapi disini kita akan bikin sendiri dan meng-overwrite yang sudah ada.

Pada file .htaccess masukan kode berikut ini:

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.domainbaru.com/$1 [R=301,L]

Setelah itu upload file .htaccess ini pada root directory website kamu yang lama.

301 Redirect Domain pada Windows Server

Untuk bisa 301 redirect pada Windows server, kamu harus punya akses ke admin server, ini bisa terjadi jika kamu punya server sendiri atau kamu menggunakan dedicated server. jika tidak keduanya kamu bisa minta tolong pada administrator server.

Langkahnya, pertama buka “Internet Services Manager” pada Windows server kamu, kilk kanan pada domain situs lama yang ingin kamu arahkan, pilih “Properties” kemudian “Home Directory”. Berikut pengaturannya:

1. Pilih “A redirection to a URL”,
2. Pada “Redirect to:” ketik alamat domain baru kamu,
3. Pilih “A permanent redirection for this source”,
4. Tekan OK dan selesai

Demikian semoga bermanfaat.

Related posts:

1. Membuat Menu Atraktif dengan Thumbnail
2. Trik Seleksi dengan Photoshop
3. Tutorial Tipografi dengan Efek Cat Basah

Ketika ingin mendesain sebuah situs dengan menu yang memiliki banyak level mungkin kita akan berpikir bagaimana cara terbaik untuk menjaga navigasi tetap sederhana dan rapi. Mungkin drop down menu adalah solusi terbaik yang bisa kita gunakan. Bagaimana cara membuat drop down menu untuk wordpress? dapatkan triknya di blog desain ini.

Sebanarnya untuk membuat drop down menu, banyak plugin yang bisa kita gunakan. Tapi tau sendiri, tidak semua plugin mudah untuk dicustomize. Karena alasan itu mari kita buat sendiri drop down menu untuk WordPress kita.

Persiapan

Sebelum memulainya harus ditentukan terlebih dahulu isi dan hierarki dari menu yang diinginkan. Misal kita gunakan daftar menu yang ada pada painthink. Berikut susunannya,

• Home
• Tutorial
  • Photoshop
  • Illustrator
  • Tipografi
  • Web
• Links
• About

jika dalam html maka susunannya seperti berikut:

<ul id="nav">
	<li><a href= "#">Home</a></li>
	<li><a href= "#">Tutorial</a>
		<ul id="tutorial">
			<li><a href= "#">Photoshop</a></li>
			<li><a href= "#">Illustrator</a></li>
			<li><a href= "#">Tipografi</a></li>
                        <li><a href= "#">Web</a></li>
		</ul>
	</li>
	<li><a href= "#">Links</a></li>
	<li><a href= "#">About</a></li>
</ul>

Membuatnya Dinamis

Menu yang kita buat tersebut sifatnya statis, jadi jika ingin menambah daftar menu baru harus melakukannya secara manual. Agar bisa dinamis kita beri sedikit perubahan pada daftar submenu tutorial.

<ul id="nav">
	<li><a href= "#">Home</a></li>
	<li><a href= "#">Tutorial</a>
		<ul id="tutorial">
			<? wp_list_pages('title_li=&sort_column=menu_order&child_of=2'); ?>
		</ul>
	</li>
	<li><a href= "#">Links</a></li>
	<li><a href= "#">About</a></li>
</ul>

dengan begitu ketika daftar submenu tutorial bertambah, yang tampil juga akan bertambah secara otomatis tanpa harus mengotak-atik skrip lagi.

Javascript

Disini kita membutuhkan sedikit javascript untuk menampilkan atau menyembunyikan submenu.

// JavaScript Document

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

Secara lengkap susunan menu yang kamu buat (termasuk didalamnya javascript) tampak sebagai berikut,

<ul id="nav">
	<li><a href= "#">Home</a></li>
	<li onmouseover="javascript:toggleLayer('tutorial');" onmouseout="javascript:toggleLayer('tutorial');"><a href= "#">Tutorial</a>
		<ul id="tutorial">
			<? wp_list_pages('title_li=&sort_column=menu_order&child_of=2'); ?>
		</ul>
	</li>
	<li><a href= "#">Links</a></li>
	<li><a href= "#">About</a></li>
</ul>

CSS

Jika kita sudahi disini maka akan kita dapati tampilan yang kurang bagus, atau lebih tepatnya nggak karu-karuan. Untuk itu kita membutuhkan style untuk mengatur tampilannya. Disini kamu bisa berkreasi untuk mendapatkan hasil yang sesuai dengan keinginanmu. Dan yang saya tampilin disini hanyalah dasarnya saja.

@charset "utf-8";
/* CSS Document */

* {margin:0;padding:0;}
body {text-align:left;padding: 30px;font: 12px Arial, Helvetica, sans-serif;}

ul, ol {padding: 10px 0;}

#nav ul {display:none;position:absolute;margin: 16px 0 0 -1px;} /* menyembunyikan submenu */
*+ html #nav ul {margin: 16px 0 0 -122px;} /* ie 7 hack */
#nav li {list-style:none;display:block;float:left;}
#nav a {display:block;float:left;padding: 5px 15px;border:1px solid #ddd;margin: 0 0 0 -1px;text-decoration:none;width:90px;}

/*style submenu*/
#nav ul li, #nav ul li a {float:none;}
#nav ul li a {margin: -1px 0 0 0;width:150px;}
#nav ul li a:hover {background:#efefef;color:#000;}

Hmmm…sekarang kamu udah punya drop down menu buatan kamu sendiri, jangan lupa subscribe ke painthink RSS Feed.

Related posts:

1. Membuat Menu Atraktif dengan Thumbnail
2. Grafisia
3. Menolak Komentar Spam Secara Otomatis

Selain dengan teks, menu bisa pula berupa gambar. Dalam tutorial ini kita akan membuat menu yang menampilkan thumbnail sebagai permalink. Dengan sedikit menggunakan javascript kita dapat membikin efek animasi ataktif yaitu ketika mouse dilewatkan diatas thumbnail secara otomatis thumbnail akan membesar.

Membuat HTML

Langkah pertama adalah membuat framework HTML untuk setiap item, dan berikut ini contohnya.

<div id="menuwrapper">
	<div id="menu">
		<a href="#" class="menuitem"><img src="image.jpg"></a><!--Template untuk setiap item-->
	</div>
</div>

CSS untuk Mengatur Tampilan

CSS disini untuk mengatur posisi dari thumbnail masing-masing item agar posisi bagian bawahnya tetap meski ukuran thumbnail membesar.

#menuwrapper {
     position : relative;
     height : 210px;
}

#menu {
     position : absolute;
     bottom : 0;
}

.menuitem {
     position : fixed relative;
     bottom : 0px;
     display : inline-block;
}

jQuery untuk Memberi Efek Animasi

Seperti berikut jQuery yang kita butuhkan.

$(document).ready(function(){
	$('.menuitem img').animate({width: 100}, 0); //membuat thumbnail menjadi lebih kecil

	$('.menuitem').mouseover(function(){

		gridimage = $(this).find('img');
		gridimage.stop().animate({width: 200}, 150); //gambar thumbnail mengembang menjadi sesuai sebenarnya

	}).mouseout(function(){

		gridimage.stop().animate({width: 100}, 150); //gambar thumbnail kembali mengecil

	});
});

jQuery pada contoh diatas mempunyai dua fungsi:

• Membuat ukuran thumbnail menjadi lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat.
• Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Mengatasi Masalah Skala Gambar di Internet Explorer

IE memang sering bermasalah dengan CSS,termasuk untuk skala gambar yang kita buat. Cara mengatasinya mudah, tinggal kopi kode css berikut dan paste pada style.

img { -ms-interpolation-mode: bicubic; }

Demo dari trik ini bisa kamu lihat dengan link dibawah, begitu pula source codenya bisa kamu download juga. Selamat mencoba dan jangan lupa subscribe ke painthink RSS Feed.

Related posts:

1. Redirect Domain Lama ke Domain Baru dengan Menghindari Duplikat Konten
2. Bikin Drop Down Menu untuk WordPress
3. Grafisia

Beberapa hari yang lalu blog tercinta ini diserang banyak sekali komentar spam, dari situ muncul ide untuk membuat penangkal spam otomatis dengan menggunakan sedikit skrip PHP.

Secara default WordPress memang dilengkapi plugin Akismet yang cukup tangguh untuk melawan spam. Tetapi kita bisa juga membuat anti spam sendiri yang dapat bekerja secara otomatis menyingkirkan spam yang masuk ke blog WordPress kita.

Caranya tinggal mengkopi skrip PHP saya dibawah ini dan paste ke functions.php yang ada pada theme blog kamu, kalau belum ada bikin aja filenya.

function in_comment_post_like($string, $array) {
	foreach($array as $ref) { if(strstr($string, $ref)) { return true; } }
	return false;
}
function drop_bad_comments() {
	if (!empty($_POST['comment'])) {
		$post_comment_content = $_POST['comment'];
		$lower_case_comment = strtolower($_POST['comment']);
		$bad_comment_content = array(
			'viagra',
			'hydrocodone',
			'hair loss',
			'[url=http',
			'[link=http',
			'xanax',
			'tramadol',
			'russian girls',
			'russian brides',
			'lorazepam',
			'adderall',
			'dexadrine',
			'no prescription',
			'oxycontin',
			'without a prescription',
			'sex pics',
			'family incest',
			'online casinos',
			'online dating',
			'cialis',
			'best forex',
			'amoxicillin'
		);
		if (in_comment_post_like($lower_case_comment, $bad_comment_content)) {
			$comment_box_text = wordwrap(trim($post_comment_content), 80, "\n  ", true);
			$txtdrop = fopen('/var/log/httpd/wp_post-logger/nullamatix.com-text-area_dropped.txt', 'a');
			fwrite($txtdrop, "  --------------\n  [COMMENT] = " . $post_comment_content . "\n  --------------\n");
			fwrite($txtdrop, "  [SOURCE_IP] = " . $_SERVER['REMOTE_ADDR'] . " @ " . date("F j, Y, g:i a") . "\n");
			fwrite($txtdrop, "  [USERAGENT] = " . $_SERVER['HTTP_USER_AGENT'] . "\n");
			fwrite($txtdrop, "  [REFERER  ] = " . $_SERVER['HTTP_REFERER'] . "\n");
			fwrite($txtdrop, "  [FILE_NAME] = " . $_SERVER['SCRIPT_NAME'] . " - [REQ_URI] = " . $_SERVER['REQUEST_URI'] . "\n");
			fwrite($txtdrop, '--------------**********------------------'."\n");
			header("HTTP/1.1 406 Not Acceptable");
			header("Status: 406 Not Acceptable");
			header("Connection: Close");
			wp_die( __('bang bang.') );
		}
	}
}
add_action('init', 'drop_bad_comments');

Komentar yang mengandung bad_comment_content secara otomatis dinilai sebagai spam. Disitu semua kata-katanya dalam array menggunakan bahasa inggris, karena ya komentar spam yang masuk ke blog ini menggunakan kata-kata itu, jadi kamu bisa menambahkan sendiri untuk daftar kata-kata yang digunakan.

Semoga bermanfaat, jangan lupa subscribe ke painthink RSS Feed.

Related posts:

1. Membuat Menu Atraktif dengan Thumbnail
2. Redirect Domain Lama ke Domain Baru dengan Menghindari Duplikat Konten
3. Bikin Drop Down Menu untuk WordPress