Cara Membuat Tulisan Berjalan ( Pelangi)

Di sini tulisan yang ingin di beri efek pelangi berjalan

Efek tulisan pelangi ini saya ambil dari blog Aku Punya dot Com, kemudian saya tambahkan sedikit kode agar bisa berjalan dan muncullah tulisan pelangi berjalan ini. Langsung saja praktekkan. Caranya sangat mudah.

• Login ke blog Anda dan pilih RANCANGAN. Kemudian pilih EDIT HTML.
• Jangan lupa download template blog Anda terlebih dahulu. Centang EXPAND TEMPLATE WIDGET.
• Copy dan letakkan kode berikut sebelum kode </head>.
<script type="text/javascript"> <!-- Begin /* * Notes on hue * * This script uses hue rotation in the following manner: * hue=0 is red (#FF0000) * hue=60 is yellow (#FFFF00) * hue=120 is green (#00FF00) * hue=180 is cyan (#00FFFF) * hue=240 is blue (#0000FF) * hue=300 is magenta (#FF00FF) * hue=360 is hue=0 (#FF0000) * * Notes on the script * * This script should function in any browser that supports document.getElementById * It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6 * * Accessibility * * The script does not write the string out, but rather takes it from an existing * HTML element. Therefore, users with javascript disabled will not be adverely affected. * They just won't get the pretty colors. */ /* * splits par.firstChild.data into 1 span for each letter * ARGUMENTS * span - HTML element containing a text node as the only element */ function toSpans(span) { var str=span.firstChild.data; var a=str.length; span.removeChild(span.firstChild); for(var i=0; i<a; i++) { var theSpan=document.createElement("SPAN"); theSpan.appendChild(document.createTextNode(str.charAt(i))); span.appendChild(theSpan); } } function RainbowSpan(span, hue, deg, brt, spd, hspd) { this.deg=(deg==null?360:Math.abs(deg)); this.hue=(hue==null?0:Math.abs(hue)%360); this.hspd=(hspd==null?3:Math.abs(hspd)%360); this.length=span.firstChild.data.length; this.span=span; this.speed=(spd==null?50:Math.abs(spd)); this.hInc=this.deg/this.length; this.brt=(brt==null?255:Math.abs(brt)%256); this.timer=null; toSpans(span); this.moveRainbow(); } RainbowSpan.prototype.moveRainbow = function() { if(this.hue>359) this.hue-=360; var color; var b=this.brt; var a=this.length; var h=this.hue; for(var i=0; i<a; i++) { if(h>359) h-=360; if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; } else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; } else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; } else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; } else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; } else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; } h+=this.hInc; this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")"; } this.hue+=this.hspd; } // End --> </script>
• Klik SAVE.
• Langkah selanjutnya adalah memasukkan kode berikut ke dalam text/tulisan yang ingin diberi efek pelangi berjalan.
<div align="center" style="width: 30%;"> <marquee><h4 id="r1"> Di sini tulisan yang ingin di beri efek pelangi berjalan</h4> </marquee> </div> <script type="text/javascript"> var r1=document.getElementById("r1"); //get span to apply rainbow var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed); </script>

Selesai dan lihat hasilnya.
Selamat belajar dan jangan lupa komentarnya ya!!

Sumber: http://aku-punya.com/cara-membuat-text-tulisan-pelangi.html

Baca Lengkap....

Mengganti Read More dengan Gambar

Selamat Malam. Setelah lama tidak membuat postingan, saya berinisiatif saja memberikan tips ini kepada para blogger. Masih tentang modifikasi blog. Posting kali ini pun masih membahas tentang tutorial yang sudah umum, yaitu mengganti tulisan Read More/Baca Selengkapnya dengan sebuah gambar.

Yang pertama Anda lakukan adalah membuat gambar read more yang akan kita gunakan nanti. Silahkan buka situs Supalogo.com atau klik di sini. Di sana Anda bisa memodifikasi tulisan read more seperti yang kita sukai. Tampilannya seperti ini:

