Mengkompres Gambar Agar Blog Tetap Indah dan Ringan

Kehadiran image/gambar dalam sebuah situs memang sangat dibutuhkan. Selain memperindah, sebuah gambar juga mampu berkata lebih banyak ketimbang teks yang berjibun di situs kita. Terlebih jika sebuah situs berfokus kepada konten mengenai tutorial, gambar adalah sebuah konten wajib yang harus ada didalam postingannya.

Tapi permasalahannya menjadi berbeda ketika sebuah situs akhirnya menjadi berat, lantaran gambar-gambarnya yang berukuran besar. Ini bisa dilihat pada situs-situs mengenai tutorial photoshop, seperti psdtuts, photoshoplady, dsb.

Adakah cara mengatasinya?

Untuk yang mempunyai program Photoshop pada komputernya, kalian bisa menggunakan pilihan Save For Web Devices (CTRL+SHIFT+ALT+S) yang sudah ada. Tools yang disediakan ini mampu mengecilkan ukuran file gambar, dengan menurunkan kualitas gambar ke kualitas yang paling mendekati gambar asli.

Berikut adalah contoh hasil gambar yang dikompress menggunakan Save for Web Devices :

 
Gambar disebelah kiri berukuran 30kb, dan setelah dikompress, ukurannya menjadi hanya 14kb saja. Hasilnya tidak terlalu jauh berbeda kan dengan yang aslinya?

Lalu bagaimana dengan yang ngga punya sotosop ? kalian bisa memakai software Image Resizer sebagai alternatif.

Dari hasil uji coba, software yang satu ini bisa menghasilkan kualitas gambar yang ngga jauh beda dengan yang dihasilkan oleh tools Save for Web Devices nya photoshop. Cara pakainya pun mudah koq.

1. Download dulu softwarenya melalui link ini :

http://www.ziddu.com/download/12644093/ImageResizer_Portable_4.0.1.5_Multilingual.paf.exe.html (7mb)

2. Jalankan file installernya.

3. Kalo udah, jalankan deh programnya.

 

4. Dimenu utama, masukkan file gambar yang ingin kalian perkecil, kemudian tekan tombol next untuk masuk ke pengaturan selanjutnya.

Pada menu pengaturan, pilihan resize yang di berikan sangat lengkap. Kalian bisa merubah ukurannya sesuai dengan standar profile ataupun dengan resolusi yang kalian inginkan sendiri. Kemudian, juga ada pilihan preview untuk melihat bagaimana hasil gambar yang akan dihasilkan nantinya.

Pengen berimprovisasi lebih dengan gambar yang kalian resize tersebut?, kalian bisa memasukkan efek ke dalamnya, dan masih banyak lagi fitur-fitur lainnya. Pokoke, software ini bisa dibilang software wajib untuk kalian yang ingin blognnya tetap ringan walaupun memakai image yang lumayan banyak.

Read More...

Cara Memperbaiki Error Pada Widget Blog Archive

Masih berhubungan dengan masalah ketidak-validan template Blogger dimata Validator W3, kali ini ada sedikit info tentang widget Blog Archive atau Arsip Blog, yang mungkin saat ini juga sedang kalian pasang di blog kalian. Widget ini mengandung banyak Error jika ditampilkan dalam bentuk Hirearcy. Dan hal ini tentu saja semakin membuat blog kita tidak valid.

Hal ini disebabkan karena kode pemanggilan database blogger yang memakai huruf besar dalam penulisannya. Dalam struktur template yang valid, kode-kode javascript dan juga database harusnya hanya menggunakan huruf kecil.

Sayangnya, kita ngga akan bisa memperbaiki penulisan kode tersebut, karena kode tersebut ditanamkan pada mesin Blogger, dimana stylesheet tersebut adalah kode default untuk semua pengguna mesin Blogger. Sampai saat ini, satu-satunya cara untuk mengatasi masalah Error pada Widget ini, adalah dengan mengganti jenis tampilannya menjadi Flat.

