Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog

Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog -

Belakangan ini saya berkunjung  ke sebuah blog, dan saya menemukan sesuatu yang unik di blog sahabat saya tersebut. Saya menemukan widget share botton. Kemudian saya mencoba memasangnya, karena widget ini akan memudahkan pengunjung blog kita untuk mengshare apa yang ada di blog kita. Dan hal ini juga akan berdampak positif ke blog kita.. karena ini bisa menjadi media marketing gratis buat para blogger , untuk itu saya akan membagaikan kepada para sahabat – sahabat blogger sekalian tentang cara membuat share botton. Berikut langkah- langkahnya :

1. Login ke dasbor blog anda
2. Pilih rancangan
3. Pilih tambah gadget
4. Pilih Html/Java script
5. Copy kode Html di bawah ini
6. Pastekan di Html/ Java Script tadi
7. Simpan
8. Selesai

Kode Share button

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Catatan : untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang simple.

contoh hasilnya

                                                                            

Read More

Membuat widget burung twitter terbang

Pernah melihat burung Twitter hinggap sana sini di blog yang sobat pernah kunjungi?? Pertanyaan sobat mungkin cuma ada satu, BAGAIMANA CARANYA? Nah.. jangan kuatir, kali ini saya akan memberi toturial bagaimana cara memasang widget burung twitter terbang.

Langkah-langkahnya:

1. Masuk dan log in ke akun blogspot anda.
2. Klik tombol rancangan > tata letak
3. Tambah gadget > HTML/JavaScript
4. Kemudian copas cody script di bawah ini

Widget Twitter Terbang Di Blog burung twitter warna biru

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">

</script>

        <script type="text/javascript">

        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBwWhiPo8AV258-8zNErwYUZPV_ozLWr5VnPGdJEg4gd0yiL_1GA8rL7cS_2Lr9TLoCCJ8xFhauUjVE1M0_LylW2d46JqowlAwnOAwVEhiRkWWfck7tihNK6n-bhUjXASQUGUSQCwwAvI/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();

</script>

Widget Twitter Terbang Di Blog burung twitter warna merah

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">

</script>

        <script type="text/javascript">

        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx96WGQcRVc9wqWjt3CyzkQQXDHrf1cCTZ-FWL9EyFPKWlwuJfDkYCQurFijgMgCvGqHVdUPclfkm9BLrpiGmt0GREL3Rvxwar6BPvmgxKKGeKqKsqiOfJonoSDf0awyZ5h_LVdmd_2Sg/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();

</script>

 Tulisan yang berwarna merah, di ganti susuai pentunjuk yang saya berikan. Setelah selesai jangan lupa  di simpan.. Mudah bukan Membuat Widget Burung Twitter?? Selamat Mencoba.. Semoga Bermanfaat.

Read More

Cara memasang akun profil facebook pribadi di blog

Mungkin anda pernah merasa kesulitan memasang halaman facebook di blog? Membuat halaman facebook sendiri sebetulnya cukup mudah, namun yang jadi kendala terkadang adalah blogger pemula kesulitan untuk memasukkan kode yang diberikan, ke template blog. Saya punya sebuah solusi buat sobat blogger yang mengalami masalah tersebut. Ya dengan memasang akun facebook milik sendiri di blog. Dengan menambahkan akun facebook kita tidak perlu repot lagi membuat facebook page. Apalagi sekarang di facebook sudah ada fitur berlangganan status atau berita pribadi pengguna. 

Nah sekarang langsung saja kita ikuti tutorial cara memasang akun profil facebook di blogger.

1. Pertama silakan login ke akun facebook dan blogger anda.

2. Kemudian masuk ke profil milik sendiri, jika anda sedang di beranda, tinggal klik nama kita.

3. Klik Log aktivitas (tanda panah ke bawah) eeh ini yang pakai facebook timeline yaa...

4. lalu klik Tambahkan lencana ke situs anda

Buat yang tidak pake timeline klik aja Tambahkan lencana ke situs anda yang letak link nya di bawah daftar foto teman tab bagian kiri.

gambar 2 edit lencana profil

Sobat bisa mengedit tampilannya dengan klik sunting lencana ini. 

