Modifikasi Archive Blog dengan Menambahkan Background HTML Border

Modifikasi Archive Blog dengan Menambahkan Background HTML Border - Akhirnya bisa meluangkan waktu untuk update blog. Rasanya kepingin seperti dulu yang setiap hari selalu ada hal-hal aneh, modifikasi-modifikasi aneh dari blog Ka Damar | Blog Tips | SEO ini.

Yuk belajar modifikasi Archive blog, yang pertama kita kasih Scroll biar minimalist, baca dulu gan: Cara Membuat Archive Blog dengan Scroll. After that, kita berlanjut dengan "Menambahkan Background HTML Border" . . . .

1. Pastikan "Expand Widget Templates" sudah dicentang,
2. Cari kode id='ArchiveList' (Gunakan Ctrl + F )
3. Setelah ketemu, masukkan kode berikut ini di atasnya (misal, nanti bisa modif sendiri)

<div style="border: solid 10px #005588; background: #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">

4. Lalu lihat terus ke bawah sampai menemukan kode  <b:include name='quickedit'/>, dan masukkan kode </div> sebelum kode <b:include name='quickedit'/> tadi
5. Selengkapnya seperti ini,   
   

   <div class='widget-content'>
   

   <div style="border: solid 10px #005588; background: #ffaa00; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">

   <div style='overflow:auto; width:ancho; height:250px;'>
   <div id='ArchiveList'>
   <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
   <b:if cond='data:style == &quot;HIERARCHY&quot;'>
   <b:include data='data' name='interval'/></b:if>
   <b:if cond='data:style == &quot;FLAT&quot;'>
   <b:include data='data' name='flat'/></b:if>
   <b:if cond='data:style == &quot;MENU&quot;'>
   <b:include data='data' name='menu'/> </b:if></div></div></div>
   </div><b:include name='quickedit'/></div>

6. Simpan

Sebagai referensi untuk membuat background silahkan cek di sini:

1. HTML Borders Backgrounds ( seri 1 )
2. HTML Borders Backgrounds ( seri 2 )
3. HTML Borders Backgrounds ( seri 3 )
4. Tips border Radius (Membuat Lengkungan )
5. CSS3 : Belajar Membuat Box, Border, Background, dan coloumn

ScreenShots

Sebelum nya nih , ada modif scroll

Modif scroll, tambah backgroun Border HTML

GIMANA? :) . . . Kasih cendol gan, kwkw

- Penulis : Damar Saloka Anggoro - Judul : Modifikasi Archive Blog dengan Menambahkan Background HTML Border

• Berlangganan newsletter Ka Damar Blog Tips dan Anda akan dapat men-download "EBOOK TRIK TIPS BLOGGER" secara gratis
• Anda juga akan menerima Update Artikel terbaru secara otomatis ke Inbox Email Anda.

Nama Kamu*
Email*

Related Post:

Cara Membuat Related Post seperti ini