1/1/11

Home > Archives for 1/1/11

Cara Mempercepatkan Loading Blog Menggunakan Google Chrome Frame

<p><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzjVzgoEHRza42_UGgU8Mc5oMRtsw87JaNfmAkvign0EIWW_DmPgFnf7mTkonp9eKi2HbwvP0qe_rByZyQeKK32ehju641ZKuaRQw7jc6q5oO6W3RoJXgWH2cSD0yT8mZm2VLLP21812w/s1600/chrome-os-beta.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzjVzgoEHRza42_UGgU8Mc5oMRtsw87JaNfmAkvign0EIWW_DmPgFnf7mTkonp9eKi2HbwvP0qe_rByZyQeKK32ehju641ZKuaRQw7jc6q5oO6W3RoJXgWH2cSD0yT8mZm2VLLP21812w/s1600/chrome-os-beta.jpg" /></a></div>
1.Log ke dashboard anda - desing-> ->Edit HTML<br />
<br />
2.Click pada "Expand Template Widget"<br />
<br />
3.Scroll turun ke mana anda melihat ini <span style="color: blue;"> <head></span><br />
<br />
4.Copy kod di bawah ini dan paste tepat dibawah kod <span style="color: blue;"><head></span><br />
<br />
<br />
<br />
<pre style="border: 1px solid black; height: 50px; overflow: auto;"><b><span class="Apple-style-span" style="font-family: Verdana,sans-serif;"><span class="Apple-style-span" style="color: red;">                   <meta http-equiv='X-UA-Compatible' content='chrome=1'/></span></span></b></pre>
<br />
5.Kemudian cari kod  <span style="color: blue;"></head></span><br />
<br />
6.Copy kod di bawah ini dan paste tepat setelah kod <span style="color: blue;"></head> </span><br />
<br />
<pre style="border: 1px solid black; height: 150px; overflow: auto;"></pre>
<br />
<br />
7.Sekarang Simpan Template anda.<br />
<br />
Kira time loading blog anda .. Nikmat!!!</p>

1.Log ke dashboard anda - desing-> ->Edit HTML 2.Click pada "Expand Template Widget" 3.Scroll turun ke mana anda melih...

Cara Buat Kotak Iklan 125 x125 di Blog

<p><br />
<center><img alt="Cara Buat Kotak Iklan 125 x125 di Blog" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0LS2DqtN33bSPCi3ewgGJAnGCkRc1BXxn3CRtV0qi6ySNdd8jhIiAJtZEmBiSd7ruOBMbdiT_1q17p6aP-3z36P-T12mVyksoZkA8IYoIgPKlq9s2ihg03n3LW9FEAePocJVUVxRD8tH/s320/images.jpg" width="278" /></center><br />
* Log in ke account blogger anda<br />
<br />
<br />
* Pada dasbord --> <span class="content"></span>Design --> Edit HTML<br />
<br />
* Cari kode berikut ini  ]]></b:skin><br />
<br />
* Kemudian taruh kode CSS dibawah ini diatasnya<br />
<br />
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<div style="color: #990000;">
#Johan-ads {</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
margin: 0px;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
padding: 5px;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
text-align: center;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
}</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
#Johan-ads img {</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
margin: 0px 4px 4px 0px;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
padding: 3px;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
text-align: center;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
border: 1px solid #c0c0c0;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
}</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
#Johan-ads img:hover {</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
margin: 0px 4px 4px 0px;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
padding: 3px;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
text-align: center;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
border: 1px solid #333;</div>
<div style="color: #990000;">
<br /></div>
<div style="color: #990000;">
}</div>
</blockquote>
</span></div>
<br />
* Klik Simpan<br />
<br />
*  Selanjutnya Pada Elemen Laman --> Pilih Tambah Gadget --> Pilih HTML/Javascipt<br />
<br />
* Kemudian anda  memasukan kode dibawah ini.<br />
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<blockquote>
<div style="color: #990000;">
<div id="Johan-ads"></div>
<div style="color: #38761d;">
<a target="_blank" href="<span style="color: red;">http://johanrakyat.blogspot.com/</span>"><img alt="ads" src="<span style="color: blue;">http://penyamun.fileave.com/iklan%20125.jpg</span>" border="0" /></a></div>
<div style="color: #38761d;">
<br /></div>
<div style="color: #38761d;">
<a target="_blank" href="<span style="color: red;">http://johanrakyat.blogspot.com/</span>"><img alt="ads" src="<span style="color: blue;">http://penyamun.fileave.com/iklan%20125.jpg</span>" border="0" /></a></div>
<div style="color: #38761d;">
<br /></div>
<div style="color: #38761d;">
<a target="_blank" href="<span style="color: red;">http://johanrakyat.blogspot.com/</span>"><img alt="ads" src="<span style="color: blue;">http://penyamun.fileave.com/iklan%20125.jpg</span>" border="0" /></a></div>
<div style="color: #38761d;">
<br /></div>
<div style="color: #38761d;">
<a target="_blank" href="<span style="color: red;">http://johanrakyat.blogspot.com/</span>"><img alt="ads" src="<span style="color: blue;">http://penyamun.fileave.com/iklan%20125.jpg</span>" border="0" /></a></div>
<br />
<div style="color: #990000;">
</div></div>
</blockquote>
</blockquote>
</span></div>
<br />
Klik Save Selesai</p>

* Log in ke account blogger anda * Pada dasbord --> Design --> Edit HTML * Cari kode berikut ini ]]></b:skin> * Kem...

Cara Buat Scroll Box untuk Widget

<p><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJOmiq9FUcSZBAQ5LOyskLBcA7h8gc_FRY2KUrzfeyvFTCxV1LgaMEZ2H5NfiBBwLcwHr2cnCrKACjyRbLtUwvr_jYOQaVp157zHcKH5mL-Uj01ErEYcZa1FmFda8uoze-bYJ6r7wIp7A/s1600/ctrl.scrolBar02.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJOmiq9FUcSZBAQ5LOyskLBcA7h8gc_FRY2KUrzfeyvFTCxV1LgaMEZ2H5NfiBBwLcwHr2cnCrKACjyRbLtUwvr_jYOQaVp157zHcKH5mL-Uj01ErEYcZa1FmFda8uoze-bYJ6r7wIp7A/s400/ctrl.scrolBar02.gif" width="400" /></a></div>
<br />
<br />
Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.<br />
<br />
<br />
Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.<br />
<br />
Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.

Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)<br />
<br />
Tutorial untuk membuat scroll box adalah seperti berikut..<br />
<br />
1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)<br />
<br />
2. Kemudian masukkan/ubah kod widget seperti berikut.<br />
<br />
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<span class="fullpost"><div style="<span style="color: #ff6600;">width:426px</span>;<span style="color: #3333ff;">height:100px</span>;overflow:auto; "><br /><br /><span style="color: red;">Letakkan kod widget anda disini</span><br /><br /></div></span></blockquote>
</span></div>
<br />
Note :
<span style="color: orange;">width</span>: ubah mengikut lebar yang anda kehendaki<br />
           <span style="color: blue;">height</span>: ubah mengikut tinggi yang anda kehendaki<br />
