Mempercantik Blog dengan Gradient

Unknown - Kamis, 30 Desember 2010 - 06.06.00 wita
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 




Berbagi Artikel :

Mempercantik Blog dengan Gradient
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Mempercantik Blog dengan Gradient
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

3 Komentar pada : “Mempercantik Blog dengan Gradient”

  1. blog ini emang beken, artikelnya sangat membangun kita yang sedang belajar ngevlog,,
    jdi tambah semangat untuk ngeblog nich,,
    makasih gan..

    BalasHapus
  2. trims kawan kunjungannya, jangan merendah, saya pemula yang ingin tahu dan senang main coba2 (bongkar pasang):18

    BalasHapus
  3. woooowww infonya menarik sobat ijin praktek ya

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan




BANNER [300x250]
© 2013 - BC INFO | Powered by Blogger
Design Template by : Blogger Edan