Jumat, 22 Juli 2011

membuat border melengkung pada blog widget

Membuat Border pada setiap blog widget memang membuat blog agan jadi tampil lebih rapi dan menarik,sehingga dapat membuat nyaman mata sang pengunjung blog,beda jika tampilan blog kita acak acakan,pengunjung blog-pun akan bosan melihatnya,sehingga tidak betah berlama-lama di blog kita,jika sang pengunjung blog bisa betah berlama-lama di blog kita,tentunya ini akan sangat menguntungkan buat kita,karena akan meningkatkan page rank blog kita.

Cara membuatnya cukup mudah,
  •  langkah 1
masuk ke blog agan,kemudian pilih rancangan,kemudian pilih tmbah gadget,pilih daftar link,beri judul daftar link agan misalnya arsip blog,agar memudahkan pencarian,jika sudah selesai,agan pilih edit html,klik expan widget yang ada di sisi kanan atas,kemudian cari kode seperti di bawah ini,

]]></b:skin>

gunakan ctrl+f untuk memudahkan pencarian,
  •  langkah 2
copy kode css dibawah ini,

.membuatbordermelengkung {border: 3px solid #000000;
padding: 6px;
background:#001112;-moz-border-radius:8px;over flow:auto;scrol}

.membuatbordermelengkung {background:#;}
img.float-right {margin: 3px 0px 0 3px;}
img.float-left {margin: 3px 3px 0 0px;


paste tepat di atas kode :

]]></b:skin>

  • lankah 3
agan cari kode seperti di bawah ini:

</b:widget>
<b:widget id='TextList1' locked='false' title='arsip blog' type='TextList'>
<b:includable id='main'>
 <h2><data:title/></h2>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:items' var='item'>
       <li><data:item/></li>
     </b:loop>
   </ul>
</div>

  • langkah 4
gantilah teks yang berwarna merah dengan kode di bawah ini:

<div class='membuatbordermelengkung'>

lalu tambahkan </div> di bawah teks yang berwarna biru.kemudian simpan template.
lihatlah blog agan,hasilnya akan seperti ini ;










Oh ya,,!!untuk kode css bisa juga dengan cara ini gan,kalo agan males nyari kode  ]]></b:skin>
dari rancangan tadi agan pilih saja perancang template,kemudian pilih advance,geser scroll kebawah,lalu pilih add css,nah agan paste-lah kode css yang di atas di tempat yang sudah di sediakan.lihat gambar di bawah ;










  kemudian pilih apply to blog,

note :
mungkin punya agan hasilnya tidak ada scrollnya,kalo agan mau ada scrollya,
agan klik disini
selamat mencoba,teruslah menulis artikel yang bermanfaat

1 komentar: