Cara Membuat Tag Cloud Animasi Pada Blog

Mungkin anda pernah melihat Label menggunakan animasi, sekarang saya akan membantu anda membuat label menggunakan animasi agar blog atau web anda terlihat lebih menarik dengan menu navigator yang unik.

Label animasi ini mempunyai tampilan yang sangat menarik karena ketika mouse kita mengarah ke area tag cloud maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan lebel standar dari blogger. Jadi ketika anda menambahkan label pada postingan maka label tersebut akan secara otomatis muncul pada tag cloud.

Tutorial Pemasangan Read More

• Masuki Login blogger anda
  
• Klik Tata Letak, kemudian Klik Edit HTML.
  
• Contreng checkbox Expand Widget Template.
• Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>
• Kemudian copy paste kode berikut ini di bawah kode yang tadi ;

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;

&lt;param name="bgcolor" value="#ffffff" /&gt;

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

<b:loop values='data:labels' var='label'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;

&lt;/object&gt;

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

• Jika sudah, Klik Save Template. Selesai

"GOOD LUCK"

Baca Selengkapnya...

Cara Membuat Auto Read More di Blog

Fitur read more adalah sebuah fitur yang memungkinkan setiap artikel yang tampil di halaman utama blog akan terpotong artikelnya dan ada link yang menuju ke artikel yang tidak terpotong.

Fitur read more ada yang manual dan otomatis. read more manual, kita harus mengatur sendiri di bagian mana yang akan dipotong dalam artikel. sedangkan fitur read more otomatis, kita tidak perlu mengatur potongan artikel. fitur read more sendiri juga akan menambah keindahan blog.

Disini kita akan membahas cara memasang read more secara otomatis, diperlukan penanaman script pada template, namun tidak terlalu rumit. Kelebihan read more otomatis adalah kita tidak perlu memotong-motong artikel untuk menentukan bagian mana yang akan ditampilkan dan tidak ditampilkan. Berikut ini cara membuat read more otomatis atau auto read more.

Tutorial Pemasangan Read More

• Masuki Login blogger anda


• Klik Tata Letak, kemudian Klik Edit HTML.


• Contreng checkbox Expand Widget Template.


• Copy paste kode berikut ini sebelum atau di atas kode </head> :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

• Cari kode <data:post.body/> lalu ganti dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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'>Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Klik Simpan

Fitur Read More otomatis sudah jadi

"GOOD LUCK"

Baca Selengkapnya...