Selanjutnya, masukkan kata-kata di kolom yang tersedia. Klik GENERATE dan lihat preview-nya di bawah. Untuk mengganti jenis huruf/font, text size, shadow text, dan warna yang lain, klik saja OPTION. Setelah sesuai dengan selera Anda, download kemudian upload di tempat penyimpanan gambar Anda. Kalau yang saya pakai di sini adalah PICASA. Copy link gambar Anda ke notepad.

Langkah selanjutnya adalah mencari kode berikut:

<br /> <b:if cond='data:post.hasJumpLink'><br /> <div class='jump-link'><br /> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a><br /> </div><br /> </b:if ><br />

Setelah ketemu, download dulu template Anda dan centang Expand Widget. Ganti kode + "#more"'><data:post.jumpText/> dengan kode berikut.

<br /> <img style="cursor:pointer; cursor:hand;width: 244px; height: 40px;" src="<span style="color: red;">URL GAMBAR ANDA</span>"/><br />

Hasilnya seperti ini.

<br /> <b:if cond='data:post.hasJumpLink'><br /> <div class='jump-link'><br /> <a expr:href='data:post.url><img style="cursor:pointer; cursor:hand;width: 244px; height: 40px;" src="<span style="color: red;">URL GAMBAR ANDA</span>"/></a><br /> </div><br /> </b:if ><br />

Ganti tulisan berwarna merah dengan URL gambar Anda. Untuk width dan height bisa Anda ganti sesuai dengan template blog Anda. Klik Save Template dam lihat hasilnya.

Selamat belajar. Sukses dan jangan lupa komentarnya ya.....!!!!

Baca Lengkap....

Cara Membuat Menu Horisontal

Selamat bertemu kembali. Posting kali ini merupakan pembahasan yang sebenarnya sudah tidah baru lagi. Tapi untuk lebih memahaminya, saya mencoba untuk mempostingnya kembali......

Langsung saja ke pokok bahasannya. Menu horizontal. Menu ini adalah menu mendatar dan bertingkat ke bawah. Lihat aja contohnya di bagian menu blog ini. Kalau masih ada yang belum paham, silahkan baca tulisan ini sampai akhir.

1. Langkah pertama yang haru dilakukan adalah. Login ke blog Anda seperti biasa.
2. Klik Rancangan kemudian Edit HTML.
3. Jangan lupa download dulu template Anda untuk menjaga kemungkinan gagal.
4. Centang Expand Template Widget.
5. Letakkan kode berikut di atas ]]></b:skin>. Untuk memudahkan mencari kodenya, tekan control F.
   
   
   #menublog {
   width:919px;
   float:left;
   margin:0;
   padding: 10px;
   background: aqua;
   }
   #menu {
   margin:0;
   padding:0;
   }
   #menu a {
   font-family: Comic Sans MS;
   color: black;
   font-size: 16px;
   font-weight: normal;
   text-decoration: none;
   padding: 10px;
   }
   #menu a:hover {
   color: #fff;
   font-weight: normal;
   text-decoration: none;
   background: black;
   }
6. Selanjutnya, cari kode berikut:
   
   <div id='header'>
   ...............
   ...............
   </div>
7. Kemudian letakkan kode berikut di bawah kode tadi.
   
   
   <div id="menublog">
   <div id="menu">
   <a href="http://www.ilmublog.co.cc/" target="_blank" title="Halaman Utama Anak Pesisir">Home</a>
   <a href="http://www.ilmublog.co.cc/" target="_blank" title="Template Galeri">Template Galeri</a>
   <a href="http://www.ilmublog.co.cc/" target="_blank" title="Belajar">Belajar</a>
   <a href="http://www.ilmublog.co.cc/" target="_blank" title="Profil">Profil</a>
   <a href="http://www.ilmublog.co.cc/" target="_blank" title="Kontak">Kontak</a>
   </div>
   </div>
