Buat dia melayang

hai.. kembali lagi bersama saya di blog saya dengan tampilan baru ini.. template nya masih sama tapi gaya nya yang beda. hehehe.. posting hari ini adalah cara membuat widget melayang...kamu bisa meletak apa aja disini..
tu terserah kamu.. demonya langsung saya tampilkan disini.. tu diatas...gimana...mau coba ya udah kalo mau kamu tinggal ikuti langkah langkahnya.. Cekidot


  • Loggin blogger.com
  • Rancangan>>Tambahkan gadget>>HTML/Javascript
  • Lalu copy code berikut



<style type='text/css'>.tejahide {z-index: 1000;height: 15px;width: 500px;border: 2px solid #666666;background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));border-radius: 12px;-moz-border-radius: 12px;-webkit-border-radius: 12px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;padding: 5px 5px;margin: 15px auto;font: 11px Arial;color: #003366;overflow: hidden;box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.tejahide:hover {min-height: 305px;border: 2px solid #333333;background: transparent;box-shadow: 0 1px 15px #000;-moz-box-shadow: 0 1px 15px #000;-webkit-box-shadow: 0 1px 15px #000;color: #000; text-shadow: 0 1px 1px #888;}.tejahide h3, .isiteja h3 {font-size: 14px;font-family: Droid Serif;font-weight: bold;color: #ffffff;text-align: center;text-shadow: 0px 1px 1px #fff; margin: 3px 5px;background: #000;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #999;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;}.tejahide h3:hover {box-shadow: 0 1px 8px #000;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;}.tejahide img.mini, .tejahide img.minianima {width: 500px;border: 4px solid #666;padding: 3px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;float: left; margin: 0 10px 5px 0;background: #222;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.tejahide img.mini:hover, .tejahide img.minianima:hover {box-shadow: 1px 1px 15px #000;-moz-box-shadow: 1px 1px 15px #000;-webkit-box-shadow: 1px 1px 15px #000;border: 4px solid #CCCCCC;background :#666;-o-transform: scale(1.4);-moz-transform: scale(1.4);-webkit-transform: scale(1.4);margin-top: 20px;margin-left: 15px;}.tejahide img.minianima:hover {-o-transform: scale(1.4) rotate(360deg) translate(0px);-moz-transform: scale(1.4) rotate(360deg) translate(0px);-webkit-transform: scale(1.4) rotate(360deg) translate(0px);}.isiteja {margin-top: 15px;height:305px;overflow: auto;padding: 0 5px;-o-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out; background:#ddd -moz-linear-gradient(top,#ddd,#000);background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#000));}.isiteja:hover {background: #333;color: #eee;text-shadow: 0 0px 1px #fe0303;}.isiteja h3 {margin: 20px 0;max-width: 380px;margin-left:10px;background: #000;box-shadow: 0 1px 12px #eee;-moz-box-shadow: 0 1px 12px #eee;-webkit-box-shadow: 0 1px 12px #eee;}.columns{clear:both;line-height:22px;padding:0 0 20px;width:380px}.colleft{float:left;line-height:22px;width:120px}.colright{float:center;line-height:22px;width:120px}.isiteja h3:hover {background: #888;border: 1px solid #666;box-shadow: 0 1px 12px #fff;-moz-box-shadow: 0 1px 12px #fff;-webkit-box-shadow: 0 1px 12px #fff;}.isiteja ul {padding: 0;margin: 0;list-style: none;}.isiteja li {padding: 0;margin: 0;list-style: none;border-bottom:1px dotted #777;}.isiteja li a{color: #FF0000;padding: 0;margin: 0;text-decoration:none;font-size: 12px;-o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s;}.isiteja li a:hover {-o-transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);color: red;text-shadow: 0 1px 1px #000;margin-left: 20px;}.tejahide {height: 17px; float:center ;margin-top:0px;z-index: 10000;position: fixed;top:0px;margin-left:235px;} .tejahide h3, .isiteja {font-size: 13px;}</style>
<div class='tejahide'>
<h3>Judulnya!</h3>
KODE GADGET ANDA DISINI
</div>


  • oke simpan dah tu dan lihat hasilya


Semoga bermanfaat



INI DEMO BOS!






Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Yuk Tawa, Published at 02.50 and have 16 komentar

16 komentar:

  1. Balasan
    1. banyak gune lah bise untok letak widget
      demo diatas

      Hapus
  2. ini melayang kayak gimana gan ??

    BalasHapus
  3. pengen mudah tinggal pake
    div style position :D

    BalasHapus
  4. . . serem banget mata nya. huhh. bikin aq gak bisa bo^. huhh . .

    BalasHapus
    Balasan
    1. . . ich,, malah ketawa?!? seneng ya kalo aq begadang gini. huhh. ganti yg lebih unyu^ gitu loh. he..86x . .

      Hapus
    2. . . jiach,, kyk gitu di bilank unyu^. huhh. kayak foto aq gitu loh lbh unyu^ drpd gmbar tu. he..86x . .

      Hapus
    3. iya deh...
      terserah kamu aja

      Hapus
    4. . . wha. . ha. .ha. . ha. . ha. . ha. . ha. . ha. . ha. .

      Hapus
  5. melayang maksdnnya widget melayang ya?ooww thanks lah udah share :D

    BalasHapus