Oktober 28, 2009

Install WordPress di PC

Pada postingan saya yang lalu tentang kekuatan wordpress di mata google saya janjikan akan berikan tipsnya untuk menginstall WordPress di PC agar bisa digunakan pada saat offline. Bagi yang suka berkreasi mungkin ingin mencoba di WordPress untuk mencari pencerahan, apalagi untuk memulai bisnis online secara serius.

Kenapa kita perlu menginstall WordPress di PC atau server lokal? Jawabnya mudah aja, biar kita bisa melakukan desain tampilan dan performa WordPress tanpa harus terkoneksi dengan internet. Apalagi WP juga menyediakan fasilitas ekspor impor yang memungkinkan kita untuk bekerja secara offline dulu membangun website kemudian meng-upload semua artikel secara massal menggunakan fasilitas tersebut.

WordPress juga didukung oleh berbagai macam plugin yang siap ditanamkan, terutama plugin AdSense Manager yang merupakan asset para bisnis online. Dengan sedikit kecerdikan menanamkan serta mengatur plugin AdSense Manager, maka website akan terkesan alami dalam menampilkan unit iklan AdSense. Sehingga para peselancar dan pembaca tidak merasakan bahwa di sebagian isi postingan menyatu dengan sempurna dengan unit iklan AdSense secara alami dan tidak monoton karena letak iklan AdSense tersebut akan tersebar secara merata di isi postingan seiring dengan traffic yang meningkat. Intermezonya dah dulu ya...

Di sini, saya coba menunjukkan bagaimana menginstall berbagai perlengkapan untuk menjalankan WordPress secara offline. Yang diperlukan antara lain :
1. Cara menginstall AppServ.
2. Cara mengatur setting AppServ.
3. Cara menginstall WordPress di localhost.

1. Cara menginstall AppServ.

  • Pertama yang harus dilakukan adalah men-download AppServ dari web resminya. AppServ ini adalah software untuk menjalankan script PHP di Windows. AppServ sudah memiliki server Apache, PHP, MySQL dan PhpMyAdmin. Kamu bisa mendowloadnya secara gratis di http://www.appservnetwork.com/



  • Saat saya coba software ini, sudah ada release untuk AppServ 2.5.10 dan 2.6.0. Tapi karena keduanya masih dalam versi beta, maka kita pakai saja versi yang sudah stable, yaitu AppServ 2.5.9. Klik link yang ditunjukkan pada gambar di atas atau langsung klik link di bawah ini.

    http://prdownloads.sourceforge.net/appserv/appserv-win32-2.5.9.exe?download

  • Akan muncul popup konfirmasi untuk men-dowload file AppServ. Pilih Save to Disk dan klink tombol Save File.



  • Setelah berhasil di-download, jalankan file AppServ-win-32-2.5.9.exe yang sudah kita download tadi, seperti gambar di bawah ini kemudian klik Next dan I Agree.



    selanjutnya akan tampil gambar di bawah ini, kemudian isikan kotak Destination folder dengan C:\AppServ atau di mana saja yg kamu suka, tapi untuk lebih mudahnya biarkan saja secara default berada di root C, lalu tekan tombol Next dan Next lagi.





  • Kemudian isikan server name dengan localhost dan e-mail diisi email apa saja terserah kamu. Setelah itu klik Next. Seperti gambar di bawah ini.



  • Terakhir isilah password untuk login ke phpmyadmin dan merupakan password database kamu nanti. Untuk user namenya adalah root, dan biarkan pada kotak Character Sets and Collections adalah UTF-8 Unicode kemudian klik Install. Selanjutnya proses installing berjalan.

  • Selesai sudah tahap pertama, kini kita sudah memiliki server lokal sekarang. Klik finish agar Apache dan MySQL running. Selanjutnya, setiap kamu menghidupkan PC, server tersebut akan berjalan secara otomatis.



  • Untuk melihat apakah instalasi telah berjalan dengan normal, bukan browser kamu, sebaiknya kita menggunakan Mozilla Firefox karena browser ini memiliki berbagai macam tools yang sangat bermanfaat bagi seorang webmaster. Ketikkan http://localhost di browser kamu. Seharunya jika semuanya berjalan dengan baik, akan muncul seperti ini.



  • Untuk melihat apakah database MySQL kamu juga sudah berjalan dengan semestinya, maka ketikkan http://localhost/phpmyadmin di address bar browser kamu. Jika semuanya berjalan dengan baik, akan muncul tampilan phpmyadmin. Kita akan sering menggunakan phpmyadmin untuk mengatur database blog. Oleh karena itu, sebaiknya bookmark halaman phpmyadmin tersebut.
    Inilah tampilan phpmyadmin, tempat kita melakukan management database.



    Sampai di sini, komputer kita sudah siap digunakan sebagai server pribadi atau server lokal. Namun, untuk menggunakan WordPress dan script-script yang lain, kita perlu melakukan beberapa setting terlebih dahulu. Karena setting default AppServ belum sepenuhnya mendukung optimasi WordPress nanti.

