Pages

2

Buat Mini Box Untuk Blog Dengan JQuery

Pada Tutorial Blog Kali ini Saya Akan Bagikan Cara Membuat Mini Box Dengan JQuery Yang Bisa Mempercantik Blog Sobat Semua dan Saya Tidak Bisa Menjelaskan Apa itu Mini Box Tapi Saya Sudah Mempersiapkan Contohnya Lengkap Tutorial Pembuatannya.


Buat Sobat Yang Ingin Menerapkan Pada Blog Sobat Silahkan Sobat Simak Dibawah ini.
  • Login Ke Akun Blogger Sobat.
  • Pilih Rancangan Lalu Pilih Edit HTML Dan Centang Expand Template Widget
  • Carilah Kode ]]></b:skin> Lalu Copy Code Dibawah ini Dan Taruh Diatas Kode ]]></b:skin> Tersebut.

    /* Mini Box */

    .minibox{
    width:350px;
    height:350px;
    margin:0 auto;
    position:relative;
    }
    .minibox > div{
    position:absolute;
    width:90px;
    height:90px;
    text-align:center;
    border:3px solid #ff6633;
    overflow:hidden;
    background-color:#ff6633;
    -moz-box-shadow: 0px 0px 20px #ff6633;
    background-position:center center;
    z-index:999;
    }
    .minibox div a{
    text-transform:uppercase;
    font-size: 18px;
    font-weight:bold;
    letter-spacing:-1px;
    display:block;
    line-height:90px;
    text-decoration:none;
    color:#fff;
    background:-moz-linear-gradient(top, #000,#ff6633, #000);
    outline:none;
    text-shadow:1px 1px 1px #000;
    -moz-box-shadow: 0px 0px 20px #ff6633;
    -webkit-box-shadow:1px 1px 3px #001100;
    -moz-box-shadow: 0px 0px 20px #ff6633;
    }
    .minibox div.boxcontent{
    width:334px;
    height:246px;
    text-align:left;
    padding:10px;
    font:12px verdana;
    color:#fff;
    background-color:#001100;
    border:2px solid #ff6633;
    margin:10px 0px 0px 10px;
    text-shadow:1px 1px 1px #fff;
    -moz-box-shadow:1px 1px 3px #777;
    -webkit-box-shadow:1px 1px 3px #777;
    box-shadow:1px 1px 3px #777;
    opacity:0.8;
    display:none;
    }
    .bg1, .bg2, .bg3, .bg4{
    background-repeat:no-repeat;
    }
    .bg1{
    background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/filiexjin.jpg);
    }
    .bg2{
    background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/filiexjin.jpg);
    }
    .bg3{
    background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/filiexjin.jpg);
    }
    .bg4{
    background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/filiexjin.jpg);
    }
    .bg5{
    background-image:url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/filiexjin.jpg);
    }

  • Setelah itu Cari Kode </head> Dan Letakkan Kode Dibawah Tepat Di Atas Kode Tersebut.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
    <script src='http://filiex.googlecode.com/files/jQuery_1.3.js' type='text/javascript'/>
    <script src='http://filiex.googlecode.com/files/Mini_Boxes_jQuery.js' type='text/javascript'/>

  • Lalu Simpan Tamplate Anda.
  • Terakhir Sobat Pikir Pikir Dulu Deh Lokasi Penempatan Mini Box nya Dan Kalau Udah Ada Tempatnya Silahkan Sobat Masuk Ke Element Halaman Lalu Tambah Widget Dan Pilih HTML/Javasript Selanjutnya Taruh Kode dibawah Lalu Simpan.

    <div id="minibox" class="minibox">
    <div class="boxlink bg1" style="top:0px;left:0px;">
    <a href="#">JUDUL 1</a>
    <div class="boxcontent">
    <p><span style="color: #274e13;">Title Anda Di sini</span></p>
    </div></div>
    <div class="bg5"style="background-position:-90px 0;top:0px;left:95px;"></div>
    <div class="bg5"style="background-position:-180px 0;top:0px;left:190px;"></div>
    <div class="bg5"style="background-position:-270px 0;top:0px;left:285px;"></div>
    <div class="bg5"style="background-position:0 -90px;top:95px;left:0px;"></div>

    <div class="boxlink bg2"style="top:95px;left:95px;">
    <a href="#">JUDUL 2</a><div class="boxcontent">
    <p><span style="color: #274e13;">Title Anda Di sini</span></p>
    </div></div>
    <div class="bg5"style="background-position:-180px -90px;top:95px;left:190px;"></div>
    <div class="bg5"style="background-position:-270px -90px;top:95px;left:285px;"></div>
    <div class="bg5"style="background-position:0 -180px;top:190px;left:0px;"></div>
    <div class="bg5"style="background-position:-90px -180px;top:190px;left:95px;"></div>
    <div class="boxlink bg3"style="top:190px;left:190px;">
    <a href="#">JUDUL 3</a><div class="boxcontent">
    <p><span style="color: #274e13;">Title Anda Di sini</span></p></div></div>
    <div class="bg5"style="background-position:-270px -180px;top:190px;left:285px;"></div>
    <div class="bg5"style="background-position:0 -270px;top:285px;left:0px;"></div>
    <div class="bg5"style="background-position:-90px -270px;top:285px;left:95px;"></div>
    <div class="bg5"style="background-position:-180px -270px;top:285px;left:190px;"></div>
    <div class="boxlink bg4"style="top:285px;left:285px;">
    <a href="#">JUDUL 4</a>
    <div class="boxcontent">
    <p><span style="color: #274e13;">Title Anda Di sini</span></p>
    </div></div></div>

    Catatan:
    • Gantilah Tanda # Dengan Link Sobat.
    • Gantilah Judul Yang Berwarna Merah Dengan Nama Judul Sobat.

  • Lihat Hasilnya
Selamat Mencoba Dan Semoga Sukses

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

2 comments: