Blogger Tutorial Web : Tips dan Trik Cara Membuat Blog dan Website Lebih Seo: Wordpress
Terkini Populer Kategori
News
Loading...
Showing posts with label Wordpress. Show all posts
Showing posts with label Wordpress. Show all posts

11 April 2013

Free Template Wordpress Keren Siap Pakai

Fitur Template: Wordpress Dengar, 3 Kolom, Sidebar Kanan, Majalah, Feature Konten Slider, Lebar Tetap, Gray Latar Belakang, Widget Sosial, Dropdown Menu, header Banner, Navigasi Halaman Widget.



Konfigurasi Featured Content Slider:
Login ke blogger dashboard -> tata letak -> Edit HTML. Sekarang gulir ke bawah ke mana Anda melihat kode di bawah:
<div class='flexslider' id='slider'>
<ul class='slides'>
  <li class='slide'> <a href='#' target='_self'> <img src='.../image.jpg'/> </ a>
<div class='caption'> mengagumkan Blogging Theme! </ div> </ li>
  ..........
Ganti:
"#" Dengan posting URL fitur Anda.
"image.jpg" dengan gambar slider Anda.

Konfigurasi Dropdown Menu:
Login ke blogger dashboard -> tata letak -> Edit HTML. Sekarang gulir ke bawah ke mana Anda melihat kode di bawah:
<ul class='sfmenu' id='menu-main'>
  <li> <a href='#'> Kategori 1 </ a> </ li>
  <li> <a href='#'> Kategori 2 </ a>
   <ul class='sub-menu'>
    <li> <a href='#'> Ini adalah dropdown </ a> </ li>
  ..........
Ganti "#" dengan URL item menu Anda.

Konfigurasi Widget Sosial:
Pencarian untuk:
<h2> Ikuti Kami </ h2>
<ul class='clearfix'>
  <li class='social-twitter'> <a class='social-icon' href='#'> <img src='.../twitter.png'/> </ a> </ li>
  <li class='social-facebook'> <a class='social-icon' href='#'> <img src='.../facebook.png'/> </ a> </ li>
  ..........
Ganti "#" dengan URL Akun Sosial Anda.

Konfigurasi Halaman Navigasi Widget:
mencari:
posting var = 4, / / Jumlah posting di setiap halaman
     num = 2, / / Jumlah tombol akan menampilkan

Bagaimana mengubah Bagian Penulis:
Cari ini:
<h3 class='heading-border'> <span> Author </ span> </ h3>
<div id='author-image'>
<a href='#'> <img class='avatar' height='60' src='.../logo.png' width='60'/> </ a>
</ div>
<div id='author-bio'>
<h4> Ditulis oleh <a href='#'> Admin </ a> </ h4>
<p> Aliquam molestie ligula vitae Nunc ... </ p>
</ div>

25 March 2013

Cara Upload File Themes dan Plugin Wordpress dengan FTP Filezilla

Cara Upload File Themes dan Plugin Wordpress dengan FTP Filezilla

Tutorial Wordpress kali ini akan membahas mengenai cara upload file themes dan plugin Wordpress dengan menggunakan FTP Filezilla. Seperti kita ketahui, mengganti sebuah themes pada blog wordpress memang tidak semudah mengganti themes pada blog berplatform blogspot. Pada kesempatan kali ini, saya akan menggunakan metoda upload file themes dan plugin wordpress melalui FTP client yaitu Filezilla, tidak menggunakan fitur file manager dari cpanel yang disediakan pihak web hosting.


FTP atau File Transfer Protocol merupakan alat untuk mentransfer file yang biasanya dilakukan untuk mentransfer file dari 1 ip ke ip lain atau dari PC ke hosting dan sebaliknya. Namun kali ini saya lebih spesifik mengenai bagaimana menggunakan FTP untuk mentransfer file dari PC ke Hosting atau sebaliknya. Banyak software yang bisa digunakan sebagai saran FTP, Pada tutorial Wordpress kali ini saya menggunakan Software FTP Client Filezilla. Selain gratis, Filezilla ini mudah digunakan dan sangat powerfull. 


Untuk lebih jelas bagaimana cara upload file theme dan plugin Wordpress dengan menggunakan FTP Filezilla adalah sebagai berikut :
  1. Pastikan software Filezilla telah terinstal di komputer anda. Jika belum anda dapat mendownload software filezilla gratis di http://filezilla.sourceforge.net. Setelah mendownload, silakan instal program tersebut.
  2. Buka program filezilla, lalu masuk ke menu site manager
  3. Kemudian klik pada New Site
  4. Isi host dengan nama domainanda, misal host: helmiikhwanul.co.cc gunakan port 21 pada logontype pilih normal lalu isi user dan password sesuai login ke cpanel anda
  5. Setelah itu klik pada menu Advanced
  6. Pada passive transfer mode setting, pastikan check pada use passive mode. Lalu klik ok Setelah selesai pengaturan klik connect
  7. Setelah terhubung ke server, maka akan tampak tampilan sebagai berikut:
  8. Kolom di sebelah kiri adalah directori pada komputer anda, sedang di sebelah kanan adalah directori pada server hosting website anda. Untuk upload anda tinggal mencari file pada komputer anda yang hendak diupload, lalu pindahkan dengan men‐drug file tersebut ke kolom sebelah kanan ke folder yang sesuai. Agar bisa diakses oleh pengunjung pastikan file yang anda upload berada pada folder public_html.
  9. Setelah selasai anda tinggal menutup program tersebut, maka otomatis akan disconnect