<br />
3. Apabila selesai, save dan lihat hasilnya..</p>

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan ji...

Cara Nak Tukar "Older Posts", "Newer Posts", dan "Home" Dengan Image Icon

Hi,friend! Sekarang kita belajar cara nak tukar "Older Posts", "Newer Posts", dan "Home" dengan image icon. Usually "Older Posts", "Newer Posts", and "Home"terletak di bawah blog kita.<br />
<br />
Fungsi ini mengarahkan kita untuk pergi ke laman lain, baik posting lama halaman atau baru laman posting. Biasanya, arahan ("Older Posts", "Baru Posts", "Home") adalah hanya sebuah kata, maka kita akan mengubah kata itu menjadi sebuah ikon.jika anda ingin trik ini,ikuti langkah-langkah dibawah:<br />
<br />

1. Log in to your blogger icon<br />
2. Go to Design>>>Edit HTML<br />

3. Thick "Expand Widget Templates"<br />
4. Then find this code :<br />
<br />
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<div class="alert">
<span class="Apple-style-span" style="color: #cc0000;"><b:includable id='nextprev'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><div class='blog-pager' id='blog-pager'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><b:if cond='data:newerPageUrl'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><span id='blog-pager-newer-link'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><a 
class='blog-pager-newer-link' expr:href='data:newerPageUrl' 
expr:id='data:widget.instanceId + "_blog-pager-newer-link"' 
expr:title='data:newerPageTitle'></span><span class="Apple-style-span" style="color: blue;"><b><data:newerPageTitle/></b></span><span class="Apple-style-span" style="color: #cc0000;"></a></span><br />
<span class="Apple-style-span" style="color: #cc0000;"></span></span><br />
<span class="Apple-style-span" style="color: #cc0000;"></b:if></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><br />
</span><br />
<span class="Apple-style-span" style="color: #cc0000;"><b:if cond='data:olderPageUrl'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><span id='blog-pager-older-link'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><a 
class='blog-pager-older-link' expr:href='data:olderPageUrl' 
expr:id='data:widget.instanceId + "_blog-pager-older-link"' 
expr:title='data:olderPageTitle'></span><span class="Apple-style-span" style="color: blue;"><b><data:olderPageTitle/></b></span><span class="Apple-style-span" style="color: #cc0000;"></a></span><br />
<span class="Apple-style-span" style="color: #cc0000;"></span></span><br />
<span class="Apple-style-span" style="color: #cc0000;"></b:if></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><br />
</span><br />
<span class="Apple-style-span" style="color: #cc0000;"><b:if cond='data:blog.homepageUrl != data:blog.url'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><a class='home-link' expr:href='data:blog.homepageUrl'></span><span class="Apple-style-span" style="color: blue;"><b><data:homeMsg/></b></span><span class="Apple-style-span" style="color: #cc0000;"></a></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><b:else/></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><b:if cond='data:newerPageUrl'></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><a class='home-link' expr:href='data:blog.homepageUrl'></span><b><span class="Apple-style-span" style="color: blue;"><data:homeMsg/></span></b><span class="Apple-style-span" style="color: #cc0000;"></a></span><br />
<span class="Apple-style-span" style="color: #cc0000;"></b:if></span><br />
<span class="Apple-style-span" style="color: #cc0000;"></b:if></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><br />
</span><br />
<span class="Apple-style-span" style="color: #cc0000;"></div></span><br />
<span class="Apple-style-span" style="color: #cc0000;"><br />
</span></div>
</blockquote>
</span></div>
<br />
5. Tukarkan link yang berwarna biru dengan link image anda<br />
<br />
                               <img border='0' src='<span style="color: blue;">ICON URL</span>'/><br />
<br />
Contoh :<br />
<br />
<center><img border="0" src="https://sites.google.com/site/genkitemplate/olderpage/home.png" /><br />
<img border='0' src='<span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/home.png</span>'/></center>

<center><img border="0" src="https://sites.google.com/site/genkitemplate/olderpage/previous.png" /></center>
                <img border='0' src='<span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/previous.png</span>'/><br />
<br />
<br />
<center><img border="0" src="https://sites.google.com/site/genkitemplate/olderpage/Newer.png" /></center>

<img border='0' src='<span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/Newer.png</span>'/><br />
<br />
<br />
Akan jadi macam nie:<br />
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<span class="Apple-style-span" style="color: #cc0000;"><b:includable id='nextprev'><br />
<div class='blog-pager' id='blog-pager'><br />
<b:if cond='data:newerPageUrl'><br />
<span id='blog-pager-newer-link'><br />
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' 
expr:id='data:widget.instanceId + "_blog-pager-newer-link"' 
expr:title='data:newerPageTitle'><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;"><img border='0' src='</span></span></span></span><span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/Newer.png</span><span class="Apple-style-span" style="color: #cc0000;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;">'/></span></span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:olderPageUrl'><br />
<span id='blog-pager-older-link'><br />
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' 
expr:id='data:widget.instanceId + "_blog-pager-older-link"' 
expr:title='data:olderPageTitle'><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;"><img border='0' src='</span></span></span></span>'<span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/previous.png</span><span class="Apple-style-span" style="color: #cc0000;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;">'/></span></span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:blog.homepageUrl != data:blog.url'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;"><img border='0' src='</span></span></span></span><span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/home.png</span><span class="Apple-style-span" style="color: #cc0000;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;">'/></span></span></a><br />
<b:else/><br />
<b:if cond='data:newerPageUrl'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;"><img border='0' src='</span></span></span></span><span style="color: blue;">https://sites.google.com/site/genkitemplate/olderpage/home.png</span><span class="Apple-style-span" style="color: #cc0000;"><span class="Apple-style-span" style="color: black;"><span class="Apple-style-span" style="color: #38761d;">'/></span></span></a><br />
</b:if><br />
</b:if><br />
<br />
</div></span></blockquote>
</span></div>
<br />
<br />
 6.Jika sudah,Save dan lihat hasilnyer...<br />
<br />
Note: Anda boleh menukar link image anda sendiri</p>

Hi,friend! Sekarang kita belajar cara nak tukar "Older Posts", "Newer Posts", dan "Home" dengan image icon....

