Menambahkan Button Pinterest "Pin It" Di Blogspot

Pada postingan kali ini sesuai dengan judulnya. Saya akan berikan trik cara mudah menambahkan button pinterest pada blogspot kamu. Apa itu Pinterest? Silahkan di search di kolomnya Mbah Google ye... Disini saya hanya akan memberikan tutorial cara mudah untuk memasang button pinterest di blog saja.

Pada intinya Pinterest merupakan sebuah social media yang cukup terkenal dan sangat bagus untuk menjaring traffik/pengunjung ke blog kamu.

Untuk Cara Menambahkan Button Pinterest di Blogspot, Ikuti langkah-langkah seperti dibawah ini :
1. Klik Menu Template, Kemudian Edit HTML
2. Cari kode <data:post.body/>
3. Jika kamu ingin meletakkan button Pinterest dibawah postingan, silahkan copy paste di bawah kode nomer 2. Sebaliknya jika kamu ingin memasang button diatas artikel atau dibawah judul maka silahkan paste kode button diatas kode nomer 2. (NB:Setiap kode pada template blog berbeda-beda, namun pada intinya sama. Silahkan berimajinasi sendiri ye).
4. Pilih salah satu kode Button Pinterest dibawah ini :

Bassic Button Pinterest

<a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>

Vertical Button Pinterest

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>

Horizontal Button Pinterest

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script>

Nah, pada script kode untuk menambahkan button Pin It Pinterest diatas ada tiga jenis. Silahkan pilih salah satu untuk ditempatkan diblog yang kamu miliki. Good Luck.

Baca Selengkapnya...

Membuat Blockquote CSS 3 Yang Unik dan Cantik

Pada kesempatan kali ini, iseng-iseng nemuin kode Blocquote CSS 3 yang unik dan cantik. Kode Blockquote CSS ini sangat berbeda dengan kode Blockquote Hover yang sudah pernah saya tulis disini.
Seperti yang sudah saya bilang diatas, bahwa Blocquote CSS 3 ini merupakan Blockquote yang cantik dan unik. Layaknya sebuah gadis cantik nan jelita yang mempunyai daya tarik special. Begitu juga dengan blog kamu. Jika kamu menggunakan kode Blockquote CSS 3 ini, saya yakin blog kamu akan merasa beda dan akan terlihat cantik.. Mau bukti, silahkan action...

Langkah pertama yang mesti kamu lakukan adalah sebagai berikut :
1. Log in ke Akun Blogger.
2. Pilih Rancangan, kemudian Edit HTML dan jangan lupa centang tuh kode Expand Template Widget
3. Kemudian cari kode berikut ]]></b:skin> . Jika sudah ketemu, silahkan kamu copy dan paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> .

KODE CSS

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99; /* original code: gubhugreyot.blogspot.com */
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Jika sudah, kamu bisa klik "Pratinjau" untuk memastikan bahwa cara menempatakan/membuat Blockquote CSS 3 ini kamu berjalan lancar. Jika tidak mengalami error, kamu bisa langsung "SAVE". demi keamanan, kamu juga bisa Backup terlebih dahulu template kamu.

Sekian dulu, semoga tips Membuat Blockquote CSS 3 Yang Unik dan Cantik ini bisa bermanfaat.

Baca Selengkapnya...

Mudah Membuat Scrool Archive Blogspot

Jika kamu bertanya-tanya atau sedang mencari cara Mudah Membuat Scrool Archive Blogspot. maka, cara yang saya gunakan ini benar-benar cara yang sangat simple dan mudah dimengerti.

Well, langsung aja kita praktekan cara Mudah Membuat Scrool Archive Blogspot. Karena saya tidak perlu banyak ceramah atau pidato disini :D.

Langkah pertama untuk membuat scrool archive pada blogspot adalah sebagai berikut :
1. Masuk ke akun blog kamu
2. Kemudian pilih layout/rancangan. Kemudian pilih Edit HTML
3. Klik Expand Template Widget
4. Cari kode ArchiveList dalam HTML anda

