Cara membuat entry post blog berbentuk galeri

Blog mana yang tidak ingin tampilan blognya menarik dan enak di pandang oleh pengunjung blognya.Sering kita jumpai jika kita sering blogwaking,pada blog yang menggunakan read more agar postingan yang muncul pada halaman utama atau label tidak panjang,nah..sekarang bagaimana mengganti read more tersebut dengan bentuk galeri pada halaman utama atau label agar lebih terlihat menarik dan simple :D

Gambar diatas adalah tampilan entry post bebentuk galeri pada halaman utama atau home,sekarang kita lanjut ke tahap selanjutnya yaitu menerapkan trik ini pada blog anda :D

• Login to blog
• Pilih Template,lalu klik Edit HTML
• Cari script ]]></b:skin> agar lebih cepat tekan Ctrl+F
• Setelah ketemu,copy dan pate script di bawah ini tepat dibawah  ]]></b:skin>

<!-- untuk dua kolom seluruh halaman -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>

.post {

width:140px;

margin-right:7.5px;

height: 190px;

overflow:hidden;

float:left;

border:2px solid silver; }

</style>

</b:if>

<!-- akhir dua kolom -->

<!-- untuk dua kolom halaman label -->

<b:if cond='data:blog.searchLabel'>

<style>

.post {

width:140px;

margin-right:7.5px;

height: 190px;

overflow:hidden;

float:left;

border:2px solid silver; }

</style>

</b:if>

<!-- akhir dua kolom -->

•  Sebelum di save templatenya sebaiknya pratinjau dahulu,setelah sesuai save deh :D

Catatan :
Script diatas di bagi dua yaitu style untuk halaman utama dan halaman label.

• Untuk halaman utama atau home scriptnya dari <!-- untuk dua kolom seluruh halaman --> sampai <!-- akhir dua kolom --> dapat disesuakan sesuai keinginan :D
• Dan untuk style halaman label scriptnya dari <!-- untuk dua kolom halaman label --> sampai <!-- akhir dua kolom --> dapat disesuakan sesuai keinginan :D

Read More->

Cara mengganti bullet list pada blog menjadi menarik

Untuk membuat tampilan blog anda semakin menarik,pertemuan kali ini saya akan berbagi trik bagaimana mengganti tampilan bullet list pada postingan blog.Pada dasarnya tampilan bullet list pada saat kita membuat postingan adalah berbentuk bulat hitam.
Gambar dibawah ini adalah bullet list secara default pada blog,yang akan kita ganti dengan trik yang akan sampaikan :D

Untuk mengganti bullet list yang pada dasarnya default pada blog bulat hitam,disini kita memerlukan dua gambar,yang pertama sebagai latar belakang,yang kedua sebagai tanda centang.Oke sebelumnya ini adalah link gambar yang saya gunakan sebagai bullet list yang baru nantinya :

1. http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif
2. http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif

Tenang gambar tersebut tidak akan membuat loading blog anda berat,menurut saya itu juga,tapi jika anda ingin mengganti dengan gambar yang anda inginkan silahkan :D
Yups...inilah script dan tata cara yang akan kita gunakan untuk mengganti bullet list pada blog :D

• Pertama cari script ]]></b:skin> pada template anda,setelah ketemu copy script dibawah ini :

.post-body ul,

.post-body ol{

  margin: 1em;

  padding-left: 1em;

}

.post-footer ul{

  margin: 1em;

  margin-top: -0.5em;

  padding-left: 1em;

}

.post-body ul li,

.post-footer ul li {

  list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/uncheck-1.gif);

  border-bottom: 1px solid #ccc;

  padding: .2em 0 .2em .5em;

}

.post-body ul li:hover,

.post-footer ul li:hover {

  cursor: pointer;

  list-style-image: url(http://i1143.photobucket.com/albums/n629/gerduren/check-1.gif);

  background-color: #f2f2f2;

  color: #B1291F;

•  Setelah di copy,paste script tadi SEBELUM ]]></b:skin>
• Sekarang save template anda,dan coba membuat satu postingan dan lihat hasilnya :D

Catatan :
Pada saat membuat postingan atau entri baru memang tampilannya masih bulat hitam tapi jika postingan yang sudah anda buat dan di publikasikan maka tampilannya seperti ini :

Hasil diatas adalah bullet list yang telah kita rubah,saat kotak disorot dengan kursor maka pada kotak putih tersebut akan ada tanda centang :D

Read More->