<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>maseko's weblog &#187; Web Development</title>
	<atom:link href="http://maseko.com/category/webdev/feed/" rel="self" type="application/rss+xml" />
	<link>http://maseko.com</link>
	<description>Blog pribadi Eko Pramuyanto a.k.a. maseko berisi catatan, tips dan trik, hasil percobaan, dan info lainnya seputar teknologi informasi, khususnya komputer dan internet.</description>
	<lastBuildDate>Fri, 09 Jul 2010 04:53:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Web Hosting Hub &#8211; Layanan Hosting Untuk Situs Anda</title>
		<link>http://maseko.com/2010/06/30/web-hosting-hub-layanan-hosting-untuk-situs-anda/</link>
		<comments>http://maseko.com/2010/06/30/web-hosting-hub-layanan-hosting-untuk-situs-anda/#comments</comments>
		<pubDate>Wed, 30 Jun 2010 09:53:22 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Webhosting]]></category>
		<category><![CDATA[cheap hosting]]></category>
		<category><![CDATA[hosting]]></category>
		<category><![CDATA[web hosting hub]]></category>

		<guid isPermaLink="false">http://maseko.com/2010/06/30/web-hosting-hub-layanan-hosting-untuk-situs-anda/</guid>
		<description><![CDATA[Bagi Anda yang akan membuat website atau blog dan tidak ingin menggunakan layanan gratis yang ada, tentunya Anda memerlukan nama domain untuk pengalamatan situs dan tempat untuk menghosting atau menyimpan file-file yang diperlukan agar website atau blog Anda dapat berjalan dan dapat diakses oleh para pengunjung. Saat ini, ada banyak pilihan tempat hosting yang dapat [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px 10px 10px 0px; display: inline; border-top: 0px; border-right: 0px" title="webhostinghub" border="0" alt="webhostinghub" align="left" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2010/06/webhostinghub.jpg" width="260" height="128" /> Bagi Anda yang akan membuat website atau blog dan tidak ingin menggunakan layanan gratis yang ada, tentunya Anda memerlukan nama domain untuk pengalamatan situs dan tempat untuk menghosting atau menyimpan file-file yang diperlukan agar website atau blog Anda dapat berjalan dan dapat diakses oleh para pengunjung. Saat ini, ada banyak pilihan tempat hosting yang dapat Anda ambil, dari menyewa sendiri server untuk situs Anda atau menggunakan layanan shared hosting &#8212; berbagi tempat dengan situs-situs lain dalam server yang dimiliki penyedia. Salah satu penyedia layanan shared hosting yang akan saya tuliskan di sini adalah <a title="Web Hosting Hub" href="http://www.webhostinghub.com">Web Hosting Hub</a>.</p>
<p> <span id="more-2276"></span>
<p>Sebagai penyedia layanan shared hosting, Web Hosting Hub lebih ditujukan untuk personal dan small bussiness dengan berbagai fitur kemudahan agar website atau blog yang akan dibuat dapat segera online dan dapat diakses para pengunjung. Sebagai penyedia layanan <a title="Wordpress hosting" href="http://www.webhostinghub.com/wordpress-hosting.html">WordPress hosting</a> dan <a title="b2evolution hosting" href="http://www.webhostinghub.com/b2evolution-hosting.html">b2evolution hosting</a>, instalasi aplikasi blogging ini dapat dilakukan secara mudah dan cepat dalam beberapa klik. Untuk pengaturan account hosting, Web Hosting Hub menggunakan Cpanel dengan Fantastico-nya yang memungkinkan melakukan instalasi otomatis berbagai aplikasi atau software web, dari aplikasi blogging sampai e-commerce. </p>
<p>Untuk paket hosting yang ditawarkan Web Hosting Club, hanya ada satu paket yang disediakan yang dapat Anda peroleh dengan harga USD $4.95 per bulan jika Anda memilih untuk berlangganan selama 36 bulan, $5.95 per bulan untuk paket 24 bulan, atau $6.95 per bulan untuk pilihan hosting 12 bulan. Web Hosting Hub akan memberikan gratis nama domain yang akan digunakan atau Anda menggunakan nama domain yang telah Anda miliki. Penentuan harga ini tentunya disesuaikan dengan budget yang Anda miliki. Hal yang menarik, jika umumnya garansi layanan hosting diberikan untuk jangka waktu 30 hari, maka Web Hosting Hub memberikan garansi selama 90 hari. Jadi, jika misalnya dalam masa sekitar tiga bulan tersebut Anda merasa layanan yang diberikan, maka Anda berhak untuk meminta kembali biaya hosting yang telah Anda bayarkan.</p>
<p>Untuk fitur yang disediakan, untuk paket hosting tersebut diberikan disk space, database, dan bandwidth yang tidak dibatasi. Begitu pun dengan jumlah website yang dapat Anda buat dalam account hosting tersebut, Anda dapat membuat satu, dua, atau bahkan 10 website atau blog dalam satu account hosting yang Anda beli. Fitur lainnya adalah dukungan PHP 5, MySQL 5, PERL 5, Python, .htaccess Overrides, GnuPG Encryption, dan lainnya yang dapat Anda lihat dalam halaman fitur di websitenya. </p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2010/06/30/web-hosting-hub-layanan-hosting-untuk-situs-anda/feed/</wfw:commentRss>
		<slash:comments>53</slash:comments>
		</item>
		<item>
		<title>Pluzit &#8211; Layanan Bookmark and Share</title>
		<link>http://maseko.com/2010/06/28/pluzit-layanan-bookmark-and-share/</link>
		<comments>http://maseko.com/2010/06/28/pluzit-layanan-bookmark-and-share/#comments</comments>
		<pubDate>Mon, 28 Jun 2010 10:29:05 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Free Stuff]]></category>
		<category><![CDATA[Social Media]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[bookmark and share]]></category>
		<category><![CDATA[pluzit]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://maseko.com/2010/06/28/pluzit-layanan-bookmark-and-share/</guid>
		<description><![CDATA[Perkembangan penggunaan jejaring sosial seperti Facebook, Twitter, Plurk, dan lainnya sangatlah pesat. Melalui jejaring sosial tersebut, pengguna tak sekedar mengirimkan update mengenai apa yang mereka lakukan, tetapi juga menjadi ajang berbagi konten-konten menarik yang mereka temukan dalam suatu blog atau website yang mereka kunjungi. Dengan melihat keadaan tersebut, bagi Anda pemilik blog atau website tentunya [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-right-width: 0px; margin: 0px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="pluzit" border="0" alt="pluzit" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2010/06/pluzit.jpg" width="500" height="216" /> </p>
<p>Perkembangan penggunaan jejaring sosial seperti Facebook, Twitter, Plurk, dan lainnya sangatlah pesat. Melalui jejaring sosial tersebut, pengguna tak sekedar mengirimkan update mengenai apa yang mereka lakukan, tetapi juga menjadi ajang berbagi konten-konten menarik yang mereka temukan dalam suatu blog atau website yang mereka kunjungi. Dengan melihat keadaan tersebut, bagi Anda pemilik blog atau website tentunya tak ingin melewatkan kesempatan bahwa halaman blog atau website Anda dibagi oleh pengunjung blog atau webite Anda ke teman-teman mereka melalui layanan sosial media yang mereka ikuti. Untuk mendukung tersebut, sebagai pemilik blog atau website, Anda dapat mempermudah pengunjung Anda yang ingin berbagi konten yang Anda buat, salah satunya misalnya dengan <strong>Pluzit</strong>, sebuah layanan <a title="Bookmark and Share" href="http://www.pluzit.com/">Bookmark and Share</a> untuk blog atau website Anda.</p>
<p> <span id="more-2271"></span>
<p>Pluzit merupakan layanan one-click yang dapat digunakan secara gratis oleh pemilik blog atau website yang memungkinkan pengunjung secara mudah berbagi konten blog atau website. Selain blog atau website, Pluzit dapat digunakan pada halaman MySpace dan newsletter.</p>
<p>Untuk menggunakan layanan Pluzit, Anda terlebih dahulu perlu mendaftarkan account di Pluzit. Setelah terdaftar Anda dapat memulai langkah pembuatan <a title="Bookmark Buttons" href="http://www.pluzit.com/button-select">Bookmark Buttons</a> atau tombol bookmark yang nantinya akan digunakan dalam halaman website atau blog Anda.</p>
<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px 0px 10px; display: inline; border-top: 0px; border-right: 0px" title="pluzit-button-select" border="0" alt="pluzit-button-select" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2010/06/pluzitbuttonselect.jpg" width="500" height="228" /> </p>
<p>Melalui langkah-langkah yang mudah dan sederhana, Anda dapat menentukan jenis tombol yang akan dibuat, apakah Bookmark/Share ataukah Subscribe/Feed. Pada bagian button style Anda dapat memilih salah satu dari 6 pilihan yang saat ini tersedia. Kemudian, Anda memilih penempatan button yang akan dibuat, apakah pada website, blog, MySpace, atau e-zine/newsletter. Untuk jenis blog, platform yang didukung oleh Pluzit meliputi Blogger, TypePad, dan WordPress. Untuk melihat lebih jelas bagaimana Pluzit dapat digunakan, Anda dapat melihat <a title="Videotour" href="http://www.pluzit.com/tour.html">Videotour</a> yang disediakan Pluzit.</p>
<p>Setelah isian diisi sesuai dengan preferensi Anda, selanjutnya klik tombol <strong>Get your Pluzit button</strong>. Selanjutnya Anda akan diberikan langkah yang harus dilakukan untuk menempatkan bookmark button tersebut ke blog atau website Anda. Misalnya saja untuk pemilihan blog WordPress, akan diberikan kode yang dapat disisipkan pada theme blog yang digunakan baik untuk bagian sidebar maupun untuk halaman posting. Setelah terpasang, maka pengunjung blog atau website Anda dapat melakukan bookmark dan sharing ke sekitar dua ratusan provider yang didukung oleh Pluzit.</p>
<p>Setelah Anda memasang bookmark botton pada blog atau website, dengan masuk ke Pluzit kembali, Anda dapat melihat statistik penggunaan tombol tersebut oleh pengunjung, berapa kali mereka melakukan bookmark dan sharing termasuk statistik berdasarkan provider dan geografi. </p>
<p>Selain penyediaan bookmark button tersebut untuk para pemilik blog atau website, pluzit juga menyediakan layanan untuk para internet surfer untuk lebih memudahkan bookmark dan sharing langsung dari browser. Saat ini plugin Pluzit hanya tersedia untuk Mozilla Firefox atau Internet Explorer.</p>
<p>&#8211; <a title="Pluzit" href="http://www.pluzit.com/">Pluzit</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2010/06/28/pluzit-layanan-bookmark-and-share/feed/</wfw:commentRss>
		<slash:comments>30</slash:comments>
		</item>
		<item>
		<title>Google Font Directory dan Google Font API</title>
		<link>http://maseko.com/2010/05/21/google-font-directory-dan-google-font-api/</link>
		<comments>http://maseko.com/2010/05/21/google-font-directory-dan-google-font-api/#comments</comments>
		<pubDate>Fri, 21 May 2010 10:24:04 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Fonts]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[API]]></category>

		<guid isPermaLink="false">http://maseko.com/?p=2252</guid>
		<description><![CDATA[Satu lagi persembahan Google untuk dunia web. Kemarin, Google telah merilis layanan baru, Google Font Directory dan Google Font API. Google Font Directory merupakan direktori berisi koleksi font-font web open-source, dan dengan Google Font API, maka font-font tersebut dapat digunakan oleh siapa pun seperti pemilik atau pengelola website agar dapat memperindah website-nya dengan pemilihan font [...]]]></description>
			<content:encoded><![CDATA[<p><img title="google-font-directory" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 10px 0px; border-right-width: 0px" height="99" alt="google-font-directory" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2010/05/googlefontdirectory.jpg" width="260" align="left" border="0" /> Satu lagi persembahan Google untuk dunia web. Kemarin, Google telah <a title="Introducing the Google Font API &amp; Google Font Directory" href="http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html">merilis</a> layanan baru, <a href="http://code.google.com/webfonts">Google Font Directory</a> dan <a href="http://code.google.com/apis/webfonts/">Google Font API</a>.</p>
<p><strong>Google Font Directory</strong> merupakan direktori berisi koleksi font-font web open-source, dan dengan <strong>Google Font API</strong>, maka font-font tersebut dapat digunakan oleh siapa pun seperti pemilik atau pengelola website agar dapat memperindah website-nya dengan pemilihan font yang sesuai. Bagi Anda, ketika nantinya membuka beberapa website mungkin saja tidak hanya mendapati font-font standar yang biasa digunakan tetapi juga berbagai variasi font-font menarik yang ada di Google Font Directory.</p>
<p> <span id="more-2252"></span>
<p>Saat ini mungkin hanya terdapat 18 jenis font yang ada di Google Font Directory, namun ke depannya jumlah ini ke depannya sepertinya akan terus bertambah.</p>
<p>Bagi Anda yang akan membuat halaman web dengan menggunakan font-font yang ada di Google Font Directory, langkah pertama yang dapat dilakukan adalah menambahkan <strong>stylesheet link</strong> di bagian &lt;HEAD&gt; halaman web.</p>
<div id="codeSnippetWrapper" style="border-right: silver 1px solid; padding-right: 4px; border-top: silver 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: silver 1px solid; width: 97.5%; cursor: text; direction: ltr; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: silver 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4; text-align: left">
<div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none"><span style="color: #0000ff">&lt;</span><span style="color: #800000">link</span> <span style="color: #ff0000">rel</span><span style="color: #0000ff">=&quot;stylesheet&quot;</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">=&quot;text/css&quot;</span> <span style="color: #ff0000">href</span><span style="color: #0000ff">=&quot;http://fonts.googleapis.com/css?family=Nama+Font&quot;</span> <span style="color: #0000ff">/&gt;</span></pre>
<p><!--CRLF--></p>
</p></div>
</div>
<p>Ubah <strong>Nama+Font</strong> dengan <strong>Font API parameter name</strong> dari font yang Anda pilih dari Google Font Directory, misalnya Cantarell, Droid+Sans, Tangerine atau lainnya.</p>
<p>Jika dalam suatu halaman web akan menggunakan dua atau lebih font yang ada di Google Font Directory, maka Nama+Font diisi dengan nama-nama parameter API dari font-font tersebut dan masing-masing nama font dipisahkan dengan tanda pipa (|), misalnya akan memanggil font Tangerine, Inconsolata, dan Droid Sans maka Nama+Font diubah menjadi <strong>Tangerine|Inconsolata|Droid+Sans</strong>.</p>
<p>Selanjutnya untuk&#160; mengaplikasikan font tersebut pada suatu elemen halaman web, dapat dilakukan melalui stylesheet, misalnya:</p>
<div id="codeSnippetWrapper" style="border-right: silver 1px solid; padding-right: 4px; border-top: silver 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: silver 1px solid; width: 97.5%; cursor: text; direction: ltr; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: silver 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4; text-align: left">
<div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">CSS selector {</pre>
<p><!--CRLF--></p>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">  font-family: 'Nama Font', serif;</pre>
<p><!--CRLF--></p>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none">}</pre>
<p><!--CRLF--></p>
</p></div>
</div>
<p>atau langsung dilakukan secara inline pada elemen tersebut, misalnya:</p>
<div id="codeSnippetWrapper" style="border-right: silver 1px solid; padding-right: 4px; border-top: silver 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: silver 1px solid; width: 97.5%; cursor: text; direction: ltr; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: silver 1px solid; font-family: &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4; text-align: left">
<div id="codeSnippet" style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; text-align: left; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; direction: ltr; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; text-align: left; border-bottom-style: none"><span style="color: #0000ff">&lt;</span><span style="color: #800000">div</span> <span style="color: #ff0000">style</span><span style="color: #0000ff">=&quot;font-family: 'Nama Font', serif;&quot;</span><span style="color: #0000ff">&gt;</span>Teks Anda<span style="color: #0000ff">&lt;/</span><span style="color: #800000">div</span><span style="color: #0000ff">&gt;</span></pre>
<p><!--CRLF--></p>
</p></div>
</div>
<p>Berikut ini contoh langsung penggunaan font dari Google Font Directory</p>
<p align="center">
<div style="font-size: 36px; font-family: &#39;Reenie Beanie&#39;, serif; text-shadow: 2px 2px 2px #aaa">However far away,<br />
  <br />I will always love you </p>
<p>However long I stay, </p>
<p>I will always love you </p>
<p>Whatever words I say, </p>
<p>I will always love you </p>
<p>I will always love you</div>
</p>
<p>Selain itu, berkolaborasi dengan <a title="Typekit" href="http://typekit.com/">Typekit</a>, Google juga menyediakan <a title="WebFont Loader" href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">WebFont Loader</a>, Javascript library guna lebih dapat mengontrol pemuatan font dibandingkan dari penggunaan Google Font API. Dengan WebFont Loader, tak hanya font-font dari Google Font Directory saja yang dapat digunakan, tetapi juga dari provider lain atau pun digunakan secara bersamaan.</p>
<p>Berkeinginan mengganti font halaman website Anda dengan font-font dari Google Font Directory?</p>
</p>
<div style="font-size: 48px; font-family: lobster, serif; text-shadow: 4px 4px 4px #aaa">Silahkan Mencoba!</div>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2010/05/21/google-font-directory-dan-google-font-api/feed/</wfw:commentRss>
		<slash:comments>47</slash:comments>
		</item>
		<item>
		<title>Bing Webmaster Center</title>
		<link>http://maseko.com/2009/06/07/bing-webmaster-center/</link>
		<comments>http://maseko.com/2009/06/07/bing-webmaster-center/#comments</comments>
		<pubDate>Sun, 07 Jun 2009 00:28:00 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[bing]]></category>
		<category><![CDATA[bing webmaster center]]></category>
		<category><![CDATA[microsoft]]></category>

		<guid isPermaLink="false">http://maseko.com/2009/06/07/bing-webmaster-center/</guid>
		<description><![CDATA[Tentunya Anda sudah mengenal Bing bukan? Ya, Bing merupakan search engine terbaru dari Microsoft. Pada berbagai layanan web Microsoft yang menampilkan kotak pencarian web, kini sudah diarahkan ke Bing. Bagi pemilik website atau blog, ketika mendapati adanya search engine baru seperti Bing ini, salah satu pencarian yang sangat mungkin dilakukan adalah mengecek apakah website atau [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px 10px 0px 0px; display: inline; border-top: 0px; border-right: 0px" title="bing-webmaster-center" border="0" alt="bing-webmaster-center" align="left" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/06/bingwebmastercenter.jpg" width="260" height="68" /> Tentunya Anda sudah mengenal Bing bukan? Ya, <a title="Bing" href="http://www.bing.com/">Bing</a> merupakan search engine terbaru dari Microsoft. Pada berbagai layanan web Microsoft yang menampilkan kotak pencarian web, kini sudah diarahkan ke Bing. Bagi pemilik website atau blog, ketika mendapati adanya search engine baru seperti Bing ini, salah satu pencarian yang sangat mungkin dilakukan adalah mengecek apakah website atau blognya sudah terindeks atau belum. Jika memang belum, Anda dapat meminta Bing untuk mengindeks website Anda melalui <a title="Submit your site to Bing" href="http://www.bing.com/docs/submit.aspx">form yang disediakan</a>. Cara lainnya termasuk yang sudah terindeks, Anda dapat pula menambahkan dan memantau status webiste Anda pada Bing melalui <strong>Bing Webmaster Center</strong>.</p>
<p><span id="more-2088"></span></p>
<p><a title="Bing Webmaster Center" href="http://www.bing.com/webmaster">Bing Webmaster Center</a> merupakan layanan seperti halnya <a title="Google Webmaster Tools" href="http://www.google.com/webmasters/tools/">Google Webmaster Tools</a> atau <a title="Yahoo Site Explorer" href="https://siteexplorer.search.yahoo.com/">Yahoo Site Explorer</a> yang dapat digunakan oleh pemilik website untuk memasukkan website Anda dan untuk melihat berbagai informasi terkait website yang telah dimasukkan.</p>
<p>Untuk menambahkan website pada Bing Webmaster Center, Anda dapat melakukannya dengan memasukkan alamat website atau blog Anda atau dengan memasukkan alamat sitemap-nya. Menurut saya, jika memang memungkinkan, akan lebih baik jika yang ditambahkan adalah sitemap dari website Anda karena di sini sudah berisi semua alamat halaman dalam website yang memang Anda inginkan untuk diindeks. Anda dapat memasukkan alamat sitemap yang sama yang juga dimasukkan ke Google Webmaster Tools atau Yahoo Site Explorer.</p>
<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px; display: inline; border-top: 0px; border-right: 0px" title="bing-webmaster-center-add-a-site" border="0" alt="bing-webmaster-center-add-a-site" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/06/bingwebmastercenteraddasite.jpg" width="520" height="237" /> </p>
<p>Setelah menambahkan alamat web atau sitemap-nya, untuk keperluan verifikasi bahwa Anda memang benar pemilik website tersebut, ada dua cara yang dapat dipilih yaitu mengupload file XML yang disediakan atau dengan menambahkan meta tag di halaman default website Anda. Jika proses otentifikasi berhasil, maka Anda akan dapat melihat informasi dan fasilitas untuk website Anda pada Bing yang meliputi Summary, Profil, Crawl Issues, Backlinks, Outbound Links, Keywords, dan Sitemaps. </p>
<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px; display: inline; border-top: 0px; border-right: 0px" title="bing-webmaster-center-summary" border="0" alt="bing-webmaster-center-summary" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/06/bingwebmastercentersummary.jpg" width="520" height="278" /> </p>
<p><strong>Summary</strong> menampilkan informasi kapan website terakhir diindeks dan lima halaman dengan skor tertinggi dalam pencarian. Profil berisi informasi alamat sitemap, metoda verifikasi yang digunakan, dan informasi kontak. Melalui menu <strong>Crawl Issues</strong>, Anda dapat melihat berbagai masalah setelah dilakukan crawling pada website Anda. Dari menu <strong>Backlinks</strong>, Anda akan melihat halaman website mana saja yang mempunyai link ke website Anda. <strong>Outbond Links</strong> akan menampilkan halaman website lain yang link-nya ada pada website Anda. Menu <strong>Keywords</strong> digunakan untuk menunjukkan pencarian pada website And untuk kata kunci tertentu. Melalui menu <strong>Sitemaps</strong> diberikan cara bagaimana dapat melakukan ping jika website Anda telah melakukan perubahan.</p>
<p>Bisa jadi, Bing belum atau tidak akan mengalahkan Google sebagai search engine, namun sebagai pemilik website atau blog, tidak ada salahnya Anda menambahkan website Anda dan memantaunya melalui Bing Webmaster Center.</p>
<p>&#8211; <a title="Bing Webmaster Center" href="http://www.bing.com/webmaster">Bing Webmaster Center</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2009/06/07/bing-webmaster-center/feed/</wfw:commentRss>
		<slash:comments>70</slash:comments>
		</item>
		<item>
		<title>Mengenal Profil Browser Pengunjung</title>
		<link>http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/</link>
		<comments>http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/#comments</comments>
		<pubDate>Sun, 18 Jan 2009 05:52:30 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/</guid>
		<description><![CDATA[Seberapa pentingkah kehadiran pengunjung bagi website atau blog yang Anda kelola? Jika memang Anda menganggap bahwa kehadiran pengunjung itu penting, sangat penting, atau bahkan mungkin dijadikan parameter sukses atau tidaknya website atau blog yang Anda kelola tentunya Anda akan berupa menarik sebanyak mungkin pengunjung yang datang. Segala informasi mengenai pengunjung sudah seharusnya dipantau seperti jumlah [...]]]></description>
			<content:encoded><![CDATA[<p><img title="webstat-browser" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="115" alt="webstat-browser" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/01/webstatbrowser.jpg" width="260" align="left" border="0" /> Seberapa pentingkah kehadiran pengunjung bagi website atau blog yang Anda kelola? Jika memang Anda menganggap bahwa kehadiran pengunjung itu penting, sangat penting, atau bahkan mungkin dijadikan parameter sukses atau tidaknya website atau blog yang Anda kelola tentunya Anda akan berupa menarik sebanyak mungkin pengunjung yang datang. Segala informasi mengenai pengunjung sudah seharusnya dipantau seperti jumlah kunjungan (hit), jumlah pembukaan halaman (pageview), dari mana mereka mengakses, apa yang paling banyak dicari pengunjung, halaman mana yang paling sering dibuka, dan masih banyak lagi data statistik yang dapat dijadikan acuan terkait dengan pengunjung termasuk pentingnya mengenali profil pengunjung berdasarkan apa yang mereka gunakan untuk mengakses website atau blog Anda.</p>
<p><span id="more-1823"></span></p>
<p>Sebuah komputer dengan layar monitor serta browser adalah alat yang umum digunakan pengunjung untuk dapat melihat dan menggunakan fasilitas yang ada pada website atau blog. Mengenali apa yang kebanyakan pengunjung gunakan seperti browser dan resolusi monitor dapat Anda manfaatkan untuk memberikan fitur, design, dan layout website yang sesuai untuk kebanyakan pengunjung dengan tujuan memberikan kenyamanan saat mengakses website Anda.</p>
<p>Data statistik mengenai apa yang digunakan oleh pengunjung dapat Anda peroleh dari fasilitas website statistics yang disediakan penyedia layanan hosting seperti Awstats atau Webalizer atau menggunakan layanan website tracking lain seperti <a title="Google Analytics" href="https://www.google.com/analytics/">Google Analytics</a>, <a title="W3Counter" href="https://www.w3counter.com/stats/">W3Counter</a>, <a title="StatCounter" href="http://www.statcounter.com/">StatCounter</a>,&#160; atau lainnya. Berikut statistik data browser, resolusi monitor, dan sistem operasi yang paling banyak digunakan berdasarkan data <a title="Global Web Stats W3Counter" href="http://www.w3counter.com/globalstats.php">Global Web Stats W3Counter</a> dan pengunjung maseko.com untuk periode Desember 2008.&#160; Global stats dapat dijadikan acuan secara umum terutama bagi website yang tidak atau belum mempunyai data statistik.</p>
<p><img title="webstat-browsers" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="190" alt="webstat-browsers" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/01/webstatbrowsers.jpg" width="520" border="0" /> </p>
<p>Secara global memang Internet Explorer masih mendominasi sebagai browser yang paling banya digunakan, tetapi pengunjung maseko.com paling banyak menggunakan Mozilla Firefox. Dari sini, saya berusaha agar ketika ditampilkan melalui Firefox, fitur dan design blog ini dapat berjalan dan ditampilkan secara baik, dan tentu saja tetap mempertimbangkan pengguna browser lainnya. Jangan sampai saya menyiapkan blog ini tampil dan berjalan baik di Internet Explorer tetapi ternyata tidak berjalan baik di Firefox. Ketika mendesign atau menambah fitur baru sebaiknya diuji coba diakses dari berbagai browser yang berbeda.</p>
<p><img title="webstat-resolution" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="174" alt="webstat-resolution" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/01/webstatresolution.jpg" width="520" border="0" /></p>
<p>Besar resolusi monitor yang umum digunakan pengunjung dapat dijadikan dasar untuk menentukan seberapa lebar tampilan web dalam satuan pixel. Sepengetahuan saya, jika suatu web lebih panjang dari ukuran tinggi resolusi monitor, akan tetap dapat diterima pengunjung dan bersedia men-scroll atas-bawah. Tetapi jika, selain perlu menggulung atas-bawah juga dituntut geser kanan-kiri, menurut pandangan saya itu akan merepotkan, dan itu sebabnya saya lebih mempertimbangkan unsur lebar resolusi yang digunakan, mengingat dalam layout saya menetukannya secara absolut dalam pixel bukan relatif dalam persentase terhadap lebar. Ketika awal mengembangkan blog ini saya menggunakan resolusi 800&#215;600 sebagai acuan agar pengguna pada resolusi ini tidak perlu men-scroll ke kanan, dan dalam perkembangannya pengguna dengan monitor beresolusi ini makin mengecil dan saya berkeputusan menaikannya menjadi 1024&#215;768 dengan pertimbangan pengguna resolusi layar yang lebih tinggi makin banyak, sehingga pada layar mereka tidak nampak area kosong di kanan atau kiri tampilan blog.</p>
<p><img title="webstat-os" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="180" alt="webstat-os" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2009/01/webstatos.jpg" width="520" border="0" /> </p>
<p>Selain berdasarkan browser apa yang digunakan, mengetahui pada sistem operasi apa browser itu digunakan, akan dapat digunakan suatu saat ketika misalnya akan menyediakan fitur tertentu yang mengharuskan pengunjung mendownload software atau plugin tertentu, dan untuk melihat kesiapan kita akan teknologi yang akan diterapkan dengan melihat kebanyakan sistem operasi yang digunakan pengunjung.</p>
<p>Data mayoritas terkait browser di atas, tentunya bukan digunakan hanya untuk memanjakan pengunjung terbanyak&#160; pada suatu masa saja. Apa yang ditampilkan dan disediakan akan tetap lebih baik jika diterima secara baik oleh semua jenis browser, dan mayoritas pengguna hanya dijadikan acuan dalam menentukan prioritas tertentu.</p>
<p>Bagaimana dengan profil browser pengunjung website atau blog Anda? Apakah Anda memperhatikan juga masalah ini?</p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/feed/</wfw:commentRss>
		<slash:comments>49</slash:comments>
		</item>
		<item>
		<title>Menyisipkan Atribut Title pada Link Read More WordPress</title>
		<link>http://maseko.com/2008/11/22/menyisipkan-atribut-title-pada-link-more-wordpress/</link>
		<comments>http://maseko.com/2008/11/22/menyisipkan-atribut-title-pada-link-more-wordpress/#comments</comments>
		<pubDate>Fri, 21 Nov 2008 18:55:23 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/11/22/menyisipkan-atribut-title-pada-link-more-wordpress/</guid>
		<description><![CDATA[Gambar di samping menunjukkan hasil validasi maseko.com melalui layanan Sakuiweb beberapa hari yang lalu. Dari situ terlihat, meskipun hasil pengecekan terhadap Web Accessibility Guidelines (WCAG) 2.0 Level 1, 2, dan 3 menunjukkan dapat dilalui, tetapi pada bagian Other Guidelines menunjukkan masih adanya masalah dengan penjelasan bahwa masih ditemukannya tag anchor yang tidak mengandung attribute title. [...]]]></description>
			<content:encoded><![CDATA[<p><img title="sakuiweb-accessibility" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="136" alt="sakuiweb-accessibility" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/sakuiwebaccessibility.jpg" width="260" align="left" border="0" /> Gambar di samping menunjukkan hasil validasi maseko.com melalui layanan <strong>Sakuiweb</strong> beberapa hari yang lalu. Dari situ terlihat, meskipun hasil pengecekan terhadap Web Accessibility Guidelines (WCAG) 2.0 Level 1, 2, dan 3 menunjukkan dapat dilalui, tetapi pada bagian Other Guidelines menunjukkan masih adanya masalah dengan penjelasan bahwa masih ditemukannya tag anchor yang tidak mengandung attribute title. Karena blog ini menggunakan WordPress, saya pun sudah berusaha mencari tahu bagaimana menyisipkan attribute title tersebut dari file theme, tetapi tidak saya temukan. </p>
<p> <span id="more-1567"></span>
<p>Secara default ketika menggunakan fungsi the_content() atau misalnya the_content(‘Selengkapnya&#8230;&#8217;) maka link <strong>read more</strong> yang ditampilkan tidak mengandung attribute title.</p>
<p>Untuk menyisipkan atribut title, saya mencoba melakukannya dengan mengedit file inti WordPress <strong>post-template.php</strong> yang berada pada folder <strong>wp-includes</strong>. Pertama adalah mencari baris di dalam fungsi <strong>get_the_content</strong> yang tertulis seperti ini:</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">$output .= <span style="color: #006080">' &lt;a href=&quot;'</span>. get_permalink() . <span style="color: #006080">&quot;#more-$id\&quot;&gt;$more_link_text&lt;/a&gt;&quot;</span>;</pre>
</p></div>
</div>
<p>Kemudian diedit dengan mengubahnya seperti ini:</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">$output .= <span style="color: #006080">' &lt;a href=&quot;'</span>. get_permalink() . <span style="color: #006080">&quot;#more-$id\&quot; class=\&quot;more-link\&quot;  title=\&quot;Continue reading &quot;</span>.the_title(<span style="color: #006080">''</span>,<span style="color: #006080">''</span>,false).<span style="color: #006080">&quot;\&quot;&gt;$more_link_text&lt;/a&gt;&quot;</span>;</pre>
</p></div>
</div>
<p>Maka hasilnya nampak pada hyperlink <strong>Continue reading…</strong> seperti pada halaman muka maseko.com. <a title="WebSite Score maseko.com" href="http://www.sakuiweb.com/design/validator/results/?url=maseko.com">Hasil validasi ulang</a> melalui layanan <a title="Sakuiweb Validator" href="http://www.sakuiweb.com/design/validator/">Sakuiweb</a> pun mengalami kenaikan prosentasenya menjadi 98% dari sebelumnya 96%.</p>
<p>Berhubung editing yang dilakukan langsung pada file core-nya WordPress, maka ketika suatu saat nanti mengupdate WordPress, maka perlu dilakukan editing lagi kecuali WordPress telah mengakomodasi masalah ini.</p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/11/22/menyisipkan-atribut-title-pada-link-more-wordpress/feed/</wfw:commentRss>
		<slash:comments>35</slash:comments>
		</item>
		<item>
		<title>Langkah Menggunakan Google Custom Search Engine (Bag. 2)</title>
		<link>http://maseko.com/2008/11/03/langkah-menggunakan-google-custom-search-engine-bag-2/</link>
		<comments>http://maseko.com/2008/11/03/langkah-menggunakan-google-custom-search-engine-bag-2/#comments</comments>
		<pubDate>Mon, 03 Nov 2008 09:51:58 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/11/03/langkah-menggunakan-google-custom-search-engine-bag-2/</guid>
		<description><![CDATA[Pada tulisan Langkah Menggunakan Google Custom Search Engine (Bag. 1) telah saya tuliskan mengenai langkah-langkah membuat custom search engine disertai penjelasan dan gambaran singkat mengenai menu-menu dalam Panel Kontrol-nya guna mengatur lebih lanjut custom search engine yang dibuat. Pada Bagaian 2 tulisan ini, saya akan mencoba menuliskan bagaiamana langkah-langkah untuk menggunakan Google CSE sebagai fasilitas [...]]]></description>
			<content:encoded><![CDATA[<p><img title="Google CSE" style="display: inline; margin: 0px 10px 0px 0px" alt="Google CSE" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse.jpg" align="left" /> Pada tulisan <a title="Langkah Menggunakan Google Custom Search Engine (Bag. 1)" href="http://maseko.com/2008/11/02/langkah-menggunakan-google-custom-search-engine-bag-1/">Langkah Menggunakan Google Custom Search Engine (Bag. 1)</a> telah saya tuliskan mengenai langkah-langkah membuat custom search engine disertai penjelasan dan gambaran singkat mengenai menu-menu dalam Panel Kontrol-nya guna mengatur lebih lanjut custom search engine yang dibuat.</p>
<p>Pada Bagaian 2 tulisan ini, saya akan mencoba menuliskan bagaiamana langkah-langkah untuk menggunakan Google CSE sebagai fasilitas pencarian dalam website atau blog yang kita miliki. Pada tulisan ini, saya lebih memfokuskan cara penggunaannya pada blog bermesin WordPress yang dihosting sendiri.</p>
<p> <span id="more-1529"></span>
<p>Seperti yang Anda ketahui, ada dua elemen fasilitas pencarian dalam website atau blog:</p>
<ul>
<li><strong>Form Pencarian</strong>, yaitu formulir yang dapat digunakan pengguna untuk memulai melakukan pencarian, di mana pengguna dapat memasukkan keyword atau kata kunci dan mengklik tombol Search atau dengan [Enter]. Form pencarian ini dapat diletakkan di halaman-halaman mana saja yang mudah dicapai pengguna ketika berniat melakukan pencarian. Pada blog ini, formulir pencarian ini adalah yang terletak pada bagian atas sebelah kanan menu yang ditampilkan pada setiap halaman maseko’s weblog. </li>
<li><strong>Hasil Pencarian</strong>, yaitu halaman yang nantinya akan memuat hasil pencarian yang dilakukan oleh pengguna. Mengacu pada cara yang saya terapkan dalam maseko’s weblog ini, maka yang akan dituliskan berikutnya adalah bagaimana menampilkan hasil pencarian dalam iframe pada halaman yang disiapkan sehingga hasil pencarian masih dalam website atau blog kita. </li>
</ul>
<p>Kita kembali lagi masuk ke Google CSE, kemudian masuk ke halaman pengelolaan mesin pencari yang telah dibuat. Melalui menu <strong>Kode</strong> pada <strong>Panel Kontrol</strong> Google CSE, pada bagian <strong>Pilihan hosting hasil pencarian</strong> kita pilih <strong>Meng-host hasil di situs Web Anda</strong> kemudian pilih <strong>iframe</strong>.</p>
<p><img title="google-cse-03" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="226" alt="google-cse-03" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse03.jpg" width="520" border="0" /> </p>
</p>
<p>Setelah itu, pada bagian Tetapkan hasil pencarian, kita masukkan URL di situs di mana hasil pencarian nantinya akan ditampilkan. <strong>Isikan dengan URL atau alamat web dimana sebuah halaman web mungkin untuk dapat dibuat</strong>, misalnya saja di sini kita dapat memasukkan http://www.domain.com/search.html dan untuk blog WordPress yang dihosting sendiri dapat seperti http://www.domain.com/?page_id=2 atau http://www.domain.com/search/ tergantung setting permalink yang digunakan. Pada bagian ini pula kita menentukan di bagian mana iklan akan ditempatkan, apakah kanan, kanan dan atas, atau atas dan bawah.</p>
<p>Selagi mengatur setting di atas, maka dibagian bawah pengaturan tersebut akan ditampilkan kode yang dapat digunakan baik untuk form pencarian maupun hasil pencarian.</p>
<p><img title="google-cse-04" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="453" alt="google-cse-04" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse04.jpg" width="520" border="0" /> </p>
</p>
<p>Sementara kita tinggalkan dulu halaman Kode dalam Google CSE tersebut dalam keadaan terbuka. Selanjutnya kita menuju ke website atau blog kita dimana kode tersebut akan disisipkan. Di sini kita perlu mengedit file-file web, jadi diperlukan akses FTP atau fasilitas pengelolaan berbasis web seperti Cpanel dan membuka file yang diperlukan untuk dilakukan editing.</p>
<p>Pertama adalah menyisipkan kode form atau kotak pencarian. Buka file html, asp, php, atau lainnya yang didalamnya akan disisipkan kotak pencarian. Di sini Anda perlu mengenal sedikit pengetahuan HTML agar letak kode yang akan disisipkan bernar-benar tepat.</p>
<p>Untuk blog WordPress, penyisipan <strong>kode form pencarian</strong> ini dilakukan pada file theme yang digunakan dengan menyesuaikan nama file dan di bagian mana akan disisipkan, apakah bagian atas di header, sidebar, atau lainnya. Anda dapat saja menggunakan kotak pencarian ini sebagai tambahan kotak pencarian default dari WordPress atau untuk menggantinya seperti yang saya terapkan dalam blog ini. Untuk theme yang saya gunakan, form pencarian diletakan pada file header.php, sementara untuk theme Default WordPress, form pencarian aslinya ada pada file searchform.php. Beda theme, bisa jadi beda nama file yang perlu diedit, jadi kita harus bisa menentukan file yang tepat. Untuk mengubah form pencarian asli WordPress pada blog dengan theme Default WordPress, maka semua isi file searchform.php diganti dengan kode kotak pencarian dari Google CSE.</p>
<p>Selanjutnya adalah menyisipkan <strong>kode hasil pencarian</strong> pada file yang alamatnya sudah ditentukan dalam pembentukkan kode di atas. Misalnya hasil pencarian akan diletakkan pada alamat http://www.domain.com/search.html maka kita perlu mengedit file search.html dan pada blok yang sesuai sisipkan kode tersebut.&#160; Dari pengalaman saya, untuk menampung iframe hasil pencarian Google CSE ini setidaknya diperlukan blok dengan lebar 795px jika letak iklan berada disebelah kanan atau 500px jika tanpa meletakkan iklan di sebelah kanan. </p>
<p>Untuk pengguna blog WordPress.org, untuk menyisipkan kode tersebut dapat dilakukan dengan menambah halaman dari menu Write – Page. Gunakan judul yang sesuai dan sisipkan kode dengan editor pada mode HTML (bukan Visual). </p>
<p><img title="google-cse-08" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" height="226" alt="google-cse-08" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse08.jpg" width="520" border="0" /> </p>
<p>Pastikan alamat yang dihasilkan (permalink) sudah sesuai dengan alamat yang disiapkan, jika berbeda dapat mengedit alamat tersebut. Jika memang tidak dapat membuat alamat yang sudah direncanakan dalam isian Google CSE, kita dapat saja menggunakan alamat yang dihasilkan dan mengubah pengaturan pada Google CSE termasuk kode kotak pencarian sebelumnya.</p>
<p><img title="google-cse-06" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="143" alt="google-cse-06" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse06.jpg" width="520" border="0" /> </p>
<p>Opsi lainnya, seperti yang saya terapkan untuk blog ini adalah dengan membuat <strong>custom page template WordPress</strong>. Ini saya lakukan karena jika menggunakan page yang standar, maka halaman yang diperlukan untuk menampung hasil pencarian kurang lebar jika saya ingin meletakkan iklan pada bagian kanan. Untuk langkah ini diperlukan pengetahuan untuk mengutak atik file theme WordPress. Untuk mempermudah dapat saja meng-copy salah satu file theme yang ada seperti page.php atau single.php dan melakukan modifikasi atasnya. Yang diperlukan untuk membuat custom page template adalah memberi nama tempalte yang dibuat ini dengan menambahkan bagian kode seperti dibawah pada bagian awal file template halaman.</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;?php</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">/*</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">Template Name: Google CSE Result</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">*/</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">?&gt;</pre>
</p></div>
</div>
<p>Contoh di atas digunakan untuk memberi nama custom page template dengan nama Google CSE Result. Contoh selengkapnya custom page template adalah seperti di bawah ini</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;?php</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">/*</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">Template Name: Google CSE Result</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">*/</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">?&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;?php get_header(); ?&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">    &lt;div id=<span style="color: #006080">&quot;content&quot;</span> class=<span style="color: #006080">&quot;widecolumn&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">            &lt;div class=<span style="color: #006080">&quot;post&quot;</span> id=<span style="color: #006080">&quot;post-&lt;?php the_ID(); ?&gt;&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">            &lt;h2&gt;Search Result&lt;/h2&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">            &lt;div class=<span style="color: #006080">&quot;entry&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">                &lt;div id=<span style="color: #006080">&quot;cse-search-results&quot;</span>&gt;&lt;/div&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&lt;<span style="color: #0000ff">script</span> type=<span style="color: #006080">&quot;text/javascript&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  var googleSearchIframeName = <span style="color: #006080">&quot;cse-search-results&quot;</span>;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  var googleSearchFormName = <span style="color: #006080">&quot;cse-search-box&quot;</span>;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  var googleSearchFrameWidth = 500;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  var googleSearchDomain = <span style="color: #006080">&quot;www.google.com&quot;</span>;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  var googleSearchPath = <span style="color: #006080">&quot;/cse&quot;</span>;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&lt;/<span style="color: #0000ff">script</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;<span style="color: #0000ff">script</span> type=<span style="color: #006080">&quot;text/javascript&quot;</span> src=<span style="color: #006080">&quot;http://www.google.com/afsonline/show_afs_search.js&quot;</span>&gt;&lt;/<span style="color: #0000ff">script</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">                </pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">            &lt;/div&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">        &lt;/div&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">    &lt;/div&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;?php get_footer(); ?&gt;</pre>
</p></div>
</div>
<p>Bagaiman isi file yang sudah disisipi kode hasil pencarian Google CSE ini memang benar-benar harus disesuaikan dengan theme yang digunakan, jadi harus mengerti termasuk penggunaan CSS yang mendukungnya. </p>
<p><img title="google-cse-07" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="139" alt="google-cse-07" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse07.jpg" width="260" align="left" border="0" /> Dengan penggunaan custom page template seperti ini, maka ketika membuat halaman melalui menu Write – Page, pada bagian isi dikosongkan saja. Yang perlu diperhatikan adalah menerapkan template yang disediakan untuk halaman yang dibuat. Ini dilakukan melalui pengaturan Page Template dan pilih nama template halaman yang dibuat sebelumnya. Pastikan juga alamat halaman sudah sesuai dengan yang diisikan dalam pengaturan kode Google CSE.</p>
<p>Selanjutnya simpan dan coba lakukan pencarian melalui form pencarian yang sudah jadi sebelumnya. Jika memang form dan halaman hasil pencarian belum sesuai, kita perlu mengaturnya lebih lanjut. Pengetahuan akan (X)HTML dan CSS kemungkinan akan sangat diperlukan di sini.</p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/11/03/langkah-menggunakan-google-custom-search-engine-bag-2/feed/</wfw:commentRss>
		<slash:comments>53</slash:comments>
		</item>
		<item>
		<title>Ubah Teks ke Suara dengan VozMe</title>
		<link>http://maseko.com/2008/11/03/ubah-teks-ke-suara-dengan-vozme/</link>
		<comments>http://maseko.com/2008/11/03/ubah-teks-ke-suara-dengan-vozme/#comments</comments>
		<pubDate>Sun, 02 Nov 2008 19:07:36 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/11/03/ubah-teks-ke-suara-dengan-vozme/</guid>
		<description><![CDATA[VozMe menyediakan layanan web untuk mengubah teks yang dimasukkan dalam form web yang disediakan untuk kemudian diubah menjadi suara yang langsung diperdengarkan ke kita. Sebelumnya kita dapat memilih untuk menggunakan suara laki-laki atau perempuan. File mp3 dari suara yang dihasilkan pun dapat kita download untuk kemudian didengarkan kemudian. Sayangnya memang pilihan bahasa yang disediakan tidak [...]]]></description>
			<content:encoded><![CDATA[<p><img title="vozme" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="115" alt="vozme" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/vozme.jpg" width="260" align="left" border="0" /> <strong>VozMe</strong> menyediakan layanan web untuk mengubah teks yang dimasukkan dalam form web yang disediakan untuk kemudian diubah menjadi suara yang langsung diperdengarkan ke kita. Sebelumnya kita dapat memilih untuk menggunakan suara laki-laki atau perempuan. File mp3 dari suara yang dihasilkan pun dapat kita download untuk kemudian didengarkan kemudian.</p>
<p> <span id="more-1523"></span>
<p>Sayangnya memang pilihan bahasa yang disediakan tidak mendukung Bahasa Indonesia, jadi sebatas Bahasa Inggris, Spanyol, Portugis, Hindi, Catala, dan Itali. Meskipun begitu, bisa jadi Anda memerlukan untuk keperluan mendengarkan suara dari teks Bahasa Inggris dari sumber elektronik, jadi tinggal copy-paste ke form web-nya, download file mp3-nya, masukan dalam media player, dan dengarkan.</p>
<p>Untuk para pemilik website atau blog, vozMe juga menyediakan cara dan alat untuk digunakan dalam website atau blog guna menyuarakan teks dalam halaman webnya. Di sini disediakan antara lain plugin untuk WordPress, penggunaan pada template Blogger, plugin atau modifikasi kode untuk Joomla, dan lainnya.</p>
<p>Tertarik untuk melakukan konversi teks ke suara dari bahasa yang didukungnya, coba saja layanan vozMe ini.</p>
<p>&#8211; <a title="vozMe" href="http://vozme.com/index.php?lang=en">vozMe</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/11/03/ubah-teks-ke-suara-dengan-vozme/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>Langkah Menggunakan Google Custom Search Engine (Bag. 1)</title>
		<link>http://maseko.com/2008/11/02/langkah-menggunakan-google-custom-search-engine-bag-1/</link>
		<comments>http://maseko.com/2008/11/02/langkah-menggunakan-google-custom-search-engine-bag-1/#comments</comments>
		<pubDate>Sun, 02 Nov 2008 14:50:21 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/11/02/langkah-menggunakan-google-custom-search-engine-bag-1/</guid>
		<description><![CDATA[Ada beberapa pengunjung maseko.com yang menanyakan mengenai fasilitas pencarian yang ada di maseko’s weblog ini dimana mesin pencarian menggunakan Google tetapi hasil ditampilkan dalam halaman sendiri. Dalam bebeberapa tulisan sebenarnya telah saya sebutkan jika saya menggunakan Google Custom Search Engine (CSE) atau Pencarian Kustom Google. Google CSE merupakan layanan yang disediakan Google kepada penggunanya untuk [...]]]></description>
			<content:encoded><![CDATA[<p><img title="google-cse" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="89" alt="google-cse" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse.jpg" width="260" align="left" border="0" /> Ada beberapa pengunjung maseko.com yang menanyakan mengenai fasilitas pencarian yang ada di maseko’s weblog ini dimana mesin pencarian menggunakan Google tetapi hasil ditampilkan dalam halaman sendiri. Dalam bebeberapa tulisan sebenarnya telah saya sebutkan jika saya <a title="menggunakan Google Custom Search Engine" href="http://maseko.com/2007/07/26/menggunakan-custom-search-engine/">menggunakan Google Custom Search Engine (CSE)</a> atau <strong>Pencarian Kustom Google</strong>.</p>
<p>Google CSE merupakan layanan yang disediakan Google kepada penggunanya untuk mengkustomisasi pencarian Google yang utamanya menentukan halaman-halaman website mana yang akan masuk dalam hasil pencariannya. Pengguna bisa menentukan hanya halaman dari satu website atau blog tertentu saja yang akan ditampilkan seperti yang saya terapkan di sini, beberapa website atau blog yang diinginkan, atau dapat pula seluruh website seperti halnya pencarian Google umumnya. </p>
<p> <span id="more-1519"></span>
<p>Selain penentuan halaman website yang akan masuk dalam hasil pencarian, pengguna juga dapat mengkustomisasi aspek lain seperti tampilan dan bagaimana ditampilkannya, mengintegrasikannya dengan Google Adsense yang memungkinkan kita memperoleh pendapatan dari pencarian yang dilakukan oleh pengunjung, dan juga menentukan siapa saja yang dapat berkolaborasi menentukan website yang akan masuk dalam hasil pencarian.</p>
<p><img title="google-cse-01" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="117" alt="google-cse-01" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse01.jpg" width="260" align="left" border="0" /> Langkah awal untuk dapat membuat mesin pencari kustom adalah masuk ke <a title="Google CSE" href="http://www.google.com/coop/cse/">Google CSE</a> dan login menggunakan Google Account. Jika belum mempunyai Google Account, lakukan registrasi lebih dahulu.</p>
<p>Jika sudah login, untuk membuat custom search engine baru klik tombol <strong>Buat Custom Search Engine</strong>. Oya, saya menggunakan bahasa pengantar dalam Bahasa Indonesia untuk langkah-langkah dalam Google CSE, dan untuk bahasa lain, sesuaikan saja.</p>
<p>Selanjutnya adalah melakukan konfigurasi mesin pencari yang akan dibuat. Pada bagian <strong>Informasi Dasar</strong>, masukkan nama, deskripsi, kata kunci, dan bahasa mesin pencari. Untuk kata kunci, ini merupakan kata kunci mesin pencari untuk keperluan orang lain menemukan custom search engine yang kita buat.</p>
<p><img title="google-cse-02a" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="312" alt="google-cse-02a" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse02a.jpg" width="520" border="0" /> </p>
<p>Masih pada halaman yang sama, di bawah form Informasi dasar, kita menentukkan apa yang akan dicari melalui mesin pencari ini, apa hanya situs terpilih, seluruh web dengan mengutamakan situs yang dipilih, atau seluruh web. Jika memilih situs terpilih atau seluruh web dengan mengutamakan situs terpilih, maka pada Pilih beberapa situs, diisi dengan satu atau lebih situsnya.</p>
<p><img title="google-cse-02b" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="478" alt="google-cse-02b" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/11/googlecse02b.jpg" width="520" border="0" /> </p>
<p>Format penulisan URL situs yang dipilih di atas, telah dijelaskan pula pada tips yang diberikan.</p>
<blockquote><p><b>Memformat URL Anda</b></p>
<ul>
<li><b>Halaman terpisah</b> Menetapkan <i>www.situssaya.com/halamansaya.html</i> hanya akan menyertakan halaman <i>halamansaya.html</i> pada <i>www.situssaya.com</i>. </li>
<li><b>Seluruh situs</b>: Menetapkan <i>www.situssaya.com/*</i> akan berisi semua halaman pada <i>www.situssaya.com</i>. </li>
<li><b>Bagian dari situs</b>: Anda dapat menggunakan pola wildcard untuk hanya menyertakan bagian tertentu dari situs. Misalnya, <i>www.situssaya.com/*tentang*</i> hanya akan berisi file pada <i>www.situssaya.com</i> yang memiliki <i>tentang</i> dalam namanya. </li>
<li><b>Seluruh domain</b>: Anda juga dapat menetapkan seluruh domain menggunakan *.mydomain.com. Jika Anda menetapkan <i>mydomain.com</i>, kami akan mengkonversinya secara otomatis ke <i>*.mydomain.com/*</i>. Jika Anda tidak menginginkannya, Anda dapat mengubahnya kembali pada panel kontrol. </li>
</ul>
</blockquote>
<p>Selanjutnya adalah Edisi Google CSE yang dipilih apakah <strong>Edisi Standar</strong> atau <strong>Edisi Bisnis</strong>. Apabila mencari Edisi Standar, maka tidak perlu membayar alias gratis. Kemudian beri check pada <strong>Saya telah membaca dan menyetujui Persyaratan Layanan</strong>, dan klik <strong>Brkt</strong>.</p>
<p>Pada halaman berikutnya, kita dapat mencoba melakukan pencarian dengan custom search engine yang baru dibuat. Jika memang hasilnya sudah sesuai, klik <strong>Selesai</strong>. Selanjutnya kita akan dibawa pada halaman pengelolaan mesin pencari yang telah dibuat. Untuk tiap mesin pencari ada menu <strong>Situs</strong> untuk menuju halaman mesin pencari, <strong>Panel Kontrol</strong> untuk mengelola lebih lanjut mesin pencari, <strong>Statistik</strong>, dan <strong>Hapus</strong>.</p>
<p>Jika memilih Panel Kontrol pada link di atas, maka selanjutnya kita dapat mengatur berbagai setting termasuk mendapatkan kode-kode jika custom search engine tersebut akan digunakan dalam website atau blog kita. Saya coba tuliskan secara singkat menu-menu yang ada pada Panel Kontrol Google CSE.</p>
<p>Melalui menu <strong>Dasar-dasar</strong>, kita dapat mengedit informasi dasar, kata-kunci, dan bahasa mesin pencari seperti yang telah diisikan pada saat pembuatan custom search engine. Di sini pula, kita dapat menegatur preferensi bagaimana pencarian dilakukan, siapa yang dapat berkolaborasi, visibilitas, dan status iklan pada hasil pencarian. Jika situs web yang akan menggunakan merupakan situs web nirlaba, universitas, atau pemerintah dapat saja memilih untuk tidak menampilkan iklan pada hasil pencarian. Namun, jika bukan atau yang akan mengintegrasikan dengan Google Adsense maka harus memilih untuk menampilkan iklan.</p>
<p>Melalui menu <strong>Situs</strong>, selain untuk mengedit, menambahkan, atau menghapus situs-situs yang akan masuk dalam hasil pencarian Google CSE ini seperti yang sebelumnya telah ditentukan pada saat pembuatan, juga dapat menentukan situs-situs yang akan dikecualikan dalam hasil pencarian. Format penulisan URL situs adalah seperti yang telah dijelaskan di atas. Untuk mesin pencarian kustom pada maseko’s weblog ini misalnya, akan mengecualikan halaman-halaman indeks kedua dan seterusnya, kategori, dan halaman .xml seperti pernah saya tuliskan <a title="Excluded Sites untuk Pencarian di Maseko.com" href="http://maseko.com/2008/02/03/excluded-sites-untuk-pencarian-di-masekocom/">di sini</a>. Perlu diingat pula bahwa <strong>apa yang nantinya akan muncul dalam hasil pencarian adalah halaman-halaman web yang memang sudah terindeks oleh Google</strong>.</p>
<p>Melalui menu <strong>Mengindeks</strong>, kita dapat melihat satus pengindeksan yaitu perkiraan halaman yang terindeks dalam custom search engine ini. Di sini pula diberikan link untuk memasukan peta situs (sitemap) melalui layanan <a title="Google Webmaster Tools" href="http://www.google.com/webmasters/tools/">Google Webmaster Tools</a>. File Sitemap ini dapat dimanfaatkan untuk mempermudah Google dalam mengindeks halaman-halaman dalam suatu situs web.</p>
<p>Melalui menu <strong>Perbaikan</strong>, kita dapat mengatur penyempitan berupa label-label yang diterapkan dalam hasil pencarian jika pengguna melakukan pencarian dengan kata kunci tertentu. Saya sendiri belum menggunakan fasilitas ini karena memang belum paham bagaimana memanfaatkannya.</p>
<p>Dalam menu <strong>Tampilan dan nuansa</strong>, kita dapat mengatur style yang akan digunakan seperti bentuk form pencarian, warna-warna dalam hasil pencarian, dan juga logo yang akan digunakan jika hasil pencarian menggunakan halaman yang dihosting Google tanpa menyisipkan dalam halaman web atau blog sendiri. </p>
<p>Melalui menu <strong>Kode</strong>, kita dapat melihat kode yang dapat digunakan untuk menampilkan form dan hasil pencarian tergantung cara kita akan memanfaatkan Google CSE dalam website atau blog kita. Jika memilih <strong>Meng-host hasil pada halaman Google</strong>, maka akan diberikan kode untuk form pencariannya. Jika memilih <strong>Meng-host hasil di situs Web Anda</strong>, maka ada dua pilihan yaitu dengan menggunakan iframe atau dengan menggunakan API AJAX Search. Untuk maseko.com sendiri menggunakan cara iframe, dengan ini hasil pencarian sebenarnya masih dihosting di Google hanya disisipkan pada halaman sendiri melalui tag iframe. Untuk kustomisasi lebih lanjut dapat saja menggunakan API Ajax Search yang memungkinkan menggunakan javascript dan dan CSS sendiri dalam hasil pencarian. Untuk penggunaan cara iframe seperti yang diterapkan dalam blog ini rencananya akan saya tulis dalam Bagian 2 tulisan ini.</p>
<p>Melalui menu<strong> Kolaborasi</strong>, kita dapat melihat kontributor yang aktif, daftar sukarelawan yang berminat berkolaborasi dalam Google CSE yang kita buat dan juga formulir untuk mengundang orang lain bergabung. </p>
<p>Melalui menu <strong>Mendapatkan penghasilan</strong>, di sini kita dapat mengintegrasikan account Google Adsense yang kita miliki dengan Google CSE yang dibuat, sehingga ketika ada sesorang yang melakukan pencarian dan mengklik iklan dalam hasil pencariannya, maka kita akan mendapatkan bagian penghasilan.</p>
<p>Menu lainnya dalam Panel Kontrol Google CSE adalah menu <strong>Akun Bisnis</strong> yang berisi tawaran untuk menggunakan Google Site Search yang berbayar, menu <strong>Lanjutan</strong> untuk mengupload file penjelasan situs yang dimasukkan dan dikecualikan, dan menu <strong>Pratinjau</strong> untuk melihat hasil Google CSE yang dibuat dan sebagai sarana untuk mencoba melakukan pencarian.</p>
<p>Seperti itu langkah-langkah membuat custom search engine dengan Google CSE beserta penjelasan singkat berbagai aspek dalam mengatur Google CSE melalui Panel Kontrol yang disediakan. Seperti yang saya singgung di atas, pada <strong>Bagian 2 tulisan ini</strong>, akan saya coba tulis bagaimana menggunakan Google CSE dalam website atau blog kita dimana hasil pencarian seolah-olah masih berada dalam website kita seperti yang diterapkan pada blog ini.</p>
<p>&#8211; Bersambung ke <a title="Langkah Menggunakan Google Custom Search Engine (Bag. 2)" href="http://maseko.com/2008/11/03/langkah-menggunakan-google-custom-search-engine-bag-2/">Langkah Menggunakan Google Custom Search Engine (Bag. 2)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/11/02/langkah-menggunakan-google-custom-search-engine-bag-1/feed/</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
		<item>
		<title>Smush It</title>
		<link>http://maseko.com/2008/10/04/smush-it/</link>
		<comments>http://maseko.com/2008/10/04/smush-it/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 03:01:44 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Webhosting]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/10/04/smush-it/</guid>
		<description><![CDATA[Salah satu elemen yang biasa digunakan dalam halaman website adalah adanya gambar atau image baik untuk pendukung tulisan maupun sebagai bagian mempercantik halaman web. Akibat menampilkan image apalagi jika besar file image tersebut cukup besar adalah membuat waktu loading halaman website akan semakin lama karena besarnya data yang didownload semakin besar. Jika suatu image memang [...]]]></description>
			<content:encoded><![CDATA[<p><img title="smush-it" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="76" alt="smush-it" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/10/smushit.jpg" width="260" align="left" border="0" /> Salah satu elemen yang biasa digunakan dalam halaman website adalah adanya gambar atau image baik untuk pendukung tulisan maupun sebagai bagian mempercantik halaman web. Akibat menampilkan image apalagi jika besar file image tersebut cukup besar adalah membuat waktu loading halaman website akan semakin lama karena besarnya data yang didownload semakin besar. Jika suatu image memang diperlukan untuk tetap ditampilkan dalam website, langkah mengoptimasi image tersebut sebelum diupload adalah cara yang dapat diambil agar besar filenya tidak sebesar aslinya disamping menurunkan ukuran file imagenya. Langkah untuk melakukan optimasi file image ini salah satunya dapt dilakukan dengan menggunakan layanan <strong>Smush It</strong>.</p>
<p> <span id="more-1416"></span>
<p>Smush It merupakan layanan web untuk keperluan optimasi file-file image baik dengan mengupload file image yang akan dioptimasi maupun dengan memberikan URL file image jika sudah terupload di internet. Selain itu, disediakan pula add-on untuk browser Mozilla Firefox untuk mempermudah memanfaatkan layanan ini.</p>
<p>Dalam melakukan optimasi image, Smush it menyatakan bahwa prosesnya tidak akan menurunkan kualitas image dengan digunakanannya <em>image format specific non-lossy image optimization tools</em>. Selanjutnya image-image yang sudah diproses ini akan dapat kita download dalam suatu file zip, dan inilah yang dapat kita upload dan nantinya ditampilkan dalam halaman web.</p>
<p><img title="smush-it-results" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" height="362" alt="smush-it-results" src="http://maseko.com/index.php?feedimage=wp-content/uploads/2008/10/smushitresults.jpg" width="520" border="0" /> </p>
<p>Penggunaan file image yang teroptimasi ini, selain akan mempercepat loading halaman website, juga akan menghemat bandwidth atas akses image-image yang ditampilkan. </p>
<p>Bagi saya pribadi penggunaan layanan ini akan menambah kerepotan, mengingat saya lebih menyukai upload image yang terintegrasi dengan posting tulisan melalui Windows Live Writer termasuk penggunaan fasilitas pengolahannya. Tapi, bisa jadi suatu saat saya akan memerlukan layanan ini untuk mengoptimasi image yang akan ditampilkan pada setiap halaman.</p>
<p>&#8211; <a title="Smush It" href="http://www.smushit.com/">Smush It</a> | via <a title="Image Optimization With Smush It" href="http://www.ghacks.net/2008/10/04/image-optimization-with-smush-it/">gHacks</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/10/04/smush-it/feed/</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
	</channel>
</rss>

