McCarrol Merilis Buku Tentang Oasis

Mantan drummer Oasis Tony McCarroll akan merilis buku yang berisi tetang kisah naik turunnya oasis menurut sisi cerita dari Tony.

Berbicara kepada Nme.com, McCarroll mengakui bahwa kurang apiknya sang pemimpin Oasis, Noel Gallagher. Gitaris tersebut sering kali mempertanyakan kemampuan McCarroll baik selama masih di Oasis maupun setelah keluar dari Oasis.

"Banyak hal yang perlu untuk ak tegaskan kebenarannya" kata McCarroll. "Ada cerita dari sisi yang lain tentang Oasis yang perlu juga saya akui. Mungkin butuh anggota band yang lain untuk memahaminya, akan tetapi itu bukanlah karena kesalahan satu orang saja."

McCarroll dipecat dari Oasis tahun 1995, saat Oasis akan rekaman untuk albumnya yang cukup terkenal sampai sekarang, "(What's the Story) Morning Glory", walaupun sang drummer tersebut masi sempat menyelesaikan satu single "Some Might Say." Rasa sakit hati McCarroll akan pemecatan dirinya tersebut masih sangat terasa hingga hari ini, bahkan ia tidak mengira akan berdamai dengan Oasis.

"Saya tidak mengerti," katanya. "Noel adalah Noel sampai hari kiamat. Jika dia sampai meminta maaf padamu...."(kad/Nme.com)

Read more »

Cara Membuat Horizontal Tab Menu

Setelah diposting sebelumnya kita telah mencoba membuat tab horizontal berdasarkan kode css yang ada di template, kali ini kita akan buat tab baru dengan seluruh kode css baru yang sama sekali tidak berkaitan dengan seluruh kode css bawaan blogger baru. Sekaligus kita juga akan melakukan modifikasi pada kode html template supaya tab horizontal maupun berbagai menu yang lain bisa kita pasang di semua bagian yang dikehendaki.

Horizontal tam menu ini masih menggunakan kode css tanpa tambahan sebuah script sehingga beban pada blog juga tidak akan terasakan, apalagi background image yang kita gunakan juga amatlah kecil. Pembuatan tab ini bisa juga dimanfaatkan sebagai bahan latihan buat sobat blogger untuk melangkah pada pembuatan menu yang lebih kompleks diposting selanjutnya. Meskipun demikian, tidak ada ruginya jika tab menu horizontal ini digunakan untuk menambah kelengkapan blog sekaligus memperindah karena tampilannya yang sangat menarik.

Semua kode tinggal sampeyan copy dan simpan melalui penambahan widget blog tanpa harus upload satupun gambar/images karena semua sudah dalam bnetuk siap pakai. Beberapa perubahan terutama dilakukan untuk menempatkan tab pada posisi yang paling ideal dengan cara merubah margin di kode cssnya. Untuk link dan nama link-nya silahkan dirubah sesuai blog yang sampeyan kelola.

Kode CSS dan HTML Horizontal Tabs Menu-1

