Gitar Legendaris Jimi Hendrix Dilego

Written by RA_Syihan on Friday, November 19, 2010 | Category: , , ,


Sebuah gitar yang digunakan Jimi Hendrix untuk menuliskan beberapa lagu klasiknya akan masuk tempat pelelangan dengan harga $225.000 pada bulan depan.

Gitar bermerek Epiphone akustik ini dibeli sang legenda rock seharga $22,50 saat ia membelinya di sebuah toko di New York pada tahun 1960an.

Hendrix sangat mencintai gitar ini, dia membawanya terus sampai dia akhirnya pindah ke London.

Mantan pacar Hendrix, Kathy Etchinham, yang menjalin hubungan dengan Hendrix saat sang legenda rock itu tinggal di British Capital setahun sebelum kematiannya berkat :

"Jimi sangat mencintai gitar itu, dia selalu memainkannya...Jimi menggunakan gitar tersebut untuk hampir semua lagu yang dia tulis di Inggris."

Gitar legenda ini akan dijual di London Auctioneers Bohams pada tanggal 15 Desember 2010.(kad/cmc.com)
Read more »

Membuat Horizontal Menu Keren

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: , , ,

Horizontal Sliding Menu merupakan sebuah menu horizontal yang terbangun dari penggabungan kinerja CSS dan javascript dengan muatan KODE untuk sebuah menu bisa dikatakan sangat kecil sehingga menu yang sangat menarik ini ditanggung tidak akan membebani loading blog. Penekanan akan loading blog menjadi sangat perlu karena akan menjadi sangat fatal pengaruhnya apabila blog menggunakan terlalu banyak KODE dengan muatan 'nggedabyah', maka semakin lama dengan intensifnya posting ditanggung beban yang harus ditanggung saat loading menjadi semakin bertambah besar yang menjadikan loading menjadi sangat lambat. Loading yang sangat lambat tentunya akan sangat berpengaruh terhadap intensitas pembaca blog untuk mampir menikmati sajian yang dengan susah payah sudah kita postingkan. Anda tinggal menyimpan KODE CSS dan javascript di bagian head dan merubah KODE HTML untuk menu sesuai kebutuhan posting blog kemudian menyimpannya di bagian body atau bisa dilakukan dengan menyimpannya di Edit HTML -> Elemen Laman ->Tambah Gadget ->HTML/Javascript. Mungkin anda tertarik untuk melihatnya terlebih dahulu sebelum menggunakan Horizontal Sliding Menu ini ? Silahkan KLIK DEMO untuk melihatnya!
 

Letakan Kode CSS/Javascript diantara <head> dan </head>

KODE CSS
<style type="text/css"> 
* {
       margin:0; 
       padding:0;
       }
.menu {
       position:relative; 
       background:url(http://i50.tinypic.com/fwovf6.gif); 
       height:32px; 
       width:995px;
       }
.menu ul {
       list-style:none; 
       z-index:10; 
       position:absolute; 
       z-index:100; 
       padding:9px 5px;
       border-bottom:2px solid #fff;
       border-top:2px solid #fff;
       border-left:2px solid #fff;
       border-right:2px solid #fff; 
       }
.menu li {
       float:left;
       font-size:10px;
       font-family: verdana;
       font-weight: bold;
       text-decoration:none;
       }
.menu a, .menu a:active, .menu a:visited {
       text-decoration:none; 
       color:#CCFF00; 
       padding:8px;
       }
.menu a:hover {
       color: #FF0000;
       } 
#slide {
       position:absolute; 
       top:4px; 
       height:28px; 
       background: #0000FF; 
       z-index:10;
       }
</style>
 
Javascript
<script type="text/javascript">
/* boggerstuars.blogspot.com - gubhugreyot.blogspot.com */
var menuSlider=function(){
var m,e,g,s,q,i; e=[]; q=8; i=8;
return{
init:function(j,k){
m=document.getElementById(j); e=m.getElementsByTagName('li');
var i,l,w,p; i=0; l=e.length;
for(i;i<l;i++){
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};
}
g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
},
mo:function(d){
clearInterval(m.tm);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
},
mv:function(el,ew){
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!=el||w!=ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q;
g.style.width=(w+wi)+'px'}
}else{clearInterval(m.tm)}
}};}();
</script>
Letakan Kode berikut diantara tag <body> dan </body>
Contoh HTML Menu:
<body onload="menuSlider.init('menu','slide')">
<center>
<div class="menu">
 <ul id="menu">
  <li value="1"><a href="#">| Home |</a></li>
  <li><a href="#">| CSS Tutorial |</a></li>
  <li><a href="#">| Javascript |</a></li>
  <li><a href="#">| Image Gallery |</a></li>
  <li><a href="#">| Horizontal Menu |</a></li>
  <li><a href="#">| Vertical Menu |</a></li>
  <li><a href="#">| JQuery |</a></li>
  <li><a href="#">| Template |</a></li>
  <li><a href="#">| Floating Menu |</a></li>
  <li><a href="#">| Animation gif |</a></li> 
 </ul>