Cara Pasang Auto Read More Dengan Gambar

<p><br />
<center style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Pasang Read More Auto With Title and Thumbnail" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmhdHCXAJGVADEOu8HFXwz-mXEcbDMRtR3lsQIGHiqNayOjW9hlmUUceAkAbpMTIF-EYVw5STc8be9AdO4TcSJKgk_msHckVwf7srvoAhSH6GIq351YGzIYT-AxKY8T-0OikqGHVLzHIHz/s200/readmore.jpg" width="200" /></center><br />
<br />
<br />
<br />
<br />
Mahu pasang Readmore button? xsusah mana pun...Jom try buat...<br />
<br />
Caranya mudah,Hanya ikuti langkah-langkah di bawah ini:<br />
<br />
1. Masuk ke <span class="content"></span>Design lalu EDIT HTML<br />
2. Centang Expand Widget Templates<br />
3. Cari kode </head><br />
4. Tambahkan kode berwarna biru berikut dibawah kode </head><br />
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 850px; overflow: auto; padding: 5px; width: 500px;">
<span style="color: blue;"><script type='text/javascript'><br />
var thumbnail_mode = "float" ;<br />
summary_noimg = 250;<br />
summary_img = 250;<br />
img_thumb_height = 120;<br />
img_thumb_width = 120;<br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function removeHtmlTag(strx,chop){<br />
if(strx.indexOf("<")!=-1)<br />
{<br />
var s = strx.split("<");<br />
for(var i=0;i<s.length;i++){<br />
if(s[i].indexOf(">")!=-1){<br />
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br />
}<br />
}<br />
strx = s.join("");<br />
}<br />
chop = (chop < strx.length-1) ? chop : strx.length-2;<br />
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;<br />
strx = strx.substring(0,chop-1);<br />
return strx+'...';<br />
}<br />
function createSummaryAndThumb(pID){<br />
var div = document.getElementById(pID);<br />
var imgtag = "";<br />
var img = div.getElementsByTagName("img");<br />
var summ = summary_noimg;<br />
if(img.length>=1) {<br />
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>';<br />
summ = summary_img;<br />
}<br />
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br />
div.innerHTML = summary;<br />
}<br />
//]]><br />
</script></span> </div>
<br />
<br />
<center></center><br />
5.Lalu cari kode <data:post.body/><br />
<br />
6.Ganti kode tersebut dengan kode berwarna hijau di bawah ini.
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 180px; overflow: auto; padding: 5px; width: 500px;">
<span style="color: green;"><b:if cond='data:blog.pageType != "item"'><br />
<div expr:id='"summary" + data:post.id'><data:post.body/></div><br />
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br />
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><span style="color: red;">READ MORE - </span><data:post.title/></a></span><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></span></div>
<br />
Yang berwarna merah gantikan ayat sesuai dengan keinginan Anda...<br />
<br />
7. Save Template.<br />
<br />
8.View Blog..!!!<br />
<br />
Bagi yang ingin mengganti tulisan <span style="color: white;">'</span><span style="background-color: red; color: white;">Readmore</span>' atau 'Baca Selanjutnya' dengan image atau gambar seperti dibawah ini:
<br />
<center style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Pasang Read More Auto With Title and Thumbnail" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmhdHCXAJGVADEOu8HFXwz-mXEcbDMRtR3lsQIGHiqNayOjW9hlmUUceAkAbpMTIF-EYVw5STc8be9AdO4TcSJKgk_msHckVwf7srvoAhSH6GIq351YGzIYT-AxKY8T-0OikqGHVLzHIHz/s200/readmore.jpg" width="100" /></center><br />
<br />
<br />
<br />
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 120px; overflow: auto; padding: 5px; width: 500px;">
<b>1. Cari kode berikut</b><br />
<span style="color: red;">READ MORE - <data:post.title/><br />
</span><br />
<br />
<b>2. Ganti dengan kode berikut<br />
</b><img border='0' src='URLGAMBAR' alt='Read More' /></div>
<br />
Ganti tulisan warna merah dengan url gambar / image readmore anda,<br />
kalau tidak ada,cuma copy code image readmore berikut:<br />
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 70px; overflow: auto; padding: 5px; width: 500px;">
<img border='0' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRhsXX_CXeH11UItDH-cqU_qqTn2gRdkLqc79sr-03cE5vmsFjx1rryqpWqK_b6nZdF2ss3LRPJqyvKmReNLqh7qzi9QKbEL0rThfgy8T-DOCxhzQPckzhfKlU4DxOP1l0Q9-EV3yuQ7az/s320/read+more_thumb%5B1%5D.png'
 alt='Read More' /></div></p>

Mahu pasang Readmore button? xsusah mana pun...Jom try buat... Caranya mudah,Hanya ikuti langkah-langkah di bawah ini: 1. Masuk ke...

Cara Sembunyikan Tulisan Di Posting Blog Guna Spoiler

<p>Spoiler adalah teknik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk mengjimatkan space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 saat, maka jika dengan Spoiler cukup dengan 30 saat dan mungkin kurang dari itu (tergantung isi content).<br />
<br />
Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga boleh sembunyikan gambar dalam ukuran besar serta video.

Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya boleh dilihat keseluruhnya oleh pembaca apabila buttonnya diklik.<br />
<br />
Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:

<br />
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="font-weight: bold;"> Contoh Spoiler</span><input 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 ajer...'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' please buka!!!'; }" style="font-size: 10px; margin: 5px; padding: 0px; width: 80px;" type="button" value=" please buka!!!" />
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 15px;">
<div style="display: none;">
disinilah tempat untuk meletak content dalam spoiler
</div>
</div>
</div>
</div>
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); overflow: auto;">
<div><div style="margin: 10px;"><br />
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;"> <span style="color: blue;">Contoh Spoiler</span></span><input value=" <span style="color: red;">please buka!!!</span>" style=" <span style="color: blue;">margin:5px;</span>padding:
 0px; width: 80px; 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 = ' <span style="color: red;">Tutup Jer...</span>';
 } else { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 = 'none'; this.innerText = ''; this.value = ' <span style="color: red;">please buka!!!</span>'; }" type="button"/><br />
</div><br />
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><br />
<div style="display: none;"><br />
<span style="color: magenta;">disinilah tempat untuk meletak content dalam spoiler</span><br />
</div></div></div></div></div>
<br />
<div style="color: red;">
Keterangan: </div>
Copy kod diatas,letak di new post anda....<br />
<br />
1. Teks warna Biru adalah Judul Content dan boleh diganti sesuai dengan selera anda, Namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol);<br />
<br />
2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda.<br />
<br />

