<?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>Belajar Komputer &#187; Blogging</title>
	<atom:link href="http://www.belajarpc.info/category/blogging/feed" rel="self" type="application/rss+xml" />
	<link>http://www.belajarpc.info</link>
	<description>Learning By Doing</description>
	<lastBuildDate>Tue, 27 Jul 2010 22:20:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Free Layout Plurk &#8211; Spain Team (Spanyol)</title>
		<link>http://www.belajarpc.info/free-layout-plurk-spain-team-spanyol.htm</link>
		<comments>http://www.belajarpc.info/free-layout-plurk-spain-team-spanyol.htm#comments</comments>
		<pubDate>Thu, 08 Jul 2010 16:13:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[plurk]]></category>
		<category><![CDATA[plurk layout]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/free-layout-plurk-spain-team-spanyol.htm</guid>
		<description><![CDATA[Viva Spain in World Cup 2010. I want share with plurker anywhere if you are like theme of Spain, please click the install button to use this theme.
 
&#160;

Click Button to Install the Layout
]]></description>
			<content:encoded><![CDATA[<p>Viva Spain in World Cup 2010. I want share with plurker anywhere if you are like theme of Spain, please click the install button to use this theme.</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="layout-plurk-spain" border="0" alt="layout-plurk-spain" src="http://www.belajarpc.info/wp-content/uploads/2010/07/layoutplurkspain1.jpg" width="490" height="307" /> </p>
<p>&#160;</p>
<p><a href="http://www.plurk.com/installDesign/6206727-77e07dd9c1"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="Install Layout" border="0" alt="Install Layout" src="http://www.belajarpc.info/wp-content/uploads/2010/04/installbutton.jpg" width="72" height="72" /></a></p>
<p align="center"><strong>Click Button to Install the Layout</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/free-layout-plurk-spain-team-spanyol.htm/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Membuat Plug-In untuk Proteksi Blog dari Malicious URL</title>
		<link>http://www.belajarpc.info/membuat-plug-in-untuk-proteksi-blog-dari-malicious-url.htm</link>
		<comments>http://www.belajarpc.info/membuat-plug-in-untuk-proteksi-blog-dari-malicious-url.htm#comments</comments>
		<pubDate>Mon, 05 Jul 2010 00:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Tips dan Trik]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress hack]]></category>
		<category><![CDATA[wordpress plugin]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/membuat-plug-in-untuk-proteksi-blog-dari-malicious-url.htm</guid>
		<description><![CDATA[ Hacker memang selalu tiada henti untuk menciptakan dan menemukan script dan query berbahaya untuk menyerang titik-titik kelemahan dari sebuah blog. Walaupun Wordpress memiliki perlindungan standar yang sudah baik, tetapi kita tetap perlu meningkatkan keamanan tersebut. Contohnya saja, blog ini pernah diserang oleh Holasionweb.

Salah satu cara yang bisa digunakan untuk meningkatkan keamanan blog wordpress adalah [...]]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="margin: 0px 5px 0px 0px; display: inline" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/06/wordpresshackstricks.jpg"/> Hacker memang selalu tiada henti untuk menciptakan dan menemukan script dan query berbahaya untuk menyerang titik-titik kelemahan dari sebuah blog. Walaupun Wordpress memiliki perlindungan standar yang sudah baik, tetapi kita tetap perlu meningkatkan keamanan tersebut. Contohnya saja, <a href="http://www.belajarpc.info" target="_blank">blog</a> ini pernah diserang oleh <a href="http://www.belajarpc.info/serangan-holasionweb-pada-belajarpc-info.htm">Holasionweb</a>.</p>
<div id='extendedEntryBreak' name='extendedEntryBreak'></div>
<p align="justify">Salah satu cara yang bisa digunakan untuk meningkatkan keamanan <a href="http://www.belajarpc.info" target="_blank">blog</a> wordpress adalah dengan menggunakan plugin. Cara kerja plugin ini cukup sederhana. Plugin ini akan memeriksa string permintaan yang terlalu panjang (lebih dari 255 karakter) dan juga mengecek permintaan fungsi eval atau base64 PHP dalam URI. Jika salah satu kondisi tersebut terpenuhi, maka plug-in mengirimkan kesalahan 414 ke browser klien.</p>
<h3>Bagaimana Membuat Pluginnya ?</h3>
<p align="justify">Pertama copylah code PHP dibawah ini kedalam editor anda.</p>
<pre class="brush:php">&lt;?php
/*
Plugin Name: Block Bad Queries
Plugin URI: http://perishablepress.com/press/2009/12/22/protect-wordpress-against-malicious-url-requests/
Description: Protect WordPress Against Malicious URL Requests
Author URI: http://perishablepress.com/
Author: Perishable Press
Version: 1.0
*/

global $user_ID;

if($user_ID) {
   if(!current_user_can('level_10')) {
      if (strlen($_SERVER['REQUEST_URI']) &gt; 255 ||
         strpos($_SERVER['REQUEST_URI'], "eval(") ||
         strpos($_SERVER['REQUEST_URI'], "CONCAT") ||
         strpos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
         strpos($_SERVER['REQUEST_URI'], "base64")) {
         @header("HTTP/1.1 414 Request-URI Too Long");
         @header("Status: 414 Request-URI Too Long");
         @header("Connection: Close");
         @exit;
      }
   }
}
?&gt;
</pre>
<p>Lalu simpan file ini dengan nama <em>blockbadqueries.php, kemudian upload file tersebut ke folder wp-content/plugins di hosting anda.</em></p>
<p><em>Terakhir aktifkan plugin tersebut melalui menu Plugin di Dasboard Wordpress anda.</em></p>
<p><em>Sumber : <a href="http://perishablepress.com/press/2009/12/22/protect-wordpress-against-malicious-url-requests/">Protect WordPress Against Malicious URL Requests</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/membuat-plug-in-untuk-proteksi-blog-dari-malicious-url.htm/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Membuat Twitter Follower dengan Format Teks</title>
		<link>http://www.belajarpc.info/membuat-twitter-follower-dengan-format-teks.htm</link>
		<comments>http://www.belajarpc.info/membuat-twitter-follower-dengan-format-teks.htm#comments</comments>
		<pubDate>Wed, 30 Jun 2010 00:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress hack]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/membuat-twitter-follower-dengan-format-teks.htm</guid>
		<description><![CDATA[ Untuk menampilkan Twitter Follower pada blog atau web kita biasanya menggunakan widget tambahan yang formatnya berupa gambar. Jelas cara ini tidak bisa dimodifikasi tampilannya. Jika anda ingin membuat tampilan dengan gaya sendiri, kita harus membuatnya dengan format teks seperti yang terlihat pada blog ini.
Pada tutorial Membuat Twitter Follower dengan Format Teks ini hanya bisa [...]]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="border-right-width: 0px; margin: 0px 5px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="twitter-text-count" border="0" alt="twitter-text-count" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/06/twittertextcount.jpg" width="240" height="236" /> Untuk menampilkan Twitter Follower pada blog atau web kita biasanya menggunakan widget tambahan yang formatnya berupa gambar. Jelas cara ini tidak bisa dimodifikasi tampilannya. Jika anda ingin membuat tampilan dengan gaya sendiri, kita harus membuatnya dengan format teks seperti yang terlihat pada <a href="http://www.belajarpc.info" target="_blank">blog</a> ini.</p>
<p align="justify">Pada tutorial Membuat Twitter Follower dengan Format Teks ini hanya bisa diterapkan pada Blog Wordpress. Jadi bagi blogger yang menggunakan Platform selain wordpress tidak bisa. Kode yang akan digunakan pada tutorial ini dibuat oleh “<a href="http://www.rarst.net/" target="_blank">Rarst</a>“. </p>
<p> <span id="more-972"></span>
<p align="justify">Buat Sebuah File PHP</p>
<p align="justify">Langkah pertama yang dilakukan adalah membuat sebuah file php, misalnya kita beri nama twitter.php. Kemudian copy pastekan script PHP dibawah ini :</p>
<pre class="brush: php">&lt;?php
  $tw = get_option(&quot;twitterfollowerscount&quot;);
  if   ($tw['lastcheck'] &lt; ( mktime() - 3600 ) )
  {
  $xml=file_get_contents('http://twitter.com/users/show.xml?screen_name=okihelfiska');
  if (preg_match('/followers_count&gt;(.*)&lt;/',$xml,$match)!=0) {
  $tw['count'] = $match[1];
  }
  $tw['lastcheck'] = mktime();
  update_option(&quot;twitterfollowerscount&quot;,$tw);
  }
  echo $tw['count'];
  ?&gt;
&lt;?php include(&quot;twitter.php&quot;); ?&gt;</pre>
<p align="justify">Gantilah baris dibawah ini dengan username twitter anda :</p>
<pre class="brush: php">$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name=USER-TWITTER-ANDA');</pre>
<p align="justify">Cara Menampilkan Script</p>
<p align="justify">Untuk menampilkan twitter count, bukalah salah satu file pada template Wordpress anda, bisa pada file index.php, sidebar.php, header.php, dll. Lalu ketikkan code berikut ini ditempat yang akan ditampilkan :</p>
<pre class="brush: php">&lt;?php include(&quot;twitter.php&quot;); ?&gt;</pre>
<p align="justify">Berilah style pada code, agar tampilan lebih manis dilihat.</p>
<pre class="brush: php">&lt;p&gt;&lt;span class=&quot;twitter-followers&quot;&gt;&lt;?php include(&quot;twitter.php&quot;); ?&gt;&lt;/span&gt; Followers&lt;/p&gt;</pre>
<p align="justify">Contoh CSS yang saya gunakan adalah :</p>
<pre class="brush: css">span.twitter-followers {
font-size: 24px;
vertical-align: middle;
padding-left: 5px;
color: #1e96db;
}</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/membuat-twitter-follower-dengan-format-teks.htm/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tutorial HTML : Mengenal Tag Image</title>
		<link>http://www.belajarpc.info/tutorial-html-mengenal-tag-image.htm</link>
		<comments>http://www.belajarpc.info/tutorial-html-mengenal-tag-image.htm#comments</comments>
		<pubDate>Fri, 18 Jun 2010 17:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[tutorial html]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/tutorial-html-mengenal-tag-image.htm</guid>
		<description><![CDATA[ Sebuah halaman web tentu saja tidak indah jika tidak dilengkapi dengan gambar. Untuk menambahkan gambar dihalaman web kita harus memahami prinsip dasarnya. Apakah prinsip yang paling mendasar tersebut ? Format gambar yang direkomendasikan untuk halaman web haruslah berformat .jpg, .png dan .gif. Sedangkan untuk format lain seperti, .bmp tidaklah dianjurkan, karena memiliki kapasitas file [...]]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="border-right-width: 0px; margin: 0px 5px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="html-tag" border="0" alt="html-tag" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/06/htmltag.jpg" width="295" height="290" /> Sebuah halaman web tentu saja tidak indah jika tidak dilengkapi dengan gambar. Untuk menambahkan gambar dihalaman web kita harus memahami prinsip dasarnya. Apakah prinsip yang paling mendasar tersebut ? Format gambar yang direkomendasikan untuk halaman web haruslah berformat .jpg, .png dan .gif. Sedangkan untuk format lain seperti, .bmp tidaklah dianjurkan, karena memiliki kapasitas file yang besar sehingga proses loading akan makin lambat. Jika telah memahami prinsipnya, berikutnya adalah bagaimana cara memasukkannya kedalam halaman web.</p>
<p align="justify">Pada tulisan kali ini saya ingin berbagi tentang Mengenal <strong>Tag Images &lt;img&gt;</strong>. Tag ini digunakan untuk menampilkan image atau gambar pada halaman web. Sebagai contoh dalam artikel ini saya menggunakan gambar berformat PNG.</p>
<p> <span id="more-904"></span>
<p align="justify">Untuk memasukkan gambar kita perlu menuliskan tag seperti dibawah ini :</p>
<pre class="brush: html">&lt;img src=&quot;gambar.png&quot; /&gt;</pre>
<p>Atau</p>
<pre class="brush: html">&lt;img src=&quot;http://www.okihelfiska.net/gambar.png&quot; /&gt;</pre>
<p align="justify">&lt;img..&gt; adalah tag utama untuk memasukkan gambar. Sedangkan src=”….” untuk menentukan lokasi dari file gambar. Pada contoh pertama lokasi gambar berada sama dengan lokasi file html anda. Sedangkan contoh kedua, kita merujuk file dari lokasi lain.</p>
<p>Hasilnya bisa kita lihat seperti contoh dibawah ini :</p>
<p>Kode : </p>
<pre class="brush: html">&lt;img src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;</pre>
<p>hasilnya : </p>
<p><img src="http://www.okihelfiska.net/data/twitter.png" /></p>
<p>Sampai disini pasti sudah paham semuakan ? <img src='http://www.belajarpc.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong>Menentukan Ukuran gambar &lt;width &amp; height&gt;</strong></p>
<p align="justify">Secara default ukuran gambar adalah sesuai dengan ukuran aslinya. Gambar diatas memilki ukuran <strong>128&#215;128 px</strong>. Untuk menentukan ukuran kita dapat menambahkan atribut width untuk lebar dan height untuk tinggi. Lihat contoh :</p>
<p>Kode : </p>
<pre class="brush: html">&lt;img src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; width=&quot;50&quot; height=&quot;50&quot; /&gt;</pre>
<p>ubahlah angka menjadi kombinasi <strong>50</strong> dan <strong>100</strong>, <strong>50&#215;50</strong>, <strong>100&#215;50</strong> dan <strong>50&#215;100</strong>, hasilnya : </p>
<p><img src="http://www.okihelfiska.net/data/twitter.png" width="50" height="50" /> <img src="http://www.okihelfiska.net/data/twitter.png" width="100" height="50" /> <img src="http://www.okihelfiska.net/data/twitter.png" width="50" height="100" /></p>
<p><strong>Menambah Text Alternatif &lt;alt&gt;</strong></p>
<p align="justify">Pada gambar kita juga dapat menambahkan Text Alternatif jika gambar tidak terloading di web karena sesuatu hal ataupun alamat gambar sudah tidak ada lagi. Penggunaan ALT ini bisa juga dimanfaatkan untuk menampilkan keterangan sebuah gambar. Untuk menguji penggunaan Text Alternatif ini, cukup salahkan saja pengetikan nama file yang kita ingin tampilkan, misalnya twitter.png menjadi twiter.png.</p>
<p>Kode : </p>
<pre class="brush: html">&lt;img alt=&quot;Gambar Twitter&quot; src=&quot;http://www.okihelfiska.net/data/twiter.png&quot; /&gt;</pre>
<p>Hasilnya : </p>
<p><img alt="Gambar Twitter" src="http://www.okihelfiska.net/data/twitter.png" /> <img alt="Gambar Twitter Error" src="http://www.okihelfiska.net/data/twiter.png" /></p>
<p><strong>Menambahkan Informasi Pada Gambar &lt;title&gt;</strong></p>
<p align="justify">Kita juga dapat menampilkan informasi yang muncul jika mouse berada diatas gambar. Jika ingin menampilkan informasi yang lumayan panjang pada gambar, silahkan tambahkan atribut title pada gambar.</p>
<p>Kode : </p>
<pre class="brush: html">&lt;img title=&quot;Ini adalah Gambar Burung Kecil si Twitter&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;</pre>
<p>Hasilnya : </p>
<p><img title="Ini adalah Gambar Burung Kecil si Twitter" src="http://www.okihelfiska.net/data/twitter.png" /></p>
<p><strong>Menambahkan Bingkai / Border &lt;border&gt;</strong></p>
<p align="justify">Atribut ini digunakan untuk menambahkan bingkai pada sebuah gambar. Tetapi hasil yang ditampilkan nantinya akan dipengaruhi oleh styelesheet (CSS) pada sebuah halaman web. Tetapi jika tidak menggunakan CSS, border ini akan langsung muncul pada gambar.</p>
<p>Kode : </p>
<pre class="brush: html">&lt;img border=&quot;10&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;</pre>
<p>Hasil : </p>
<p><img border="10" src="http://www.okihelfiska.net/data/twitter.png" /></p>
<p><strong>Mengatur jarak Spasi pada gambar &lt;hspace&gt; &amp; &lt;vspace&gt;</strong></p>
<p>Disekitar gambar, kita juga dapat menambahkan ruang kosong atau biasa disebut space. Space ini bisa ditambah secara Horizontal (hspace) atau Vertikal (vspace). Liat contoh dibawah ini :</p>
<p>Kode : </p>
<pre class="brush: html">&lt;img hspace=&quot;20&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;</pre>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img hspace="20" src="http://www.okihelfiska.net/data/twitter.png" /></td>
</tr>
<tr>
<td align="center">HSPACE 20</td>
</tr>
</tbody>
</table>
<pre class="brush: html">&lt;img vspace=&quot;10&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;</pre>
<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img vspace="10" src="http://www.okihelfiska.net/data/twitter.png" /></td>
</tr>
<tr>
<td align="center">SPACE 20</td>
</tr>
</tbody>
</table>
<p>&#160;</p>
<p><strong>Mengatur posisi gambar &lt;align&gt;</strong></p>
<p>Untuk mengatur posisi gambar pada teks, kita cukup menambahkan atribut align kemudian posisi yang diinginkan, yaitu : Left, Middle, Right, Top dan Bottom.</p>
<pre class="brush: html">&lt;img align=&quot;left&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;Tuliskan Teks disini.</pre>
<p><img align="left" src="http://www.okihelfiska.net/data/twitter.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor posuere erat. Aliquam et arcu bibendum turpis sollicitudin eleifend. Maecenas magna odio, tincidunt et, ultricies dapibus, luctus a, eros. Suspendisse dignissim. Vivamus eget quam vitae lacus vehicula viverra. Morbi leo leo, scelerisque commodo, feugiat at, viverra nec, mi. Sed magna dui, molestie vel, suscipit nec, dictum ut, ipsum. Vestibulum blandit accumsan lectus. Sed fermentum interdum nulla.</p>
<p>Bisa terlihatkan bagaimana hasilnya ? Untuk membuat tampilan agar sedikit rapi, kita dapat menggabungkannya dengan atribut-atribut lainnya seperti yang sudah dibahas diatas.</p>
<p>Sekarang coba kita rubah kode menjadi seperti dibawah ini :</p>
<pre class="brush: html">&lt;img title=&quot;Ini Gambar Twitter&quot; hspace=&quot;10&quot; alt=&quot;Twitter&quot; align=&quot;left&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;Tuliskan Teks disini.</pre>
<p>Hasilnya akan menjadi seperti ini :</p>
<p><img title="Ini Gambar Twitter" hspace="10" alt="Twitter" align="left" src="http://www.okihelfiska.net/data/twitter.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor posuere erat. Aliquam et arcu bibendum turpis sollicitudin eleifend. Maecenas magna odio, tincidunt et, ultricies dapibus, luctus a, eros. Suspendisse dignissim. Vivamus eget quam vitae lacus vehicula viverra. Morbi leo leo, scelerisque commodo, feugiat at, viverra nec, mi. Sed magna dui, molestie vel, suscipit nec, dictum ut, ipsum. Vestibulum blandit accumsan lectus. Sed fermentum interdum nulla.</p>
<p><strong>Menambahkan Hyperlink pada gambar.</strong></p>
<p>Untuk menambahkan link pada gambar, cukup mudah. Letakkan kode img diantara tag link, kira-kira seperti ini : &lt;a href&gt;&lt;img&gt;&lt;/a&gt;</p>
<p>Untuk lengkapnya coba ketikkan kode berikut ini :</p>
<pre class="brush: html">&lt;a href=&quot;http://pcguru.okihelfiska.net&quot;&gt;&lt;img alt=&quot;Gambar Twitter&quot; src=&quot;http://www.okihelfiska.net/data/twitter.png&quot; /&gt;&lt;/a&gt;</pre>
<p>Hasilnya menjadi seperti ini : </p>
<p><a href="http://pcguru.okihelfiska.net"><img alt="Gambar Twitter" src="http://www.okihelfiska.net/data/twitter.png" /></a></p>
<p>Selamat Mencoba <img src='http://www.belajarpc.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/tutorial-html-mengenal-tag-image.htm/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Menginstal Joomla di localhost</title>
		<link>http://www.belajarpc.info/menginstal-joomla-di-localhost.htm</link>
		<comments>http://www.belajarpc.info/menginstal-joomla-di-localhost.htm#comments</comments>
		<pubDate>Fri, 18 Jun 2010 02:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[CMS]]></category>
		<category><![CDATA[joomla]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/menginstal-joomla-di-localhost.htm</guid>
		<description><![CDATA[ Pada tulisan sebelumnya, saya sudah menjelaskan tentang Mengenal CMS Joomla. Nah sekarang mari kita coba lebih dalam lagi mengenal Joomla! tersebut. Dalam tulisan ini saya akan mencoba memaparkan ulasan singkat tentang cara Menginstall Joomla di localhost. Kenapa dilocalhost ? Untuk tahap pembelajaran, tentu saja kita harus mengerti dahulu seluk beluk tentang Joomla. Versi joomla [...]]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="margin: 0px 5px 0px 0px; display: inline" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/06/logojoomla.png" /> Pada tulisan sebelumnya, saya sudah menjelaskan tentang <a href="http://www.belajarpc.info/mengenal-cms-joomla.htm">Mengenal CMS Joomla</a>. Nah sekarang mari kita coba lebih dalam lagi mengenal Joomla! tersebut. Dalam tulisan ini saya akan mencoba memaparkan ulasan singkat tentang cara <u>Menginstall Joomla di localhost</u>. Kenapa dilocalhost ? Untuk tahap pembelajaran, tentu saja kita harus mengerti dahulu seluk beluk tentang Joomla. Versi joomla yang saya gunakan untuk tulisan ini adalah versi 1.5.x. Secara prinsip Joomla 1.5.x memiliki perbedaan proses instalasi dengan Joomla 1.0.x. Jadi jangan salah <a href="http://www.joomla.org/download.html" target="_blank">download</a>. Mudah-mudahan bagi teman-teman yang newbie, tulisan ini sangat bermanfaat.</p>
<p align="justify">Tahap awal yang perlu dipersiapkan untuk instalasi bahwa di <a href="http://www.belajarpc.info" target="_blank">komputer</a> sudah terinstal Web Server local seperti XAMPP atau APPServ. Jika hal ini sudah dilakukan, download joomla melalui situs resminya di <a title="http://www.joomla.org/download.html" href="http://www.joomla.org/download.html">http://www.joomla.org/download.html</a>.</p>
<p> <span id="more-925"></span>
<p align="justify">Setelah berhasil di download, ektrak file hasil download tadi, lalu salin folder joomla anda ke folder localhost anda. Jika Anda menggunakan XAMPP letakkan folder di dalam folder htdocs, jika menggunakan APPServ letakkan folder joomla di dalam folder www. </p>
<p align="justify">Kemudian ubah nama foldernya (Joomla_1.5.12-Stable-Full_Package) menjadi yang kita inginkan, sebagai contoh : skbpekanbaru</p>
<p align="justify">Berikutnya, buka web browser anda lalu ketik <em>http://localhost/skbpekanbaru</em></p>
<p align="justify">Sekarang kita sudah siap untuk<strong> menginstal Joomla</strong>. Instal joomla memiliki 7 langkah, sbb :</p>
<h5>Langkah 1 : Language</h5>
<p>Silahkan pilih bahasa yang ingin anda gunakan, lihat gambar:</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla01.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla01" border="0" alt="joomla01" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla01_thumb.png" width="500" height="325" /></a> </p>
<p>Jika sudah pilih bahasa yang diinginkan lalu klik “Next”</p>
<h5>Langkah 2 : Pre-Installation Check</h5>
<p>Joomla akan mengecek sistem web server yang diperlukan agar Joomla dapat beroperasi dengan baik. jika tidak terdapat masalah silahkan klik “Next”.</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla02.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla02" border="0" alt="joomla02" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla02_thumb.png" width="500" height="383" /></a> </p>
<h5>Langkah 3 : License</h5>
<p>Pada langkah ini akan ditampilkan tentang lisensi dan peraturan yang harus dipenuhi dalam menggunakan Joomla Open Soure.</p>
<p>Biar tidak puyeng kita klik “Next” untuk melanjutkan</p>
<h5>Langkah 4 : Database</h5>
<p>Pada jendela Database Configuration anda diminta untuk mengisikan konfigurasi database :</p>
<p>Database Type : <font color="#ff0000"><strong>MySQL</strong></font>     <br />Hostname : <font color="#ff0000"><strong>localhost</strong></font>     <br />Username : <strong><font color="#ff0000">root</font></strong> (sebagai username default dari MySQL)     <br />Password : <strong><font color="#ff0000">xxxxxx</font></strong> (Password Database anda, jika menggunakan XAMPP dikosongkan saja)     <br />Database name : Berikan nama untuk database anda, misalnya: <strong><font color="#ff0000">skbpku</font></strong></p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla04.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla04" border="0" alt="joomla04" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla04_thumb.png" width="500" height="379" /></a> </p>
<p>Jika anda nantinya akan menginstall joomla secara Online, pengaturan diatas harus disesuaikan dengan tempat dimana anda hosting.</p>
<h5>Langkah 5 : FTP Configuration</h5>
<p>Pada langkah ini abaikan saja dahulu, lalu klik “Next”</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla05.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla05" border="0" alt="joomla05" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla05_thumb.png" width="500" height="319" /></a> </p>
<h5>Langkah 6 : Configuration</h5>
<p>Pada langkah ini kita diminta untuk melakukan pengaturan awal pada website joomla :</p>
<p>Site Name : <strong>SKB Pekanbaru</strong> (Sesuaikan dengan nama website yang anda inginkan)     <br />Your E-mail : Masukan alamat email anda     <br />Admin Password : Masukan password administrator untuk login ke halaman administrator joomla</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla06a.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla06a" border="0" alt="joomla06a" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla06a_thumb.png" width="500" height="355" /></a> </p>
<p align="justify">Kemudian lihat pada bagian bawah terdapat tulisan “Install Default Sample Data”. Silahkan klik tombol <strong>Install Sample Data</strong>. Sample data ini digunakan untuk menjadi panduan bagi kita <a href="http://www.belajarpc.info" target="_blank">belajar</a> tentang Joomla. Jika anda sudah memahaminya anda dapat melewati proses ini.</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla06b.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla06b" border="0" alt="joomla06b" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla06b_thumb.jpg" width="434" height="91" /></a> </p>
<p>Proses Install Default Sample Data</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla06c.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla06c" border="0" alt="joomla06c" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla06c_thumb.jpg" width="431" height="84" /></a> </p>
<h5>Langkah 7 : Finish</h5>
<p>Proses instalasi joomla telah selesai.</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla07a.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla07a" border="0" alt="joomla07a" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla07a_thumb.png" width="500" height="258" /></a> </p>
<p align="justify">Sebelum mencoba website joomla, kita harus menghapus dahulu folder “installation” yang ada dalam folder joomla. Atau anda dapat merubah namanya dengan yang lain dan susah untuk ditebak, misalnya installation-xyz.</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla07b.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla07b" border="0" alt="joomla07b" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla07b_thumb.png" width="351" height="224" /></a> </p>
<p>Nah sekarang tinggal melihat hasil joomla yang kita installkan tadi. Silahkan buka melalui web browser dengan mengetikkan http://localhost/skbpekanbaru.</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla1.5.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="joomla1.5" border="0" alt="joomla1.5" src="http://www.belajarpc.info/wp-content/uploads/2010/06/joomla1.5_thumb.png" width="500" height="285" /></a> </p>
<p>Untuk masuk halaman administrator joomla ketik :&#160; <em>http://localhost/skbpekanbaru/administrator</em></p>
<p>Sampai disini dulu teman-teman, untuk tutorial berikutnya akan menyusul.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/menginstal-joomla-di-localhost.htm/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Membuat Album Polaroid dengan CSS3</title>
		<link>http://www.belajarpc.info/membuat-album-polaroid-dengan-css3.htm</link>
		<comments>http://www.belajarpc.info/membuat-album-polaroid-dengan-css3.htm#comments</comments>
		<pubDate>Sun, 13 Jun 2010 17:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Tips dan Trik]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[album]]></category>
		<category><![CDATA[css triks]]></category>
		<category><![CDATA[css3]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/membuat-album-polaroid-dengan-css3.htm</guid>
		<description><![CDATA[ Menampilkan galeri photo disitus atau blog dapat menambah ciri khas tersendiri. Jika anda memiliki blog pribadi, tentu saja akan membanggakan bisa menampilkan photo-photo bersama keluarga tercinta, bersama sahabat ataupun hanya sekedar menampilkan photo kegiatan.
Nah yang banyak menjadi kendala adalah ketika akan menampilkannya kedalam blog/situs dengan mudah dan memiliki tampilan yang elegan seperti Contoh dibawah. [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-right-width: 0px; margin: 0px 5px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="polaroid-album" border="0" alt="polaroid-album" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/06/polaroidalbum.jpg" width="240" height="236" /> Menampilkan galeri photo disitus atau <a href="http://www.belajarpc.info" target="_blank">blog</a> dapat menambah ciri khas tersendiri. Jika anda memiliki blog pribadi, tentu saja akan membanggakan bisa menampilkan photo-photo bersama keluarga tercinta, bersama sahabat ataupun hanya sekedar menampilkan photo kegiatan.</p>
<p>Nah yang banyak menjadi kendala adalah ketika akan menampilkannya kedalam blog/situs dengan mudah dan memiliki tampilan yang elegan seperti Contoh dibawah. Pada contoh ini, saya menampilkan photo-photo galeri dengan cara yang sangat mudah, tanpa harus menambahkan javascript, atau menambahkan widget dan plugin yang notabene akan membuat akses ke blog menjadi lambat.</p>
</p>
<p><span id="more-888"></span>
<p><iframe height="500" src="http://www.belajarpc.info/wp-content/demo/css3_polaroid/index.html" frameborder="0" width="580"></iframe></p>
<p>Mau Tau Caranya ?</p>
<p>Untuk membuat Album Polaroid ini cukup mudah, karena tidak memerlukan javascript, tetapi hanya menggunakan CSS. Let go do it.</p>
<p>1. Siapkan beberapa gambar untuk album anda. Untuk menghasilkan album yang bagus sebaiknya dimensi gambar harus sama besar. Saya menggunakan ukuran 300 x 300 pixel. Lalu upload gambar tersebut.</p>
<p>2. Masukkan gambar kedalam halaman web atau blog dengan format penulisan seperti dibawah ini :</p>
<pre class="brush: html">&lt;ul class=&quot;polaroids&quot;&gt;
&lt;li&gt;
&lt;a href=&quot;http://www.situs-anda.com&quot; title=&quot;At Home!&quot;&gt;
&lt;img src=&quot;www.situs-anda.com/polaroid01.jpg&quot; alt=&quot;At Home!&quot; /&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;http://www.situs-anda.com&quot; title=&quot;Sun Flower&quot;&gt;     &lt;img src=&quot;www.situs-anda.com/polaroid02.jpg&quot; alt=&quot;Sun Flower&quot; /&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;http://www.situs-anda.com&quot; title=&quot;Shop Alba&quot;&gt;
&lt;img src=&quot;www.situs-anda.com/polaroid03.jpg&quot; alt=&quot;Shop Alba&quot; /&gt;&lt;/a&gt;     &lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>3. Lalu Copy + Paste kode CSS dibawah ini sebelum tag &lt;/head&gt; :</p>
<pre class="brush: css">&lt;style type=&quot;text/css&quot;&gt;
ul.polaroids { width: 500px; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: &quot;Impact&quot;, sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { display: block; width: 100px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }
ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
&lt;/style&gt;
</pre>
<p>4. Lakukan penyesuaian kode CSS untuk menyesuaikan tampilan dengan template yang anda gunakan.</p>
<ul>
<li>ul.polaroids { width: 500px; …. } // ubahlah angka 500px untuk menyesuaikan lebar tempat gambar </li>
<li>ul.polaroids a { …. font-family: &quot;Impact&quot;, …. } // untuk merubah jenis font yang digunakan ubahlah IMPACT menjadi font yg anda sukai, contoh, Arial, Verdana, Tahoma, dll </li>
<li>ul.polaroids img { …. width: 100px; …. } // ubah angka 100px sesuai dengan besar gambar yang ingin ditampilkan. </li>
<li>Untuk pengaturan lain silahkan dicoba sendiri <img src='http://www.belajarpc.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  </li>
</ul>
<p>Selamat Mencoba.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/membuat-album-polaroid-dengan-css3.htm/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Membuat Custom Page pada Wordpress Blog</title>
		<link>http://www.belajarpc.info/membuat-custom-page-pada-wordpress-blog.htm</link>
		<comments>http://www.belajarpc.info/membuat-custom-page-pada-wordpress-blog.htm#comments</comments>
		<pubDate>Thu, 10 Jun 2010 07:57:13 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/membuat-custom-page-pada-wordpress-blog.htm</guid>
		<description><![CDATA[ Apakah anda pengguna Wordpress ? Jika iya, pernahkah anda melakukan design ulang terhadap template yang digunakan ? Pada tulisan kali ini saya mencoba untuk menjelaskan bagaimana membuat custom page pada wordpress blog.
Secara default kita dapat menambahkan halaman (page) pada wordpress melalui menu Page &#62; Add New. Tetapi halaman yang kita tambahkan hanya bersifat statis, [...]]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="border-right-width: 0px; margin: 0px 5px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="wordpress-hacks-tricks" border="0" alt="wordpress-hacks-tricks" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/06/wordpresshackstricks.jpg" width="295" height="236" /> Apakah anda pengguna Wordpress ? Jika iya, pernahkah anda melakukan design ulang terhadap template yang digunakan ? Pada tulisan kali ini saya mencoba untuk menjelaskan bagaimana <u>membuat custom page pada wordpress</u> blog.</p>
<p align="justify">Secara default kita dapat menambahkan halaman (page) pada wordpress melalui menu Page &gt; Add New. Tetapi halaman yang kita tambahkan hanya bersifat statis, dalam arti kata, kita hanya dapat menuliskan isinya saja. Tanpa bisa menambahkan script PHP kedalam halaman tersebut. Nah bagaimana jika kita ingin menampilkan Halaman tersebut dengan gaya yang kita inginkan ?</p>
<p align="justify">Langkah awal yang kita lakukan adalah membuat sebuat file php dengan nama terserah anda, sebagai contoh saya ingin membuat halaman profil sendiri, file tersebut saya beri nama “profilku.php”. Simpanlah file ini satu folder dengan folder template yang anda gunakan sekarang.</p>
<p> <span id="more-873"></span>
<p>Langkah Kedua adalah mengetikkan kode php kedalam file tersebut, atau cukup dengan Copy + Paste script dibawah ini.</p>
<pre class="brush:php">
&lt;?php
/*
Template Name: Profil Saya
*/
?&gt;

&lt;?php get_header(); ?&gt;

&lt;div&gt;

Isi dari Halaman / script

&lt;/div&gt;

&lt;?php get_sidebar(); ?&gt;
&lt;?php get_footer(); ?&gt;</pre>
<p>Keterangan :</p>
<ul>
<li>Dibagian Template Name berfungsi untuk memberi nama Halaman tersebut </li>
<li>get_header berfungsi untuk menampilkan Header dari Template </li>
<li>get_sidebar berfungsi untuk menampilkan Sidebar dari Template </li>
<li>get_footer berfungsi untuk menampilkan Footer dari Template </li>
</ul>
<p align="justify">Jika anda tidak ingin menampilkan Sidebar, silahkan hapus fungsi get_sidebar nya.</p>
<p align="justify">Langkah Ketiga adalah menyesuaikan struktur CSS template yang anda gunakan dengan yang baru.</p>
<p align="justify">Langkah Keempat, buatlah page baru dari wordpress, caranya, pilih menu Page &gt; Add New. Beri nama Page tersebut, misalnya “Profil”. Lalu pada bagian Attribute, tukarlah pilihan Template dari “Default Template” menjadi “Profil Saya”. Simpan/update halaman tersebut. Lihatlah hasilnya.</p>
<p align="justify"><a href="http://www.belajarpc.info/wp-content/uploads/2010/06/custompage.png"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="custom-page" border="0" alt="custom-page" src="http://www.belajarpc.info/wp-content/uploads/2010/06/custompage_thumb.png" width="676" height="588" /></a> </p>
<p align="justify">Tampilan akan dipengaruhi oleh CSS bawaan template yang anda gunakan. Tata letak dipengaruhi oleh tag &lt;div&gt; pada template.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/membuat-custom-page-pada-wordpress-blog.htm/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Free Layout Plurk &#8211; AS Roma</title>
		<link>http://www.belajarpc.info/free-layout-plurk-as-roma.htm</link>
		<comments>http://www.belajarpc.info/free-layout-plurk-as-roma.htm#comments</comments>
		<pubDate>Mon, 10 May 2010 05:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[plurk]]></category>
		<category><![CDATA[plurk layout]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/free-layout-plurk-as-roma.htm</guid>
		<description><![CDATA[I want to share with pluker anywhere. If you are like with the theme of Roma, please click the install button to use this theme.
 
 
 
Click Button to Install the Layout
]]></description>
			<content:encoded><![CDATA[<p>I want to share with pluker anywhere. If you are like with the theme of Roma, please click the install button to use this theme.</p>
<p><a href="http://www.belajarpc.info/wp-content/uploads/2010/04/layoutplurkasroma.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="layout-plurk-as-roma" border="0" alt="layout-plurk-as-roma" src="http://www.belajarpc.info/wp-content/uploads/2010/04/layoutplurkasroma_thumb.jpg" width="540" height="330" /></a> </p>
<p> <span id="more-735"></span>
<p><a href="http://www.plurk.com/installDesign/4737246-090c8f9876" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="Install Layout" border="0" alt="Install Layout" src="http://www.belajarpc.info/wp-content/uploads/2010/04/installbutton.jpg" width="72" height="72" /></a> </p>
<p align="center"><strong>Click Button to Install the Layout</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/free-layout-plurk-as-roma.htm/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Menambahkan Tombol Facebook Like untuk Situs, Blogger dan Wordpress Blog</title>
		<link>http://www.belajarpc.info/menambahkan-tombol-facebook-like-untuk-situs-blogger-dan-wordpress-blog.htm</link>
		<comments>http://www.belajarpc.info/menambahkan-tombol-facebook-like-untuk-situs-blogger-dan-wordpress-blog.htm#comments</comments>
		<pubDate>Thu, 06 May 2010 18:59:06 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Tips dan Trik]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[social plugin]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/menambahkan-tombol-facebook-like-untuk-situs-blogger-dan-wordpress-blog.htm</guid>
		<description><![CDATA[Facebook kini menyediakan plugin baru yang disebut dengan Social Plugins. Plugin ini memungkinkan kita untuk memberikan penilaian terhadap sebuah postingan situs atapun blog. Plugin yang berbentuk mengacungkan jempol ini memungkinkan pembaca pada blog dengan cepat berbagi posting dengan Teman Facebook mereka. Selain itu pula, kita juga dapat mengetahui berapa banyak orang (reader) yang menyukai Postingan [...]]]></description>
			<content:encoded><![CDATA[<p align="justify">Facebook kini menyediakan plugin baru yang disebut dengan Social Plugins. Plugin ini memungkinkan kita untuk memberikan penilaian terhadap sebuah postingan situs atapun <a href="http://www.belajarpc.info" target="_blank">blog</a>. Plugin yang berbentuk mengacungkan jempol ini memungkinkan pembaca pada blog dengan cepat berbagi posting dengan Teman Facebook mereka. Selain itu pula, kita juga dapat mengetahui berapa banyak orang (reader) yang menyukai Postingan anda. Biar tidak penasaran dengan maksudnya postingan ini, coba lihat contoh demo dari Facebook Social Plugin dibawah ini. (<em>Klik dulu ya kawan….</em> <img src='http://www.belajarpc.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  )</p>
<p> <iframe style="border-bottom-style: none; border-right-style: none; width: 500px; border-top-style: none; height: 60px; border-left-style: none" src="http://www.facebook.com/widgets/like.php?href=http://www.belajarpc.info" frameborder="0" scrolling="no"></iframe><br />
<h3>Bagaimana menambahkan tombol Facebook Like pada Situs / Blog ?</h3>
<p>Tombol Like ini dapat digunakan kedalam Situs, Blogger dan Wordpress Blog. Untuk itu saya akan membagi 3 kategori cara memasukkan tombolnya :</p>
<p>A. Situs/Website</p>
<p>Jika anda ingin menambahkan tombol Facebook like pada sebuah situs, kita cukup menambahkan baris kode HTML berikut ini :</p>
<pre>&lt;iframe src=&quot;http://www.facebook.com/widgets/like.php?href=<strong>http://www.belajarpc.info</strong>&quot;
scrolling=&quot;no&quot; frameborder=&quot;0&quot;
style=&quot;border:none; width:450px; height:40px&quot;&gt;&lt;/iframe&gt;</pre>
<p><span id="more-736"></span></p>
<p>B. Blogger</p>
<p>Jika anda ingin menambahkannya kedalam Blog blogspot, berikut langkah-langkahnya :</p>
<p>1. Login ke Blogger Account dan pilih <strong>Layout</strong> &gt; <strong>Edit HTML</strong> dan klik pada check box “<strong>Expand Widget Templates</strong>” </p>
<p>2. Cari tag <strong><em>&lt;data:post.body/&gt;</em></strong> lalu pastekan code dibawah ini :</p>
<pre>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;iframe allowTransparency='true' expr:src='&amp;quot;http://www.facebook.com/plugins/like.php?href=&amp;quot; + data:post.url + &amp;quot;&amp;amp;layout=standard&amp;amp;show_faces=false&amp;amp;width=100&amp;amp;action=like&amp;amp;font=arial&amp;amp;colorscheme=light&amp;quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/&gt;
&lt;/b:if&gt;
</pre>
<p>C. Wordpress Blog</p>
<p>Untuk menambahkan tombol Facebook Like pada blog Wordpress, kita harus menambahkan code dibawah ini pada file <strong>index.php</strong> di template wordpress anda, yang tersimpan dalam folder themes.</p>
<p>Silahkan tentukan sendiri peletakan posisi yang diinginkan, pastekan code ini :</p>
<pre>
&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=&lt;?php the_permalink(); ?&gt; &amp;amp;layout=standard&amp;amp;show_faces=true&amp;amp;width=450&amp;amp;action=like&amp;amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:40px&quot;&gt;&lt;/iframe&gt;
</pre>
<p>Dari ketiga proses diatas yang berbeda sebenarnya hanya pada bagian :</p>
<ul>
<li>href=<strong>http://www.belajarpc.info</strong>&quot; </li>
<li>href=&amp;quot; + data:post.url + &amp;quot; </li>
<li>href=&lt;?php the_permalink(); ?&gt; </li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/menambahkan-tombol-facebook-like-untuk-situs-blogger-dan-wordpress-blog.htm/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Mengenal Ping Server (Blogger)</title>
		<link>http://www.belajarpc.info/mengenal-ping-server-blogger.htm</link>
		<comments>http://www.belajarpc.info/mengenal-ping-server-blogger.htm#comments</comments>
		<pubDate>Thu, 15 Apr 2010 05:00:00 +0000</pubDate>
		<dc:creator>Oki Helfiska</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Jargon]]></category>
		<category><![CDATA[Tips dan Trik]]></category>
		<category><![CDATA[ping server]]></category>
		<category><![CDATA[RPC Ping]]></category>

		<guid isPermaLink="false">http://www.belajarpc.info/mengenal-ping-server-blogger.htm</guid>
		<description><![CDATA[ Sudah mengenalkah kita dengan Ping Server ? Para blogger sebaiknya sudah mengenal dengan istilah ini. Ping Server merupakan layanan yang menerima pemberitahuan dari blog / situs yang kita miliki bahwa baru saja diupdate dengan artikel baru. Layanan seperti google, pingomatic, technorati, dll secara otomatis akan menerima pemberitahuan ini, dan bot mereka akan menjadwalkan kunjungan [...]]]></description>
			<content:encoded><![CDATA[<p align="justify"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="ping-server" border="0" alt="ping-server" align="left" src="http://www.belajarpc.info/wp-content/uploads/2010/04/pingserver.png" width="160" height="150" /> Sudah mengenalkah kita dengan Ping Server ? Para blogger sebaiknya sudah mengenal dengan istilah ini. Ping Server merupakan layanan yang menerima pemberitahuan dari <a href="http://www.belajarpc.info" target="_blank">blog</a> / situs yang kita miliki bahwa baru saja diupdate dengan artikel baru. Layanan seperti google, pingomatic, technorati, dll secara otomatis akan menerima pemberitahuan ini, dan bot mereka akan menjadwalkan kunjungan khusus untuk mengunjungi website kita untuk melihat isi dari update yang baru dibuat.</p>
<p align="justify">Google, pingomatic, technorati dan ping server lainnya menyediakan layanan ini tentu saja memiliki tujuan, seperti untuk memudahkan <a href="http://www.belajarpc.info" target="_blank">blog</a>/situs mana yang harus dikunjungi berdasarkan pemberitahuan dari ping server, dari pada mereka harus mengunjungi semuanya. Sehingga akan menghemat sumberdaya dan waktu. Bagi kita sendiri tentu saja memperoleh keuntungan tersendiri, terutama dalam hal mempromosikan artikel lebih cepat menyebar di Search Engine.</p>
<p> <span id="more-663"></span>
<p align="justify">Untuk setiap platform <a href="http://www.belajarpc.info" target="_blank">blog</a>, seperti Wordpress dan Blogspot, tentu saja sudah dilengkapi dengan fasilitas ping server. Tetapi banyak diantara kita masih belum mengetahui dimana pengaturannya. Bagi pengguna wordpress bisa dilihat dari Dashboard wordpress &gt; Settings &gt; Writing, lihatlah dibagian bawah, kita akan menemukan setting tersebut, seperti terlihat pada gambar dibawah ini.</p>
<p align="justify"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="ping-service" border="0" alt="ping-service" src="http://www.belajarpc.info/wp-content/uploads/2010/04/pingservice.jpg" width="465" height="171" /> </p>
<p align="justify">Default dari listnya hanya berisi satu alamat server. Agar lebih banyak dan cepat dikunjungi oleh Bot search Engine, teman-teman blogger dapat menambahkan list Ping Server dibawah ini : (Copy + Paste)</p>
<blockquote><p>http://1470.net/api/ping     <br />http://api.feedster.com/ping      <br />http://api.feedster.com/ping.php      <br />http://api.moreover.com/ping      <br />http://api.moreover.com/RPC2      <br />http://api.my.yahoo.co.jp/RPC2      <br />http://api.my.yahoo.com/RPC2      <br />http://api.my.yahoo.com/rss/ping      <br />http://audiorpc.weblogs.com/RPC2      <br />http://bblog.com/ping.php      <br />http://bitacoras.net/ping      <br />http://blog.goo.ne.jp/XMLRPC      <br />http://blogdb.jp/xmlrpc      <br />http://blogmatcher.com/u.php      <br />http://blogpeople.net/ping      <br />http://blogsearch.google.ae/ping/RPC2      <br />http://blogsearch.google.at/ping/RPC2      <br />http://blogsearch.google.be/ping/RPC2      <br />http://blogsearch.google.bg/ping/RPC2      <br />http://blogsearch.google.ca/ping/RPC2      <br />http://blogsearch.google.ch/ping/RPC2      <br />http://blogsearch.google.cl/ping/RPC2      <br />http://blogsearch.google.co.cr/ping/RPC2      <br />http://blogsearch.google.co.hu/ping/RPC2      <br />http://blogsearch.google.co.id/ping/RPC2      <br />http://blogsearch.google.co.il/ping/RPC2      <br />http://blogsearch.google.co.in/ping/RPC2      <br />http://blogsearch.google.co.it/ping/RPC2      <br />http://blogsearch.google.co.jp/ping/RPC2      <br />http://blogsearch.google.co.ma/ping/RPC2      <br />http://blogsearch.google.co.nz/ping/RPC2      <br />http://blogsearch.google.co.th/ping/RPC2      <br />http://blogsearch.google.co.uk/ping/RPC2      <br />http://blogsearch.google.co.ve/ping/RPC2      <br />http://blogsearch.google.co.za/ping/RPC2      <br />http://blogsearch.google.com.ar/ping/RPC2      <br />http://blogsearch.google.com.au/ping/RPC2      <br />http://blogsearch.google.com.br/ping/RPC2      <br />http://blogsearch.google.com.co/ping/RPC2      <br />http://blogsearch.google.com.do/ping/RPC2      <br />http://blogsearch.google.com.mx/ping/RPC2      <br />http://blogsearch.google.com.my/ping/RPC2      <br />http://blogsearch.google.com.pe/ping/RPC2      <br />http://blogsearch.google.com.sa/ping/RPC2      <br />http://blogsearch.google.com.sg/ping/RPC2      <br />http://blogsearch.google.com.tr/ping/RPC2      <br />http://blogsearch.google.com.tw/ping/RPC2      <br />http://blogsearch.google.com.ua/ping/RPC2      <br />http://blogsearch.google.com.uy/ping/RPC2      <br />http://blogsearch.google.com.vn/ping/RPC2      <br />http://blogsearch.google.com/ping/RPC2      <br />http://blogsearch.google.de/ping/RPC2      <br />http://blogsearch.google.es/ping/RPC2      <br />http://blogsearch.google.fi/ping/RPC2      <br />http://blogsearch.google.fr/ping/RPC2      <br />http://blogsearch.google.gr/ping/RPC2      <br />http://blogsearch.google.hr/ping/RPC2      <br />http://blogsearch.google.ie/ping/RPC2      <br />http://blogsearch.google.in/ping/RPC2      <br />http://blogsearch.google.it/ping/RPC2      <br />http://blogsearch.google.jp/ping/RPC2      <br />http://blogsearch.google.lt/ping/RPC2      <br />http://blogsearch.google.nl/ping/RPC2      <br />http://blogsearch.google.pl/ping/RPC2      <br />http://blogsearch.google.pt/ping/RPC2      <br />http://blogsearch.google.ro/ping/RPC2      <br />http://blogsearch.google.ru/ping/RPC2      <br />http://blogsearch.google.se/ping/RPC2      <br />http://blogsearch.google.sk/ping/RPC2      <br />http://blogsearch.google.tw/ping/RPC2      <br />http://blogsearch.google.us/ping/RPC2      <br />http://bulkfeeds.net/rpc      <br />http://coreblog.org/ping/      <br />http://feedsky.com/api/RPC2      <br />http://hamo-search.com/ping.php      <br />http://holycowdude.com/rpc/ping/      <br />http://mod-pubsub.org/kn_apps/blogchatt      <br />http://ping.amagle.com/      <br />http://ping.bitacoras.com      <br />http://ping.blo.gs/      <br />http://ping.blogg.de/      <br />http://ping.bloggers.jp/rpc/      <br />http://ping.blogmura.jp/rpc/      <br />http://ping.blogoon.net/      <br />http://ping.blogs.yandex.ru/RPC2      <br />http://ping.cocolog-nifty.com/xmlrpc      <br />http://ping.exblog.jp/xmlrpc      <br />http://ping.fc2.com/      <br />http://ping.feedburner.com      <br />http://ping.kutsulog.net/      <br />http://ping.myblog.jp/      <br />http://ping.namaan.net/rpc      <br />http://ping.rootblog.com/rpc.php      <br />http://ping.snap.com/ping/RPC2      <br />http://ping.syndic8.com/xmlrpc.php      <br />http://ping.weblogalot.com/rpc.php      <br />http://ping.weblogs.se/      <br />http://ping.wordblog.de/      <br />http://pinger.blogflux.com/rpc/      <br />http://pingqueue.com/rpc/      <br />http://r.hatena.ne.jp/rpc      <br />http://rcs.datashed.net/RPC2/      <br />http://rpc.blogbuzzmachine.com/RPC2      <br />http://rpc.bloggerei.de/ping/      <br />http://rpc.blogrolling.com/pinger/      <br />http://rpc.britblog.com/      <br />http://rpc.icerocket.com:10080/      <br />http://rpc.newsgator.com/      <br />http://rpc.reader.livedoor.com/ping      <br />http://rpc.tailrank.com/feedburner/RPC2      <br />http://rpc.technorati.com/rpc/ping      <br />http://rpc.technorati.jp/rpc/ping      <br />http://rpc.twingly.com/      <br />http://rpc.weblogs.com/RPC2      <br />http://rpc.wpkeys.com/      <br />http://services.newsgator.com/ngws/xmlrpcping.aspx      <br />http://signup.alerts.msn.com/alerts-PREP/submitPingExtended.doz      <br />http://topicexchange.com/RPC2      <br />http://trackback.bakeinu.jp/bakeping.php      <br />http://wasalive.com/ping/      <br />http://weblogs.com/      <br />http://www.a2b.cc/setloc/bp.a2b      <br />http://www.bitacoles.net/ping.php      <br />http://www.blogdigger.com/RPC2      <br />http://www.blogoole.com/ping/      <br />http://www.blogoon.net/ping/      <br />http://www.blogpeople.net/servlet/weblogUpdates      <br />http://www.blogpeople.net/servlet/weblogUpdates      <br />http://www.blogroots.com/tb_populi.blog?id=1      <br />http://www.blogshares.com/rpc.php      <br />http://www.blogsnow.com/ping      <br />http://www.blogstreet.com/xrbin/xmlrpc.cgi      <br />http://www.holycowdude.com/rpc/ping/      <br />http://www.imblogs.net/ping/      <br />http://www.lasermemory.com/lsrpc/      <br />http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php      <br />http://www.newsisfree.com/RPCCloud      <br />http://www.newsisfree.com/xmlrpctest.php      <br />http://www.popdex.com/addsite.php      <br />http://www.snipsnap.org/RPC2      <br />http://www.weblogues.com/RPC/      <br />http://xmlrpc.blogg.de      <br />http://xping.pubsub.com/ping/      <br />http://zhuaxia.com/rpc/server.php      <br />https://phobos.apple.com/WebObjects/MZFinance.woa/wa/pingPodcast</p>
</blockquote>
<p><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="ping-service-update" border="0" alt="ping-service-update" src="http://www.belajarpc.info/wp-content/uploads/2010/04/pingserviceupdate.jpg" width="465" height="171" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.belajarpc.info/mengenal-ping-server-blogger.htm/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