2. Cara mengatur setting AppServ

  • Untuk melakukan setting Apache, hal pertama yang perlu dilakukan adalah membuka file httpd.conf. Silakan klik menu Start - All - Programs - AppServ - Configration Server - Apache Edit the httpd.con Configuration file.



  • Maka akan terbuka sebuah notepad berisi file httpd.conf yang merupakan sistem konfigurasi server Apache kita. Melalui file ini kita bisa menerapkan berbagai macam aturan yang berlaku bagi server kita. Namun, jika kamu membeli sebuah hosting, atau menggunakan hosting gratis, aturan yang berlaku ini hanya bisa diatur oleh admin hosting tersebut.

    Inilah tampilan file httpd.conf yang akan kita edit.



    Sekarang kia akan coba membuka fungsi rewrite agar Apache mampu membuat URL yang Search Engine Friendly.

    Pertama, carilah kode berikut ini :

    LoadModule rewrite_module modules/mod_rewrite.so

    seperti biasa gunakan fungsi pencarian Notepad di menu Edit - Find.

    Setelah ketemu, hilangkan tanda '#' di depan kata tersebut. Setelah itu tinggal menyimpannya dan konfigurasi kamu telah siap.

    Tutup filenya dan jangan lupa simpan terlebih dahulu. Sekarang kita perlu melakukan restart Apache. Caranya, klik Start - All Programs - AppServ - ControlServer by Service - Apache Restart. Tunggu beberapa detik hingga Apache selesai melakukan restart.

    Sekarang server kamu sudah siap digunakan untuk meng-install WordPress dan berbagai script PHP lainnya, seperti Joomla, PHP, Nuke, phpBB, dan lain-lain.

3. Cara menginstall WordPress di localhost

Server kini sudah siap digunakan, saatnya kita melakukan instalasi WordPress di PC kita.

  • Pertama, kamu perlu men-download script WordPress dari sumbernya langsung, yaitu di http://wordpress.ord/latest.zip

    Saya asumsikan kamu telah memiliki file wordpress di PC kamu. Dan akan segera kita istall ke server lokal yang telah kita buat tadi. Nama file mungkin lain, tergantung versi terakhir saat kamu men-download WordPress.
  • Selanjutnya unzip dulu file WordPress.zip tersebut dan kamu akan mendapatkan sebuah folder bernama wordpress dan berisi file-file php. Inilah file-file pembangun WordPress kamu nanti. Copy folder tersebut beserta seluruh isinya ke C:\AppServ\www



  • Berikutnya membukan phpmyadmin untuk menyiapkan database kamu. Buka browser kamu lalu ketik http://localhost/phpmyadmin. Lalu ketikkan nama database yang ingin kamu berikan di kotak Create new database. Misalnya kita akan memberikan nama 'Wordpress' dan klik tombol Create



  • Sekarang buka tab baru di browser kamu. Tekan Ctrl+T untuk membuka tab baru dan ketikkan di address bar :http://localhost/wordpress. Karena kita belum melakukan konfigurasi database, akan muncul peringatan seperti ini:



  • Klik saja Create a Configuration File. Akan muncul petunjuk data-data apa saja yang kita perlukan untuk melakukan konfigurasi database.



  • Langsung saja klik Let's go! kamu akan di bawa ke form pengisian database seperti ini.



    Database Name: adalah nama database yang kita buat di phpmyadmin tadi.
    User Name : isi saja dengan root karena kita menginstallnya di server lokal.
    Password : adalah password yang kita masukkan ketika menginstall AppServ.
    Database Host : isi saja dengan localhost.
    Table Prefix : adalah huruf depan untuk penamaan tabel-tabel WordPress nanti.

    Jika semua sudah diisi, langsung saja klik Submit

  • Sekarang kita sudah siap untuk menginstall WordPress. Klik Run the install.

  • Isi judul blog kamu dan juga email kamu. Setelah selesai, klik saja langsung Install WordPress.



  • Kamu akan mendapatkan username admin dan sebuah password sementara dan kita akan mengubahnya di Admin Panel.



  • Untuk memasuki admin panel, alamat yang digunakan adalah :http://domain-Anda.com/wp-admin karena masih di localhost, maka alamatnya adalah : http://localhost/wordpress/wp-admin klik Log In untuk masuk ke Admin Panel dan mulai mengubah password-nya.



  • Form di atas akan muncul dan kamu perlu memasukkan username dan passwordnya.

    Sekarang kamu sudah mengubah password agar lebih mudah untuk mengingatnya. Klik Admin pada bagian atas dashboard WordPress dan scroll ke bagian paling bawah hingga kamu menemukan kotak New Password.



  • Selesai memasukkan password baru, klik Update Profile. Sekarang WordPress kamu sudah siap dipakai. Untuk melihat bagian depan WordPress kamu, ketikkan alamat webnya di htpp://localhost/wordpress. Dan inilah tampilan standar WordPress kamu.