<style type="text/css">
.bgsGRmnu{
     padding: 0;
     float: left;
     font: bold 13px Arial;
     overflow: hidden;
     margin-bottom: 1em;
     border: 1px solid #625e00;
     border-width: 1px 0;
     border-left:1px solid white;
     background: black url(http://i42.tinypic.com/2hcnk2e/bgsGR/images/bgtab-1.jpg.png) top center repeat-x;
     }
.bgsGRmnu li{
     display: inline;
     }
.bgsGRmnu li a{
     float:left;
     color:#aad6fe;
     padding:9px 11px;
     text-decoration:none;
     border-right:1px solid white;
     }
.bgsGRmnu li a:visited{
     color:#4fcafe;
     }
.bgsGRmnu li a:hover, .bgsGRmnu li .current{
     color: red;
     text-shadow:-1px -3px 1px #fff;
     -moz-text-shadow:-1px -3px 1px #fff;
     -webkit-text-shadow:-1px -3px 1px #fff;
     background: transparent url(http://i27.tinypic.com/110hu9l/bgsGR/images/bgtab-2.jpg) center center repeat-x;
     }
.boksmnu{
     padding:0 0 2px;
     border-bottom:2px solid red;
     border-left:15px solid #000;
     border-right:15px solid #000;
     padding-left:1px;
     height:35px; background:#000;
     float:left;
     -moz-border-radius-topleft: 10px;
     -moz-border-radius-topright: 10px;
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
     -goog-ms-border-top-left-radius: 10px;
     -goog-ms-border-top-right-radius: 10px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     }
</style>

<div class="boksmnu" style="left: 10px; margin: 0px 10px 20px 0px; top: -30px;">
<ul class="bgsGRmnu">
<li><a href="http://www.blogger.com/Link-1">Link Title-1</a></li>
<li><a href="http://www.blogger.com/Link-2">Link Title-2</a></li>
<li><a href="http://www.blogger.com/Link-2">Link Title-3</a></li>
<li><a href="http://www.blogger.com/Link-2">Link Title-4</a></li>
<li><a href="http://www.blogger.com/Link-2">Link Title-5</a></li>
<li class="current"><a href="http://gubhugreyot.blogspot.com/">gubhug reyot</a></li>
</ul>
</div>

 Cara Menggunakan Kode CSS dan HTML Horizontal Tabs Menu-1

1. Login to BloGGeR : Lakukan login ke blogger terlebih dahulu.
2. Dasboard
: Setelah memasuki halaman dasboard, KLIK link Design/Rancangan.
3. Design/Rancangan : KLIK link Edit HTML.
4. BackUp Templates : KLIK link Download Full Templates/Download Template Lengkap, kemudian Save in a PC folder.
5. Tetap di Edit HTML : Cari kode html di bawah ini.
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   
   Gunakan Ctrl +F untuk mencari kode html tersebut.
6. Replace HTML Code/Rubah Kode : dengan kode berikut.
   
   <b:section class='header' id='header' showaddelement='yes'>
   
   Perubahan kode HTML ini berfungsi untuk memunculkan widget di atas header.
7. Page Elements/Elemen Laman : KLIK link Page Elements/Elemen Laman.
8. Add Gadget/Tambah Gadget : KLIK Add Gadget di atas Header (above header).
Add Gadget/Tambah Gadget
Blog Title (header)
9. Add a Gadget/Tambahkan Sebuah Gadget : KLIK HTML/Javascript.
10. Copy-Paste : Copy Kode CSS dan kode HTML Horizontal Tabs Menu, kemudian paste di box yang tersedia.
11. KLIK SAVE/Simpan dan lihat hasilnya dengan membuka blog (open blog).

Catatan/Keterangan

1. Ganti Link-1 s/d Link-5 dan http://gubhugreyot.blogspot.com dengan link yang akan digunakan.
2. Ganti Link Title-1 s/d Link Title-5 dan gubhug reyot dengan link baru sesuai dengan link yang digunakan.
3. Untuk merubah posisi tab (horizontal Tabs position), rubah pada kode CSS :
   
   

   <div class="boksmnu" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
   
   top:-30px --> from top
   nilai minus semakin besar akan semakin naik,
   left:10px --> from left
   
   margin:0px 10 20px 0px;

   
   digunakan juga untuk posisi semua yang ada di atasnya, kanan, bawah dan kiri.

Cara Memasang Horizontal Tabs Menu di bawah Header

1. Cari kode (find HTML Code) :
   
   <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
   <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
2. Replace HTML Code (Ganti kode HTML) dengan kode HTML berikut :
   
   <b:section class='header' id='crosscol' showaddelement='yes'/>
   <b:section class='header' id='crosscol-overflow' showaddelement='yes'/>
3. Lanjutkan cari kode CSS :
   
   .tabs-outer
   
   di atas kode tersebut terdapat penanda kode css tab horizontal yang bentuknya seperti ini (remove the red code) :
   
   /* Tabs
   ----------------------------------------------- */
   
   Hapus semua kode CSS hingga di atas tanda batas bawah tab seperti di bawah ini:
   
   /* Headings

Kode yang harus di hapus adalah kode CSS yang berwarna merah (mekipun tidak semua template sama) :

/* Tabs
----------------------------------------------- */
/*
.tabs-outer {
  position: relative;
  background: transparent;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;
}

.tabs-cap-bottom {
  bottom: 0;
}

.tabs-inner {
  padding: 0;
}

.tabs-inner .section {
  margin: 0 35px;
}

*+html body .tabs-inner .widget li {
  padding: 1px;
}

.PageList {
  border-bottom: 1px solid $(tabs.border.bevel.color);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -goog-ms-border-top-left-radius: 5px;
  -goog-ms-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  background: $(tabs.selected.background.color) none ;
  color: $(tabs.selected.text.color);
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0;
  margin-right: 1px;
  padding: .65em 1.5em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  background-color: $(tabs.background.color);

  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -goog-ms-border-top-left-radius: 5px;
  -goog-ms-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
/* Headings
----------------------------------------------- */

1. KLIK SAVE Template/Simpan Template.
2. KLIK link Page Elements/Elemen Laman.
3. KLIK Add Gadget/Tambah Gadget di bawah header (under the header).
Blog Title (header)
Add Gadget/Tambah Gadget
4. Copy-Paste Kode dan simpan di HTML/Javascript.

 sumber

Read more »

Cara Membuat Efek Link Scrollover

Sebetulnya ada beberapa macam dekorasi link ini dan pasti sudah banyak yang tahu, diantaranya ada efek blink, rainbow atau berganti-ganti warna, berubah warna apabila di sorot kursor mouse, berubah huruf dan lain-lain. Perbedaan dari scrollover ini yaitu sebuah link akan bergulung dari atas kebawah sekaligus berganti warna. Untuk warna anda dapat menyesuaikan sendiri sesuai dengan keinginan anda.
Lalu bagaimana triknya? Silahkan ikuti langkah-langkah berikut:

Login ke dashboard blogger anda, lanjutkan dengan klik Layout – Edit HTML. Jangan lupa untuk membackup template anda sebelum melakukan perubahan pada kode HTMLnya.
Cari kode <head> pertama pada template dan tambahkan kode berikut dibawahnya:

<script type="text/javascript" src="http://www.scrollovers.com/js/scrollovers.js"></script>

Setelah itu cari kode ]]></b:skin> dan tambahkan kode berikut diatasnya:

