Membuat Tulisan Berkedip-kedip

Berikut ini kode HTML yang sederhana untuk membuat tulisan berkedip-kedip:

<a style="text-decoration:blink;">Selamat Datang di Blog Saya</a>

Tampilannya akan seperti ini:

Selamat Datang di Blog Saya

Untuk kode yang lebih komplek, yaitu ada tambahan CSS untuk mengatur tulisan, font, ukuran atau menambahkan link. Berikut ini adalah contoh kode HTML yang lebih kompleks, warna merah kode yang bisa diubah sesuai keinginan, untuk membuat tulisan berkedip-kedip:

<a style="color:#380FF00;font-size:15px;font-family:Verdana,sans-serif;text-decoration:blink;" title="klik untuk melihatnya" href="http://sinforan.blogspot.com" target="_blank">Selamat Datang, Jangan Lupa Komentar</a>

Tampilannya akan seperti di bawah ini:

Selamat Datang, Jangan Lupa Komentar

Cara membuat jenis-jenis tabel pada blog

 

1.Tabel Biasa

Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td>belajar membuat tabel</td></tr></table>

2.Tabel Biasa dengan Huruf di posisi center / tengah

Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td align="center">belajar membuat tabel</td></tr></table>

3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal

Contoh:

belajar membuat tabel

Code:
<table width="300" border="6"><tr><td align="center">belajar membuat tabel</td></tr></table>

4.Tabel Biasa dengan 2 (dua) kolom / columns

Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="1"><tr><td>tabel kolom 1</td><td>tabel kolom 2</td></tr></table>

5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah
Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="6"><tr><td align="center">tabel kolom 1</td><td align="center">tabel kolom 2</td></tr></table>

6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="1"><tr><td>kolom satu</td><td>kolom dua</td></tr><tr><td>baris kedua</td><td>baris kedua</td></tr></table>

7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="6"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr></table>

8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr><tr><td align="center">baris ketiga</td><td align="center">baris ketiga</td></tr><tr><td align="center">baris keempat</td><td align="center">baris keempat</td></tr></table>

9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

10.Tabel yang terpisah.
Contoh:

satu
kolom satu	kolom dua
baris kedua	baris kedua
dua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><th>satu</th><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

11.Tabel Istimewa (halah!)
Contoh:

Tabel Istimewa

Daftar Gan
No.	Name:
1.	Nama Satu
2.	Nama Dua
3.	Nama Tiga

Code:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Istimewa</b></caption><tr><th colspan="2">Daftar Gan</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>

CARA MEMBERI EFEK TULISAN PADA CBOK

Cara Membuat Teks Tebal  di CBOX
Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]
Contoh: [b]teks tebal[/b] hasilnya teks tebal

Cara Membuat Teks Miring  di CBOX
Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]
Contoh: [i]teks miring[/i] hasilnya teks miring

Cara Membuat Teks Bergaris Bawah  di CBOX
Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]
Contoh: [u]teks bergaris bawah[/u] hasilnya teks bergaris bawah

Cara Membuat Teks Bergaris Tengah  di CBOX
Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]
Contoh: [s]teks dicoret[/s] hasilnya teks dicoret

Cara Membuat Tulisan Berukuran Kecil  di CBOX
Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
Contoh: [small]tulisan kecil[/small] hasilnya tulisan kecil

Cara Membuat Teks Berukuran Besar di CBOX
Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
Contoh: [big]tulisan besar[/big] hasilnya tulisan besar

Cara Membuat Tulisan Rata Tengah  di CBOX

Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
Contoh: [center]rata tengah[/center]

Cara Membuat Tulisan Berwarna  di CBOX
Apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color]
Contoh: [color=blue]teks biru[/color] hasilnya teks biru

Buat warna kita hanya merubah namanya saja misalkan red atau bla...bla.....

Buat Kode warnanya silahkan lihat saja di menu blog saya.