3. Teks warna Pink adalah tempat menaruh isi content postingan Anda.</p>

Spoiler adalah teknik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk mengjimatkan space halaman po...

Submit Blog Anda Guna Sitemap Generator

<p>Sitemap Generator Untuk Submit Blog
Postingan ini kadang ada juga gunanya buat yang baru belajar buat blog, sama seperti saya kadang rada bingung juga cara buat sitemaps, sama seperti buku kalo tidak ada daftar isi dan alamat halamannya dimana susah juga bacanya,karena susah pasti males bukanya boro boro mau tau isinya, gua sudaj 4 bulan ngo Blog kadang juga masih bingung..

Ini sedikit solusi untuk submit sitemap blog.
Salah satu cara agar postingan blog anda cepat terindek oleh mesin pencari seperti Google, Yahoo, atau Bing adalah dengan mengirimkan alamat sitemap blog anda.
<br />
<br />
<br />
<br />
<center><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlI_hb4DByvP-MmHYYux21dLvze6zlUYp-plKyfC2Wn896NAoTCFY5vpNTMLEDrfnsfNUNgjkaeB5qhgEfyivc4Uoz0xj0Z0FGnfbILxmNVYdnIccnrA2he-XpMjTiMSyMHSlMM4rRmGEq/s640/Blogger+Sitemap+generator1.jpg" width="600" /></center><br />
<div>
<br /></div>
Idealnya, file sitemap harus mengandung semua URL dari sebuah situs, tetapi jika blog kita di-host di blogspot.com (atau jika kita menggunakan custom domain), kita akan terkejut kalau tahu bahwa sitemap default file hanya berisi 26 halaman terbaru saja yang terindex dari blog. Lalu bagaimana cara mengatasinya? sebenarnya masalah ini sudah dijelaskan sangat lengkap diblognya Amit Agarwal yaitu seorang blogger populer asal India, jadi silahkan pelajari saja langsung diblognya dialamat ini labnol.org (jangan lupa di translate)

Ada satu masalah yang biasanya dipunyai oleh para blogger yang menggunakan mesin blogger atau blogspot adalah URL yang terindek oleh google hanya sedikit, walaupun postingan yang dimiliki sudah mencapai ratusan. Contoh salah satu blog kang Rohman http://blogtemplate4u.com telah mempunyai 121 posting, namun dalam data yang ada pada webmater, URL yang terindeks hanyalah sebanyak 20<br />
<div>
<br />

<br />
<br />
<br />
<br />
<center><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinxllDDF1nH1kd9fdA6ekwGOi2gGVU2lLiMsb3fy_E427PQ9orgIAkfIeCp6ODDPr2QWKzP0QG_OD58PfnEeRBek17gAn4lTDYoUJBzV4EWLjLCaeDIS1bAuWl-_qqnW4eTVk_w-AiRth1/s640/sitemap_thumb+2.jpg" width="600" /></center><br />
<div>
<br /></div>
Pertanyaan ini adalah pertanyaan yang sering sekali ditanyakan oleh para blogger yang menggunakan mesin blogspot

Cara untuk mengatasi error sitemap di gogle webmaster adalah dengan menggunakan Blogger Sitemap Generator. Dengan menggunakan Blogger Sitemap Generator kita dapat membuat sitemap untuk blog kita dan terbukti bisa mengatasi masalah tidak terindek nya postingan kita.</div>
<div>
<br />

<br />
<br />
<br />
<center><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LE7rXWDi3K9sBExangfakvBZviUemEYRU38kRp3TpWBYidVFcbdBBQGUJo4ROt0QmGgrGvS3hJPOFhA9GRO5hCYDromajQBHsDALxrkWwsjrLaOExonIQ5RWbN05zN0fwcG_ss6UCrq9/s640/sitemap-ku_thumb+3.jpg" width="600" /></center><br />
<div>
<br /></div>
Berikut cara menggunakan <span class="Apple-style-span" style="color: blue;">Blogger Sitemap Generator</span> :<br />
<div>
 1. Silahkan klik butoon <span class="Apple-style-span" style="color: red;">START </span>dibawah untuk ke Sitemap Generator :<br />
