Membuat Dan Memasang Navbar Di WordPress.com

Berikut ini adalah contoh navbar pada blog:

Navbar pada WordPress ada dua tipe,

Yang pertama adalah Primary Navbar, navbar ini biasanya letaknya paling atas (diatas Secondary Navbar) dan biasanya menampilkan berdasarkan Pages yang kita buat.
Yang kedua adalah Secondary Navbar, navbar kedua yang letaknya tepat dibawah Primary Navbar dan biasanya menampilkan berdasarkan Kategori yang kita buat.

Tidak semua tema WordPress memiliki dua buah tipe navbar sekaligus, kebanyakan dari tema itu hanya memiliki Primary Navbar. Namun juga ada beberapa tema yang tidak mendukung adanya navbar ini. Lantas bagaimana untuk membuat navbar pada tema yang tidak mendukung navbar? Jawabannya kita bisa membuatnya secara manual.
Manual disini kita tidak harus membuat navbar dengan bahasa pemograman yang membingungkan (karna WordPress memang tidak mengijinkan itu) namun WordPress telah menyediakan fitur “Menus” yang dapat digunakan membuat navbar secara mudah.
Saya akan menjelaskan bagaimana cara membuat navbar dengan fitur Menus. Cara ini berhasil merubah default navbar yang ada pada tema Enterprise sesuai kehendak Kita. Tidak lagi menampilkan navbar berdasarkan Pages dan Kategori lagi, namun bisa menampilkan berdasarkan Single Posts dan link dari luar blog Kita. Semoga cara ini juga berlaku untuk tema WordPress yang lainnya pula.

Untuk Memulai Membuat Navbar.

1. Tentu saja Anda login dulu ke dashboard WordPress Anda.
2. Pada sisi kiri halaman Dashboard klik [Appearance] > [Menus].
   
3. Maka akan terbuka halaman Menus, untuk segera memulai membuat navbar silahkan cari menu seperti yang terlihat pada screenshot dibawah.
   
4. Kemudian berilah nama navbar pada kolom “Menu Name“, pemberian nama ini nantinya akan digunakan sebagai ID navbar. Sebagai contoh berilah nama navbar dengan “My Custom Menu“, sama seperti screenshot diatas.
5. Anda diperbolehkan membuat lebih dari satu ID Navbar dengan meng-klik tanda [ + ].
   
6. Setelah selesai klik tombol [Create Menu].

Pada tahap ini pembuatan navbar baru setengahnya, dan selanjutnya kita akan mengisinya dengan link-link atau menu yang nantinya akan bisa tampil berderet (horizontal) dan dropdown di navbar.

Untuk membuat navbar berdasarkan Pages;

1. Masih pada halaman Menus, cari menu “Pages” seperti terlihat pada screenshot dibawah.
   
   Didalam menu Pages akan terlihat daftar pages yang telah anda buat. Jika tidak ada Saya sarankan untuk membuat Pages, silahkan baca disini.
2. Silahkan pilih Pages yang ingin Anda tampilkan pada navbar dengan cara memberi tanda centang [ √ ].
3. Setelah selesai klik tombol [Add to Menu].

Untuk membuat navbar berdasarkan Kategori;

1. Masih pada halaman Menus, cari menu “Categories” seperti terlihat pada screenshot dibawah.
   
   Didalam menu Categories akan terlihat daftar kategori yang telah anda buat. Jika tidak ada Saya sarankan untuk membuat kategori, silahkan baca disini.
2. Silahkan pilih Kategori yang ingin Anda tampilkan pada navbar dengan cara memberi tanda centang [ √ ].
3. Setelah selesai klik tombol [Add to Menu].

Untuk membuat navbar dengan link sendiri;

1. Masih pada halaman Menus, cari menu “Custom Links” seperti terlihat pada screenshot dibawah.
   
   a. Pada kolom [URL], isikan link yang Anda kehendaki.
   b. Pada menu [Label], tulis judul untuk link yang Anda isi tadi.
2. Setelah selesai klik tombol [Add to Menu].

Membuat Sub Menu Navbar (dropdown navbar);

1. Untuk membuat sub menu pada navbar, silahkan geser salah satu item ke samping kanan. Maka item tersebut akan meng-induk pada item diatasnya dan menjadikan item tersebut sub menu. Dan begitu seterusnya.
   
2. Dibawah adalah tampilan dari sub menu navbar saat diklik.
   
3. Terlihat diatas bahwa menu “Ubuntu – Free OS!” menginduk pada menu “Tech“.

Untuk Menampilkan Navbar Pada Halaman Blog.

Hal terpenting sekaligus final dari membuat navbar adalah menampilkannya pada halaman blog. Dan berikut caranya;

1. Masih pada halaman Menus, cari menu “Theme Locations” seperti terlihat pada screenshot dibawah.
   