Cara Membuat Teks Ber Link di CBOX
Apit kata-kata yang ingin diberi link dengan [url=alamattujuan] dan [/url]
Contoh: [url=http://cyber-benyo.blogspot.com]Sinforan [/url]
hasilnya adalah Sinforan

Cara Membuat Teks Berjalan  di CBOX
Apit kata-kata yang ingin dibuat bergerak dengan [scroll] dan [/scroll]
Contoh: [scroll]teks berjalan[/scroll]

Cara Memasang Background Gambar Di Belakang Tulisan Pada Posting

Langsung saja saya berikan caranya untuk memasang background gambar di halaman posting.

1. Masuk ke admin WordPress anda.
2. Klik [Posts] > [Add New].
3. Copy kode dibawah dan paste-kan di area [HTML]:
   

   <div style="background-image:url('http://url_gambar.jpg'); background-repeat:repeat; background-position:center center; text-align:justify; padding:5px;">
Tuliskan text anda disini...
</div>

4. Ganti yang dicetak merah dengan alamat gambar sesuai dengan keinginan Anda.
5. Kemudian tulis artikel anda dan setelah selesai kembali ke mode [Visual].
6. Dan klik tombol [Publish].

Tips:

• Gunakan warna huruf yang lebih terang dari gambar backgroundnya agar mudah dibaca.
• Kalau bisa gunakan gambar yang lebih transparan.

mewarnai Text Dengan Bingkai Berwarna, Background Gambar Dan Scroll

1. Copy kode dibawah ini ke halaman penulisan dalam mode [HTML] atau pada [Widgets Text] untuk ditaruh di sidebar anda.

   <div style="overflow: auto; height: 100px; background-color: #ffecff; background-attachment: scroll; background-repeat: no-repeat; background-position: 50% 50%; background-image: url('http://1.gravatar.com/avatar.gif'); text-align: justify; border: 2px solid #0000b9; padding: 5px;">Tulisan Anda...</div>

2. Kemudian kembali ke mode [Visual] untuk melakukan pengeditan text dan setelah selesai klik tombol [Publish].

Keterangan :

• width : lebar text area.
• height : tinggi text area.
• background-color : warna backgroung text area.
• background-repeat : pengulangan tampilan pada gambar.
• background-position : letak background gambar.
• background-image : background gambar.
• text-align : perataan tulisan.
• padding : jarak antar tulisan dengan border.
• border : garis atau bingkai text area.
• solid : warna garis atau bingkai text area.
• font-size : ukuran huruf.
• font-family : jenis huruf.
• color : warna huruf.

Membuat Link Blogroll Menggunakan Gambar

1. Login ke Admin WordPress anda.
2. Pada sisi kiri halaman klik menu [Links] > [Add New].
   
3. Kemudian akan tampil halaman ‘Add New Link’.
   
4. Isikan nama dari link yang ingin anda buat pada menu [Name].
   
   contoh: bootingskoBlog
5. Isikan URL dari link yang ingin anda pasang pada menu [Web Address].
   
   contoh: http://bootingskoblog.wordpress.com/
6. Isikan keterangan singkat dari link yang anda pasang pada menu [Description].
   
   contoh: Blog yang berisi tutorial WordPress lengkap dan selalu update.
7. Buat kategori untuk mengelompokkan link jika anda menginginkannya pada menu [Categories], kemudian klik [+ Add New Category].
   
   contoh: Blog Tutorial.
8. Kemudian beri tanda tik pada salah satu pilihan pada menu [Target].
   
   >> _blank: untuk membuka halaman baru saat link diklik.
   >> _top: tanpa membuka halaman baru saat link di klik.
   >> none: fungsinya hampir sama dengan _top.
9. Pada menu ‘Advance’ masukkan alamat gambar pada kolom [Image Address].
   
10. Langsung klik saja tombol [Add Link].
    
11. Kemudian aktifkan widgets links di sidebar blog anda.

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 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 Spoiler Pada Wordpress

Cara Membuat Spoiler pada Posting Blog wordpress – Teman – Taman pernah ngepost sebuah artikel atau melihat artikel di forum kemudian bisa di buka tutup, nah itulah namanya spoiler, kalo spoiler di forum sudah biasa, nah kalo untuk spoiler di posting blog, jarang-jarang orang yang tahu, disini cookis blog mau kasih tahu tentang hal ini. Siap menyimak yah.

Contoh Spoiler:

Nah itu spoiler, caranya begini, kamu tinggal membuat sebuah artikel diposting blog kemudian pilih bagian mana yang ingin kamu spoiler, caranya hanya menambah kan kode saja kok. Tapi perlu diingat untuk menambahkan sebuah kode spoiler, tampilan posting blog wordpress kita berada dalam HTML , kemudian sisipkan kode berikut pada awal Kalimat .

<strong>Contoh Spoiler :</strong>
<div id=”spoiler”>
<div><input style=”margin: 0px; padding: 0px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”;this.innerText = ”; this.value = ‘Sembunyikan’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Tampilkan’; }” type=”button” value=”Tampilkan” /></div>
<div style=”background: #ffffff; margin: 10px auto; border: 0px solid #000; padding: 5px;”>
<div style=”display: none;”>