Itu tadi tutorial wordpress pada hari ini, jika anda mengalami kesulitan isi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

16 March 2013

Cara Menambah Sidebar di WordPress

Sebenarnya saya nggak begitu menguasai wordpress, tapi saya juga punya blog lain yang menggunakan Wordpress dengan self-hosted. Kali ini saya akan memberikan tutorial yang berhubungan dengan sidebar yang ada di Worpress. Berbeda dengan widget, sidebar merupakan tempat dimana para widget terpasang. Untuk memasang widget kita hanya perlu membuka Appearance > Widgets, sedangkan untuk membuat sidebar, kita perlu mengedit beberapa script pada tema yang kita gunakan. Sebagai contoh disini kita akan menambah sebuah sidebar baru dibawah bagian sidebar lama kita. Atau dengan kata lain, kita akan memiliki 2 buah sidebar, yaitu sidebar atas (sidebar yang lama) dan sidebar bawah (sidebar yang baru).

Untuk membuat sidebar yang baru, kita perlu merubah 2 script, yaitu css dan php. Disini saya akan menggunakan contoh tema yang saya gunakan saja, kalo pingin utak-utik sendiri tampilannya, minimal sudah menguasai CSS 

Langkah-langkah

Buka tema yang digunakan, edit file style.css sesuai dengan kebutuhan, minimal ada class / id selector dan heading selector. Contoh
  1. .sidebar {  
  2.  float:left;  
  3.  width:250px;  
  4.  background:#ffffff;  
  5.  margin-bottom:10px;  
  6.  padding:15px 15px 5px 15px;  
  7.  border:1px solid #e0e0e0;  
  8.  clear:both;  
  9. }  
  10. .widget {  
  11.  border:1px solid #e0e0e0;  
  12.  padding:10px;  
  13.  font-size:11px;  
  14.  margin-bottom:10px;  
  15. }  
  16. .widget h3 {  
  17.  background:#ebe9e1;  
  18.  font-familyArialHelveticasans-serif;  
  19.  font-size:13px;  
  20.  font-weight:bold;  
  21.  padding:5px 10px;  
  22.  display:block;  
  23.  margin-bottom:10px;  
  24.  text-align:left;  
  25.  border:1px solid #dedbd1;  
  26.  height:16px;  
  27. }  
Kode .widget sebagai class selector, sedangkan kode .widget h3 sebagai heading selector pada widget. Selain CSS, kita perlu mengedit 2 file php, yaitu sidebar.php dan functions.php. Buka functions.php pada tema yang kita gunakan, lalu salin script berikut didalam rentangan tag <?php … ?>
  1. if ( function_exists('register_sidebar') )  
  2. register_sidebar(array(  
  3.  'name' => 'sidebar2',  
  4.  'before_widget' => '<div class="widget">',  
  5.  'after_widget' => '</div>',  
  6.  'before_title' => '<h3>',  
  7.  'after_title' => '</h3>',  
  8. ));  
  • 'name' => 'sidebar2', sebagai nama sidebar anda nantinya
  • 'before_widget' => '<div class="widget">', merupakan tag html yang menjadi pembuka widget
  • 'after_widget' => '</div>', merupakan tag html yang menjadi penutup widget
  • 'before_title' => '<h3>', merupakan tag html yang menjadi pembuka judul widget
  • 'after_title' => '</h3>', merupakan tag html yang menjadi penutup judul widget
Lalu kita perlu mengedit sidebar.php, sebagai tempat dimana “sidebar2″ tersebut bernaung. Salin script berikut di tempat yang tepat
<div class="sidebar">
<?php dynamic_sidebar('sidebar2'); ?>
</div>
Kode tersebut akan diterjemahkan menjadi kurang lebih seperti ini
<div class="sidebar">

<div class="widget">
<h3>Judul widget 1</h3>
isi widget 1
</div>
<div class="widget">
<h3>Judul widget 2</h3>
isi widget 2
</div>

</div>
Untuk menambahkan widget pada “sidebar2″ tersebut, kita tidak perlu repot-repot lagi membuka dan mengedit sidebar.php, hanya dari menu Appearance > Widgets, disana akan ada settingan yang berjudul “sidebar2″.

Hasil

Kurang lebih tampilan luarnya akan menjadi seperti ini

Dengan bekal ini, mungkin anda bisa membuat 2 sidebar sekaligus pada sebelah kiri dan kanan blog anda.Itu tadi sedikit penjelasan dari saya, kalau masih bingung jangan tanya sama saya ya, soalnya saya juga bingung nih.

Source
codex.wordpress.org – Function Reference/dynamic sidebar
codex.wordpress.org – Function Reference/register sidebar

Ads Auto


Photography

[Photography][recentbylabel2]

Economy

[Economy][recentbylabel2]