Cara Buat Scroll Box Di Blog (Sidebar dan post)

Cara Buat Scroll Box Di Blog (Sidebar dan post) | Semalam ada seorang rakan blog yang bertanyakan soalan, macam mana nak buat scroll pada post seperti yang aku buat pada post ini. Cuba korang tengok dekat bawah. Akan nampak scroll tu. Ok lah. Yang sebenarnya, tak susah mana pun nak buat ni. Cuma kalau kita nak terangkan dalam Handphone, memang tak pandai la. Jadi, kita buat post Cara Buat Scroll Box Di Blog (Sidebar dan post) biar semua orang faham. Ok? Baiklah, jom tengok apa yang korang perlu buat.

Langkah pertama adalah, bukak blog, pergi pada bahagian template dan klik Edit HTML.

Kemudian, gunakan fungsi carian *Ctrl+F* dan cari code ini : <data:post.body/>. Untuk pengetahuan korang, code ini ada banyak dalam template. Tapi aku gunakan code yang kedua. Maknanya, aku tekan enter 2 kali.

Kemudian. Ini yang korang kena buat. Ada leceh sikit kalau korang belum biasa dengan coding HTML ni. Aku pun kadang-kadang hang jugak. Hehe. Sebelum tu, aku nasihatkan, korang jangan buat dekat HTML ni dulu. Korang boleh buat dekat notepad. Ok? Copy code ni.

<div style="border: 1px solid #000000; height: 150px; overflow: auto; padding: 10px; width: 500px;">

Gantikan dengan code korang</div>

Ok. Nampak perkataan yang bold tu? Ok. Gantikan dengan code korang. Kalau adsense, adsense la ye. Kalau nak buat iklan bertulis pun boleh.

Kemudian, Kalau guna code iklan adsense, pastikan korang dah parse dulu ya. Lepas copy, paste pada Perkataan yang aku bold tu. Jelas setakat ini cara-cara Cara Buat Scroll Box Di Blog (Sidebar dan post) ni?

Ok langkah seterusnya adalah, copy pulak code ini:

<div expr:id='&quot;post1&quot; + data:post.id'/>

<div class='googlepublisherads' style='margin:20px 0'>

<center>

--Masukkan code Di atas ke bahagian ini--

</center>

</div>

<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);

var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);

var s=obj1.innerHTML;

var t=s.substr(0,s.length/2);

var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);

if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}

</script>

Ok. Korang nampak tak perkataan Masukkan code Di atas ke bahagian ini tu? Korang masukkan code yang korang buat awal-awal tadi. Gantikan perkataan bold tu. Ganti semua tau bahagian ni: --Masukkan code Di atas ke bahagian ini--

Ok. Dah siap? Lepas dah siap, korang pergi balik dekat HTML tadi tu. Gantikan code <data:post.body/> tu dengan code di atas ni. Copy semua tau! Lepas tu boleh save. 

Dan dah siap Cara Buat Scroll Box Di Blog (Sidebar dan post). Amacam? Susah tak? Nampak susah pada mereka yang tak mahir lagi dengan coding. Tapi kalau dah biasa, sambil senyum-senyum je dah siap. Hehe.

Ha! Itu kalau dalam post tau! Kalau nak tahu Cara Buat Scroll Box Di Sidebar, sama je. Cuma langkah nya lebih pendek. Korang copy je code ni:

<div style="border: 1px solid #000000; height: 150px; overflow: auto; padding: 10px; width: 500px;">

Gantikan dengan code korang</div>

Kemudian korang klik Layout-Add a Gadget HTML/JavaScriptAdd. Kemudian, korang paste je dalam tu dan save. Dah siap! Mudah kan? Ok lah. Diharapkan korang faham dengan apa yang aku ajar ni. Nampak memang susah, tapi senang je bila korang dah faham Cara Buat Scroll Box Di Blog (Sidebar dan post) ni . Ok? Selamat mencuba!