<br />
<br />
<br />
<br />
<center><a href="http://digitalinspiration.com/tools/blogger/sitemap/index.php" target="_blank"><img alt="DOWNLOAD NOW" src="https://sites.google.com/site/johanrakyat/pic/startbutoon.gif" title="Sitemap Generator" /></a></center><br />
<div>
<br /></div>
Masukan alamat blog anda pada kolom yang tersedia, jangan lupa untuk menuliskan secara lengkap alamat blog anda ( misal : <span class="Apple-style-span" style="color: red;">h</span><span class="Apple-style-span" style="color: red;">ttp://joharakyat.blogspot.com</span> ), lalu Klik tombol <span class="Apple-style-span" style="color: blue;">Create Blogger Sitemap.</span></div>
<div>
<div>
<br />

<br />
<br />
<br />
<br />
<center><img border="0" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5gR_u6uAyWJh6UyZAbkVI5zfcZuPh6SRR0_uQ68MKC8fOd3Egj-UHgBcGE_VU9nNKUtmX6SpYXwWtyav8bOZeYLosL9ybkRIl8X4iRy3RXaeqx9OyMas2aAiAgpb8BWHT3wCPEMVzvTF7/s640/blogger-sitemap-generator+4.jpg" width="600" /></center><br />
<div>
<br /></div>
4. Catat alamat sitemap yang telah dibuat atau copy paste pada notepad atau yang lainnya,<br />
<div>
     contoh :
<span class="Apple-style-span" style="color: red;">atom.xml?redirect=false&start-index=1&max-results=500</span><br />
<div>
<br />
 
<br />
<br />
<br />
<br />
<center><img border="0" height="431" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZQt4bLrHnR5dUfnZw8Pj6UG5Z4elJ_sINA3M6xozROxG6lPloJmjXotWvgNAsjeAuMt3EF3iVKfdHjIeGm799ZIRiaS2GLw_KRI80sKrRyNHRUH0Us1bqFqp6jcv9mf9Wlu2hiv3vYDg/s640/submit-sitemap_thumb+5.jpg" width="600" /></center><br />
<div>
<br /></div>
5. Masukkan alamat sitemap di google webmasters tools, Buat rekan yang sudah mengerti cara submit blogger sitemap digoogle webmaster tools bisa langsung mengunakan Blogger sitemap generator, sebenarnya tidak hanya untuk google saja, rakan juga dapat mengirim dengan melakukan ping Sitemap langsung ke Yahoo dan Bing.<br />
<br /></div>
<div>
Untuk anda yang mempunyai postingan lebih dari 500, maka alamat sitemap yang harus disubmit adalah lebih dari satu alamat sitemap, </div>
<div>
<span class="Apple-style-span" style="color: blue;">contoh :</span><br />
 <span class="Apple-style-span" style="color: red;">* atom.xml?redirect=false&start-index=1&max-results=500 </span><br />
<span class="Apple-style-span" style="color: red;"> * atom.xml?redirect=false&start-index=501&max-results=500 </span></div>
<div>
<span class="Apple-style-span" style="color: red;"> * atom.xml?redirect=false&start-index=1001&max-results=500 </span></div>
<div>
<span class="Apple-style-span" style="color: red;"> * atom.xml?redirect=false&start-index=1501&max-results=500 </span></div>
<div>
<span class="Apple-style-span" style="color: red;"> * atom.xml?redirect=false&start-index=2001&max-results=500 </span></div>
<div>
<br /></div>
<div>
 Mudah-mudahan dengan cara ini membuat sitemap blog anda lebih cepat di index oleh google, dan mudah-mudahan pengunjung blog anda bisa lebih meningkat dari search engine.

</div>
</div>
</div>
</div>
</div></p>

Sitemap Generator Untuk Submit Blog Postingan ini kadang ada juga gunanya buat yang baru belajar buat blog, sama seperti saya kadang rada bi...

Auto Backlink Generator-Tutorial SEO

<p><br />
<br />
<center><img border="0" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvv-TWp624hSQ6EaFxkSSMJQDdfU_GFIJRP2ly9FUhQN7w9BosbFWMbG2O6Uogl7D1bbvMeVkOf4lu5g091wMhBkg2l87iIRMi4BG1fjR6lHM69cw9XOGFsrxeC7imuYAxC-8U4OD_Wwm/s1600/header-bg.gif" width="500" /></center><br />
<br />
Saya ingin kongsikan dengan anda semua salah satu cara saya mendapat Backlink sesuatu Blog dengan cepat.<br />
<br />
<div style="color: red; text-align: center;">
<b>1.Auto Backlink Generator </b></div>
<div style="color: red; text-align: center;">
<br /></div>
<center><a href="http://marketingblogonline.com/autobacklinks/" target="_blank"><img alt="DOWNLOAD NOW" src="https://sites.google.com/site/johanrakyat/pic/go-button-trans.gif" title="Auto Backlink Generator" /></a></center><div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Dan yang ini juga </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">

<b style="color: red;">2. Auto Backlink Feed Generator </b></div>
<div style="text-align: center;">
<br /></div>
<center><a href="http://marketingblogonline.com/feedbacklinks/" target="_blank"><img alt="DOWNLOAD NOW" src="https://sites.google.com/site/johanrakyat/pic/go-button-trans.gif" title="Auto Backlink Feed Generator" /></a></center><div style="text-align: center;">
 </div>
<div style="text-align: center;">
Yang ini ada perlu letakkan RSS Feed blog anda.

Selesai!

</div></p>

Saya ingin kongsikan dengan anda semua salah satu cara saya mendapat Backlink sesuatu Blog dengan cepat. 1.Auto Backlink Generator ...

Posting Kod HTML/Javascript di Blogspot

<p><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9151PRmDYICDcpdH36QOLVbve3i1SMpkIltrnlQGzpX-SWcOc7KtSj4h3hjyUggB06VSFH8COfUE7MS41yBwE3gN3OpeGoJyDlQqcC4mBUAdyOyuJIMBDMiK0ZUDAiUH_9ViYKkM4ZQWU/s1600/convert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9151PRmDYICDcpdH36QOLVbve3i1SMpkIltrnlQGzpX-SWcOc7KtSj4h3hjyUggB06VSFH8COfUE7MS41yBwE3gN3OpeGoJyDlQqcC4mBUAdyOyuJIMBDMiK0ZUDAiUH_9ViYKkM4ZQWU/s1600/convert.png" /></a></div>
<b><span style="font-family: Georgia,"Times New Roman",serif; font-size: x-large;">T</span></b>ips pendek kali ini adalah berkenaan kod html/javascript diposting blog anda. Mungkin pernah anda menulis di artikel untuk highlight kod html. Bila anda posting, hilang pula kod html itu... Dan ada juga yang tertanya-tanya bagaimana wak paparkan kod html di blog ini.Sebenarnya ada tools internet yang ada untuk convert html untuk dipaparkan diposting blog anda. salah satunya gadjet dari pakcik google ini pun boleh digunakan.. Tak silap ada beratus tools sebegini.. Anda pilih dan gunakanlah mengikut kesesuaian anda ya..

T ips pendek kali ini adalah berkenaan kod html/javascript diposting blog anda. Mungkin pernah anda menulis di artikel untuk highlight kod...

Jquery Tab Menu Accordion versi 2!

<p>Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba
 <b>Jquery Tab Menu Accordion</b> seperti yang boleh dilihat pada demo 
di <a href="http://jquerytabmenu.blogspot.com/2010/12/jquery-tab-menu-accordion.html"><b>sini</b></a>(sila
 klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan 
berbagai jenis widget seperti <b>Shout box</b>, <b>Top Post</b>,<b>Recent
 Post</b>, <b>Recent Comment</b>, <b>Top Commentator</b> dan sebagainya 
mengikut citarasa anda sendiri. Jquery tab menu accordion ini 
semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan 
cursor mouse pada title tab menu tersebut.<br />
<br />
Untuk memasang Jquery tab menu accordion  sila ikut beberapa langkah 
yang mudah dibawah.<br />
<br />
<b>Langkah 1</b><br />
<br />
Login Blogger Dashboard --> Design --> Add A Gadget --> 
HTML/Javascript.<br />
<br />
Copy dan paste kod di bawah pada content HTML/Javascript.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6X0pCqREMmJAPC8YxgIpjMZKdPJqzG5SKGCbOOXvO-DC8VsMjm620gse4hXxsDwFNne3Lcgne-aU0Kgq2avYS3AXlWY7hjDhzo1BoRnB9LZsKyan_QlesDAeaHl6hSloEYSKhmHd5VWTY/s1600/Untitled-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6X0pCqREMmJAPC8YxgIpjMZKdPJqzG5SKGCbOOXvO-DC8VsMjm620gse4hXxsDwFNne3Lcgne-aU0Kgq2avYS3AXlWY7hjDhzo1BoRnB9LZsKyan_QlesDAeaHl6hSloEYSKhmHd5VWTY/s1600/Untitled-2.jpg" /></a></div>
<div style="background-color: #eeeeee;">
</div>
<div style="background-color: #eeeeee;">
 <style type="text/css"></div>
<div style="background-color: #eeeeee;">
h5 {</div>
<div style="background-color: #eeeeee;">
font-family: trebuchet-ms, arial, tahoma;</div>
<div style="background-color: #eeeeee;">
font-size: 13px;</div>
<div style="background-color: #eeeeee;">
padding: 0 0 1em;</div>
<div style="background-color: #eeeeee;">
font-weight:bold;</div>
<div style="background-color: #eeeeee;">
color: <span style="color: blue;">#ffffff</span>;</div>
<div style="background-color: #eeeeee;">
}</div>
<div style="background-color: #eeeeee;">
.msg_list {</div>
<div style="background-color: #eeeeee;">
list-style: none;</div>
<div style="background-color: #eeeeee;">
margin: 0;</div>
<div style="background-color: #eeeeee;">
padding: 0;</div>
<div style="background-color: #eeeeee;">
width: 100%;</div>
<div style="background-color: #eeeeee;">
}</div>
<div style="background-color: #eeeeee;">
.msg_head {</div>
<div style="background-color: #eeeeee;">
padding: 5px 10px;</div>
<div style="background-color: #eeeeee;">
cursor: pointer;</div>
<div style="background-color: #eeeeee;">
position: relative;</div>
<div style="background-color: #eeeeee;">
background-color:<span style="color: blue;">#F80680</span>;</div>
<div style="background-color: #eeeeee;">
margin:1px;</div>
<div style="background-color: #eeeeee;">
}</div>
<div style="background-color: #eeeeee;">
.msg_body {</div>
<div style="background-color: #eeeeee;">
padding: 5px 10px 15px;</div>
<div style="background-color: #eeeeee;">
background-color:<span style="color: blue;">#F4F4F8</span>;</div>
<div style="background-color: #eeeeee;">
}</div>
<div style="background-color: #eeeeee;">
</style></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<script type="text/javascript"></div>
<div style="background-color: #eeeeee;">
$(document).ready(function()</div>
<div style="background-color: #eeeeee;">
{</div>
<div style="background-color: #eeeeee;">
//hide the all of the element with class msg_body</div>
<div style="background-color: #eeeeee;">
$(".msg_body").hide();</div>
<div style="background-color: #eeeeee;">
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked</div>
<div style="background-color: #eeeeee;">
$("#firstpane h5.msg_head").click(function()</div>
<div style="background-color: #eeeeee;">
{</div>
<div style="background-color: #eeeeee;">
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");</div>
<div style="background-color: #eeeeee;">
});</div>
<div style="background-color: #eeeeee;">
//slides the element with class "msg_body" when mouse is over the paragraph</div>
<div style="background-color: #eeeeee;">
$("#secondpane h5.msg_head").mouseover(function()</div>
<div style="background-color: #eeeeee;">
{</div>
<div style="background-color: #eeeeee;">
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");</div>
<div style="background-color: #eeeeee;">
});</div>
<div style="background-color: #eeeeee;">
});</div>
<div style="background-color: #eeeeee;">
</script></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<div class="msg_list" id="secondpane"></div>
<div style="background-color: #eeeeee;">
<h5 class="msg_head"><span style="color: red;">Tajuk 1</span></h5></div>
<div style="background-color: #eeeeee;">
<div class="msg_body"></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee; color: red;">
Masukkan kod disini.</div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
</div></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<h5 class="msg_head"><span style="color: red;">Tajuk 2</span></h5></div>
<div style="background-color: #eeeeee;">
<div class="msg_body"></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee; color: red;">
Masukkan kod disini.</div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
<h5 class="msg_head"><span style="color: red;">Tajuk 3</span></h5></div>
<div style="background-color: #eeeeee;">
<div class="msg_body"></div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee; color: red;">
Masukkan kod disini.</div>
<div style="background-color: #eeeeee;">
<br /></div>
<div style="background-color: #eeeeee;">
</div></div>
<div style="background-color: #eeeeee;">
</div></div>
<div style="background-color: #eeeeee;">
</div>
<br />
<br />
Untuk mengubah warna background title box, title font dan background 
accordion box, sila edit kod yang di bold dengan warna biru.<br />
<br />
color: <b style="color: blue;">#ffffff</b>;  ( title font )<br />
background-color:<b style="color: blue;">#F80680</b>; ( background title
 box )<br />
background-color:<b style="color: blue;">#F4F4F8</b>; ( background 
accordion box )<br />
<br />
Untuk memasukkan widget seperti <b>Shout box,Top Post,Recent Post, 
Recent Comment, Top Commentator</b> dan sebagainya, gantikan teks <b style="color: red;">Masukkan kod disini.</b> dengan kod widget yang anda
 inginkan.<br />