So, ada baiknya kalian juga memperhatikan mengenai masalah kevalidan widget yang satu ini di blog kalian. Kenapa? karena semakin valid blog kita, akan semakin mudah juga bagi Bot dari Search Engine dalam mengindeks blog kita.

Semakin mudah search engine mengindeks konten blog kita, semakin besar juga peluang blog kita menduduki Top 10 hasil pencarian pada search engine kan?

Happy Blogging..

Read More...

Cara Menambahkan Fitur Auto Read More

Walau Blogger sudah menambahkan fitur jump break pada default posting nya, nampaknya pilihan auto read more masih menjadi pilihan kebanyakan Blogger. Dengan fitur read more yang otomatis, kita ngga perlu bersusah ria dalam menyelipkan kode HTML pada post kita agar artikel menjadi dua bagian (bagian yang tampil di depan dan bagian yang tampil setelah di klik).

Cukup menulis sebagus yang kita bisa, lalu fitur Javascript akan langsung membuat ringkasan artikel kita dengan word count tertentu. Hebatnya, dengan Javascript, gambar (image) pertama yang ada pada artikel, juga akan secara otomatis di letakkan pada sisi kiri atas artikel. Tentunya jauh lebih mudah kan?

Lalu bagaimana cara menambahkan fitur Auto Read More ini pada template kita? simak adegan berikut. Eh salah, maksudnya simak tutorial berikut..

1. Login ke account blog kalian. Pada menu dashboard, pilih Rancangan / Design.

2. Selanjutnya, masuklah ke menu Edit HTML , Backup dulu template kalian dengan cara mengklik link Download Full Template, kemudian berikan tanda centang pada kolom Expand Widget Template.

3. Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode ini :

]]></b:skin>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 400;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 130;
</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"><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>

4. Cari kode <div class='post-body entry-content'> , dan ganti kode tersebut dengan kode ini :

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

5. Save.

Apa saja yang perlu di ganti ?

summary_noimg = 400;         <-- Jumlah teks yang tampil pada artikel tanpa image / gambar.
summary_img = 250;            <-- Jumlah teks yang tampil pada artikel yang bergambar.
img_thumb_height = 120;     <-- Ukuran tinggi gambar yang tampil.
img_thumb_width = 130;      <-- Ukuran lebar gambar yang tampil.

Ganti teks Read More... (Perhatikan langkah No.4) dengan teks yang kalian inginkan.

Selesai deh.

Read More...

Mengganti Widget Follower Blogger

Dari hasil uji Valid XHTML lewat http://validator.w3.org, dinyatakan bahwa widget Follower default dari blogger tidak lolos uji kevalidan. Widget ini mengandung error alias cacat. Padahal, widget ini bisa dibilang sangat penting bagi blog kita kan? Lewat widget ini,kita bisa berinteraksi lebih jauh dengan para pembaca setia blog kita.

Adakah cara untuk mengatasinya? Jawabannya, ada. Kita bisa memakai kode asli yang dikeluarkan oleh google friend connect.

Perlu diketahui bahwa yang membuat widget follower ini error, adalah penambahan kode pemanggilan script, yang ditambahkan oleh blogger pada script asli google friend connect. Jadi tanpa adanya kode tambahan blogger tersebut, widget ini aman dan valid untuk dipasang pada blog kita.

1. Kunjungi situs http://www.google.com/friendconnect/ , dan loginlah menggunakan account gmail anda.

2. Klik pada banner Tambahkan Gadget Anggota

3. Sesuaikan lebar widget dengan sidebar anda, berikut juga penggunaan font dan warnanya. Bisa dilihat pada live preview yang ditampilkan pada sebelah kanan halaman.

4. Kalau sudah klop, tekan tombol Buat Kode pada bagian bawah halaman.

5. Salin/copy kode yang diberikan oleh Google Friend Connect tersebut.

6. Beralih ke situs blogger. Masuklah ke menu Design/Rancangan, kemudian pilih Add a Gadget.

7. Pada halaman pop-up yang muncul, pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.

