Panduan Cara Membuat Scroll Box-2: Tutorial BloGGeR Scoller

Scroll box ini memang bykan scrollbox sederhana. Box didesain secara lengkap dengan penataan secara khusus untuk menampilkan sebuah artikel pendek lengkap dengan box title, boks teks serta box thumbnail (image berukuran kecil). Anda dapat menggunakannya untuk ringkasan posting, misalnya.

Kode CSS Scroller :

.MBscrollboks{
        height:255px;
        width:400px;
        float:left; 
        margin-left:5px;
}
.MBscrollboks .ltrbox{
        background:#0099FF;
        height:252px;
        width:400px; 
        margin-top:5px;
} 
.MBscrollboks .top,.MBscrollboks .topleft,.MBscrollboks .topmiddle,.MBscrollboks .topright{
        height:35px;
        float:left; 
        border:none;
}
.MBscrollboks .top{
        width:400px;
        border-bottom:2px solid red;
} 
.MBscrollboks .topleft{
        width:6px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9zsJANIjE5B20tbBbbGTue3hiqqB6Dok1Q36d_Q_eRlD1-li4YauUkF8O8tZ_wXfqeOAxe_CRdQBB-gP3qONnHwCmoXFKD9DOJfQ00_sIzWavjRvOvHJzkMvdSdzK9_AgH_ptP3KcNe6/h120/mitrabaraya_bgtable_topleft.png) no-repeat; 
}
.MBscrollboks .topmiddle{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9JWeX9i3UTpNC2CNx6xCmQus1FdWv_JYvLA6Lw815GOHbbdNLLQM4piMDpCIsElkObTgDYm2ej1NynV0wY8Isg9XQtRJjoiteCj0oQD4vEahiRPEoQN18vY19v63TsFsahMh8deY-E4az/h120/mitrabaraya_bgtable_topcenter.png) repeat-x;
        width:388px;
}
.MBscrollboks .topright{
        width:6px;
        background: url(https://lh6.googleusercontent.com/-00cGSyeoLEc/T3GGRgcyeqI/AAAAAAAAAjs/BuWVUc8jXbc/h120/bgsGR_bgtable_topright.png) no-repeat;
        float:right; 
} 
.MBscrollboks .toptitle{
        width:250px;
        heigh:15px; 
        margin:10px 6px; 
        font-family:Verdana; 
        font-size:12px; 
        font-weight:bold; 
        color:#fff;
        float:left;
}
.MBscrollboks .toplogo{
        height:24px;
        float:right;
        width:48px;
        margin:4px 6px;
        border:2px solid #999933;
        border-radius:5px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9RZ0UtDeRIveUs9ZN8Of4w_WuHgqZxHR_d-XvZapMbWtsqubce5ApQiKkI5-313TKMJBJyPsr6Guic8-YKJip8fJjDnqThGyjuKjCpg99tohcwBYDxGduVR6fg_k-5EXtFO4j8xSOy2oU/h120/mitrabaraya_animasimata.gif) no-repeat;
}
.MBscrollboks .artikel{
        height:200px;
        width:382px; 
        padding:5px; 
        margin:4px 4px 6px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5T4dN4ZMQjglCbEGBhy1v0GStoRSa_W5cSx90k90QTfSxJmDwwBMfe53eRygzEHiE9D31SGwsQtfcF5KCbAjdoZZ1uUfafctyGQ7W-2Bi9wGh2Glb06k77JvKZir_ipSMDCkAgQ4lWoT/h120/mitrabaraya_bg-content.jpg);
  float:left;
        border:none;
        font-family:Arial; 
        font-size:11px; 
        color:#fff;
        overflow-y:auto;
}
.MBscrollboks .artikel a{
        font-family:Verdana; 
        font-size:11px; 
        font-weight:bold; 
        color: #FFCC33;
        text-decoration:none;  
}
.MBscrollboks .artikel a:hover{
        color:#FF0000;
}    
.MBscrollboks .artikel img{
        float:left;
        width:60px;
        margin:5px 6px -3px 0;
        border:1px solid #fff;
        padding:2px;
        background:#333;
}
.MBscrollboks .artikel img:hover{
        border:1px solid red;
} 
.MBscrollboks .artikel h4{
        font-family:Times New Roman; 
        font-size:14px; 
        font-weight:bold; 
        color:blue; 
        margin:4px 0; 
}
.MBscrollboks .artikel p{
        margin:4px 0 6px; 
}

xHTML Scroller Box-2

<div class="MBscrollboks"><div class="top"><div class="topleft"></div><div class="topmiddle">
<div class="toptitle">Judul/Nama Box</div><div class="toplogo"></div></div>
<div class="topright"></div></div><div class="ltrbox"><div class="artikel"><h4>Judul-1</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-1">Judul Content-1</a><p>Scroller Box-2 ini di bangun menggunakan tag DIV. Mempunyai fungsi yang sama dengan scroller Box-1 hanya berbeda dalam ukuran dan sistem penataan content box-nya. </p><div style="clear:both"></div>
<h4>Judul-2</h4><img src="https://lh4.googleusercontent.com/-7VV32P3_dEo/T24fYqtEeDE/AAAAAAAAAiA/WqJoPavei1Q/s144-c/BigBackground.jpg" /><a href="Link Content-2">Judul Content-2</a><p>Scroller Box-2 ini di bangun menggunakan tag DIV. Mempunyai fungsi yang sama dengan scroller Box-1 hanya berbeda dalam ukuran dan sistem penataan content box-nya. </p><div style="clear:both"></div>
<h4>Judul-3</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-3">Judul Content-3</a><p>Tuliskan teks di sini !</p><div style="clear:both"></div>
<h4>Judul-4</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-4">Judul Content-4</a><p>Tuliskan teks di sini !</p><br /><div style="clear:both"></div>
<h4>Judul-5</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-5">Judul Content-5</a><p>Tuliskan teks di sini !</p><div style="clear:both"></div>
<h4>Judul-6</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-6">Judul Content-6</a><p>Tuliskan teks di sini !</p><div style="clear:both"></div>
</div></div></div><div style="clear:both"></div>

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"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
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.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

Cara backup template, cara mencari kode dan cara menyimpan berbagai kode html dapat dibuka melalui Special Tutorials yang terletak pada menu sebelah kiri halaman.
Sebaiknya gunakanlah gambar/image/thumbnail dengan ukuran tinggi maksimal 50px atau tinggi sesuaikan dengan panjang teks.
Ganti background logo yang berupa image (pada KODE CSS) dengan logo yang sesuai blog kamu !
Untuk penggunaan "DIV" pada ruang posting supaya hasil output sesuai harapan sebaiknya semua kode dibuat secara rapat (jangan ada spasi) !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - mitrabaraya «

Bloger Sunda | tutorial blogger

Selasa, 23 Februari 2010