Wednesday, 19 December 2012

Dheeka Holic: Membuat Tema Simple Untuk Wordpress

Dheeka Holic: Membuat Tema Simple Untuk Wordpress: Untuk mulai membangun tema Anda , terlebih dahulu membuat sub -folder dalam direktori wp-content/themes dalam folder WordPress Anda ...
Posted by at 2 comments

Membuat Tema Simple Untuk Wordpress

Untuk mulai membangun tema Anda, terlebih dahulu membuat sub-folder dalam direktori wp-content/themes dalam folder WordPress Anda. Untuk tujuan dari tutorial ini, kita akan memanggil folder "tutorial_theme". Nama folder harus sesuai deng`n nama tema yang ingin Anda buat. Untuk melakukan hal ini Anda dapat menggunakan salah satu klien FTP favorit Anda atau File Manager di cPanel Anda.

Sebelum Anda mulai membuat tema, Anda harus memutuskan bagaimana tata letak situs web Anda akan terlihat seperti. Dalam tutorial ini kita akan membangun theme WordPress yang terdiri dari header, sidebar, area konten dan footer, seperti yang ditunjukkan di bawah ini:
Untuk melakukan hal ini kita harus membuat file-file berikut ke direktori tutorial_theme:

  • header.php - File ini akan berisi kode untuk bagian header dari tema;
  • index.php - Ini adalah file utama untuk tema. Ini akan berisi kode untuk Main Area dan akan menentukan di mana file lainnya akan dimasukkan;
  • sidebar.php - File ini akan berisi informasi tentang sidebar;
  • footer.php - File ini akan menangani footer Anda;
  • style.css - File ini akan menangani styling tema baru Anda;

Sekarang mari kita lihat lebih dekat pada setiap file dan apa yanf harus diisi: 

Header.php :

Dalam file ini, Anda harus menambahkan kode berikut:

<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>HEADER</h1>
    </div> 
Pada dasarnya, ini adalah kode HTML sederhana dengan satu baris yang berisi kode php dan fungsi WordPress standar. Dalam file ini Anda dapat menentukan meta tag seperti judul website Anda, meta deskripsi dan kata kunci untuk halaman Anda.

Tepat setelah judul baris kita tambahkan <link rel = "stylesheet" href = "<php bloginfo ('stylesheet_url');?>"> untuk memberitahu WordPress untuk memuat file style.css. Ini akan menangani styling dari situs web Anda. Kode <php bloginfo ('stylesheet_url');?> adalah bagian dari garis yang berfungsi memuat file stylesheet pada Wordpress.

Selanjutnya, kita telah menambahkan awal dari "div" dengan wrapper class yang akan menjadi wadah utama website. Kita telah menetapkan kelas untuk itu sehingga kita bisa memodifikasi melalui file style.css.

Setelah itu kita telah menambahkan HEADER label sederhana dibungkus dengan "div" dengan kelas "header" yang akan ditentukan kemudian dalam file stylesheet.

index.php
 <?php get_header(); ?>
   
<div id="main">
  <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
  </div>

  <?php get_sidebar(); ?>

  </div>

<div id="delimiter"></div>

<?php get_footer(); ?>

Kode dalam file ini dimulai dengan <get_header php ();?> Yang akan menyertakan file header.php dan kode di dalamnya di halaman utama. Ini menggunakan fungsi WordPress internal untuk melakukan hal ini. Kita akan menjelaskan hal ini secara rinci nanti dalam tutorial ini. Kemudian kita telah menempatkan teks di Area Main untuk menunjukkan bagian mana dari tema Anda ditampilkan di daerah ini.

Beberapa baris berikutnya terdiri dari kode PHP dan standar Wordpress fungsi. Kode ini memeriksa apakah Anda memiliki posting di blog Anda diciptakan melalui wilayah administrasi Wordpress dan menampilkannya.

Selanjutnya, kita menyertakan file sidebar.php dengan baris ini - <php get_sidebar ();?>. Dalam file ini Anda dapat menampilkan kategori posting Anda, arsip dll

Setelah baris ini, kita menyisipkan "div" kosong yang akan memisahkan area Main dan Sidebar dari footer.

Akhirnya, kita menambahkan satu baris terakhir - <php get_footer ();?> Yang akan menyertakan file footer.php di halaman Anda.
 
 sidebar.php

<div id="sidebar">
  <h2 class="sidebartitle"&ft;<?php _e('Categories'); ?></h2>
  <ul class="list-cat">
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>
 
  <h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
    <ul class="list-archives">
      <?php wp_get_archives('type=monthly'); ?>
    </ul>
</div>
 Dalam file ini kita menggunakan fungsi internal Wordpress untuk menampilkan Kategori dan Arsip posting. Fungsi WordPress mengembalikan mereka sebagai daftar item, karena itu kita telah membungkus fungsi yang sebenarnya dalam daftar (tag <ul>).

footer.php
<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>
Dengan kode ini kita menambahkan label FOOTER sederhana. Alih-alih kode ini Anda dapat  
menambahkan link, teks tambahan, informasi hak cipta untuk theme dan benda-benda tambahan.

style.css

body {
    text-align: center;
}

#wrapper {
    display: block;
    border: 1px #a2a2a2 solid;
    width:90%;
    margin:0px auto;
}

#header {
    border: 2px #a2a2a2 solid;
}

#content {
    width: 75%;
    border: 2px #a2a2a2 solid;
    float: left;
}

#sidebar {
    width: 23%;
    border: 2px #a2a2a2 solid;
    float: right;
}

#delimiter {
    clear: both;
}

#footer {
    border: 2px #a2a2a2 solid;
}

.title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
}
 File css sederhana menetapkan terlihat dasar tema Anda. Baris tersebut mengatur latar belakang halaman Anda dan mengelilingi bagian utama dari situs Anda dengan perbatasan untuk kenyamanan. Pada titik ini website Anda akan terlihat seperti ini:


Selamat Mencoba ^_^
Posted by at 0 comments
Labels:

Friday, 16 November 2012

Cara Submit ke Sitemap Blog

Cara Submit Sitemap Blog - Sitemap merupakan informasi tentang halaman pada sebuah website yang diberikan kepada search engine atau mesin pencari untuk bisa di crawl. Sehingga url url yang ada didalam website kita cepat terindeks oleh mesin pencari. Baca juga Cara Submit Blog ke Bing Webmaster
Cara Submit Sitemap Blog - Selain daripada itu sitemap juga merupakan salah satu cara untuk mengoptimalkan SEO pada sebuah website, karena dengan adanya sitemap maka secara tidak langsung seluruh isi yang ada didalam halaman website kita dapat dikenali dengan mudah oleh mesin pencari.
Nah sekarang bagaimana Cara Submit Sitemap Blog, berikut langkah-langkahnya :
1. Masuk ke Alat Webmaster dengan menggunakan akun anda 
2. Klick website yang akan di Submit
3. Lalu pilih Konfigurasi Situs
4. Lalu Klick Peta Situs
5. Klick Tambahkan/Uji Peta Situs
6. Copy dan paste salah satu kode dibawah ini lalu masukan pada kolom url yang kosong
Masukan kode dibawah ini, apabila kurang dari 500 postingan
atom.xml?redirect=false&start-index=1&max-results=500
Masukan kode dibawah ini, apabila lebih dari 500 postingan
atom.xml?redirect=false&start-index=501&max-results=1000
Masukan kode dibawah ini, apabila lebih dari 1000 postingan
atom.xml?redirect=false&start-index=1001&max-results=1500  
7. Klick tombol Mengirim Peta Situs
8. Selesai
Posted by at 0 comments
Labels: ,

Cara Submit Blog ke Bing Webmaster

Cara Submit Blog ke Bing Webmaster - Meng-submit blog kita ke Bing Webmaster merupakan salah satu cara supaya blog kita terindeks mesin pencari bing dan yahoo. Cara Submit Blog ke Bing Webmaster ini sangatlah mudah sama halnya kita meng-submit blog melalui google webmaster. seperti pada tutorial sebelumnya tentang Cara Submit Sitemap Blog ke Google Webmaster.


Saya kira sahabat sudah paham dan mengerti manfaat dari meng-submit blog ke mesin pencari. Baiklah langsung saja berikut langkah langkah Cara Submit Blog ke Bing Webmaster :
1. Buatlah email di Windows Live
2. Selanjutnya silahkan mendaftar Bing Webmaster dengan mengunakan email yang telah dibuat tadi
3. Selanjutnya klick Add Site, lalu masukan url blog sahabat, setelah itu klick Submit
4. Selanjutnya silahkan sahabat pilih metode verifikasi ”Copy and Paste a tag in your default webpage”
5. Copy kode meta tag yang sahabat dapatkan
6. Masuk ke Blogger lalu pilih Edit HTML
7. Cari kode <head> kalau sudah ketemu silahkan pastekan kode dari Bing Webmaster tadi tepat dibawah kode <head>
8. Kembali ke dashboard Bing Webmaster selanjutnya klick verify
9. Selanjutnya klik menu Crawl lalu klik Sitemaps (XML, Atom, RSS)
10. Pilih Add Feed lalu masukan url feed sahabat, baik atom maupun feed dari feedburner
11. Klick Submit.
Nah mudah bukan  Cara Submit Blog ke Bing Webmaster Selanjutnya silahkan sahabat praktekan sendiri. kalau artikel ini bermanfaat untuk sahabat silahkan untuk meninggalkan komentar pada kotak komentar dibawah ini. tengkyu
Posted by at 0 comments
Labels: ,

Cara Memasang Meta Tag Pada Setiap Postingan Secara Otomatis

Cara Memasang Meta Tag Pada Setiap Postingan Secara Otomatis - Sekarang saya akan mencoba memberikan tutorial tentang Cara Memasang Meta Tag Pada Setiap Postingan Secara Otomatis, cara ini tentunya sangat bermanfaat untuk Meningkatkan SEO onpage karena setiap postingan yang kita tulis tentu mempunyai deskripsi yang berbeda, jadi sahabat kalau memasang meta tag secara otomatis pada setiap postingan sahabat tidak perlu lagi memasangnya secara manual. Hal ini juga dilakukan untuk menghindari duplikat meta deskripsi. Cara ini saya dapatkan dari blogger senior yaitu dari blog juragan. sebelumnya saya mengucapkan terima kasih kepada blog juragan.
Nah sekarang akan saya suguhkan Cara Memasang Meta Tag Pada Setiap Postingan Secara Otomatis menjadi dua bagian :
Kalau sahabat belum pernah memasang meta deskripsi silahkan sahabat ikuti cara berikut :

1. Login ke akun Blogger
2. Lalu masuk ke Rancangan
3. Pilih Edit HTML
4. Cari kode  
<title><data:blog.pageTitle/></title>
5.  Setelah ketemu hapus dan ganti kode diatas dengan kode dibawah ini :
<b:if cond='data:blog.url == &quot;http://Alamat Blog Shabat.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='Isi Dengan Deskripsi Blog Sahabat'/>
<meta name='KEYWORDS' content='Isi Dengan Kata Kunci Blog Sahabat'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>
6. Simpan Template Sahabat

Kalau sahabat pernah memasang meta tag deskripsi ikuti cara dibawah ini :

1. Login ke akun Blogger
2. Lalu masuk ke Rancangan
3. Pilih Edit HTML
4. Cari kode
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>



5. Nah kalau sudah ketemu silahkan sahabat ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.url == &quot;http://Alamat Blog Sahabat.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='Isi Dengan Deskripsi Blog Sahabat'/>
<meta name='KEYWORDS' content='Isi Dengan Kata Kunci Blog Sahabat'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>
6. Simpan Template

Nah itu Cara Memasang Meta Tag Pada Setiap Postingan Secara Otomatis, mudah mudahan bermanfaat. untuk saran dan kritiknya silahkan berkomentar pada kotak komentar dibawah ini.
Posted by at 0 comments
Labels: ,

Memasang Widget Share Button Facebook, Twitter, Google di Blog

Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog -
 
Belakangan ini saya berkunjung  ke sebuah blog, dan saya menemukan sesuatu yang unik di blog sahabat saya tersebut. Saya menemukan widget share botton. Kemudian saya mencoba memasangnya, karena widget ini akan memudahkan pengunjung blog kita untuk mengshare apa yang ada di blog kita. Dan hal ini juga akan berdampak positif ke blog kita.. karena ini bisa menjadi media marketing gratis buat para blogger , untuk itu saya akan membagaikan kepada para sahabat – sahabat blogger sekalian tentang cara membuat share botton. Berikut langkah- langkahnya :

  1. Login ke dasbor blog anda
  2. Pilih rancangan
  3. Pilih tambah gadget
  4. Pilih Html/Java script
  5. Copy kode Html di bawah ini
  6. Pastekan di Html/ Java Script tadi
  7. Simpan
  8. Selesai

Kode Share button

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Catatan : untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang simple.

contoh hasilnya


                                                                            
Posted by at 0 comments
Labels:

Mengatasi Masalah Pada PHP Dan MySQL Yang Tidak Terkoneksi

Saya sudah membuat database menggunakan phpMyAdmin, tapi kenapa sewaktu uji coba koneksi malah tertulis kode2nya saja ?!
Kenapa ketika saya ingin mengkoneksikan database,selalu muncul database not selected ?! Saya menggunakan PHP My Admin !

Kedua pertanyaan di atas sering kita dengar bila seseorang mengalami kesulitan dalam menggunakan PHP dan MySQL. Kali ini saya ingin menjelaskannya.

Membuka dan Menutup Koneksi MySQL

Untuk melakukan koneksi ke MySQL gunakan perintah berikut :

mysql_connect(nama_host, nama_user, password)

atau

$var_koneksi = mysql_connect(nama_host, nama_user, password)

dan untuk menutup koneksi kita gunakan :

mysql_close()

atau

mysql_close($var_koneksi)
 Perintah di atas adalah perintah utama untuk membuka dan menutup koneksi pada MySQL.

Ikuti langkah-langkah saya dalam menguji koneksi :
  • Buka Notepadd++ untuk menuliskan kode berikut ini : 
<?php
        error_reporting(0);
        $koneksi = mysql_connect("localhost","root","") or die("Koneksi Gagal !" . mysql_error());
        if($koneksi) echo "Koneksi Berhasil";
        mysql_close($koneksi);
?>
  • Simpan file dengan format .php dan letakkan pada folder xampp/htdocs.
  • Kemudian buka browser dan ketik alamat berikut : http://localhost/"namafile".php 
  • Berikut adalah screenshot dari halaman php tersebut jika koneksi berhasil atau gagal.
Posted by at 0 comments
Labels:
Subscribe to: Posts (Atom)