SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




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 

4 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
  4. I love tips-blogbego.blogspot.com! Here I always find a lot of helpful information for myself. Thanks you for your work.
    Webmaster of http://loveepicentre.com and http://movieszone.eu
    Best regards

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger