Entri Populer

Rabu, 12 September 2012

My Bright Green Template


ahahaha akhirnya jadi lagi template Gue,
buset 2 hari depan monitor untuk nyelesaiin template ini
hampir putus asaa,... kirain bakalan ga jadi /sad
hmmmph.... ada beberapa keistimewaan template ini

-connect to facebook (login menggunakan aplikasi facebook)
-cursor ala gue
-pengingat waktu
-evek link
-pemberitahuan pengunjung
-komentar facebook
-emotion komentar
-artikel terkait
dan yang tidak kalah menarik
-jQuery Lazy Load (Script mengurangi beban blog)

semua sccripsi di atas ada pada blog saya


 
setelah templatenya sudah agan download extra here winrar (*.ZIP) baca disini
dan jangan lupa pasang provil dengan ALL connect facebook nya dibawah ini

PROVIL <--(KLIK)

ALL CONNECT <--(KLIK)

copy kemudian letakan di add gadget >> HTML/Java Script

perhatikan tataletaknya di bawah ini

klik gambar untuk memperjelas

jika kurang jelas, tanya >>> http://www.facebook.com/messages/yumellodichpunkhead

Banggalah Dengan Pakaian Sendiri

Dark Little Devil Blogger Template




pertama gue mau ngucapin trimakasi buat sahabat gue T i a n (http://n0-galau.blogspot.com/)
yang punya template ini
dengan sedikit modivikasi dari gw,... yaah hasilnya lumayan (y)



 


cari kode dibawah ini:

<li><a href='http://gue-galau.blogspot.com/'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6gqdALAr0nIPc6oRqrzKCpjKUb5FZNyNVNGdcnBfliN_4f8j4UB3kZvvzrq-5Z5Itw5lggKw55QFboK-s0UhWMBithjeW3GfpAZkZh1ODSftkgRtnoNQ8E7L6Idd0H9c8Lq6rtPcg-GBP/s1600/icon-home.png' title='Home'/></a></li>
<li><a href='#' title='Trick'>Trick</a>
<ul>
<li><a href='#' title='blogger'>blogger</a></li>
<li><a href='#' title='facebook'>facebook</a></li>
<li><a href='#' title='photoshop'>photoshop</a></li>
</ul></li>
<li><a href='#' title='blog content'>blog content</a><ul>
</ul></li>
<li><a href='#' title='JOIN'>JOIN</a>
<ul>
<li><a href='#' title='facebook gue'>facebook gue</a></li>
<li><a href='#' title='grub gue'>grub gue</a></li>
<li><a href='#' title='page gue'>page gue</a></li>
</ul></li>
<li><a href='#' title='Hacking'>Hacking</a></li>
<li><a href='#' title='My Sound Track'>Sound Track</a></li>
<li><a href='#' title='Admin'>IAdmin</a>
<ul>
<li><a href='http://goo.gl/ilzlt' title='Gue-galau.blogspot.com'>Gue-galau.blogspot.com</a></li>
</ul></li>
<li><a href='#' title='Link.Exc'>Link.Exc</a></li></ul>

ganti yang berwarna merah dengan link kalian

untuk memasang connect facebook tinggal copy scripsinya diSINI
dan letakan di  ADD gatget >> HTML/JavaScript



jika ingin merubah tampilan arsip blog menggunaka JQUERY seperti gambar di atas: copy kode di bawah ini
dan letakan di ADD gatget >> HTML/JavaScript


<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: transparent;cursor:pointer;}
html .blogtabs h2.active {background: #306fc7;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: transparent;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://gue-galau.mywapblog.com/files/simpletabviewjquery-js.txt"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>



Perhatikan penempatan scripsinya:



Nb: template ini sedikit berat. jadi jika kalian memasang facebook connect kedalamnya, kemungkinan besar 50%Blog terkunci

utilize the excess 

Black Lightning Blogger Template


kali ini gue postingin versi ke-3 dari template gue, Black Lightning yang jelas 100% editan sendiri :p
langsung aja yuk.....!!! (no bawel)

 


ALL CONNECT nya diSINI

Copy dan letakan di  ADD gatget >> HTML/JavaScript

untuk mengganti gambar header dan welcome connect facebooknya ke rancangan >> edit HTML

lalu cari URL gambar dibawah ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyO_jxQ3Ck2PP7S3ia-rn3gE30CFVTQzG2lpST6bU9DUzjFczlIwUageFfDChUrYGlyKrk0YFeGiW5HaLTQeiaopRBfhToN3c2evWRgsAJvXbYNwwz3dsiIWFx7lzGcD0-i8AXXozSpU/s1600/header+gue-galau.blogspot.com.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17VB4wfFOgU4rOHsd_nZSe3ffTqH2nnzL_OHgvkdZzKPy0EHBUU-MULpe0a116Q0gipp6iHvdgsyyX5B7IYubvUay9l13W0a-AMIXOaJpOu2kOk_HdrvYmcA95U9Q27bPmx_UBHm8eHfd/s1600/connect+to+facebook+gue-galau.png

kemudian ganti dengan URL gambar kalian


Selamat Beriimajinasi

Dark Devil CSS Blogger Template



haduuh... capek yaa rasanya kalo tiap hari ngurusin template mulu
uda haus, laper, ehh puasa pula xixixixi...!!!
buat sahabat galauvers ni experimen baru gue siap download


read more dengan sentuhan CSS


 

setelah mendownload template di atas
 letakan ALL connect di bawah ini di ADD gatget >> HTML/JavaScript



<div style="text-align: center;">
<div  style="-moz-border-radius:10px; border-radius:20px; padding:20px;  background: #000000;">
<div  style="-moz-border-radius:5px; border-radius:10px; padding:10px;  background: #333333;">
<fb:profile-pic uid="loggedinuser" size="normal"></fb:profile-pic>
<div style="text-align: center;">
<div  style="-moz-border-radius:5px; border-radius:10px; padding:10px;  background: #000000;">
<fb:name uid="loggedinuser" useyou="false" linked="false"></fb:name></div></div></div></div></div>
<script type="text/javascript">
<!--
//jaga-jaga kalo elements gak ada..
  if(!document.getElementById('fb-root')){
    document.write('<div id="fb-root"></div>');
  }
  if(!document.getElementById('facebook-propic')){
    document.write('<img id="facebook-propic" src="" style="display:none;"/>');
  }
  if(!document.getElementById('block-login-aing')){
    document.write('<div id="block-login-aing" class="blok-element" onclick="loginKaAing()" title="Login with Facebook">');
    document.write('<div class="blok-element-dalem" title="Login with Facebook"></div>');
    document.write('</div>');
  }
//Global Variable..
  var idAplikasi = '337732132937612';
  var idUserYgLogin = '';

  var blokLoginElment = document.getElementById('block-login-aing');
  var tempatGambarPropil = document.getElementById('facebook-propic');
//-->
</script>
<script type="text/javascript">
<!--
function loadAplikasiAing(appid){
  window.fbAsyncInit = function() {
    FB.init({appId: appid, status: true, cookie: true, xfbml: true, oauth: true});
    var getLoginGagal = setTimeout("titahLoginHeula()",30000);

    FB.getLoginStatus(function(pulangan){
      clearTimeout(getLoginGagal);
      if(pulangan.authResponse && pulangan.authResponse.userID){
        idUserYgLogin = pulangan.authResponse.userID;
      }else{
        titahLoginHeula();
      }
      tulisDitelLoginAing(pulangan);
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = 'true';
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
}

function titahLoginHeula(){
  blokLoginElment.style.display='block';
}

function loginKaAing(){
  FB.login(tulisDitelLoginAing,{scope:'status_update,user_status,friends_status,read_stream,publish_stream,share_item,publish_actions'});
}

function tulisDitelLoginAing(tahMere){
  if(tahMere.authResponse){
    if(tahMere.authResponse.userID){
      idUserYgLogin = tahMere.authResponse.userID;
      tempatGambarPropil.src='http://graph.facebook.com/'+tahMere.authResponse.userID+'/picture?type=large';
    }
  }
  if(tahMere.status){
    if(tahMere.status=='connected'){
      blokLoginElment.style.display='none';

//execute scripts setelah sesi connect facebook selesai..
      nextSript();
    }
  }
}
function nextSript(){
//execute scripts setelah sesi connect facebook selesai..
  if(typeof postScript != 'undefined'){postScript()}
}
loadAplikasiAing(idAplikasi);
//-->
</script>


jangan lupa ganti ID aplikasi  337732132937612 dengan ID aplikasi punya sendiri :p


dan yang perlu agan rubah:



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL67am1TxYuZV64yUY5IBBpYmIvFEfV41RhCLoX5cq4z9O6ns41GukpsQ_Uw-rKtbp3yfTsTn9pki3xRrtq6Ss81FvoYsN73tBwNyKmRVfXtr32OwmcmlFehPnmpyv9HUsP3fh0DcCthEK/s1600/header+gue-galau+1.png.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-f4bc5GRkZ1jKO_qVa3BSMTTQrLiksDceqhnM-hGvd49GS3elWGqzXEwagy2N1Ti8iPdHBrCtwlZ5-npYUWLpOa9V14ljXokPLyctb2tEAyZxg2zNtEZvP8_S1dF2XQ0zDWDA5FNZAiX/s1600/header2+gue-galau.blogspot.com.png.png




NB: GUNAKAN GOOGLE CHROME UNTUK TAMPILAN YANG LEBIH MAKSIMAL


blue-silver blogger template


nah kali ini saat yang di nanti-nanti karna saya akan bagikan blue-silver blogger template
template ini sangatlah sempurna (di MATA gue XD)
dan template ini hasil buatan saya sendiri.. tanpa campur tangan dengan rekan blogger lain :p
sombonglah sedikit nape ....... xixixixi
gue bisa, masa lo kagak?






untuk pemasangan provil dengan allconnect nya
letakan kode di bawah ini di add gadget >> HTML/Java Script



<div style="-moz-border-radius: 10px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcKfbuY_vB8jpUs4Z3nMVwoXuEAQoTwSpgmdzOrjk6xq5_j_5DKx39sKEb5mfcVWurCJa9yUcaqfuBMRUKeqzVrenB5U0XljLDy1lF4_ZxI6zfKXJcfTsU6F27wykh0eKHLSXVpwVgQZ-/s1600/black70.png); border-radius: 10px; padding: 10px;"> <div style="text-align: center;"> <div style=" -moz-border-radius: 0px 0px 0px 0px; border-radius: 10px; border: 1px solid #ccc; margin: 0; overflow: auto;"> <fb:profile-pic size="normal" uid="loggedinuser"></fb:profile-pic> </div> <div style=" -moz-border-radius: 5px; border-radius: 10px; border: 1px solid #ccc; margin: 0; overflow: auto;"> <div style="text-align: center;"> <span style="color: red; font-size: large;"><fb:name linked="false" uid="loggedinuser" useyou="false"> </fb:name></span></div></div></div></div>

<script type="text/javascript">
<!--
//jaga-jaga kalo elements gak ada..
  if(!document.getElementById('fb-root')){
    document.write('<div id="fb-root"></div>');
  }
  if(!document.getElementById('facebook-propic')){
    document.write('<img id="facebook-propic" src="" style="display:none;"/>');
  }
  if(!document.getElementById('block-login-aing')){
    document.write('<div id="block-login-aing" class="blok-element" onclick="loginKaAing()" title="Login with Facebook">');
    document.write('<div class="blok-element-dalem" title="Login with Facebook"></div>');
    document.write('</div>');
  }
//Global Variable..
  var idAplikasi = '337732132937612';
  var idUserYgLogin = '';
  var blokLoginElment = document.getElementById('block-login-aing');
  var tempatGambarPropil = document.getElementById('facebook-propic');
//-->
</script>
<script type="text/javascript">
<!--
function loadAplikasiAing(appid){
  window.fbAsyncInit = function() {
    FB.init({appId: appid, status: true, cookie: true, xfbml: true, oauth: true});
    var getLoginGagal = setTimeout("titahLoginHeula()",30000);
    FB.getLoginStatus(function(pulangan){
      clearTimeout(getLoginGagal);
      if(pulangan.authResponse && pulangan.authResponse.userID){
        idUserYgLogin = pulangan.authResponse.userID;
      }else{
        titahLoginHeula();
      }
      tulisDitelLoginAing(pulangan);
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = 'true';
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
}
function titahLoginHeula(){
  blokLoginElment.style.display='block';
}
function loginKaAing(){
  FB.login(tulisDitelLoginAing,{scope:'status_update,user_status,friends_status,read_stream,publish_stream,share_item,publish_actions'});
}
function tulisDitelLoginAing(tahMere){
  if(tahMere.authResponse){
    if(tahMere.authResponse.userID){
      idUserYgLogin = tahMere.authResponse.userID;
  tempatGambarPropil.src='http://graph.facebook.com/'+tahMere.authResponse.userID+'/picture?type=large';
    }
  }
  if(tahMere.status){
    if(tahMere.status=='connected'){
      blokLoginElment.style.display='none';

//execute scripts setelah sesi connect facebook selesai..
      nextSript();
    }
  }
}

function nextSript(){
//execute scripts setelah sesi connect facebook selesai..
  if(typeof postScript != 'undefined'){postScript()}
}

loadAplikasiAing(idAplikasi);
//-->
</script>


merah ganti dengan ID aplikasi kalian

dan jangan lupa seting Posting Blog lihat gambar di bawah


setelah kalian klik EDIT pada posting akan muncul halaman seperti di bawah ini


rubah Jumlah posting di halaman utama 1 post saja
karena template ini tdk menggunakan read more


dan jika klian ingin menggabungkan Explore The Archive/category/What's Awesome
seperti gambar:

letakan kode di bawah ini tepatnya di atas Explore The Archive/category/What's Awesome 


<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: transparent;cursor:pointer;}
html .blogtabs h2.active {background:transparent url(http://images2.layoutsparks.com/1/129832/flashy-black-animated-image.gif);}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: transparent;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

ғь gue-galau.blogspot.com ™ slalu menciptakan hall yang baru

Miku Orange Blogger Template



Apa kabar sobat? akhirnya selesai juga Miku Orange Blogger Template.Template kali ini tema'a dengan warna dasar orange.desain'a saya buat simple dengan sedikit sentuhan CSS :p.
awalnya sedikit kesulitan cari gambar header yang bagus,trus nemu material gambar di google , terpaksa edit sendiri,croping sendiri,ngerender sendiri \('O')/..

template ini Versi ke2 dari template Dark Devil yang jelas 100% buatan sendiri XD
tanpa basa basi sedot aja gan....





yang perlu kalian rubah:

Rancangan >> Edit HTML >>(jangan lupa centangin Expand Template Widget nya)


<li class='current-cat'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#' title='about'>about</a></li>
<li><a href='#' title='about'>CSS</a></li>
<li><a href='#' title='about'>HTML</a></li>

merah ganti dengan link kalian

header 1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7sBJ81Kk1MYePgZOHpQYsSvcdGlt2pvF9N9nOsdOT1rC9LCWoXGmR3NvQ97ZJlmlywnpl-NiVHHefYW5kpFSOf2F1583UYi9Xh4kl7EVBZMCImc6piHwXvCu-wvfQhVPeNf2noRr-WhM/s320/header+orange+gue-galau.blogspot.com.jpg

header 2


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN-f4bc5GRkZ1jKO_qVa3BSMTTQrLiksDceqhnM-hGvd49GS3elWGqzXEwagy2N1Ti8iPdHBrCtwlZ5-npYUWLpOa9V14ljXokPLyctb2tEAyZxg2zNtEZvP8_S1dF2XQ0zDWDA5FNZAiX/s1600/header2+gue-galau.blogspot.com.png


JADILAH YANG PERTAMA BERIMAJINASI

Gorillaz Blogger Template





Yang Perlu kalian Rubah:

Raccangan >> edit HTML >> gunakan CNTRL+F cari kode dibawah ini


<div id='BCXmenu'>
<ul>
<li>
<a href='http://goo.gl/ii6ZC'>Home</a>
</li>
<li>
<a href='http://goo.gl/iI9lE'>Tricks</a>
</li>
<li>
<a href='http://goo.gl/MqDU6'>All</a>
</li>
<li>
<a href='http://goo.gl/K3Fzc'>Facebook</a>
</li>
<li>
<a href='http://goo.gl/zBcGs'>Blogger</a>
</li>
<li>
<a href='http://goo.gl/Y2JFf'>Template</a>
</li>
<li>
<a href='http://goo.gl/NU58w'>Admin</a>
</li>
</ul>
</div>


Merah Ganti Dengan Link Kalian

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Yrtfezgh8-OrlSVLyQeKIf4D7bgZ8W659pteYFek59qWbSAfU4pQUwm00TFvTt261piU4UViT24mxJE0HvBhy336byR3A4ZIfZIFr0jZnGiiClr1vXkJ7rcg_iCgZgXpWCiX4g4RgHs/s1600/background_gue-galau.png

Jumat, 07 September 2012

AddThis Floating Horizontal Share Bar Untuk Blogger



AddThis adalah salah satu situs share and boomarks yang keberadaannya sangat membantu para blogger. Widget AddThis banyak sekali di gunakan oleh para blogger tidak lain tidak bukan karena mereka ingin agar pengunjung bisa membagikan artikel atau keberadaan blog mereka kepada teman-teman yang lain.

Di artikel ini saya akan berbagi widget addthis kembali kepada Anda, dan kali ini temanya adalah AddThis Floating Horizontal Share Bar Untuk Blogger. Widget ini sangat keren, akan melayang di bagian atas dan disertai tombol close.

Yang perlu Anda kethui bahwa widget ini diciptakan oleh AddThis.com dan saya merubah gadget ini agar bekerja dengan sempurna pada blog Anda.

Saya telah membuat instalasi semudah mungkin karena Anda hanya harus menyalin dan menyisipkan dua potongan kode. Sekarang lihat demo terlebih dahulu sebelum menerapkannya pada blog Anda.



 Cara Menginstal AddThis Floating Horizontal Share Bar Untuk Blogger



1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Sekarang temukan kode </head>

4. Sekarang letakkan kode berikut tepat di atas kode tadi.
<script type="text/javascript"> var addthis_config = {     bar_show_below : 150 } </script> <script type="text/javascript" src="http://gue-galau.googlecode.com/files/shareThispage.js"></script>

5. Selanjutnya temukan kode </body> dan letakkan kode berikut tepat di atasnya.
<div class="addthis_bar addthis_bar_medium">     <label>Share This Page:</label>     <div class="addthis_toolbox addthis_default_style addthis_32x32_style">         <span><a class="addthis_button_preferred_1"></a></span>         <span><a class="addthis_button_preferred_2"></a></span>         <span><a class="addthis_button_preferred_3"></a></span>         <span><a class="addthis_button_preferred_4"></a></span>         <span><a class="addthis_button_compact"></a></span>         <span><a class="addthis_counter addthis_bubble_style"></a></span>     </div> </div>

6. Simpan template.

Sekarang Anda bisa lihat hasilnya pada blog Anda!

Kamis, 23 Agustus 2012

Membuat Kotak Menu Keren

akhirnya lebaran tlah usai uda lama juga gak ngPOST CIN.. wokwkwokw
oke cuyy.. langsung saja ke TKP


copy dan letakan kode di ADD gatget >> HTML/JavaScript


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
  Javascript Menu ala GUE-GALAU
</script>

<style type="text/css">
.brianganteng{
      background: url(http://www.themebin.com/wp-content/uploads/hd-wallpapers/1920x1200/skull_1920x1200.png) top left repeat;
      padding: 8px 3px 3px; 
      float: left;
      margin: 20px 5px 0;
      border: 2px solid #666;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      box-shadow: 1px 4px 15px #000;
      -moz-box-shadow: 1px 4px 15px #000;
      -webkit-box-shadow: 1px 4px 15px #000;
      }
.brianganteng span {
      font: 16px Copperplate Gothic Bold; 
      font-weight: bold; 
      color: #5a5a5a; 
      padding: 5px;
      text-shadow: 1px 4px 2px #000; 
      } 
.brian { 
      font-family: Copperplate Gothic Bold;
      font-size: 11px;
      }
ul#GRcollaps { 
      background: transparent;
      }
ul#GRcollaps, ul#GRcollaps ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      width: 200px; 
      }
ul#GRcollaps a {
      font: 12px Helvetica;
      display: block;
      text-decoration: none; 
      }
ul#GRcollaps li {
      margin-top: 1px;
      }
ul#GRcollaps li a {
      background: #333; 
      border: 2px solid #ffff;
      color: #fff; 
      padding: 0.5em;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;   
      }
ul#GRcollaps li a:hover { 
      border-color: #fff; 
      border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkitborder-radius: 8px;
      background: #000;
      }
ul#GRcollaps li ul li a { 
      background: #ccc; 
      padding: 0.2em 0.5em;
      color: #000;
      padding-left: 20px;
      -o-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -webkit-transition: all 1s ease-out;
      border-left: 5px #777 solid; 
      border-right: 3px #ccc solid;
      border-top: 3px #ccc solid; 
      border-bottom: 3px #ccc solid; 
      opacity: 0.8;
      }
ul#GRcollaps li ul li a:hover {
      background: #666;
      border-left: 15px #000 solid; 
      border-right: 3px #000 solid;
      border-top: 3px #000 solid; 
      border-bottom: 3px #000 solid; 
      padding-left: 15px;
      opacity:  1.0;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      }
</style>
<script type="text/javascript">
function initMenu() {
$('#GRcollaps ul').hide();
$('#GRcollaps li a').click(
function() {
$(this).next().slideToggle('slow');});}
$(document).ready(function() {initMenu();});
</script>

<div class="brianganteng"><span>Menu</span>
<div class="brianganteng">
<ul id="GRcollaps">
    <li>
    <a href="javascript:;">TITLE</a>
        <ul>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
        </ul>
    </li>

    <li>
    <a href="javascript:;">TITLE 2</a>

        <ul>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
        </ul>
    </li>

    <li>
    <a href="javascript:;">TITLE 3</a>

        <ul>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
        </ul>
    </li>

   <li>
   <a href="javascript:;">TITLE 4</a>

     <ul><li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
        </ul>
    </li>

    <li>
    <a href="javascript:;">TITLE 5</a>
        <ul>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
        </ul>
    </li>

    <li>
    <a href="javascript:;">TITLE 6</a>
        <ul>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
            <li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
        </ul>
    </li>
</ul> 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://gue-galau.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.localexchange.org.uk/new/images/localx_home.png" /></a></div>
</div>
</div>




sumber: BRIYAN
Share