Follow Google+

Part Of Blogger

Photobucket

Statistic

DMCA.com Protection Status

Popular Posts


Art dan Adhi adalah dua kata yang tidak akan pernah terpisahkan, dengan adanya dua kata tersebut terciptalah karya creative itulah awal mulanya artadhitive dilahirkan. Art Design memang luas kaitanya, tapi segala sesuatu itu bermula dari Art Design, Art Design bukan hanya coretan tinta, bukan hanya goresan garis dan bukan hanya gesturan mouse melainkan adalah kehidupan seni yang setiap orang memilikinya. Art Design adalah Seni yang berhak dimiliki setiap manusia karena goresan tangan yang bodoh sekalipun bisa menghasilkan karya seni yang luar biasa.
Art of Adhi Creative ...

Instagram

Instagram

Advertise 970x90

Panduan Design

Follow This Site

Google+ Followers

Butuh Apartment ?

Tuesday, 14 June 2016

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.

--- Always Pray and Stay Creative ---

No comments:
Write comments

Interested for our works and services?
Get more of our update !