Cara membuat dan memasang Scroller Box-1: Panduan dan Tutorial BloGGeR

Membuat scroll box tidaklah susah, tetapi ada yang lebih penting dari mudahnya cara membuat scroller box. Membuatnya menjadi lebih menarik, atraktif, dilengakapi dengan penataan yang baik untuk memuat teks atau gambar dan nyaman untuk di aduk-aduk isi dalamnya. Ada beberapa cara membuat scroll box, untuk kali ini akan kita buat scroll box yang agak rumit dengan menggunakan tabel.

Kode CSS - Scroller Box-1 :

td{
        font-family:Verdana, Arial, Helvetica, sans-serif; 
        font-size:10px;  
}
.topleft{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjboH9flV9nDaML-VZ-hLZDPmo-wRZdckwflzkX8A5lHHe9X7KW0BdTqGNli3m6mQnKWFsaiCfwMPrCswJ7XF8BzpNltkO-WUOe39Y-8p0IwDMzXzVxWgFFY_yiiDLxVWCQ-PfEHpnUTGI/s200/bgsGR_bgtable_topleft.png); 
        background-position:top right; 
        background-repeat:no-repeat;
}
.topright{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7sVfVtqGea7ACJu_oyzREwuSdWMkKeWtHa8K7Xs4A_JG_9FK2tDpm36L7rlAp9GeIQEcIBTxdUR6Bn9P2p-7bbYFm8PW7tkjHVMcZoOnJF62OX6qIlpSLzk25NBK3zYQKFnC8QDR5p6I/s200/bgsGR_bgtable_topright.png); 
        background-position:top right; 
        background-repeat:no-repeat;
}
.topmiddle{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4l9sDjQDpzIkwDDp9RL_IZ1vApghNjVrtsDMvD_LrfYy1tswR8r8sBCOX9ETWnsioFZLdPFE5qAv7OkaPl5OlkrLjsWx7ugvQxSMTuINWdFwUzq5oMN6JchjfENOrZfIvaDlStEABJzo/s200/bgsGR_bgtable_topcenter.png);
        background-position:top;
        background-repeat:repeat-x;
        font-family:Verdana, Arial, Helvetica, sans-serif; 
        font-size:11px; 
        color:#FFFFFF; 
        font-weight:bold; 
        padding-left:5px;
        text-align:left;
}
.table_frame{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh79cNVaqfnAZNLLtv-oK7CIFQsI1WZ9eJ2-eP3mYLJIKnKvUKR7wC5zueiypdofhCqYVenbWGXkrpGTlo4Ydfad6qXuzk4lsqKdlXsodXaNc4G9lhR25G7knY6m7TI79n0fn7nqzMXAQs/s200/bgsGR_bgtable_bottom.png);
        background-position:top;
        background-repeat:repeat-x;
}
.text_content {
        font-family:Verdana, Arial, Helvetica, sans-serif; 
        font-size: 10px;
        text-align:left; 
}
.title_text_content {
        font-family:Arial; 
        font-size:10px;
        font-weight:bold;  
}
.td_title {
        font-family:Verdana;
        color: #003366;
        font-size:11px; 
        font-weight:bold; 
}
.td_title:hover {
        color:#990099;
} 
.tableTitle {
        font-family:Verdana; 
        font-size:12px; 
        color:#FFFFFF; 
        font-weight:bold
}
a { 
        text-decoration: none; 
} 
a:hover{
        text-decoration:underline;
        color:green;
}
.boks{
        width:292px; 
        height:150px; 
        overflow-x:none; 
        overflow-y:scroll; 
        padding:3px 3px 6px 6px;
}
.isiboks{
        padding-top:10px;
        width:275px;
        height:100;
        text-align:left;
        background:url(http://i47.tinypic.com/303acuo.gif);
}
.thumb{
        height:30px;
        width:50px; 
        padding:2px; 
        border:solid 1px #0066FF; 
}
.thumb:hover { 
        border:solid 1px red;
}

xHTML - Scroll Box-1

<table><tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="306"><tbody><tr><td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr><td height="31" width="7" class="topleft">&nbsp;</td>
<td width="222" class="topmiddle">Judul Box</td>
<td width="68" align="right" class="topmiddle"><img src="Logo-TopRight.jpg" width="48" height="19" /></td>
<td height="31" width="7" class="topright">&nbsp;</td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td width="7" class="table_frame">&nbsp;</td>
<td widht="306" bgcolor="#0099FF";>
<div class="boks">
<table class="isiboks">
<tbody>
<tr valign="top">
<td><a href="Link-1a" target="_blank"><img src="Image1.jpg" title="Tulis Title-2 di sini!" border="0" class="thumb" /></a>
</td>
<td align="left"><a href="Link-1b" target="_blank"><font class="td_title">Judul-1</font></a><br />Tuliskan teks di sini !
</td>
</tr>
<tr valign="top">
<td><a href="Link-2a" target="_blank"><img src="Image2.jpg" title="Tulis Title-2 di sini!" border="0" class="thumb" /></a>
</td>
<td align="left"><a href="Link-2b" target="_blank"><font class="td_title">Judul-2</font></a><br />Tuliskan teks di sini !
</td>
</tr>
<tr valign="top">
<td><a href="Link-3a" target="_blank"><img src="Image3.jpg" title="Tulis Title-3 di sini!" border="0" class="thumb" /></a>
</td>
<td align="left"><a href="Link-3b" target="_blank"><font class="td_title">Judul-3</font></a><br />Tuliskan teks di sini !
</td>
</tr>
</tbody>
</table>
</div>
</td><td width="7" class="table_frame">&nbsp;</td>
</tr>
</tbody>
</table>
</td></tr>
</table>

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.