8. Berikan judul widget sesuai dengan keinginan anda, lalu tekan tombol save.

9. Masuk ke menu Edit HTML, dan berikan tanda centang pada box Expand Widget Template.

10. Cari kode <b:include name='quickedit'/> , dan hapus semua kode tersebut dari template anda.

Sekarang widget Followers anda telah dinyatakan bersih, aman dan Valid XHTML. ^^

Read More...

Cara Menampilkan Foto Avatar Pada Komentar

Sebelum kita mulai tutorial yang di request oleh saudara Rizal ini, pertama-tama pastikan settingan untuk foto komentar kalian sudah benar. Caranya? Login dulu ke Akun/Dashboard, pilih Pengaturan/Setting kemudian masuk ke menu Komentar/Comment.

Scroll sampai ke bagian paling bawah, dan berikan tanda centang pada Show profile images on comments?

Kalau settingan komentar sudah benar, maka kita lanjut ke pengaturan kode CSS nya.

1. Masuk ke tab Rancangan/Design, lalu pilih menu Edit HTML.

2. Backup template dulu sebelum mulai mengedit. Caranya, klik link Download Template Lengkap. (Sambil nunggu, jangan lupa berdoa)

3. Beri tanda centang pada link Expand Template Widget

4. Cari kode ]]></b:skin>

5. Ganti kode tersebut dengan kode dibawah ini :

.avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
.avatar-image-container img { background:transparent url(http://photoserver.ws/images/qoyS4cc437164683f.jpg)no-repeat;width:40px; height:40px;}
]]></b:skin>

6. Lanjut lagi, cari kode <dl id='comments-block'> atau <div id='comments-block'>

7. Jika elemen template kalian memakai kode dl, gantilah dengan kode berikut :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

• Jika memakai div, ganti dengan kode yang ini :

<div expr:class='data:post.avatarIndentClass' id='comments-block'>

8. Cari (lagi) kode <a expr:name='data:comment.anchorName'/>

9. Ganti dengan kode berikut :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

10. Simpan, selesai dan lihat hasilnya.

Happy blogging.

Read More...

Cara Menghilangkan Icon Tang & Obeng (Quickedit)

Dalam keadaan login ke account gmail/Blog, kita akan melihat tanda tang dan obeng pada widget-widget yang terpasang pada blog kita. Ini sebenarnya tidak akan mengganggu kenyamanan pengunjung, karena icon ini hanya terlihat pada account kita, tidak pada halaman yang dilihat pengunjung. Tapi bila anda merasa terganggu dengan tampilannya, anda bisa menghilangkannya koq.

1. Login ke Account / Dashboard blog anda.

2. Masuk ke pilihan Design / Rancangan.

3. Pilih menu Edit HTML.

4. Cari kode ]]></b:skin>

5. Ganti kode tersebut dengan kode berikut ini :

.quickedit {display:none !important;}
]]></b:skin>

6. Save, dan lihat hasilnya.

Mudah kan?

Read More...

Membuat Widget Hanya Terlihat Pada Halaman Post

Dengan menambahkan beberapa kode pada template, kita bisa membuat sebuah widget hanya tampil pada halaman membaca artikel (Post page) saja,dan tidak tampil pada halaman depan blog (Home Page). Bagaimana caranya? Kita pakai cara yang paling mudah aja.. Let see.

1. Login ke Account/Dashboard blog kalian,kemudian pilih tab Design/Rancangan.

2. Masuk ke menu Edit HTML.

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode di bawah ini :

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML1 {display:none}
#HTML3 {display:none}
</b:if>
</style>

5. Perhatikan teks berwarna biru diatas.. itu adalah kode id elemen yang akan kita buat tampil di halaman artikel /post saja. Ganti kode tersebut dengan id widget kalian. Bagaimana cara mengetahui kode id tersebut pada template kalian?

Kalian bisa mencari berdasarkan judul widgetnya. Teks warna merah dibawah adalah judul widget,sedangkan yang berwarna biru adalah id widgetnya.

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='New Tutorial' type='HTML'/>
</b:section>
      </div>