Selesai sudah...sekarang kamu bisa belajar membuat blog di WordPress sekaligus berkreasi mengotak-atik tampilan template yang kamu sukai dan memberikan kreasi yang terbaik tanpa harus Online dulu.

Pada akhirnya, kamu perlu membuat agar blog kesayangan kamu itu dapat diakses dari seluruh penjuru dunia. Oleh karena itu, kamu perlu melakukan upload file-file WordPress di sebuah server atau hosting.

Ok selamat mencoba dan berkarya.... sampai ketemu di postingan selanjutnya.

Oktober 20, 2009

Cara mudah pasang favicon

Apa favicon itu? Favicon singkatan dari Favourite Icons , itu adalah icon atau gambar kecil di samping kiri tulisan alamat website di browser, file nya disebut Favicon. ico. Favicon ico terdiri dari dua tipe Static favicon.ico dan animated favicon.ico yang sebagai file favicon.gift.

Di sini saya mencoba memberikan trick yang lebih mudah untuk memasang favicon sebagai simbol atau icon dari blog kesayangan Anda, agar tampil lebih menarik. Langkahnya cukup mudah kok, seperti ini:
  • Pertama, Anda haruslah memiliki gambar untuk favicon, untuk mudahnya mungkin menggunakan text generator yang cukup banyak bertebaran di internet seperti misalnya CoolText. Setelah membuat text atau logo baik yang statis maupun yang animasi, kemudian download.
  • Kedua, file favicon yang sudah disiapkan pada langkah pertama itu, maka uploadlah file tersebut ke hosting gambar yang juga cukup banyak bertebaran di internet, di sini saya gunakan Photobucket. Setelah diupload file favicon tersebut kemudian copy URLnya
  • Ketiga, tulislah code dibawah ini :
    <link href='http://i703.photobucket.com/albums/ww34/adilla_09/DillaBlog.gif' rel='icon' type='image/gif'/>

    di antara <b:include data="blog" name="all-head-content"/> dan
    <b:skin><![CDATA[
    Jangan lupa untuk merubah alamat URL file favicon pada contoh ini dengan URL file favicon yang Anda buat.

Selesai sudah, mudah bukan... Selamat mencoba.

Oktober 11, 2009

Widget pagination navigasi

Pagination navigasi, merupakan feature ketiga yang saya tambahkan dalam blog ini, dapat dilihat pada bagian bawah postingan. Untuk feature ini saya terinspirasi dari blog pada Wordpress, dalam perjalanan saya browsing untuk mencari feature ini pada blogspot belum saya temukan hingga saat ini. Namun saya mendapatkan feature ini dari template Vista 84 by Gagan yang saya adaptasi ke blog ini, untuk selanjutnya saya juga bermaksud untuk memposting feature ini, mungkin para sobat blogger juga mau mencoba.



Langkah-langkahnya cukup mudah, pertama cari kode yang seperti ini ]]></b:skin> lalu copas kode di bawah ini persis di bawah kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Kalau sudah dicopas kode di atas, selanjutnya cari kode seperti ini
<!-- Sidebar -->
<div id='sidebar-wrapper'>
lalu seperti biasa copas lagi kode di bawah ini persis di atas kode
<!-- Sidebar -->
<div id='sidebar-wrapper'>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #FF9933;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

Selesai sudah, mudahkan !

Sebagai tambahan saja, jika mau ditampilkan beberapa postingan dalam satu slide dapat diubah pada kode ini :
var pageCount = 5;
var displayPageNum = 5;

Jika mau ditampilkan 5 postingan dalam satu slide, kodenya seperti di atas. Bila mau ditampilan 7 postingan dalam satu slide, kamu tinggal ubah saja var pageCount = 5 menjadi var pageCount = 7.

Ok, selamat mencoba, semoga bermanfaat...

Copyright © / dillablog

Template by : Urang-kurai / powered by :blogger