» » MozWidget Button

MozWidget Button

    Label: Blogspot


MonozCore Widget Button (MozWidget Button) merupakan tombol (button) yang menggunakan gambar atau animasi gambar yang unik dan menarik. MozWidget Button ini berfungsi untuk memfokuskan tampilan penting yang ada di halaman situs seperti iklan, sponsor, informasi aktual, dll. Selain itu MozWidget Button juga bisa digerakan dan dipindahkan posisinya. Sebagai contoh coba anda klik dan tahan gambar di bawah kemudian anda drag (gerakan) gambar tersebut.

Contoh :
Klik Gambar Gatot Kaca

Cara Pemasangan :
  • Login ke blog anda.
  • Klik "Design" kemudian klik "Edit HTML".
  • Centang "Expand Widgets Templates' box". 
  • Jika anda sudah menggunakan jquery versi 1.4 keatas silakan anda lewati langkah ini. Jika anda belum menggunakan jquery silakan anda copy-paste kode di bawah ini tepat di atas kode </Head>.

    <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'/>

  • Berikut merupakan kode style HTML dan javascriptnya. Silakan anda copy-paste kode di bawah ini dan taruh di atas kode </Head> atau setelah script jquery.

    <style type='text/css'>
    .adsclick{
    position:fixed;
    bottom:30px;
    right:0px;
    z-index:2;
    }
    #transBG {
    background-color:#000;
    z-index:100;
    display:none;
    position:fixed;
    opacity: 0.95;
    }
    #popup {
    width:auto;
    height:auto;
    padding:10px;
    z-index:101;
    background-color:#fff;
    display:none;
    position:fixed;
    color:White;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    box-shadow: 0 0 1px #fff;
    -moz-box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#658da0;
    background: -moz-linear-gradient(center left, rgba(255,249,71,0.55), rgba(191,186,53,0.55) 50%, rgba(255,249,71,0.55));
    }
    </style>

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;a[name=mod]&#39;).click(function(e) {
    e.preventDefault();
    var id = $(this).attr(&#39;href&#39;);
    var bgHeight = document.documentElement.clientHeight;
    var bgWidth = document.documentElement.clientWidth;
    $(&#39;#transBG&#39;).css({&#39;width&#39;:bgWidth,&#39;height&#39;:bgHeight});
    $(&#39;#transBG&#39;).fadeIn(&quot;fast&quot;);
    var winH = document.documentElement.clientHeight;
    var winW = document.documentElement.clientWidth;
    $(id).css(&#39;top&#39;,  winH/2-$(id).height()/2);
    $(id).css(&#39;left&#39;, winW/2-$(id).width()/2);
    $(id).slideDown();
    });
    $(&#39;#close&#39;).click(function (e) {
    e.preventDefault();
    $(&#39;#transBG, #popup&#39;).fadeOut(&quot;slow&quot;);
    });
    $(&#39;#transBG&#39;).click(function () {
    $(this).fadeOut(&quot;slow&quot;);
    $(&#39;#popup&#39;).slideUp();
    });
    });
    </script>
    <style type='text/css'>
    .drag{
    position:relative;
    cursor:move;
    z-index: 100;
    }
    </style>
    <script src='http://monozcore-project.googlecode.com/files/DragnDrop.js' type='text/javaScript' />

    • Kode (bottom:30px;right:0px;) yang berwarna biru merupakan letak posisi tombol. Untuk merubah posisi anda tinggal merubah kode (bottom:30px;right:0px;), contoh jika anda ingin meletakan tombol di pojok kiri atas dengan posisi dari atas sebesar 30 pixel dan kiri sebesar 5 pixel anda tinggal mengganti kode (bottom:30px;right:0px;) dengan (Top:30px;left:5px;). Berikut keterangan kode posisi.
      - Bottom // Letak Bawah
      - Right   // Letak Kanan
      - Top     // Letak Atas
      - Left    // Letak Kiri
    • Kode style yang berwarna hijau merupakan kode warna background untuk mengganti warna background silakan anda masukan kode warna dalam hexadesimal atau dalam kode warna RGB.
    • Kode style yang berwarna ungu merupakan kode untuk men-drag tombol.

  • Berikut merupakan kode HTML silakan anda copy-paste kode di bawah ini dan taruh setelah kode <Body>.
    <div id='transBG'/>
    <div id='popup'>
    Taruh kode script atau kode HTML anda disini... Taruh kode script atau kode HTML anda disini... Taruh kode script atau kode HTML anda disini...
    <br/><div style="text-align:center;color:#fff;font-size:60%;text-shadow:black 0.1em 0.1em 0.1em"><a href="http://monozcore.blogspot.com/2012/01/mozwidget-button.html" title="MonozCore Blog Widget" target="blank" style="text-decoration:none;color:#fff;">Get this widget</a></div></div><div><a class='adsclick' href='#popup' name='mod'><img class='drag' src='https://lh3.googleusercontent.com/-CObEmNDVySY/TvNc2lShP_I/AAAAAAAAAqc/QE0arTo33E4/s800/Gundam.png'/></a></div>
    • Baris kode yang berwarna biru merupakan tempat anda menaruh kode HTML / Javascript yang ingin anda tampilkan.
    • Baris kode yang berwarna ungu menrupakan URL gambar tombol. Silakan anda ganti URL gambar diatas dengan URL gambar yang ingin anda gunakan.

  • Klik "Save" dan lihat hasilnya...
Mohon cendolnya yaa biar kreasinya tambah keren dan bermanfaat. Buat yang masih bingung seputar pemasangan Blog Code ini silakan tanyakan melalui kotak komentar...

.:Semoga Bermanfaat:.
    MozWidget Button 4.5 5 Unknown MonozCore Widget Button (MozWidget Button) merupakan tombol (button) yang menggunakan gambar atau animasi gambar yang unik dan menarik. MozW...


    Label:

    Tidak ada komentar:

    Posting Komentar