Trik Blog - Setelah kemarin saya posting artikel tentang trik
Cara buat Daftar Isi Dengan Label Tertentu,
dan kali ini saya akan berbagi artikel tentang trik lagi, Tentu nya
supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik
dan juga cantik, Cara nya yaitu dengan Menambahkan
Menu Vertikal Dengan Icon/gambar.
Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah
menu vertikal biasa saja tanpa di lengkapi tampilan nya dengan
icon/gambar.
nah sekarang saya punya trik untuk sobat semua supaya tampilan menu
sobat di blog jadi lebih menarik dan bagus lagi, sobat bisa pasang
Menu Vertikal Dengan Icon/gambar.
Sobat lihat saja tampilan Gambar di samping posting ini.
klik saja untuk memperbesar dan melihat gambar dengan jelas.
gimana... Menarik bukan...???
jika sobat sudah tidak sabar lagi ingin memasang
Menu Vertikal Dengan Icon/gambar di blog,,,
okelah kalau begitu kita langsung saja menuju ke TKP.
hehehe...
Berikut cara-cara nya :
1. Login Ke Blog sobat.
2. Pilih Rancangan Terus Pilih Elemen Laman.
3. Add Gadget HTML Java Script.
4. Kemudian Copy dan paste Kode di Bawah Ini.
Jangan sampai ada yang terlewatkan.!!!
<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;
}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-
webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;">
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="
http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAEOI15Pwad2jqgT7_aNX6FOOpERQsAgkXN5QersHXkVV3Dt4XuQxgRBKvYdvRB6GpJml8P6-OiJYPcSBYFlIyHWYKD2_58W857s4WohHuj68iZ-Mrrf_UqxAT2_QcD4Adaec2KcFpRIo/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Daftar Isi</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Graphics-Painting-icon.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Download Template Blog</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="
http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Tutorial Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Tips Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
http://icons.iconarchive.com/icons/iconshock/brilliant-graphics/32/colors-icon.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl5j1P1yIaQ_LAz5Vcce4DrGGPbMP_v8zSvxsm6nvoZCb7mvg1rLKM2P6ljgmKajmLYbydZ0s9aEVs4ngnC5ZwiZe7OQgKK3LUCCtBtTeiX_5EBe-okKRyW4f2VAvL1qqrjC2SUSR1Ovx8/" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-insert-link-icon.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZwgUoVZsF-2pFml3AKak-uYv8fAWykfyrB3Nrb7WYAK98soD5z1eJhkw7XZ5pe3dRseBDY18omcS3NN7ft3VFyZqDSvMMB8tugvDRCWtkUkNwXhVNgBgJIZ-_sI2EKLe0QzRO7NCmrDT/" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQxfKnFpncs1vJY1lhHTvQ9W1pU51Uo1IImGSdoKSBo3g78xl16FL8g95_kA_NtOVlm6ypddCzoZhk9XCTUkVjcX_TgBNbbqR2Yy6tdQd8ugq66qaR0UFfbnhXZYlFTBhY1qTbZO3Ztn1r/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Feedburner</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="
http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Kumpulan Icon</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="
http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></td>
<td><li><a href="
GANTI DENGAN LINK/URL SOBAT">
Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>
5. Save/simpan dan selesai.
Silahkan sobat lihat hasil nya.
Keterangan :
-Yang Berwarna
Biru silahkan kamu ganti
background nya sesuai selera sobat.
-Yang Berwarna
Pink silahkan sobat ganti dengan
URL Icon/gambar Nya.
-Yang Berwarna
Hijau silahkan sobat ganti dengan
URL tujuan atau target.
-Yang berwarna
Merah silahkan sobat ganti dengan
Nama menu.
Jika sobat tidak punya
Icon/gambar, Silahkan Sobat lihat dan pilih-pilih
Kumpulan Icon Keren DISINI.
Sobat bisa
memodifikasi nya sesuai dengan keinginan dan selera sobat semua.
Semoga bermanfaat.