2. Pada menu drop down “Primary Navigation” atau “Primary Menu“, pilih nama navbar yang telah Kita buat tadi, yaitu “My Custom Menu“. Jika Anda membuat lebih dari satu nama navbar, nama itu bisa Anda pilih pada menu drop down “Secondary Navigations” atau “Secondary Menu“.
3. Kemudian klik tombol [Save].

Silahkan cek halaman blog Anda, apakah navbar telah tampil atau belum. Jika berkali-kali Anda gagal menggunakan cara diatas, berarti masalahnya terdapat pada tema yang Anda miliki. Untuk mengatasinya, silahkan ganti tema yang mendukung navbar.

Merubah Default Warna Background Pada Halaman Posting WordPress

1. Copy kode dibawah ini pada mode [HTML] di posting anda.
   

   <div style="overflow:auto;background-color:#c1eeec;text-align:justify;padding:5px;border:1px solid #999999;">
Tuliskan text anda disini...
</div>

2. Kemudian ubah nilai yang dicetak merah sesuai keinginan anda.
3. Kembali ke mode [Visual] untuk melakukan penulisan.
4. Bila sudah selasai, klik [Publish].

Keterangan:

• background-color: warna background.
• text-align: perataan text.
• padding: jarak dengan garis tepi.
• border: garis tepi.

Membuat Featured Slide Show

Untuk keperluan membuat slideshow ini, kita membutuhkan 2 buah file javascript yang akan mengelola slideshow kita nanti. Jadi, silahkan unduh dulu filenya disini. Itu adalah sebuah file zip dengan folder js di dalamnya. Anda hanya perlu meng-ekstract-nya ke folder themes yang sedang anda bangun.
Jika sudah, sekarang mari kita mulai mengedit 2 file yaitu index.php dan style.css. Pada file index.php kita memasang 2 deret kode di 2 tempat terpisah. Pertama sebelum tag </head> dan kedua di tempat dimana anda ingin slideshow ini muncul. Biasanya saya taruh setelah div content.
Sebelum tag </head> kita masukkan kode ini untuk memanggil 2 file javascript diatas dan file jquery yang sudah ada di WordPress:

view plaincopy to clipboardprint?

1. if (is_home()) {  
2.   wp_enqueue_script('jquery');  
3.   wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');  
4.   wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');  
5. }  

if (is_home()) {
  wp_enqueue_script('jquery');
  wp_enqueue_script('easing', get_stylesheet_directory_uri() . '/js/jquery.easing.1.1.js');
  wp_enqueue_script('carousal', get_stylesheet_directory_uri() . '/js/jcarousel.js');
}

Kemudian di tempat dimana slideshow muncul, silahkan pasang kode slideshow ini:

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2. jQuery(function() {  
3.   jQuery(".mygallery").jCarouselLite({  
4.     btnNext: ".nextb",  
5.     btnPrev: ".prevb",  
6.     visible: 1,  
7.     speed: 2000,  
8.     auto: 3000,  
9.     easing: "backout"  
10.   });  
11. });  
12. </script>  
13.   
14. <div id="slidearea">  
15.   <div id="gallerycover">  
16.     <div class="mygallery">  
17.     <ul>  
18.     <?php   
19.       $my_query = new WP_Query('showposts=5');  
20.       while ($my_query->have_posts()) : $my_query->the_post();  
21.       $do_not_duplicate = $post->ID;  
22.     ?>  
23.     <li>  
24.       <div class="mytext">  
25.         <a href="<?php the_permalink() ?>">  
26.          <?php   
27.           if ( has_post_thumbnail() ) {  
28.             the_post_thumbnail();  
29.           } else {  
30.             echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';  
31.           }  
32.          ?>  
33.         </a>  
34.         <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>  
35.         <p><?php the_content_rss('more_link_text', TRUE, '', 30); ?>   
36.         <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">read more..</a></p>  
37.           
38.         <div class="slimeta">  
39.         <a href="#" class="prevb">&laquo; Previous</a><a href="#" class="nextb">Next &raquo;</a>  
40.         </div>  
41.       </div>       
42.     </li>  
43.       <?php endwhile; ?>  
44.     </ul>  
45.     <div class="clear"></div>          
46.     </div>  
47.   </div>  
48. </div>  

<script type="text/javascript">
jQuery(function() {
  jQuery(".mygallery").jCarouselLite({
    btnNext: ".nextb",
    btnPrev: ".prevb",
    visible: 1,
    speed: 2000,
    auto: 3000,
    easing: "backout"
  });
});
</script>