NB: Pada contoh diatas,berarti widget yang hanya akan tampil dihalaman artikel/post adalah widget Subscribe dan New Tutorial. Sedangkan pada halaman depan blog (Home Page),kedua widget tersebut ngga akan terlihat.

6. Save template,dan lihat hasilnya.

Untuk membuat widget hanya terlihat pada halaman home,bisa membaca post ini :
http://www.resepblog.co.cc/2010/10/cara-membuat-widget-hanya-terlihat-di.html

Read More...

Membuat Widget Hanya Terlihat di Halaman Home

Dengan menambahkan beberapa kode pada template, kita bisa membuat sebuah widget hanya tampil pada halaman depan blog (Home page) saja,dan tidak tampil pada halaman membaca artikel (Post Page). Bagaimana caranya? Kita pakai cara yang paling mudah aja.. Let see.

1. Login ke Account/Dashboard blog kalian,kemudian pilih tab Design/Rancangan.

2. Masuk ke menu Edit HTML.

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode di bawah ini :

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML1 {display:none}
#HTML3 {display:none}
</b:if>
</style>

5. Perhatikan teks berwarna biru diatas.. itu adalah kode id elemen yang akan kita buat tampil di halaman home saja. Ganti kode tersebut dengan id widget kalian. Bagaimana cara mengetahui kode id tersebut pada template kalian?

Kalian bisa mencari berdasarkan judul widgetnya. Teks warna merah dibawah adalah judul widget,sedangkan yang berwarna biru adalah id widgetnya.

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='New Tutorial' type='HTML'/>
</b:section>
      </div>

NB: Pada contoh diatas,berarti widget yang hanya akan tampil dihalaman depan blog adalah widget Subscribe dan New Tutorial. Sedangkan pada halaman membaca artikel,kedua widget tersebut ngga akan terlihat.

6. Save template,dan lihat hasilnya.

Untuk membuat widget hanya terlihat pada halaman post,ikuti tutorialnya di :
http://www.resepblog.co.cc/2010/10/membuat-widget-hanya-terlihat-pada.html

Read More...

Membuat Widget Social Bookmark

Salah satu cara untuk menambah jumlah pengunjung adalah dengan mempromosikan blog kita melalui situs-situs jejaring sosial. Oleh karna itu,memasang widget social bookmark di blog kita juga sangat diperlukan. Dengan sedikit berkreasi menggunakan photoshop dan teknik Sprite pada CSS3,kita bisa membuat widget social bookmark yang simpel dan keren.

( Klik pada gambar untuk melihat previewnya )

Tertarik untuk membuatnya?,silahkan ikuti step-step cara pembuatannya berikut ini..

1. Login ke Account/Dashboard blog kalian. Pilih Rancangan/Design.

2. Klik Add a Gadget dan Pilih HTML/JavaScript.

3. Sebuah halaman baru akan terbuka.

4. Masukkan kode di bawah ini ke dalam kolom Konten/Content.

<ul id="soc">
    <li><a class="facebook" href="http://www.facebook.com/pages/blogger-abstrak/108579879204062" title="Be my facebook fan">Facebook</a></li>
    <li><a class="twitter" href="http://www.twitter.com/angga_leoputra" title="Folow me on Twitter">Twitter</a></li>
    <li><a class="rss" href="http://feeds.feedburner.com/infogaul/feed" title="Subscribe via RSS">rss</a></li>
    <li><a class="mail" href="http://feedburner.google.com/fb/a/mailverify?uri=Infogaul/feed" title="Subscribe to Email updates">email</a></li>
    <li><a class="google" href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaCke6EyES7R%252F9vQV5GbUWRJF1fu2rLjjX8fsVKsnv%252BUZJKZE4NAmdyu0XQgIXM9gdqI%252FvpboOpFyglpdV6Ty1PGzveP%252Bc71pwG8jbWh7HYxnBN%252BTV6%252BYcxszDlrJB6JZ6WWuGE%252B2e3eoPcHsW6Qols5LSOtoN%252BqF22EbtCfkcY5D4DIL3xFYOSKUMLOoi52z94sqJFW%252FVXy0fnf2UGhFG9FAG57LZLxus2kR%252BLo6nV2ggDqtx8%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1" title="Follow Via Google Friend Connect">email</a></li>