Sobat bisa memilih tampilannya mau tegak seperti contoh di atas ataupun vertikal, selain itu bisa juga sobat atur fitur apa saja yang mau ditampilkan seperti foto profil, nama kita, status terakhir, situs web dan lainnya. Tidak perlu banyak-banyak centangnya, nanti malah kepenuhan. Jika dirasa sudah cocok lalu klik Simpan.

Kembali ke gambar 2, lihat logo blogger jika sobat memakai blogspot klik aja langsung logo tersebut beda dengan typepad atau wordpress. Untuk pengguna wordpress klik lainnya, akan muncul kode yang diberikan, silakan di copy kode tersebut.

Untuk blogger sendiri akan langsung diarahkan otomatis ke add gadget blog dengan catatan sobat sedang login di akun blogger. dan akan muncul seperti gambar berikut ini:

Pilih nama blog, Judul widget, lalu klik menambah widget. Selesai. Dan profil facebook pribadi sobat sudah muncul di sidebar kanan. Langkah selanjutnya sobat bisa atur penempatannya agar lebih sedap dipandang mata, hehehe. Oke selamat Mencoba.

Read More

Free Stylish Tab Widget

A Stylish Tab Widget / gadjet  using only HTML / Javascript, easy and no jQuery. But need some configuration in HTML / Javascript. Up to 5 tab and you can save space in your blogspot


### Start Copy except this line ###


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>


<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>


<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="59"
class="Tab1" height="22" onclick="st2('1')" align="middle"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB1 NAME-->   Tab 1  <!--TAB1 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('2')" align="middle"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB2 NAME-->   Tab 2  <!--TAB2 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('3')" align="middle"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB3 NAME-->   Tab 3  <!--TAB3 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('4')" align="middle"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB4 NAME-->   Tab 4  <!--TAB4 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('5')" align="middle"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB1 NAME-->   Tab 5  <!--TAB1 NAME-->
 
</center></b></font
class></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
&nbsp;&nbsp;




<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 1 -->




<!-- Script Html Widget for Tab 1-->


</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 2 -->




<!-- Script Html Widget for Tab 2-->


</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 3 -->






<!-- Script Html Widget for Tab 3-->


</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 4 -->




<!-- Script Html Widget for Tab 4-->


</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 5 -->






<!-- Script Html Widget for Tab 5-->


</!—put></font>
</td></tr>
<tr>
</tr>
<tr>
<td
height 4=></td
height></tr></tbody></table></div></td></tr></tbody></table></div>

<br/><a href="http://adf.ly/2Puky">Grab This!</a><div style="text-align:right">

</div>




<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

### End Copy except this line ###


** Instructions Note**

* Copy and paste inside blogspot --> Design -->Add New Gadget

* Find  

<!--TAB1 NAME-->   Put the tab label here   <!--TAB1 NAME-->


* Find
<!—put your widget for tab 5 -->

example paste HTML / Javascript content inside the tab

<!-- Script Html Widget for Tab 5-->


* The background are transparent. Please put some html code for font
example for white font

<!—put your widget for tab 5 -->
<font color="#FFFFFF">
example paste HTML / Javascript content inside the tab
</font>
<!-- Script Html Widget for Tab 5-->

 

=== Demo ===

Read More

Cara Membuat Label dengan Flash Bergerak

Salah satu cara untuk menampilkan label atau kategori baik di sidebar maupun footer bisa dengan cloud ataupun baris ke bawah. Pada kesempatan ini Julak akan memberikan bagaimana cara membuat label/kategori dengan alternatif lain yaitu dengan tampilan bergerak / flash. Seperti pada tampilan gambar di bawah.

Baiklah langsung saja kita ikuti tutorialnya berikut ini:
1. Pertama login ke dasbor> Menu Template> Edit HTML > centang Expand Template, jangan lupa back up template dulu.

2. Cari kode di bawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Masukkan kode di bawah ini, tepat di bawah kode  no 2 diatas.

<b:widget id='Label786' 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'>
<script src='http://bloggerblogwidgets.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Flash Labels by <a href='http://www.way2blogging.org'>Way2Blogging</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging_tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;250&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#FFFFFF&quot;);
so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x000000&quot;);
so.addVariable(&quot;hicolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Klik Pratinjau lalu save template. Selesai dan label dengan flash sudah jadi.

    Selamat Mencoba. 

Read More