<br />
Edit teks <b style="color: red;">Tajuk</b><span style="color: red;"><span style="color: black;">,</span></span><b style="color: red;"> 1 </b><b style="color: red;">Tajuk 2</b><span style="color: red;"><span style="color: black;">,</span></span><b style="color: red;"> </b><span style="color: black;">dan</span><b style="color: red;"> </b><b style="color: red;">Tajuk 3</b> dengan title yang anda inginkan.<br />
<br />
<b>Langkah 2</b><br />
<br />
Akhir sekali, klik Save<br />
<br />
Sumber: <a href="http://maribinablog.blogspot.com/2010/12/cara-pasang-jquery-tab-menu-accordion.html">maribinablog </a></p>

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo d...

Cara buat Kotak Scrollbar Pada Posting Blog-Tutorial

<p>Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga boleh menjimatkan ruang pada blog kita.

Untuk membuat kotak ini caranya sangat mudah:<br />
1. Buka Blogger. Klik menu<span style="color: blue;"> Design -> Page Elements </span><br />
2. Klik Add a Gadget lalu klik <span style="color: blue;">HTML/Javascript </span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KV38mepmhEHyWU3hvOdc1IXjC5QvpJFC0v7IaePGR8w0SFCd0WqVB5wS6Q1PIDXPsh0MCzX5s9plE_08Nk3Hum0tCrQWcg2NyKdahBfyA518s3YruCelNr6Foc93Ma1HGdjuuMwCSmOC/s1600/blogger56.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KV38mepmhEHyWU3hvOdc1IXjC5QvpJFC0v7IaePGR8w0SFCd0WqVB5wS6Q1PIDXPsh0MCzX5s9plE_08Nk3Hum0tCrQWcg2NyKdahBfyA518s3YruCelNr6Foc93Ma1HGdjuuMwCSmOC/s320/blogger56.JPG" width="270" /></a></div>
<br />
3. Masukkan kode yang dibawah ini:<br />
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); color: blue; height: 80px; overflow: auto; padding: 5px; width: 580px;">
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang boleh digulung kekanan atau kebawah sehingga bisa menjimatkan ruang pada blog</div></div>
<br />
Maka hasilnya akan seperti ini:  <br />
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 80px; overflow: auto; padding: 5px; width: 80px;">
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>
<br />
<span style="font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif;">Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan</span></span> <span style="color: blue; font-size: x-small;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="color: red;"><img src="alamat url gambar Anda" /></span>