Jika sudah ketemu, silahkan letakkan kode yang berwarna biru seperti pada posisi dibawah ini kedalam HTML template kamu :

<h2><data:title/></h2></b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'> <b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div></div>
</div>
<b:include name='quickedit'/>
</div> </b:includable>

Jika diamati secara detail. Cara Mudah Membuat Scrool Archive Blogspot hanya menambahkan 2 kode saya. Yaitu :

• <div style='overflow:auto; width:ancho; height:200px;'>
• </div>
  

Untuk ukuran tinggi dan lebar. kamu bisa sesuaikan sendiri sesuai selera dan posisi template kamu. Ok, semoga cara Mudah Membuat Scrool Archive Blogspot ini bisa sangat berguna bagi anda.

Baca Selengkapnya...

Pasang Iklan Sejajar Atau Bersebelahan

Bagaimana sih cara memasang iklan ppc secara bersebelahan atau berdampingan? Dulu saya sendiri belom bisa mempraktikan trik ini. Saya tertarik sekali kepingin memasang iklan berdampingan, seperti iklan yang muncul pada postingan di blognya oktavita.com.

Untuk cara Pasang Iklan Sejajar Atau Bersebelahan kamu bisa ikuti langkah-langkah yang sudah saya tulis di postingan ini.

1. Pertama-tama dapatkan dulu script iklan ppcnya, terserah kamu mau pakai iklan ppc lokal atau adsense sekalipun. Sebagai contoh untuk ukuran iklan yang ada di bawah artikel ini,Kerjain Sendiri menggunakan dua jenis iklan, jenis Iklan Text ( yang sebelah kiri) dan Iklan Header (yang sebelah kanan), dengan ukuran yang sama yaitu 300X250 pixel.

Untuk menempatkan kedua iklan tersebut secara bersebelahan atau sejajar, maka kita menggunakan script Table. OK, copy aja script berikut di lokasi iklan yang anda inginkan,


<TABLE BORDER="0" BORDERCOLOR="#336699" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD>

kode iklan 1

<TD>
<TD>

kode iklan 2

</TD>
</TR>
</TABLE>

Langkah selanjutnya, ganti tulisan berwarna ungu dengan script untuk iklan bagian kiri dan ganti tulisan berwarna biru untuk script iklan bagian kanan, save lalu lihat hasilnya.

Oke, silahkan dipraktikkan untuk cara Pasang Iklan Sejajar Atau Bersebelahan. Saya mau tidur dulu..udah ngantuk....semalaman belom tidur nih....dah jam 5:39 pagi, dan waktunya tiduur....

Blogger tidurnya jam segini...wkekekeke......

Baca Selengkapnya...

Buat Blockquote Hover yuk...

Sebenarnya cara membuat Blockquote Hover dari dulu sudah saya cari-cari script yang pas di blog, untuk Blockuote Hover sendiri itu seperti apa? Kamu bisa langsung praktekan aja, kalau hanya teori...nanti kamu bakalan hanya memendam tanda tanya saja. Untuk Cara Membuat Blockuote Hover Silahkan ikuti panduan di bawah ini :

1. Login Blog kamu.
2. Kemudian Rancangan, Dan masuk di Edit HTML. Setelah itu kamu cari kode ]]></b:skin>
3. Simpan kode di bawah ini tepat di atas kode nomer 2.

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i739.photobucket.com/albums/xx32/kohkono/blogonlineganden.jpg);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99;
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Kemudian untuk memanggil Blogquote tersebut pada postingan kamu, kamu cukup menuliskan beberapa script sebelum memulai postingan dengan menggunakan blogquote hover.

<blockquote><span class="opening"></span>Masukkan teks disini<span class="closing"></span></blockquote>

Tulisan yang berwarna biru, silahkan kamu ganti dengan tulisan atau postingan yang hendak kamu posting...

Baca Selengkapnya...

Tutorial Cara Pasang Kode Warna Blog di Postingan

