Membuat Wadah Status Twitter

Artikel sebelumnya membahas "Memasang Widget Twitter^[1]" tanpa ada wadah (container) khusus. Sekarang kita akan mencoba menambahkan wadah status twitter pada bagian header atau bagian lainnya sesuai dengan keinginan anda agar status twitter lebih enak untuk dibaca. Pada dasarnya materi ini lebih menitik beratkan kepada pemahaman kode CSS (Cascading Style Sheet). Anggap saja sebagai "studycase" untuk belajar CSS sekaligus praktek.

Wadah (Container) Status Twitter

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML" dan tidak perlu di "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

div#twitter_div {
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S65N7txeWnI/AAAAAAAAD84/nzg7fWZlw9M/d/bgtwitter.png) no-repeat scroll 0 0 transparent;
float:right;
height:137px;
margin:110px 50px 0 0;
padding:5px 10px;
position:absolute;
right:0;
width:338px;
z-index:10;
}
div#twitter_div h2 {
margin-bottom:1px;
font-style:italic;
color:#21A7ED;
}
div#twitter_div ul  {
margin:0;
}
div#twitter_div ul li {
list-style: none none outside;
font-size: 0.9em;
margin:0;
color:#141414;
}

Langkah 5
Cari kode dibawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Langkah 6
Masukan kode dibawah ini diatas kode pada langkah 5:

<div id='twitter_div'>
<b:section class='twitter' id='twitter' showaddelement='no'>
<b:widget id='HTML30' locked='true' title='Twitter' type='HTML'/>
</b:section>
</div>

Langkah 7
Simpan template
Langkah 8
Masuk ke "Tata Letak - Elemen Laman"
Langkah 9
Perhatikan! Ada penambahan gadget baru dengan nama "Twitter" dan klik link "Edit"

Langkah 10
Masukan (copy paste) kode twitter yang pernah dibahas pada artikel sebelumnya^[1].

Penyesuaian Letak Gadget Pada Header

Wadah status twitter ini mungkin saja tidak cocok untuk bentuk dari header blog anda. Tips-n-trik kali ini direkomendasikan bagi mereka yang memiliki header dengan lebar dan tinggi yang cukup.

Untuk melakukan penyesuaian letak wadah, perhatikan gambar dibawah ini:

Gambar diatas menjelaskan kode CSS dibawah ini:

div#twitter_div {
background:url(bgtwitter.png) no-repeat scroll 0 0 transparent;
float:right;
height:137px;
margin:110px 50px 0 0;
padding:5px 10px;
position:absolute;
right:0;
width:338px;
z-index:10;
}

Ubahlah nilai-nilai yang diblok untuk menyesuaikan posisi wadah status twitter pada header anda. Mudah-mudahan dapat dipahami, jika masih kesulitan silahkan hubungi via email atau chatting.

Catatan kaki:
[1] Memasang Widget Twitter