8. Silahkan ganti tulisan berwarna hijau sesuai dengan selera dan ukuran blog Anda. Untuk kesesuaian selera, silahkan ubah jenis huruf, ukuran huruf dan lainnya. Okey!
9. Langkah terakhir adalah Save Template. Selesai

Terima kasih. Selamat belajar. Jangan lupa komentarnya ya.......!!!!

Baca Lengkap....

Damai Dalam Sukmaku

Bantimurung,
Kelak kisah ini jadi puncak
Di antara kebahagiaan kita
Tersenyum
Tertawa
Hanya kau dan aku di sana
Telah kuberikan indahnya padamu
Yang kau mau
Yang kau impikan
Yang lahir dari hatimu

Melihatmu tertawa dan bahagia
Adalah semangat dan tanda kasih untukku
Yang terindah
Kau hati
Seperti damai yang menyusup ke dalam relung sukmaku
Antarkanku pada satu waktu yang tak terlupa
Beribu kesan
Kaulah satu untukku
Di dalam sanubari
Pada semua sisi hatiku
Hanya namamu

Makassar, 2 Februari 2011

Baca Lengkap....

Satu Di Hatiku

Persembahan lagu untuk seseorang

Cipt: Ian Konjo
Intro: G C D (3x) G
G C G
Engkau satu di hatiku
G C D
Tak kan pernah terganti
G C D
Kau terangi hariku
G C D
Dengan cerita tulusmu

Intro: G C D (2x) G
G C D
Kuberjanji padamu
G C D
Kan slalu bersamamu
G C D
Moga esok kan abadi
G C D
Cerita cinta ini

Reff: C D G D/F# Em
Jangan pernah kau ragu....ho.......wo...oo
C D
Cinta ini untukmu selalu
C D G D/F# Em
Meski bumi ini terhen........ti
C D G
Aku akan tetap ada untukmu

Baca Lengkap....

Lebur Jadi Abu

Semalam, tatkala jarum jam menunjuk angka dua belas
Tibalah waktu dimana usia kian menua

Masih dengan senyuman yang rekah di bibirmu
Meleburkan segala resah dan penat
Menghalau hingga raib bersama malam
Yang terbunuh sang fajar pagi tadi
Semoga saja tetap seperti itu

Saat binar matamu berkaca,
Mengenang satu masa hidup yang naas
Bergegaslah, hempaskan pada batu karang
Tumpahkan pada samudera
Lalu biarkan terbawa arus hingga memuara


Makassar, Oktober 2010

Baca Lengkap....

Antologi Puisi & Cerpen

Buku antologi Puisi & Cerpen "Enam Mata Badik". Hasil karya dari sebuah keresahan dan kegelisahan yang ada.

Tunggu ya!!!!

Baca Lengkap....

Menu Tab View Tanpa Edit HTML 2

Selamat Bertemu Kembali!!! Postingan ini adalah update dari postingan saya sebelumnya. Postingan ini saya buat karena style menu tab view sebelumnya, terkesang sangat sederhana dan itu-itu saja. Jadi, saya membuat dua style baru yang. Langkahnya sudah tau kan? Kalau belum, gampang kok. tidak terlalu susah. Oke, kita mulai saja.

Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.

