Gallery Information

Tutorial ScrollBox

1. Masuk Akun Blogger
2. Pilih Rancangan/Design
3. Pilih Elemen Laman/Add Page Elemen
4. Pilih Tambah Widget/Add Widget
5. Copy script dibawah ini di dalamnya

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col">Nama Widget</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan Anda Masukan Text Anda Disini.</div></div></td></tr>
</table>
</div>

6. Lalu S A V E

Keterangan :
Warna Kuning : Silahkan ganti sesuai keinginan anda
Warna Merah : Silahkan Isi text, atau widget yang lain yang ingin anda masukkan dalam scrollbox.

Untuk jenis huruf dan ukuran bisa anda rubah sendiri, silahkan anda berkreasi sendiri, jika ada yang kurang jelas silahkan anda tanyakan. Semoga Bermanfaat dan Tetap Optimis.

5. Silahkan copy kode HTML dibawah ini dan letakan di dalamnya

<div style="margin-bottom: 2px;"><span style="color: #000080;"><strong>Judul Spoiler </strong></span>
<div style="margin-bottom: 2px;">
<div style="margin-top: 1px; text-align: left;"<input style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ") { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = "; this.innerText = "; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = "none"; this.innerText = "; this.value = "Buka"; }" type="button" value="Buka" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Isi spoiler disini bisa berupa gambar, text atau widget</div>
</div>
</div>

6. S A V E

Keterangan :
Untuk Warna Pink : Merupakan Judul Spoiler
Untuk Warna Merah : Text yang berada di tombolnya bisa anda ganti dengan kata yang lain
Untuk Warna Kuning : Isi dari Spoiler, silahkan anda masukan disini
Lihat Hasilnya, Jika masih kurang silahkan anda rubah sesuai dengan keinginan anda. yang jelas semakin anda rubah akan membuat anda semakin bertambah ilmu anda. Semoga bisa bermanfaat dan bisa dipahami dengan mudah oleh para blogger lainya terutama blogger pemula.
Terima Kasih

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

6. Kemudian cari kode <data:post.body/> Kemudian ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. S A V E

Keterangan :

Warna Kuning :
- var thumbnail_mode = "float" ; : Untuk mengganti letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
- summary_noimg = 250; : Total Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
- summary_img = 250; : Menunjukan Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
- img_thumb_height = 120; : Untuk mengganti Tinggi dari thumbnail dalam ukuran piksel;
- img_thumb_width = 120; : Untuk Merubah Lebar thumbnail dalam ukuran piksel;
- READMORE : Bisa anda ganti sesuai dengan karakter anda

Selamat mencoba, jika ada yang kurang jelas, silahkan anda tanyakan. Semoga bermanfaat dan tetap Semangat Keep Blogging !!
Terima Kasih