Buat temen-temen blogger yang kenetulan sering mengonta ganti tampilan untuk memodifikasi blog. postingan kali ini, ganden akan menyertakan cara pasang kode warna pada blog. dari pada nyerocos dan bertanya-tanya seperti apakah tampilan kode warna tersebut. kamu bisa lihat di postingan tentang Kode warna HTML Blog.

Postingan kali ini akan sedikit panjang, mengingat banyak sekali kode script yang harus di pasang. So, untuk cara membuat atau menerapkan kode warna pada blog. pertama-tama....

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head> , kemudian di atas kode tersebut silahkan kamu letakkan kode di bawah ini :

<script language='javascript'>

function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

<script type='text/javascript'>

var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;

function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}

// Picker ---------------------------------------------------------

function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };

picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

hueUpdate();

dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}

executeonload(init);

function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}


function hueUpdate(newVal) {

var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }

var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

pickerSwatchUpdate();
}

function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);

h = h / 180;

var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);

var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);

var a = YAHOO.util.Color.hsv2rgb( h, s, v );

document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}

</script><!--[if gte IE 5.5000]>
<script type="text/javascript">

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

6. Simpan template kamu.


Cara I menambahkan dalam postingan.

1. Buat Posting --> Copas kode warna.
2. Berikan judul posting kamu, contoh : Kode warna HTML Blog.
3. Tambahkan label yang sesuai.
4. Terbitkan Entri.


Cara II menambahkan dalam elemen blog kamu :

1. Tata Letak --> Element Halaman --> Tambah Gadget.
2. Tambahkan "HTML/Javascript" --> Copas kode warna.


Untuk kode warna yang harus kamu copy adalah sebagai berikut :

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

Demikian Tutorial Cara Pasang Kode Warna Blog di Postingan, semoga bisa bermanfaat bagi para blogger di seantero jagad...

Baca Selengkapnya...

Pasang Artikel Terkait (releated post) di Bawah postingan #1

Cara Pasang Artikel Terkait (releated post) di Bawah postingan #1 yang disertai dengan thumbnail. wah...jadi bingung, buat yang udah paham, boleh kok menyimaknya, untuk penjelasan dan cara membuat Artikel Terkait (releated post) di Bawah postingan #1 pada postingan saya kali ini. Mengapa di kasih #1 gan? karena sebenarnya, model artikel terkait itu ada banyak. lantas seperti apa saja gan? maka dari itu, postingan saya kali ini saya kasih #1 untuk memperjelas kalau tutorial cara membuat atau Pasang Artikel Terkait (releated post) di Bawah postingan ini adalah bagian pertama. So, lihat dulu gambar di bawah ini :

Oke deh, langsung ke lokasi aja. Seperti biasa silahkan login dulu ke Blogger. Sip ! sekarang ikuti langkah-langkahnya berikut ini :

1. Sekarang tuju Edit HTML.
2. Jangan lupa backup template anda dulu dengan mengklik Download Template Lengkap.
3. Klik Expand Template Widget.
4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


5. Kemudian cari kode berikut ini :

<div class='post-footer-line post-footer-line-1'>

atau jika tidak ada, cari kode seperti dibawah ini :

<p class='post-footer-line post-footer-line-1'>

6. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


7. Setelah selesai semua, jangan lupa Simpan Template.

Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog anda. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang anda inginkan.

8. Selesai...Simpan..

Baca Selengkapnya...

Ganden Menambah Fitur Komentar Reply di Blog

Baru beberapa menit lalu sudah memposting tentang Membuat Gambar Animasi di Dalam Postingan Blog Online Ganden. Karena sebelum saya memposting tentang judul saya. Yakni, Ganden Menambah Fitur Komentar Reply di Blog. Sebenernya saya sudah memasang fitur tersebut, namun belum sempat saya tulis. Menambahkan fasilitas Reply pada Kotak Komentar adalah bertujuan untuk mempermudah dalam membalas setiap komentar di blog yang kita cintai.