• Copy kode berikut untuk Menu Tab View dengan border yang melengkung.
  
  
  

  <style type="text/css">
  #badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; -moz-box-shadow: 2 4 4 #cccccc;
  -webkit-box-shadow: 2 4 4 #cccccc;
  -goog-ms-box-shadow: 2 4 4 #cccccc;
  box-shadow: 2 4 4 #cccccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -goog-ms-border-radius: 10px;
  border-radius: 10px;}
  div.TabView div.Tabs
  {height: 30px;overflow: hidden;}
  div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
  text-align:center ; height: 18px; /* tinggi menu atas */
  padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
  text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
  font-weight: normal; color: white; /* warna font menu atas */ -moz-box-shadow: 1 2 2 #000000;
  -webkit-box-shadow: 1 2 2 #000000;
  -goog-ms-box-shadow: 1 2 2 #000000;
  box-shadow: 1 2 2 #000000;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -goog-ms-border-radius: 15px;
  border-radius: 15px;}
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active -moz-box-shadow: 1 2 2 #000000;
  -webkit-box-shadow: 1 2 2 #000000;
  -goog-ms-box-shadow: 1 2 2 #000000;
  box-shadow: 1 2 2 #000000;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -goog-ms-border-radius: 15px;
  border-radius: 15px;color: #000000;background: #fff290; /* background menu atas */ }
  div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
  div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
  div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
  </style>
  <script type='text/javascript'>
  //<![CDATA[
  function tabview_aux(TabViewId, id)
  {
  var TabView = document.getElementById(TabViewId);
  // ----- Tabs -----
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i = 0;
  do
  {
  if (Tab.tagName == "A")
  {
  i++;
  Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
  Tab.className = (i == id) ? "Active" : "";
  Tab.blur();
  }
  }
  while (Tab = Tab.nextSibling);
  // ----- Pages -----
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i = 0;
  do
  {
  if (Page.className == 'Page')
  {
  i++;
  if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
  Page.style.overflow = "auto";
  Page.style.display = (i == id) ? 'block' : 'none';
  }
  }
  while (Page = Page.nextSibling);
  }
  // ----- Functions ---------------------------------------------------
  function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
  function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
  //]]>
  </script>
  <form action="tabview.html" method="get">
  <div id="badan">
  <div id="TabView" class="TabView">
  <div style="width:355px;" class="Tabs">
  <a>Daftar Isi</a>
  <a>Recent Post</a>
  <a>Komentar</a>
  <a>Link Blog</a>
  <a>Tukar Link</a>
  </div>
  <div style="width:355px; height:290px; " class="Pages">
  <div class="Page">
  <div class="Pad">
  Isi menu 1
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 2
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 3
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 4
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 5
  </div>
  </div>
  </div>
  </div>
  </div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>
  
  Hasilnya seperti gambar di bawah.
  
  
  
  
• Copy kode berikut untuk Menu Tab View biasa.
  
  <style type="text/css">
  #badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; }
  div.TabView div.Tabs
  {height: 30px;overflow: hidden;}
  div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */
  text-align:center ; height: 18px; /* tinggi menu atas */
  padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */
  text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */
  font-weight: normal; color: white; /* warna font menu atas */ }
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {color: #000000;background: #fff290; /* background menu atas */ }
  div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ }
  div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
  div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
  </style>
  <script type='text/javascript'>
  //<![CDATA[
  function tabview_aux(TabViewId, id)
  {
  var TabView = document.getElementById(TabViewId);
  // ----- Tabs -----
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i = 0;
  do
  {
  if (Tab.tagName == "A")
  {
  i++;
  Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
  Tab.className = (i == id) ? "Active" : "";
  Tab.blur();
  }
  }
  while (Tab = Tab.nextSibling);
  // ----- Pages -----
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i = 0;
  do
  {
  if (Page.className == 'Page')
  {
  i++;
  if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
  Page.style.overflow = "auto";
  Page.style.display = (i == id) ? 'block' : 'none';
  }
  }
  while (Page = Page.nextSibling);
  }
  // ----- Functions ---------------------------------------------------
  function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
  function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
  //]]>
  </script>
  <form action="tabview.html" method="get">
  <div id="badan">
  <div id="TabView" class="TabView">
  <div style="width:355px;" class="Tabs">
  <a>Daftar Isi</a>
  <a>Recent Post</a>
  <a>Komentar</a>
  <a>Link Blog</a>
  <a>Tukar Link</a>
  </div>
  <div style="width:355px; height:290px; " class="Pages">
  <div class="Page">
  <div class="Pad">
  Isi menu 1
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 2
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 3
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 4
  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Isi menu 5
  </div>
  </div>
  </div>
  </div>
  </div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>
  
  
  



Hasilnya akan seperti ini.

Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.

Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.

Baca Lengkap....