Ingat Waktu Coy

NavBar

Ext CSS

31 July 2013

Menu Info Slide

·

✔ Cara Membuat Menu Info Slide


   
Menu ini isinya bisa anda Edit sendiri,tanpa di Klik akan melayang keluar bila tersentuh Cursor Langsung aja Sobat kita menuju TKP lihat bagaimana caranya,,,,
Berikut Langkah-langkahnya ;
  • Login Ke Akun Blog Anda
  • Pilih Rancangan -->Elemen Laman/edit tata letak
  • Klik Tambah Gadget -->pilih HTML/Javascript
  • Copy Paste Kode dibawah ini ke dalam Gadget.
<style type="text/css">#info-cueros {z-index: 1000;background:-moz-linear-gradient(top,  #1F2326,  #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-cueros{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-cueros:hover{width:400px;opacity:1.0;margin-left:0;}.Cuerosinbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Cuerosinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Cuerosinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.cueros15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Cueros2 ul.bom {margin: 0; padding: 0;}.Cuerosinbox2 li {margin-left:20px;}.Cuerosinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Cuerosinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Cuerosinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Cuerostouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Cuerostouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>




<div id="info-cueros"><span class="Cuerostouch">Info</span>
<div class="Cuerosinbox"><div class="Cuerosinbox2 cueros15">
<h2>


<div style="text-align: center;">
<b><span style="font-family:Comic Sans MS;"><span style="color:red;">
SELAMAT DATANG</span></span></b></div></h2><b><div style="text-align: center;">
<b><span style="font-family:Comic Sans MS;"><span style="color:yellow;">
Kami ucapkan terima kasih banyak atas kunjungan anda selamat menikmati dan semoga bermanfaat<p></p>
<h2><div style="text-align: center;">
<b><span style="font-family:Comic Sans MS;"><span style="color:red;">ABOUT ME</span></span></b></div></h2><b><img src="http://i1206.photobucket.com/albums/bb455/binkbenk/elmodance.gif" height="80x" width="100px" />
<a href="http://www.twitter.com/binkbenkdjoel"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-c.png" alt="Follow binkbenkdjoel on Twitter"/></a>
<p style="text-align:justify">
</p><div style="text-align: center;">
<b><span style="font-family:Comic Sans MS;"><span style="color:yellow;">
Aku bukanlah seorang Blogger , aku hanya pengen belajar sesuatu hal yang baru dan juga pengen berbagi sesuatu  yang mungkin bisa bermanfaat<p>
</p><div style="text-align: center;">
&nbsp;<span style="font-size: large;">
<b><span style="font-family:Comic Sans MS;"><span style="color:red;">My Inspiration</span></span></b></span></div><b>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/posisicameraapas212-1.jpg" height="100x" width="60px" />
<p></p>
</b></span></span></b></div><b><b>
</b></b></b></span></span></b></div></b></div></div></div>
  • Ganti Tulisan yang berwarna merah , sesuai keinginan anda , Kode warna biru Ganti dengan kode URL gambar anda.
  • Bila sudah Klik simpan dan lihat hasilnya
Selamat mencoba.................
Narasumber;tejahtc.blogspot.com/
  1. wah thanks banget ni brO....Postingan eNte benar2 Top Abis......aNe udah pAsang dibLog aNe...skLi Lgi thAnks ya

    BalasHapus
  2. Oh iyA brO aNe Lupa....cara bUat Twitter kebuka ke tab brU gimn ya....???

    BalasHapus
  3. @iman tamnge
    Makasih sobat semoga bermanfaat.....cara buat Link kebuka ditab baru tambahin kode (target="_blank") dibelakang Link nya Seperti ini contohya;
    "http://www.twiter.com/nama sobat" target="_blank"
    hehehe...Salam kenal ya sob

    BalasHapus
  4. mantaps bang, sukses selalu

    BalasHapus
  5. Mantap bang, terima kasih atas ilmunya

    BalasHapus
  6. om ane boleh minta ilmunya ngga cara membuat iframe situs di blog full page gmna sihh kaya gini http://cuerosbhelatos.blogspot.com/p/portal.html

    BalasHapus
    Balasan
    1. itu pakai CSS dan JS bukan iframe

      Hapus

0 comments:

All Connect