07:12
Abi
blog tutorial |
| Variasi Icon Pada Judul Sidebar Posted: 28 Nov 2009 07:35 PM PST  Pernah melihat blog yang judul sidebarnya memiliki variasi icon yang berbeda antara satu widget dengan widget lainnya? Memang sepertinya sedikit cukup menarik apabila setiap judul di sidebar mempunyai icon yang berbeda karena sejatinya judul disidebar tidak mempunyai icon, atau apabila mempunyai icon, icon tersebut akan sama anatara widget yang satu dengan widget yang lainnya. Agar judul sidebar anda mempunyai icon yang bervariasi, maka ada sedikit trik yang harus anda lakukan. Bagi anda yang tertarik namun belum mengetahui caranya, berikut kang rohman akan memberi gambaran bagaimana agar anda bisa dapat memasang icon favorit anda pada judul sidebar.
#1 Pilih Icon Favorit anda Silahkan persiapkan icon favorit milik anda atau jika belum mempunyai koleksi icon anda bisa mendownloadnya secara gratis di internet. sedikit referensi, kang rohman pernah posting beberapa penyedia icon gratis, silahkan anda baca pada artikel Free Icon Untuk Blog Dan Website atau pada artikel Cari icon di IconFinder.
Sebagai contoh, beberapa icon yang kang Rohman pakai ;
Silahkan upload icon-icon tersebut ke hosting tempat biasanya anda menyimpan gambar, jika anda belum mengetahui bagaimana cara upload gambar, anda bisa membaca artikel kang Rohman tentang Buat Logo & Image Button atau bisa juga anda baca artikel Upload gambar melalui blogger.
Berikut beberapa contoh alamat gambar (URL) icon yang telah kang di upload :
http://lh5.ggpht.com/_pt7i0nbIOCY/SxDF6E8cH-I/AAAAAAAACbU/qMNd6rY8owA/icontexto-user-web20-blogblogs_thumb%5B1%5D.png http://lh3.ggpht.com/_pt7i0nbIOCY/SxDF2CRKHsI/AAAAAAAACbI/DPAC8rY6Io0/icontexto-webdev-file-032x032_thumb%5B1%5D.png http://lh6.ggpht.com/_pt7i0nbIOCY/SxDFV6RaXzI/AAAAAAAACaI/NEnqxysvPJo/icontexto-webdev-valentine%5B4%5D.png
Silahkan anda sesuaikan berapa jumlah icon yang ingin anda pasang. Sebagai contoh akan diterangkan untuk memasang 3 icon saja.
#2 Mencari Kode Widget Sidebar Langkah kedua yaitu mencari tahu kode widget di dalam template anda, mana yang ingin di pasang icon. Berikut langkah-langkahnya :
Dari contoh diatas, blog kang Rohman mempunyai 5 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah dan orange yaitu :
Yang dicetak merah adalah ID dari widget dan yang dicetak orange adalah judul widget atau judul yang ada di sidebar. Sebagai contoh, kang Rohman hanya akan memasang pada widget dengan ID Profile1, Label1, serta HTML2.
#3 Membuat kode CSS Langkah ke tiga adalah membuat kode CSS untuk ID widget yang tadi (Profile1, Label1, serta HTML2). Property yang di buat cukup sederhana, yaitu anda hanya menambah h2 pada ujungnya, contoh :
#Profile1 h2 { } #Label1 h2 { } #HTML2 h2 { }
Untuk value nya, anda bisa berkreasi sendiri sesuai dengan keinginan, namun sebagai contoh, value nya misalkan seperti ini :
#Profile1 h2{ background:transparent url(URLGambar) no-repeat scroll left center; padding:8px 8px 2px 40px; margin-top:15px; } #Label1 h2{ background:transparent url(URLGambar) no-repeat scroll left center; padding:8px 8px 2px 40px; margin-top:15px; } #HTML2 h2{ background:transparent url(URLGambar) no-repeat scroll left center; padding:8px 8px 2px 40px; margin-top:15px; }
Untuk URLGambar tentunya harus anda ganti dengan URl gambar anda, namun sebagai contoh kang Rohman akan memakai URL gambar yang sudah di tulis di artikel bagian atas, sehingga kodenya akan seperti ini :
#Profile1 h2{ background:transparent url(http://lh5.ggpht.com/_pt7i0nbIOCY/SxDF6E8cH-I/AAAAAAAACbU/qMNd6rY8owA/icontexto-user-web20-blogblogs_thumb%5B1%5D.png) no-repeat scroll left center; padding:8px 8px 2px 40px; margin-top:15px; } #Label1 h2{ background:transparent url(http://lh3.ggpht.com/_pt7i0nbIOCY/SxDF2CRKHsI/AAAAAAAACbI/DPAC8rY6Io0/icontexto-webdev-file-032x032_thumb%5B1%5D.png) no-repeat scroll left center; padding:8px 8px 2px 40px; margin-top:15px; } #HTML2 h2{ background:transparent url(http://lh6.ggpht.com/_pt7i0nbIOCY/SxDFV6RaXzI/AAAAAAAACaI/NEnqxysvPJo/icontexto-webdev-valentine%5B4%5D.png) no-repeat scroll left center; padding:8px 8px 2px 40px; margin-top:15px; }
#4 Memasang kode CSS Karena tadi sudah mendapatkan kode CSS yang di perlukan, maka langkah terakhir adalah memasang kode CSS tadi ke template anda, berikut langkah-langkahnya :
padding:8px 8px 2px 40px; margin-top:15px;
Selamat Mencoba! 
|
| You are subscribed to email updates from Kolom Tutorial To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Pernah gak trafik blog anda tiba-tiba terjun bebas? Saya baru saja mengalaminya. Sudah sekitar semingguan ini blog andalan saya trafiknya aneh. Unique visitornya nyungsep menjadi hanya 20% dari rata-rata normal. Dan makin hari makin nyungsep saja. Setelah saya cek data statistiknya, pengunjung sebagian besar datang dari 
If you are bored with your car’s looking, you can add some accessories to make your car a little bit shiny. Car accessories, whether original or after market can make your car looks different from the other cars and even makes your car’s engine more powerful.
But if you don’t have enough time to wait your car accessories being installed, you can buy the accessories first at car accessories online store and installed it next time you have spare time. Carid.com is one of the online store that sell car accessories.
It’s interesting when you are able to keep your house neat. In fact, it is not hard to be done. You just put several versatile equipments in your house such as shed, kitchen sets and other stuffs.