<div id="slidearea">
  <div id="gallerycover">
    <div class="mygallery">
    <ul>
    <?php 
      $my_query = new WP_Query('showposts=5');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID;
    ?>
    <li>
      <div class="mytext">
        <a href="<?php the_permalink() ?>">
         <?php 
          if ( has_post_thumbnail() ) {
            the_post_thumbnail();
          } else {
            echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';
          }
         ?>
        </a>
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <p><?php the_content_rss('more_link_text', TRUE, '', 30); ?> 
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">read more..</a></p>
        
        <div class="slimeta">
        <a href="#" class="prevb">&laquo; Previous</a><a href="#" class="nextb">Next &raquo;</a>
        </div>
      </div>     
    </li>
      <?php endwhile; ?>
    </ul>
    <div class="clear"></div>        
    </div>
  </div>
</div>

Kode diatas akan memunculkan 5 artikel terbaru di slideshow. Jika anda ingin mengubahnnya, silahkan merubah kode ini sesuai query yang anda inginkan:
$my_query = new WP_Query('showposts=5');
Selanjutnya, kita tinggal mengatur bagaimana slideshow ini muncul melalui style.css. Berikut ini style yang saya gunakan. Anda bisa memodifikasinya sendiri:

view plaincopy to clipboardprint?

1. /* SLIDER */  
2.   
3. #slidearea{  
4.   height: 170px;   
5.   overflow: hidden;  
6.   margin:10px 0px 0px 0px;  
7.   padding:10px;  
8.   position: relative;  
9.   width:560px;  
10.   border:solid 1px #cccccc;  
11.   background: #ededed;  
12. }  
13. #gallerycover{  
14.   overflow: hidden;  
15.   margin:0px 20px 0px 0px;  
16. }  
17. .mygallery{  
18.   overflow: hidden;  
19.   position:relative;  
20.   
21. }  
22. .mytext img{  
23.   float:left;  
24. }  
25. .mytext{  
26.   position:relative;  
27.   margin:0px 5px 0px 5px;  
28.   height: 240px;  
29.   display:inline;  
30.   float:left;  
31.   color:#c4c4c4;  
32.   }  
33. .mytext h2 {  
34.   padding:0px;  
35.   margin:0px;  
36.   font-size: 18px ;  
37.   font-weight:bold;  
38.   font-style:italic;  
39. }  
40. .mytext h2 a:link,.mytext h2 a:visited{  
41.   color:#006b97;  
42.   text-decoration:none;  
43. }  
44. .mytext p{  
45.   padding:0px 0px;  
46.   color:#555;  
47.   font-size: 14px ;  
48.   line-height:20px;  
49.   font-style:italic;  
50.   text-shadow:1px 1px 0px #f6f6f6;  
51. }  
52. .nextb {  
53.   float:rightright;  
54.   }  
55. .prevb {  
56.   float:left;  
57.   }  

/* SLIDER */

#slidearea{
  height: 170px; 
  overflow: hidden;
  margin:10px 0px 0px 0px;
  padding:10px;
  position: relative;
  width:560px;
  border:solid 1px #cccccc;
  background: #ededed;
}
#gallerycover{
  overflow: hidden;
  margin:0px 20px 0px 0px;
}
.mygallery{
  overflow: hidden;
  position:relative;

}
.mytext img{
  float:left;
}
.mytext{
  position:relative;
  margin:0px 5px 0px 5px;
  height: 240px;
  display:inline;
  float:left;
  color:#c4c4c4;
  }
.mytext h2 {
  padding:0px;
  margin:0px;
  font-size: 18px ;
  font-weight:bold;
  font-style:italic;
}
.mytext h2 a:link,.mytext h2 a:visited{
  color:#006b97;
  text-decoration:none;
}
.mytext p{
  padding:0px 0px;
  color:#555;
  font-size: 14px ;
  line-height:20px;
  font-style:italic;
  text-shadow:1px 1px 0px #f6f6f6;
}
.nextb {
  float:right;
  }
.prevb {
  float:left;
  }

Nah, itu aja yang perlu dilakukan untuk membangun slideshow. Tinggal anda kemudian yang harus menentukan sendiri seperti apa tampilan yang anda inginkan. Karena tiap orang pasti punya sentuhan seni sendiri-sendiri. Oke, selamat berkreasi

Cara Membuat Gambar Melayang dan Berputar di Facebook

1. Pertama Login ke akun Facebook kamu2. Kemudian Copy-paste script di bawah ini ke AdressBar atau tempat biasa kamu semua mengetikkan alamat URL website

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(“img”); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+”px”; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+”px”}R++}setInterval(‘A()’,5); void(0);

3. Lalu Kemudian tekan tombol “Enter” pada keyboard kamu

Cara Membuat Iklan Melayang pada WordPress

copas saja codenya lalu terserah anda mau menempatkan iklan itu dimana. Apakah mau di tempatkan di Main Index (home) , atau di Single Post (di artikel). Atau ke dua-duanya

