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


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

COMMENTS

Name

#BeMoreProductive,1,6th Indonesian Pearl Festival 2016,1,Abutours.com,1,Adobe Premier Pro,1,Asusintel,1,Award,1,Babasal Mombasa,1,Backsound,2,Balancing,1,Bangga di Banggai,1,Be Gravitasi,1,Bebas Bayar,1,Bengkel Mobil,1,Bika Bogor,1,Bika Bogor Talubi,1,Biznis,1,Blog Design,18,Blogger,24,Bumper,1,CC 2015,1,Citra Maja Raya,1,Co-working Space,1,Colidan,1,Competition,32,Competition DEV+,1,Corel Draw X7,1,Coreldraw,1,CV Design,1,Cyko Handbreak,1,dealoka,1,Designer,5,Dotcomforme.com,1,Education,6,Ekspresikan Dirimu,1,Elevenia,1,Excite Shop,1,FestHAM2016,1,Fintech,1,Footer,1,FSB,1,Goverment PR,1,HAnavi,1,Header,6,Himawan Putra,1,HIS Travel Indonesia,1,hostinger,1,Indramayu Kota Budaya,1,Influenzer,31,Inspirasi Astra,1,JIBB,1,Kuliner Bogor,1,Lawan Neuropati,1,Luna Smartphone,1,Main Post,3,Marketz,3,Meeting Room,1,Milkshake,1,Motion Graphic,2,Neurobion,1,Neuropati,1,Obat maag paling ampuh,1,Office Room,1,Oleh-oleh Bogor,1,Oleh-oleh Khas Bogor,1,Paket Meeting,1,Pesona Jawa Tengah,1,Pop Ice,1,Ralali.com,2,Review,29,Ruang Kantor,1,Ruang Meeting,1,rukamen,1,Serumah.com,1,sewa apartemen,1,Shop n Drive,2,Sidebar,8,Skyscanner,1,Software,3,Sound Effect,2,Sponsor,12,Spooring,1,Storylio,1,Tips Blogging,3,Tips Design,3,Travel,8,Traveloka,2,Tutorial Blog,1,Tutorial Motion,1,Vector,1,Video Editor,5,Video Effect,1,Visit Tidore Island,1,XWORK,1,Youtuber,6,
ltr
item
Artadhitive | Daily Content Creator: Cara Membuat Widget Sidebar Zoom-Out Unik dan Menarik
Cara Membuat Widget Sidebar Zoom-Out Unik dan Menarik
https://1.bp.blogspot.com/-jYKH6Hdn5uE/V2C2DKv44vI/AAAAAAAAEl0/9kb5qzeUQHkk73gTeWOP_n9_SqS_fqeNgCLcB/s1600/Blog%2B5.png
https://1.bp.blogspot.com/-jYKH6Hdn5uE/V2C2DKv44vI/AAAAAAAAEl0/9kb5qzeUQHkk73gTeWOP_n9_SqS_fqeNgCLcB/s72-c/Blog%2B5.png
Artadhitive | Daily Content Creator
http://www.artadhitive.com/2016/06/Design-Blog-Cara-Membuat-Widget-Sidebar-Zoom-Out-Unik-dan-Menarik.html
http://www.artadhitive.com/
http://www.artadhitive.com/
http://www.artadhitive.com/2016/06/Design-Blog-Cara-Membuat-Widget-Sidebar-Zoom-Out-Unik-dan-Menarik.html
true
9208609652601285124
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy