Cara Membuat Scroll di Posting Area

Ketika kita membicarakan tentang posting area, tentunya banyak hal yang dapat kita lakukan untuk memodifikasi wilayah tersebut. Kali ini saya akan menjelaskan Cara Membuat Scroll di Posting Area. Hal ini berangkat dari beberapa pertanyaan kawan-kawan blogger seputar cara modifikasi posting area. yang setidaknya ada beberapa kemungkinan dalam kemudahan pengunjung ketika membaca posting anda. Kelebiahan lainnya lebih simpel dan cukup menarik tampilannya. Baiklah.....sekarang kita mulai saja Cara Memodifikasi Posting Area. ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Cari kode seperti di bawah ini atau yang sejenisnya.

.post{ margin:.5em 0 1.5em;  border-bottom:1px dotted $bordercolor;  padding-bottom:1.5em}

Tambahkan kode berikut ke dalamnya.

height:200px; overflow:auto;

Tampilannya akan menjadi seperti di bawah ini

.post{ margin:.5em 0 1.5em;  border-bottom:1px dotted $bordercolor;  padding-bottom:1.5em;
height:200px; overflow:auto;}

Silahkan sesuaikan sendiri ketinggian tampilan pada height:200px sesuai keinginan anda.


Selanjutnya bila anda ingin membuat posting area kecil dalam artikel karena anda tidak ingin memiliki scrollbar untuk semua posting blog, tapi hanya untuk beberapa paragraf  dalam  sebuah tulisan untuk  menyertakan  beberapa  teks panjang dalam scrollbox. Silahkan ikuti petunjuk ini.

Masukkan kode berikut di atas kode ]]></b:skin> dan Simpan Template.

.scrollbox{height:100px; width:400px; overflow:auto}

Ketika anda ingin menggunakan scrollbox pada tulisan artikel anda, gunakan kode di bawah ini.

<div class="scrollbox">masukkan tulisan atau kode anda di sini</div>

Contohnya akan menjadi seperti ini. (di dalamnya ada script seo gratis untuk pembaca artikel ini)

Dibawah ini adalah kode smart seo otomatis untuk setiap postingan. Petunjuk pemasangannya silahkan kunjungi link di bawah ini
kode rahasia seo untuk blogspot

<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>
function autoLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;cara&quot;, &quot;http://blogonol.blogspot.com/&quot;);
f.startScript();
</script></b:if>

Silahkan klik Terbitkan Entri dan lihat hasilnya
Baiklah semoga bermanfaat bagi semua
Selamat mencoba dan sukses selalu

"keep spirits and do the best"