<style>
a.scrollover {
/* Warna pertama */
color: #557AFF;
}
a.scrollover em:first-line {
/* Warna kedua */
color: #FF5B3C;
}
</style>

Sesuaikan warna dengan selera anda. Untuk kode-kode warna dapat dilihat disini. Setelah anda menambahkan kode-kode diatas pada template anda, sekarang anda sudah dapat menggunakan efek scrollover tersebut. Jika anda membuat link biasa baik dalam posting atau membuat daftar link di sidebar dengan menggunakan HTML/Java script maka kodenya akan seperti ini:

<a href="http://alamat link yang anda tuju">teks yang akan tampil</a>

Dan jika anda ingin menggunakan efek scrollover maka kodenya seperti ini:

<a href="http://alamat link yang anda tuju" class="scrollover" type="scrollover">Teks yang akan ditampikan</a>

Sebetulnya efeknya masih bisa diatur misalkan anda ingin mengatur kecepatan scroll ataupun arah scrollnya, tapi mungkin akan sedikit rumit karena anda harus mendownload scriptnya lalu mengedit dan mengupload kembali ke hosting anda sendiri. Untuk itu saya tidak akan menjelaskannya. Jika anda tidak berhasil atau ada masalah silahkan kontak saya baik melalui komentar ataupun shoutbox, selamat mencoba..

Read more »

Tombol Dinamis Dengan CSS3

Setelah sekian postingan telah terupdate bukan mengenai CSS3 sekarang muncul lagi trik tentang CSS3. Mungkin banyak teman - teman saya yang menunggu postingan tentang css3 namun tidak saya tanggapi karena ada kesibukan offline namun sekarang saya berikan walaupun tidak banyak. Trik CSS3 kali ini tentang cara Tombol dinamis dengan CSS3, pada postingan sebelumnya mengenai Membuat Tombol Dengan CSS3 juga saya telah memberikan trik membuat tombol dengan CSS3, walaupun kedengarannya sama tapi bentuk dari tombolnya berbeda dengan yang sebelumnya.Sebenarnya saya sangat menyukai sekali dengan CSS3 namun karena keterbatasan waktu dan uang untuk online, postingan tentang CSS3 agak terlambat saya update di blog ini, makannya apabila sahabat oketrik ingin diberi tanggapan pertanyaan yang telah dikirim ke saya, Klik lah iklan yang ada di blog ini, hanya sekali klik saja loh ga ada ruginyakan? malah istilahnya beramal. Oke deh dari pada saya cuap-cuap lebih baik saya langsung jelaskan saja tentang Tombol dinamis dengan CSS3. Lihat demonya dulu yuk!