Ok..langsung aja dech...biar gak penasaran dan seperti biasa...

1. Login ke blogger

2. Pilih Rancangan, lalu perhatikan dulu pada Address Bar, disitu ada No. ID Blog Anda silahkan dicatat dan disimpan, karena ID tersebut nanti akan diperlukan, lihat contoh gambar di bawah:

3. Pilih Tata Letak --> Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode berikut ini <dd class='comment-footer'> gunakan Ctrl F untuk mempermudah proses pencarian. Jika kode tersebut tidak ditemukan Anda bisa mencari kode alternatif seperti ini: <b:include data='comment' name='commentDeleteIcon'/>
6. tambahkan kode di bawah ini diantara kode nomer 5 yang ada pada blog anda.
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukan Blog ID Anda Disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjecP9f6TVVlWvifIDkxmdwanodymSFAIaumBA1p4cgx_cvLVbA0x8ogf1q1ttkVa3gi1GJ2bJ6AVnyi5x9mbY662vVGop_bI_qWDGVHZcldkIZtPP1vbYqSkUXlPX9Y66Mx6r5CsvTr4s/s1600/reply.gif'/></a>

7. Masukan No. ID Blog Anda yang telah disimpan tadi tepat di tulisan: Masukan Blog ID Anda
8. Simpan Template, selesai!!!

Baca Selengkapnya...

Menghilangkan Tanda Label di Bawah Postingan

Bila anda pengguna blog aktif, anda akan terbiasa dengan yang namanya label pada blog. karena sebuah label menyimpan beragam isi/artikel yang anda cari. Apabila anda tidak begitu sukar dengan keberadaan tulisan atau tanda label di bawah postingan, tentunya anda mempunyai beberapa alasan. Diantara para blogger yang beranggapan bahwa ini bisa dikatakan kurang rapi ataupun apapun pendapat anda tentang label di bawah postingan, anda bisa kasih komentar di bawah postingan saya kali ini. karena postingan saya ini saya membahas tentang cara menghilangkan tulisan atau tanda label di bawah postingan.

Naaah..untuk menghilangkannya anda cukup :

1. Login ke blogger

2. Pilih Tata Letak --> Edit HTML

3. Beri tanda centang pada Expand Template Widget

4. Cari kode berikut ini <span class='post-labels'>
5. Scroll ke bawah dan lihatlah beberapa baris di bawah kode tersebut. Lengkapnya akan terlihat seperti ini:

<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,
</b:if></b:loop></b:if>
</span>

6. Sekarang anda bisa hapus semua kode tersebut. Atau menggantinya dengan kode dibawah ini:

<!--<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,
</b:if></b:loop></b:if>
</span>-->

7. Simpan jika sudah selesai.

Baca Selengkapnya...

Kode Warna HTML Blog

Kumpulan kode warna html lengkap buat blogger. Kode warna html pilihan bisa kamu pilih dan klik kemudian kamu copy kodenya.

Kode warna yang terpilih :

Baca Selengkapnya...

Menempatkan Iklan di Bawah Judul Postingan Blog

Setelah beberapa hari di sibukkan dengan pekerjaan, rasanya kangen juga untuk posting di blog ini. Sementara masih banyak pengalaman ngeblog yang belum saya posting di sini. Di antaranya Cara menempatkan atau memasang iklan ppc baik ppc lokal (adsensecamp, kumpulblogger, ppcindo dll) bahkan iklan luar sekalipun. Tak lain juga iklan bidvertiser, iklan Google Adsense dll. Tentunya iklan2 tersebut di tempatkan di bawah judul postingan. Cara menempatkan iklan di bawah judul postingan seperti yang saya utarakan di awal tadi. Bukanlah hal sepele bagi saya, ya...dulunya sih agak ribet, namun lambat laun bisa terpecahkan. "Cara memasang kode/iklan ppc di bawah judul postingan Blog", Gampang kok..