<span style="color: red;">Catatan:</span>
<span style="color: red;">Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh</span> http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif </span></span><br />
<br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;">Sebagai contoh saya memasukkan:</span><br />
<span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;">

<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 80px; overflow: auto; padding: 5px; width: 580px;">
<br />
<span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span style="color: blue;"><div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSzvuH8imdZMUlWdHRLfyybr2t9dFeGxPzzDzTzyrseVPlSOrANjSa6hj3tP9e6K2j_6Z-cBRMm85x71bJoGyR-cYaYYj05Er_TitN51hcFyA0xzI2GGtNsuIyKWDVCxyURjRXtEGyaoz/s320/cuti-cuti+cinta.jpg" /></div></span></span></div>
<br />
Maka hasilnya akan seperti ini<br />
<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 80px; overflow: auto; padding: 5px; width: 300px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSzvuH8imdZMUlWdHRLfyybr2t9dFeGxPzzDzTzyrseVPlSOrANjSa6hj3tP9e6K2j_6Z-cBRMm85x71bJoGyR-cYaYYj05Er_TitN51hcFyA0xzI2GGtNsuIyKWDVCxyURjRXtEGyaoz/s320/cuti-cuti+cinta.jpg" /></div>
<br />
<br />
4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya<br />
<br />
Kode Terbaru Cara <span style="color: red;">Auto</span> </span><br />
Tukar tulisan warna <span style="color: red;">merah</span> dengan tulisan anda<br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><br />
 <div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;"><br /><span class="fullpost"><blockquote><span style="color: red;">Letak tulisan anda disini </span><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span class="fullpost"><span style="color: red;">Letak tulisan anda disini</span></span></span><span style="color: red;"> </span><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span class="fullpost"><span style="color: red;">Letak tulisan anda disini </span></span></span><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span class="fullpost"><span style="color: red;">Letak tulisan anda disini</span></span></span><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span class="fullpost"><span style="color: red;"> </span></span></span><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span class="fullpost"><span style="color: red;"><span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;"><span class="fullpost"></span></span></span></span></span></blockquote><br /></span></div><br />
<br />

</span></div>
 </span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif; font-size: x-small;">Selamat Mencuba!!?</span></p>

Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga boleh menjimatkan ruang pada blog kita. Un...

Buat Scroll Box Untuk Blog Archive-Tutorial

<p><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbo8edG_XgsMNgVOFR2uiWCBWtY1MTsSm5zOpgUGqblxamHIxiC4DWG4uJ4QCFETw68PvJEyaf5O4xJm9hVs298wAto52NG6O6IXKrxC2YRDAF1881NY8dahpZqqK18y4_nXPdrwykTq-n/s1600/blog-archive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbo8edG_XgsMNgVOFR2uiWCBWtY1MTsSm5zOpgUGqblxamHIxiC4DWG4uJ4QCFETw68PvJEyaf5O4xJm9hVs298wAto52NG6O6IXKrxC2YRDAF1881NY8dahpZqqK18y4_nXPdrwykTq-n/s320/blog-archive.jpg" width="320" /></a></div>
<br />
<br />
Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kemas.<br />
<br />
STEP 1<br />
<div style="color: black;">
DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE </div>
*<span style="color: red;">Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.</span><br />
<br />
STEP 2<br />
Tekan keyboard, CTRL+F secara serentak.Cari code;

<span style="color: red;"><div id='ArchiveList'></span><br />
<br />
STEP 3<br />
<br />
Di atas coding step 2,<br />
Sila copy dan paste coding;

<span style="color: red;"><div style='overflow:auto; width:ancho; height:100px;'></span><br />
<br />
*height=korang boleh ubah berapa panjang kotak scroll yang korang nak.<br />
<br />
STEP 4<br />
<br />
Di akhir coding step 2 tue, korang kena masukkan penutup coding bagi step 3 iaitu <span style="color: red;"></div></span><br />
<br />
Contoh coding;

<br />
<div style="background-color: white; border: 1px solid rgb(204, 204, 204); height: 180px; overflow: auto; padding: 5px; width: 480px;">
<div style='overflow:auto; width:ancho; height:300px;'><br />
<span style="color: blue;"><div id='ArchiveList'></span><br />
<span style="color: red;"><div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'></span><br />
<b:if cond='data:style == &quot;HIERARCHY&quot;'><br />
<b:include data='data' name='interval'/><br />
</b:if><br />
<b:if cond='data:style == &quot;FLAT&quot;'><br />
<b:include data='data' name='flat'/><br />
</b:if><br />
<b:if cond='data:style == &quot;MENU&quot;'><br />
<b:include data='data' name='menu'/><br />
</b:if><br />
</div><br />
</div> <span style="color: red;"></div></span><br />
<span style="color: blue;"><b:include name='quickedit'/></span></div>
**hint masukkan code <span style="color: red;"></div></span> sebelum coding <span style="color: red;"><b:include name='quickedit'/></span><br />
<br />
STEP 5

Klik<br />
Preview dan Save jika tiada sebarang error serta berpuashati.<br />
<br />
Selamat mencuba ye...</p>

Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kema...

Cara Membuat Multi Kolum Footer Widgets - Terbaru!

<p><br />
<center><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s0k_VCYvxR37Q6f8GOdJBV8ZUojI46i-ix5ZlMmtPBhfAHQ_BlR60oEzTDnhudisvKBVeaXcmA_m-munFzS1lxA5cBSVY7Y6JP6Gj-6Xv1S1sdnC2XRTBZPCfIyMSmVs8cZrpuBdyZYH/s1600/Multi-Column-Widgety.gif" width="550" /></center>
Widget baru ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget  footer yang baru mempunyai beberapa kesan CSS yang besar ditambah ke dalamnya yang membuatnya lebih baik. Pertama melihat demo untuk mengetahui apa yang sangat berbeza tentang hal itu.

Lihat widget di bahagian bawah blog Demo berikut,<br />
<br />
<center><a href="http://menteriku.blogspot.com/" target="_blank"><img alt="DOWNLOAD NOW" src="https://sites.google.com/site/johanrakyat/j/viewbutton.png" title="TAJUK POST" /></a></center>

Cara Tambah Multi Kolum Footer Widgets Untuk Blogger ?

