Anda pasti sering melihat Website/Blogsite yang penuh dengan gambar-gambar kecil atau biasa disebut icon. Berikut Saya akan berbagi sedikit tentang pemasangan icon kedalam Blog.
1. Pasang Icon Pada Setiap Judul SideBar
Pertama cari #sidebar-wrapper h2{ pada deretan kode CSS, kemudian masukan sesuai kode dibawah:
| #sidebar-wrapper h2{ background: url("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0} |
2. Pasang Icon di link Sidebar
Pertama cari #sidebar-wrapper li{ pada deretan kode CSS, kemudian masukan sesuai kode dibawah:
| #sidebar-wrapper li{background:url("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") no-repeat 0px .20em; margin:0; padding:0 0 25em 17px; line-height:1.2em} |
3. Pasang Icon Sebelum Title Post pada halaman List Label
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di kemudian masukan sesuai kode warna merah dibawah:
| <b:include data='top' name='status-message'/> <data:adStart/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <img alt='>>>' border='0' src='http://2.bp.blogspot.com_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif'/> <data:post.title/></a><br/><br/> <b:else/> <b:include data='post' name='post'/> </b:if> |
4. Pasang Icon Sebelum Jumlah Komentar
Pertama cari #comments h4{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:
| #comments h4{ background:#eee5e5 url("http://1.bp.blogspot.com/_C6KkooKXCEw/SJGzpJXhKoI/AAAAAAAACGw/QZ7IzDBHgFU/s400/icon_comments.png") no-repeat 3px .3em; width:430px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px} |
5. Pasang Icon Sebelum Nama Komentator
Pertama cari #comments-block .comment-author{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:
| #comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("http://4.bp.blogspot.com/_C6KkooKXCEw/SJGzpDac4VI/AAAAAAAACGo/2L5Y5P_BDWU/s400/icon_comment.gif") no-repeat 3px .3em; color:#111} |
6. Mengganti Tulisan Posting Lebih Baru - Halaman Utama - Posting Lama dengan tulisan sendiri atau bergaya Icon
Anda mungkin ingin mengganti tulisan standar Posting Lebih Baru - Halaman Utama - Posting Lama dengan gaya sendiri atau anda juga bisa menganti tulisan tersebut dengan icon.
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode di bawah kemudian ganti kode warna yang dicetak tebal dibawah sesuai keinginan.
Untuk menganti gaya tulisan sendiri anda bisa langsung menulisnya sedangkan jika ingin mengganti dengan gaya icon tinggal ganti dengan kode <img src="http://loakasit-gambar-anda.com/contoh.jpg"/>
| <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> |
0 Komentar Untuk "Trik Pemasangan Icon Pada Blog"
Post a Comment