Ini dia code / script yang nantinya Anda gunakan sebagai pemanggil

<style type=”text/css”>
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type=”text/javascript”>
function showHideGB(){
var gb = document.getElementById(“gb”);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(“gb”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + “px”;
if(x0!=xf){setTimeout(“moveGB(“+x+”, “+xf+”)”, 10);}
}
</script>

<div id=”gb”>

<div onclick=”showHideGB()”> </div>

<div>

<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
.:[Close][Klik 2x]:.
</a>
</div>
<center>

DISINILAH ANDA MELETAKAN KODE SCRIPT IKLAN ANDA

</center>

<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.center = (30-gb.offsetWidth).toString() + “px”;
</script></center></div></div>

Tempatkan code diatas setelah code <?php get_header(); ?> , selamat mencoba

Cara Membuat Tulisan Berjalan

Kode HTML Untuk Tulisan Yang bergerak kekanan



<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan Bergerak Bergerak kekanan (ganti dgn tulisan anda)</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak kekiri : Lihat pada kode tulisan bergerak kekanan diatas,tinggal ganti kata "right" menjadi "left"



Kode HTML Untuk Tulisan Yang Ke Kanan dan Kekiri


<marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri (ganti dgn tulisan anda)</span></marquee>



Kode HTML Untuk Tulisan Yang Bergerak kekanan Perlahan : Note : nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.Direction = menentukan arah bergerak


<marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Bergerak kekanan Perlahan (ganti dgn tulisan anda</span></marquee>



Kode HTML Untuk Tulisan Tulisan Yang Bisa Bergerak  Ke Kanan dan Kekiri Dan Bisa Di stop


<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop??</span></marquee>



Kode HTML Untuk Tulisan Yang Bergerak Ke Atas


<marquee align="center" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas</span></marquee>



Kode HTML Untuk Tulisan Yang Bergerak Ke Atas dan Ke bawah


<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas dan Ke bawah</span></marquee>


Note : Anda bisa merubah warna tulisan dengan kode warna HTML :


red = warna merah

blue= warna biru

yellow = warna Kuning

white = warna putih

black = warna hitam


Kode warna HTML, pada contoh diatas seperti ini:


<span style="color:red; font-weight: bold;">


Bisa diganti dengan seperti ini :


<span style="color:#f00; font-weight: bold;">


#f00; = warna merah ;


#00f; = Warna Biru ;


#0f0; = Warna Hijau ;


#f0f; = Warna Ungu ;


Atau dikombinasi....Coba-coba aja ya....

Cara Membuat Widget Melayang di WordPress

1. Pertama tama login ke account Dasbor WP anda
2. lalu tambahkan widged text pada menu Tampilan > widget Text lalu klik tambah
   
3. Setelah itu copy script di bawah ini untuk menambah gambar
   

   <@div style=”position:fixed;bottom:150px;left:10px;width:60px;height:80px;”><a href=”http://qoshosh.wordpress.com” target=”_blank”><img border=”0″ src=”http://qoshosh.files.wordpress.com/2009/07/4990.gif” title=”Home Di sini.” /></a><small><a href=”http://qoshosh.wordpress.com” target=”_blank”></a></small></div@>

   Catatan:
   - Untuk posisi gambar melayang silahkan Anda mencocokkan sesuai dengan kebutuhan bottom 150 px left 10 px artinya gambar diletakkan di sebelah bawah kiri blog dengan batas penempatan 150 pixel/karakter dari bawah dan 10 pixel dari kiri.
   - Yang berwarna biru width:60px;height:80px artinya ukuran gambar yang ingin ditampilkan, withd lebarnya height panjangnya.
   - Yang warna ijo muda  ganti dengan link alamat blog Anda. -Selanjutnya yang berwarna ungu adalah alamat dari gambarnya. Sebaiknya upload gambar tersebut di blog Anda sendiri supaya proses loading gambar cepat, sehingga tidak membuat proses load blog berat.
   -Jangan lupa tanda “@” pada script di atas bagian awal dan akhir dihapus supaya kode scriptnya dapat berfungsi.
4. Setelah semuanya beres klik simpan widget!
5. Lalu buka blog Anda dan liat hasilnya, Jika kurang pas posisinya bisa di dirubah kode yang berwarna merah sedangkan ukuran gambar warna biru

Cara Membuat Iklan Melayang Dengan Tombol Close Sekali Klik

1. Login ke blog

2. Klik add gadget

3. Pilih HTML/javascript

4. Masukkan kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:3px;
right:3px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir-100;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<div style="text-align: right;">
<a href="javascript:showHideGB()">
.: Close [Click 1 x]:.
</a>
</div>

<center>

Script iklan anda disini

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (20-gb.offsetWidth).toString() + "px";
</script></div>
</div>



5. Simpan.