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;
}
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>
<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.
--- Always Pray and Stay Creative ---
Post a Comment