<div id="slide"><!-- --></div>
</div>
</center>

Catatan :
  • Jangan lupa untuk menyelipkan onload="menuSlider.init('menu','slide')" di tag body
  • Ganti Nama menu seperti Home, Javascript dengan Menu yang kamu butuhkan
  • Sesuaikan lebar menu dengan panjang/lebar menu yang dibutuhkan dengan merubah nilai width: 995px (pada KODE CSS di bagian ".menu")
  • Supaya Template lebih ringkas, sebaiknya upload KODE CSS dan Javascript di file hosting dan gunakan KODE seperti dibawah ini di bagian head sebagai pengganti CSS dan javascript.

- <link href="URL.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="URL_javascript.js"></script>
Read more »

Membuat Efek Blur dengan Opacity

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: , ,

Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat keburaman sebuah gambar. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai keburaman untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin buram hingga mencapai bentuk gambar transparan. Dalam penggunaannya, opacity bisa ditempatkan di bagian body atau head bergantung kepada tingkat kebutuhan pengguna. Penempatan yang bersifat permanen dilakukan pada bagian head, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.

penelopecruz

KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :


1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas ]]></b:skin>

KODE CSS

<style type="text/css">

.blur img {filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:0;}

.blur:hover img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}

</style>

KODE untuk menampilkan effect opacity saat posting gambar/photo :

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/halleberry_004.jpg" border="0" alt="penelopecruz"/></a>

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg " border="0" alt="penelopecruz"/></a>


Catatan :

KODE berwarna hijau merupakan URL gambar yang akan di terbitkan saat posting.


2. Penggunaan opacity di bagian body (di ruang posting) yang bersifat temporer:

<a href="http://gubhugreyot.blogspot.com"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg" alt="pics" style="filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:2;"></a>

Catatan :

Ganti KODE yang berwarna kuning dan hijau dengan yang ingin dipostingkan.
Read more »

Membuat Elemen Hanya Muncul Pada Posting

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: , , ,

membuat widget yang hanya muncul saat postingan penuhBuat judul asal aja ah,,,! tapi yang saya maksud adalah elemen yang hanya muncul saat dalam postingan saja,sedangkan waktu dalam homepage tidak akan terlihat.
lihat perbedaan antara homepage saya dengan postingan yang sedang anda baca ini, dan anda akan melihat iklan(diatas dan di bawah posting), dan pada homepage iklan itu tidak ada bukan? mau tahu cara membuatnya, sangat mudah ternyata. caranya sbb:

1. Pertama-tama login ke Blogger, selanjutnya pilih menu Tata Letak > Edit HTML.

2. Backup dulu templatenya.

3. Centang checkbox Expand Template Widget.(jngn lp download dl demi keamanan)

4. Cari kode dibawah ini:


]]></b:skin>


5. Nah, lalu ketikkan kode berikut ini diatas kode tersebut:

#postonly{
display:none;
border:1px solid #000000;
padding:5px;
margin-top:10px;}

6. Cari kode berikut ini:

</head>

7. Lalu taruh kode berikut ini diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#postonly{display:block; border:1px solid #000000; padding:5px; margin-top:10px;}
</style>
</b:if>

8. Kalau sudah, cari kode berikut ini

<p><data:post.body/></p>

9. Lalu, ketikkan kode berikut dibawah kode diatas.

<div id='postonly'>
Ketikkan kode widget/HTML yang diinginkan disini
</div>

cuma begitu saja, selamat mencoba aja!
Read more »

Membuat Daftar Isi dan Accordion Pada Blog

Written by RA_Syihan on Tuesday, November 16, 2010 | Category: , , ,

Biasanya kami memiliki begitu banyak posting di blog kita dan jika kita menggunakan TOC itu akan sangat panjang. Jika kita memiliki TOC sangat panjang, itu membuat pengunjung sulit untuk membaca posting kami. Untuk membuatnya mudah dibaca saya membuat modifikasi dari script sebelumnya Tabel Isi untuk gaya Blogger baru dan saya menggunakan Accordion.Fitur dari script ini:

   1. Efek Accordion
   2. Menampilkan dan menyembunyikan efek
   3. CSS 3
   4. Otomatis tambahkan jquery
   5. Warna yang berbeda untuk konten
   6. Gaya yang berbeda untuk membuka dan menutup
   7. Auto Urutkan judul
   8. Tambahkan Baru! selama 10 entry terbaru
Cara menggunakan sangat mudah. Buat Static Page.Masukkan script dalam mode Html
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
ganti kata yang di tandai hijau dengan blogmu
lihat DEMO disini 

gambar Berikut adalah cara membuat halaman di blogger


  
Read more »