Mempercantik Blog dengan Gradient

Salam Blogger Indonesia, jumpa lagi, setelah hampir seminggu saya bongkar pasang Blog ini tujuannya agar loading lebih ringan disamping tampilan sekarang seperti gaya WEB, ini semua berkat cbox tanggal 15 Desember 2010 yang isinya sangat simple bikin penasaran saja dalam hati "Yang ini udah Baca?" saya langsung meluncur ke Mas Adam namanya (Blogger senior dari Kalimantan), disanapun saya jadi tambah penasaran karena beliau beda dengan saya, beliau mengijinkan kita Copas tapi untuk mengembangkan kreasinya kita sendiri memolesnya, trims mas Adam, kalau anda ingin tahu lebih jauh tentang beliau bisa klik  disini  

Tempo hari saya pernah menulis Artikel tentang "Klik Label tampilkan Judulnya saja," atau kalau kawan lupa bisa baca kembali disini  

Hasil sebenarnya tidak pakai kotak, nah sekarang saya akan berbagi dengan kawan apa yang saya dapat dan saya kembangkan versi Tips Blogbego tentunya.

Sekarang yang akan saya bahas kembali adalah Klik Label menampilkan judulnya saja versi pengembangan dengan css Gardient, mari kita mulai percobaan ini :

1. Masuk ke account dengan ID kawan
2. Download / simpan template kawan dulu
3. Beri tanda centang “Expand Widget Template”
4. cari script : <b:include data='post' name='post'/> 
5. Ganti script <b:include data='post' name='post'/>  dengan script berikut :

contoh HASIL

<b:ifcond='data:blog.homepageUrl!=data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'><div style='float:center; padding:4px;margin:5px;border:2px solid #000000;background: #FFFFFF; fontsize:16px;text-decoration:none;line-height:normal;'><a expr:href='data:post.url' style='text-decoration:none;'><data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr: onclick='data:post.addCommentOnclick'style='text-decoration:none;'><b:if cond='data:post.numComments==1'>1<data:top.commentLabel/><b:else/><data:post.numComments/><data:top.commentLabelPlural/></b:if></a></div><b:else/><b:include data='post'name='post'/></b:if> <b:else/><b:include data='post' name='post'/> </b:if>

sekarang perhatikan script warna merah = #FFFFFF;  ganti dengan script berikut -moz-radial-gradient(left, #FFFFFF, #000000); background:-webkit-gradient(linear, left top, right bottom, from(#FFF), to ( #000)); 

maka hasilnya seperti gambar disamping

<b:ifcond='data:blog.homepageUrl!=data:blog.url'><b:if cond='data:blog.pageType !=&quot;item&quot;'><div style='float:center; padding:4px;margin:5px;border:2px solid #000000;  background: #FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'><a expr:href='data:post.url' style='text-decoration:none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr: onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

contoh HASIL 

coba perhatikan lagi script warna merah yang saya tambahkan 

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div style='float:center; padding:4px;margin:5px;border:2px solid #000000; -moz-border-radius:10px;-webkit-border-radius:10px; background:#FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration:none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

tampilan di Mozilla

sekarang perhatikan script warna biru #FFFFFF;  ganti dengan script berikut

-moz-radial-gradient(left, #FFFFFF, #000000); background:-webkit-gradient(linear, left top, right bottom, from(#FFF), to ( #000)); maka hasilnya seperti gambar disamping

tampilan di Crome

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div style='float:center; padding:4px;margin:5px;border:2px solid #000000; -moz-border-radius:10px;-webkit-border-radius:10px; background:#FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration: none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr: onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

• Bagaimana keren bukan, silahkan kawan mempraktekkan di Blog masing-masing, kalau seperti contoh diatas saya cuma memakai warna hitam (#000;) dan putih (#FFF;), silahkan diganti dengan warna selera masing-masing
• Kalau kawan ingin batas kanan dan kiri biar jangan terlalu bulat rubah angka 10px pada contoh script berikut menjadi lebih kecil nilainya >> -moz-border-radius:10px;-webkit-border-radius:10px; 
• Hasil yang lebih baik akan kelihatan di Mozilla Firefox