Cara Buat Mini Box Untuk Blog Dengan JQuery

Cara 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 ]]> Lalu Copy Code Dibawah ini Dan Taruh Diatas Kode ]]> 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 Dan Letakkan Kode Dibawah Tepat Di Atas Kode Tersebut.

  • 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.

    <a href="#“>JUDUL 2

    Title Anda Di sini

    <a href="#“>JUDUL 3

    Title Anda Di sini

    <a href="#“>JUDUL 4

    Title Anda Di sini

    Catatan:

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

  • Lihat Hasilnya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s