Icon Mini Sebagai Hiasan di New Blogger

Gara-gara kemarin wp saya ngga bisa di akses, terpaksa dech untuk mencari kesibukan, saya mengedit-edit dan menambah pernak-pernik luthu berupa icon mini di setiap judul di sidebar samping blog ini.

caranya pun terbilang mudah kopi pastekan saja code di bawah ini ke dalam code css template kita. - lebih bagus di bawah parameter css sidebar kita.

#sidebar #icon-cal h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-cal.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-calendar h2 {background:transparent url http://duniaanda.googlepages.com/typoxp-calendar.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-comment h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-comment.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-email h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-email.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-feed h2 {background:transparent url(http://duniaanda.googlepages.com/typoxp-feed.gif) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-file h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-file.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-folder h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-folder.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-meta h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-meta.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-new h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-new.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-ok h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-ok.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-pictures h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-pictures.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-search h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-search.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-tags h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-tags.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-users h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-users.png) no-repeat top left; padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;} #sidebar #icon-web h2 {background: transparent url(http://duniaanda.googlepages.com/typoxp-web.png) no-repeat top left;padding-left: 20px; border-bottom: 1px solid #191970; border-top: 0px solid #191970;}

nah kalau udah beres code di atas kita masukan, tugas kita sekarang menerapkan icon-icon itu di setiap judul sidebar kita. contoh, saya ingin memberi icon mini berupa gambar user di samping tulisan ABOUT ME.

Langkah 1 #. Seperti biasa masuk ke TEMPLATE -> EDIT HTML kemudian tandai kotak kecil di samping tulisan Expand Widget Templates.

Langkah 2 #. Scroll ke bawah dan cari di template parameter di bawah ini. <b:widget id='HTML1' locked='false' title='About me' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Biar lebih mudah mencarinya pake Edit -> Find in This Page. pada browser yang kita gunakan. Kemudian tulis ABOUT ME, nyampe deh pada kode di atas.

Langkah 3 # Replace ( timpa atau tindih ) kode warna merah di atas dengan kode di bawah ini.

<div id='icon-user'><h2><data:title/></h2></div>

Uraian dan kode-kode selanjutnya klik saja di sini, sekalian donlot saja template-nya mumpung gratis. Kalau merasa icon mini-nya kurang luthu-luthu, cari dan donlot saja di situs penyedia icon di sini. Kalau udah mengerti caranya, dengan logika dan cara yang sama kita dapat tambahkan background dengan aneka warna-warni, seperti yang saya terapkan di blog yang ngga pernah di update sama pemilik-nya. Demo .

Dan dengan logika yang sama pula kita bisa ngasih beraneka warna pada latar kontenya di sidebar kita. caranya masukan parameter css nya yg telah kita set, misalnya saya ngeset kodenya begini.

#sidebar #latar-1 {background: #EFDED1;padding:5px;}

kemudian yang kita timpa atau tindih adalah <div class='widget-content'> dengan parameter : <div id='latar-1'><div class='widget-content'></div>

Sudah segitu aja dulu.

Technorati tags: belajar, tutorial, new blogger