Nah kemudian cari ujung tulisan yang tadi dipilih untuk di spoiler , jika sudah ketemu tutup aja langsung dengan kode :

</div>
</div>
</div>

Selesai… tinggal kamu save aja.. Mudahkan cara membuat spoiler pada postingan blog wordpress.

Membuat Tombol di Blog

Membuat Tombol di Blog | Tutorial Blog

Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini.

• Membuat tombol untuk Blogspot :
• Login ke blogger Sobat.
• Untuk membuat tombol di postingan klik Posting > New Post, lalu pilih tab Edit Html.
• Jika Anda ingin menampilkannya di widget klik Design > Page Element > Add a Gadget > HTML/Javascripts.
• Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini)

• Untuk Wordpress.com :
• Login ke dasboard Anda.
• Untuk menampilkan di postingan klik Posts > Add New, lalu pilih tab Html.
• Untuk menampilkan di widget klik Appearance > Widgets, lalu letakkan Text pada sidebar.
• Selanjutnya letakkan kode untuk menampilkan tombol.

Untuk kodenya dapat Sobat lihat dibawah ini :

• kodenya seperti ini :
  <button>Tombol</button>
• Posisi tombol ditengah :
  berikut kodenya :
  <div style="text-align: center;"><button>Tombol</button></div>
• Untuk tombol yang berisi Link berikut kodenya :
  <a href="http://alamatblog.com/"><button>LINK</button></a>
• Untuk membuat tombol berisi link yang akan dibuka ditab baru, cukup tambahkan target="_blank"
  <a href="http://alamatblog.com/" target="_blank"><button>LINK</button></a>

Gimana Sob, mudah kan ?!?

Sepertinya cukup sekian dulu tutorial tentang Membuat Tombol di Blog.

Cara Buat Paragraf Yang Kalimat Pertamanya Menjorok Ke Dalam

cara menulis kode HTML java script di posting

Kode Warna HTML

Meningkatkan SEO Melalui Dashboard WordPress.com

SEO atau Search Engine Optimization adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.
Kita tahu

Cara Membuat Gambar Melayang (Floating Images) Di WordPress.com

Benar apa kata para sahabat blogger, blogwalking sangat berguna sekali. Disamping bisa menambah teman dan keperluan lainnya yang berkaitan dengan SEO. Bisa juga kita mendapatkan inspirasi dari blog yang kita kunjungi tersebut. Sebagai contoh ketika saya berkunjung ditempatnya ●●●ЄЯШЇЙ●●● tidak sengaja saya tertarik dengan aksesoris di salah satu blognya. Saya pikir aksesoris tersebut hanya bisa dipasang di Blogspot atau di WordPress dengan self hosting.
Namun

Trik Membuat Blog Update Setiap Hari Ke Twitter Dan Facebook Tanpa Membuat Posting

Bagaimana bisa share ke Twitter dan Facebook jika kita tidak melakukan update blog secara berkala? Apakah memakai trik spam otomatis ke Twitter dan Facebook? Atau apa mungkin blog WordPress.com bisa menggunakan script auto like Facebook dan auto share Twitter untuk mengirimkan posting secara otomatis ke akun Twitter dan Facebook?