</ul>

5. Kode diatas menggunakan URL dari blog ini.. ganti kode berwarna biru dengan URL kalian sendiri,lalu save.

6. Beralih ke menu Edit HTML.

7. Cari kode ]]></b:skin> menggunakan CTRL+F pada browser kalian,dan ganti kode tersebut dengan kode berikut ini :

ul#soc{width:250px;margin:0px auto;list-style:none;padding:0px}
ul#soc li {display:inline;}
ul#soc li a {padding:0px;margin:0px;display:inline-block;float: left;  height: 50px;background: url('http://img201.imageshack.us/img201/2135/socialbutton.png')no-repeat center; text-indent:-9999px;}
ul#soc li a.facebook {width:50px;background-position:0 0;}
ul#soc li a.twitter {width:50px; background-position: -50px 0;}
ul#soc li a.rss {width:50px;background-position: -100px 0;}
ul#soc li a.mail {width:50px;background-position: -150px 0;}
ul#soc li a.google {width:50px;background-position: -200px 0;}
ul#soc li a.facebook:hover,ul#soc li a.facebook:focus {background-position: 0 -50px;}
ul#soc li a.twitter:hover,ul#soc li a.twitter:focus{background-position:-50px -50px;}
ul#soc li a.rss:hover, ul#soc li a.rss:focus {background-position: -100px -50px;}
ul#soc li a.mail:hover, ul#soc li a.email:focus {background-position: -150px -50px;}
ul#soc li a.google:hover, ul#soc li a.email:focus {background-position: -200px -50px;}
]]></b:skin>

8. Save template dan lihat hasilnya.

Semoga bermanfaat.

Read More...

Cara Membuat Artikel Terkait – Related Post

Untuk memudahkan pengunjung dalam menyusuri artikel-artikel di blog,kalian bisa menambahkan widget Artikel Terkait kedalam kolom postingan kalian. Fungsinya adalah agar setiap post/artikel yang terkait atau terbit dalam kategori yang sama,dapat ditampilkan juga dalam post yang sedang dibaca pengunjung. Biasanya,widget ini diletakkan di bawah postingan.

Bagaimana cara membuatnya?,simak aja step-step pembuatannya berikut ini..

1. Login ke Account/Dashboard blog kalian. Masuk ke menu Edit HTML.

2. Backup dulu template kalian,untuk berjaga-jaga apabila ada kesalahan. Caranya,klik link Download Template Lengkap.

3. Kalo udah,beri tanda centang pada Expand Widget Templates

4. Cari kode <data:post.body/> menggunakan CTRL+F pada browser. dan letakkan kode dibawah ini setelah kode tersebut.

(Nb: Akan ada 2 kode <data:post.body/> pada template yang sudah memakai fitur readmore. Oleh karena itu,pastikan kode berikut ini di letakkan setelah kode <data:post.body/> yang pertama.)

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10;
var maxNumberOfLabels = 3;
maxNumberOfPostsPerLabel = 11;
maxNumberOfLabels = 4;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

5. Save template dan lihat hasilnya.

*** Keterangan kode ***

<h3>Artikel Terkait</h3>                         <<----  Judul Widget.

var maxNumberOfPostsPerLabel = 10;       <<----  Jumlah post yang ditampilkan pada setiap labelnya.
var maxNumberOfLabels = 3;                    <<----  Jumlah label yang ditampilkan.
maxNumberOfPostsPerLabel = 11;             <<----  Jumlah maksimal post yang ditampilkan pada setiap labelnya.
maxNumberOfLabels = 4;                          <<----  Jumlah maksimal label yang ditampilkan.

Sesuaikan kodenya dengan selera kalian sendiri.

Finally,semoga bermanfaat.

Read More...