Ikutin langkah berikut ni....
1. Pertama-tama anda mestimemparse kode iklan ppc anda. untuk memparse kode iklan tersebut silahkan anda gunakan caranya yang sudah saya tuliskan di postingan sebelumnya.

2. Jika sudah anda parse kode iklan anda, selanjutnya loggin di akun blog anda dan klik layout kemudian Edit HTML.

3. Next...cari kode HTMl seperti ini <div class='post-body entry-content'>

4. Jika sudah ketemu, silahkan anda paste kode iklan ppc yang sudah anda parse tadi tepat di bawah kode <div class='post-body entry-content'>

5. Selesai dan Simpan Template.

Baca Selengkapnya...

Cara Mudah dan Praktis Parse Kode HTML

Dulu Ganden bingung ketika mau menempatkan kode HTML yang mesti di parse, biasanya HTML yang di parse tersebut digunakan untuk menulis postingan ke dalam blog atau menempatkan kode iklan di bawah judul, akhir postingan, di atas kolom komentar dan mungkin ada tempat lain kali ya......So, dari semenjak blog Ganden ini saya buat, sebenarnya sesuai dengan perjalanan dan pengalaman saya di dunia ngeblog. Intinya di sini, Ganden tidak ambil repot. Setidaknya saya bisa berbagi di dunia ini dan tentunya anda juga saya harapkan untuk berbagi juga (Terutama duitnya, hehehee.....).
Ok Gan, langsung ke topik pembahasan sesuai dengan judul yang saya buat. Yakni "cara memparse html". Sebenarnya ada banyak cara. di antaranya :

1. Anda bisa edit sesuai kekreatifan dan kejeleian memprase HTML anda dengan cara manual.
2. Masuk di http://www.blogcrowds.com kemudian anda tinggal copas aja kode HTML yang akan parse. kemudian setelah anda parse di blogcrowds. anda tinggal copy dan paste di space blog/web sesuai keinginan anda.
3. Masuk di centricle.com. Intinya hampir sama dengan cara deperti pada nomer 2 di atas.

Nah, gimana Braad? Mudah kan, semoga anda tidak salah lagi pusing untuk memparse HTML.
Good Luck....

Baca Selengkapnya...

Cara Mudah Membuat Label Cloud di Blog

Buat Para Blogger yang sudah bisa membuat label cloud secara mudah hanya dengan menambahkan gadget. yang sudah di sediakan oleh Blogger, yang sudah saya posting sebelumnya. Untuk Postingan kali ini saya kembali mencoba untuk eksis....Wkakakaka...(Bahasanya Breed...). Jika anda penasaran bagaimana gambaran tentang LABEL CLOUD, anda bisa lihat pada menu Label Cloud yang sudah saya pasang di blog saya. Untuk membuat tampilan label atau kategori lebih menarik, anda bisa mencoba menggantinya dengan label yang menyerupai awan atau yang lebih dikenal dengan nama label cloud. Untuk membuatnya, lagi - lagi anda harus mengotak - atik kode HTML blog anda, jadi sebaiknya backup terlebih dahulu template anda untuk menghindari kerusakkan pada template anda.


Untuk Langkah2nya yang harus di terapkan adalah sebagai berikut :
1. Login ke Blogger.

2. Klik Tata Letak--> Edit HTML.

3. Jangan lupa backup dulu ya template nya ya....

4. Kemudian copy paste kode berikut diatas kode ]]></b:skin>

/* Label Cloud
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


5. Kemudian letakkan kode berikut ini diatas kode </head>

<script type='text/javascript'>

// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

6. setelah itu cari kode seperti dibawah ini :

<b:widget id='Label1' 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'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Hapus kode tersebut dan kemudian anda ganti dengan kode berikut :

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Selanjutnya anda Simpan Template jika sudah selesai seperti langkah2 di atas.

Panjang ya..jangan sampai ada yang ketinggalan dalam proses copy paste kode - kode diatas, karena ketinggalan satu elemen saja label cloud tidak akan berhasil dibuat. So..selamat memandangi label cloud anda yang baru.

Baca Selengkapnya...