Pertama kita akan menambah kod CSS untuk anda blogger template dan kemudian HTML. Jadi tanpa membuang masa membolehkan melompat terus ke langkah-langkah berikut,<br />
1. Go To Blogger> Design> Edit HTML<br />
2. Backup Template anda<br />
3. Search for ]]></b:skin><br />
4. Tepat di atas ]]></b:skin> paste kod di bawah ini,

<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
  /*----- MBT MULTI COLUMN FOOTER WIDGET -----*/<br />
<br />
    #lower {<br />
    margin:auto;<br />
    padding: 0px 0px 10px 0px;<br />
    width: 100%;<br />
    background:#333333;<br />
    }<br />
    #lower-wrapper {<br />
    background:#333333;<br />
    margin:auto;<br />
    padding: 20px 0px 20px 0px;<br />
    <span style="color: blue;">width: 960px;</span><br />
    border:0;<br />
    }<br />
    #lowerbar-wrapper {<br />
    background:#333333;<br />
    float: left;<br />
    margin: 0px 5px auto;<br />
    padding-bottom: 20px;<br />
    <span style="color: blue;">width: 23%;</span><br />
    text-align: justify;<br />
    color:#ddd;<br />
    font: bold 12px Arial, Tahoma, Verdana;<br />
    line-height: 1.6em;<br />
    word-wrap: break-word;<br />
    overflow: hidden;<br />
    }<br />
    .lowerbar {margin: 0; padding: 0;}<br />
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}<br />
    .lowerbar h2 {<br />
    margin: 0px 0px 10px 0px;<br />
    padding: 3px 0px 3px 0px;<br />
    text-align: left;<br />
    border:0;<br />
    color:#ddd;<br />
    text-transform:uppercase;<br />
    font: bold 14px Arial, Tahoma, Verdana;<br />
    }<br />
    .lowerbar ul {<br />
    color:#fff;<br />
    margin: 0 auto;<br />
    padding: 0;<br />
    list-style-type: none;<br />
    }<br />
    .lowerbar li {<br />
    display:block;<br />
    color:#fff;<br />
    line-height: 1.6em;<br />
    margin-left: 0 !important;<br />
    padding: 6px;<br />
    border-bottom: 1px solid #222;<br />
    border-top: 1px solid #444;<br />
    list-style-type: none;<br />
    }<br />
    .lowerbar li a {<br />
    text-decoration:none; color: #DBDBDB;<br />
    }<br />
    .lowerbar li a:hover {<br />
    text-decoration:underline;<br />
    }<br />
    .lowerbar li:hover {<br />
    display:block;<br />
    background: #222;<br />
    }</blockquote>
</span></div>
<br />
5 Sekarang cari. </body> dan paste kod berikut persis di atas </body><br />
<br />
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>
<div id='lower'>        <br />
<div id='lower-wrapper'><br />
<br />
<div id='lowerbar-wrapper'>         <br />
<b:section class='lowerbar' id='<b>lowerbar1</b>' preferred='yes'>         
</b:section>         <br />
</div><br />
<br />
<div id='lowerbar-wrapper'>         <br />
<b:section class='lowerbar' id='<b>lowerbar2</b>' preferred='yes'>         <br />
</b:section>         <br />
</div><br />
<br />
<div id='lowerbar-wrapper'>         <br />
<b:section class='lowerbar' id='<b>lowerbar3</b>' preferred='yes'>         <br />
</b:section>         <br />
</div><br />
<br />
<span style="color: green;"><div id='lowerbar-wrapper'>          <br /><b:section class='lowerbar' id='<b>lowerbar4</b>' preferred='yes'>           <br /></b:section>           <br /></div></span><br />
<br />
<div style="color: red;">
<b><div style='clear: both;'/></b>         </div>
</div> </div></blockquote>
</span></div>
<br />
<span class="fullpost">6. Simpan template anda dan anda selesai!<br />
    Sekarang, masuklah ke <b>Elemen Laman</b> dan menambah widget anda ke Footer Widgets baru ditambah bahawa akan kelihatan seperti ini,<br />
<center><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0CN0KJl-ZqjkMHxu1DGrF-k6ZDM177slTKLqzXzxMWOvWdJhEjmEHUFtp0yQW0Bzw00tciXI4b3klS46DqF1DRr1Dyd1euQdt2u6bhH1U_etbKGPC6jFaxrjABDkqX6qGJeCKIDMF8ud/s1600/Kolum+bar.png" width="550" /></center>

</span><span class="fullpost"><div align="justify">
Anda boleh mengamati bahawa 
ada empat medan secara lalai dan anda boleh menambah widget yang 
anda inginkan untuk setiap medan. Jika anda ingin menambah atau 
mengurangkan jumlah medan menegak kemudian ikuti langkah-langkah di 
bawah ini.</div>
<h4>

Cara Customize Widget itu?</h4>
<div align="justify">
Simple jer...Saya fikir warna dan keseluruhan saiz dan 
padding dan margining cukup sempurna. Satu-satunya hal yang anda perlu 
menyesuaikan dengan template anda adalah lebar widget dan jumlah 
medan menegak. </div>
 </span><br />
<span class="fullpost">1. Dalam rangka mengurangkan atau menambah lebar keseluruhan widget hanya menukar <b><span style="color: green;">width: 960px;</span></b> <br />
    2. Jika anda ingin mengurangkan jumlah widget ke tiga maka cukup hapuskan bagian kod, </span><br />
<br />
<span class="fullpost"><div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><span style="color: green;"><div id='lowerbar-wrapper'>          <br /><b:section class='lowerbar' id='<b>lowerbar4</b>' preferred='yes'>           <br /></b:section>           <br /></div></span></span></div>
</span><br />
3. Atau jika anda ingin menambah medan tambahan kemudian tambah kod di bawah ini tepat di atas <span style="color: red;"><div style='clear: both;'/> </span><br />
<div style="clear: both;">
<br />
<div style="border: 1px inset rgb(108, 122, 125); color: blue; margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><div id='lowerbar-wrapper'>      <br /><b:section class='lowerbar' id='<b>lowerbar#</b>' preferred='yes'>       <br /></b:section>       <br /></div></span></div>
</div>
<br />
Ingat bahawa lowerbar # merujuk pada jumlah medan. Jadi jika anda ingin menambah medan kelima maka cukup mengganti lowerbar # dengan lowerbar5.

Selepas anda telah menambah medan kelima maka ingatlah untuk menukar width: 23%; dengan width: 17%;<br />
<br />
Pada pendapat saya cukup hanya empat medan sahaja,ia sudah cukup menarik.....</p>

Widget baru ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget footer yang baru me...

Johan Rakyat