Demo

tombol dinamis 1

Trik Blog

Tutorial

tombol dinamis 2

Free Download

Free Blogger Template

Jasa Kami

Pembuatan Web/Blog

CSS Yang di pakai :

.tmbl{display:inline-block; background:url(btn.bg.png) repeat-x 0px 0px; padding:5px 10px 6px 10px; font-weight:bold; text-shadow:1px 1px 1px rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.4); -moz-border-radius:5px; -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.5); -webkit-border-radius:5px; -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.5)}

.tmbl:hover{text-shadow:1px 1px 1px rgba(0,0,0,0.5); cursor:pointer}

.biru{background-color:#CCC; color:#141414}
.biru:hover{background-color:#00c0ff; color:#fff}

.hijau{background-color:#CCC; color:#141414}
.hijau:hover{background-color:#8aff00; color:#fff}

HTML yang di pakai :

<p>tombol dinamis 1 </p>
<div class="tmbl hijau">Trik Blog</div>
<div class="tmbl biru">Tutorial</div>
<div class="tmbl merah">Cheats</div>

<p>tombol dinamis 2 </p>
<div style="font-size:24px;">
<div class="tmbl hijau">Free Download</div>
<div class="tmbl biru">Free Blogger Template</div>
</div>

<div style="font-size:36px;">
<div class="tmbl hijau b2">Jasa Kami</div>
<div class="tmbl biru">Pembuatan Web/Blog</div>
</div>

Nah bagaiman Menarik bukan Tombol yang di buat dengan sentuhan CSS3? memang sich kalau dibandingkan dengan tombol yang di buat dengan jquery ataupun javascript lebih bagus tapi masing-masing mempunyai kelemahan tersendiri sekarang terserah sobat ingin memakai yang mana. Akhir kata Terima kasih dan Happy Blogging.
gambar oleh : http://free-css-menu.com

Read more »

Membuat Tombol Dengan CSS

Alhamdulilah setelah belajar mengenai CSS3 akhirnya saya bisa mengplikasikannya kedalam template dan berusah untuk mencoba-coba akhirnya bisa juga membuat widget yang berfungsi untuk blog. Kali ini saya akan menjelaskan bagaimana cara membuat Tombol dengan CSS3. Namun pada kenyataanya trik ini belum begitu baik untuk diterapkan, lalu kenapa ente bagikan kepada kita? walaupun belum sempurna, tapi tidak salahkan kalau saya bagikan ke sobat semua? Nah kalau ingin melihat tombolnya, sobat lihat aja ke bawah ini.

Demos

Bagaimana lumayan bagus bukan?? nah kode css yang saya gunakan bisa sobat lihat di bawah ini

.tombol {
width: 200px;
height: 50px;
margin: -30px auto;
border: 2px solid #4F93CA;
background-color: #428CF0;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
-moz-box-shadow:0 20px 20px #428CF0;
background-image: -moz-linear-gradient(#1C5B9B 0%, #6CBFFF 90%);
-webkit-border-radius-topleft: 20px;
-webkit-border-radius-bottomleft: 20px;
-webkit-box-shadow:0 20px 20px #428CF0;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#1C5B9B), to(#6CBFFF));
}

.tombol span {
text-shadow: 0px 1px 8px #2867A5;
font-family: Verdana;
color: #ffcc66;
font-size: 40px;
position: relative;
top: -5px;
left: auto;
}

dan kode HTML-nya dibawah ini

<div class="tombol"><span>Demos</span></div>

mungkin singkat sekali y kode HTML-nya. Walaupun simple tapi efeknya sob, gak nahan...!!! okelah kalau sobat ingin menanyakan sesuatu tentang trik ini, sobat bisa tinggalkan pesan di kotak komentar oke. sekarang saya akhiri dahulu.

sumber

Read more »