search here and find more articles

Cara Membuat Widget Sidebar Zoom-Out Unik dan Menarik


Widget sidebar memang sangat diperlukan untuk informasi atau jalan pintas pengunjng blog untuk menelusuri lebih jauh tentang isi blog. Isi dari widget bermacam macam ada yang berisi iklan, popular pos, label, ada juga yang memasang widget seperti jam, tanggal dan profile pribadi.

Untuk memasang widget juga sangat mudah kalian tinggal masuk kepengaturan Tata Letak --> Tambah Widget / Gadget --> HTML/ Javascript dan Copy Code.

Nah kali ini blogy ingin membagi costum widget yang beda dari yang lainnya contohnya bisa dilihat di sidebar sebelah kanan atas, jika kalian menyentuh gambarnya akan berubah menjadi besar. Terlihat lebih unik kan dari yang lainya, untuk lebih jelasnya langsung saja kita praktek.

Baca Juga Artikel :

Step 1. Masuk ke pengaturan Template blog --> Edit HTML 

Step 2. Masukkan Code Script ini dibawah kode  ]]></b:skin>
agar lebih mudah mencari kodenya tekan C + F dan pastekan kode ]]></b:skin> 

Code Script


.sidebar-blogdesign {
    background: url('https://4.bp.blogspot.com/-QCUVk3n6uWQ/V1xm_xk8okI/AAAAAAAAEhI/BUuKcstQ78A25kKsvpePBcuVGne1AEMQgCLcB/s1600/mall%2Bblog8.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-blogdesign:hover {
 background-size: 120% auto;
}
.sidebar-vectordesign {
    background: url('https://4.bp.blogspot.com/-ZGkmKJuBWOk/V10GtXOpQKI/AAAAAAAAEh4/Vo-82ioW4-IVmtJQuJYPefckkQibKF5TACKgB/s1600/vector2.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-vectordesign:hover {
 background-size: 120% auto;
}
.sidebar-motiondesign {
    background: url('https://1.bp.blogspot.com/-cH5kR15zKWg/V10KhnSVBKI/AAAAAAAAEiE/O4FN2_IXL8QLmq6n_1AxoANn4nD6dp8BwCKgB/s1600/motions.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-motiondesign:hover {
 background-size: 120% auto;
}
.sidebar-biznisdesign {
    background: url('https://3.bp.blogspot.com/-iN2HXj6LgDM/V10PefbUSiI/AAAAAAAAEiU/U4Q-xe4a3WU5yHK8Q70_XqL1xW-T2k87gCLcB/s1600/busines.png') no-repeat 50% 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:10px;
}
.sidebar-biznisdesign:hover {
 background-size: 120% auto;
}


Step 3. Ganti Url gambar yang berwarna Merah Tua sesuai dengan gambar yang kalian inginkan

Step 4. Simpan Tamplate

Step 5. Masuk  ke pengaturan Tata Letak kemudian Tambah Gadget/Widget tempatkan sesuai dengan yang kalian inginkan

Step 6. Pilih HTML / Javascript dan pastekan Code Script berikut ini

Code Script


<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-blogdesign"></div></a>
<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-vectordesign">e</div></a>
<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-motiondesign"></div></a>
<a href="http://artadhitive.com/" target="_blank"><div class="sidebar-biznisdesign"></div></a>

Step 7. Ganti Url link yang berwarna Biru sesuai halaman yang ingin dituju

Step 8. Simpan Gadget/ Widget

Dan sekarang lihat hasilnya, lebih unik dan menarikkan pastinya...
Silahkan berkreasi, semoga berhasil dan tetap semangat.

0 komentar

click to leave a comment!

Formulir Kontak

Nama

Email *

Pesan *