Kamis, 04 November 2010

Modifikasi Tampilan Judul Posting Sebuah Label

Setelah memposting "judul post pada sebuah tabel", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS "main" untuk memodifikasinya seperti ini :



berikut caranya :
Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode di bawah ini.
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :
Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

Ganti kode yang berwarna merah dengan kode berikut.
<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
<data:post.title/></div></a>

Catatan :
Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya :
<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk0uVbve6q4tbY4pqHYoyxMZ1aMGep_girgPo5a3zEcmKcqe9ZWZjr-xW2kIbvD7onfrglD1UV0nr_ayM3Zw_5hbilY1xOrDYiWY5eg5bjHfdxQPLBdIM4mrwRaU0imlkdp-S-2pZeEuE/s144/Arrobblue.png'/>
<data:post.title/></div></a>


Simpan template dan lihat hasilnya...
selamat berkreasi...
sumber : http://optimasi-blog.blogspot.com
Share on :

0 komentar:

Posting Komentar

 
© Copyright mix's BLoG 2012 - Some rights reserved | Powered by Blogger.com.
| by MIX