rssrss

Rabu, 03 Maret 2010

Cara Membuat Label Animasi/Blogumulus Di Blog

Biasanya label pada blog, hanya tulisan kebawah saja, semakin banyak label di blog kita, maka akan banyak memakan tempat, untuk menghemat tempat di blog kita sebaiknya menggunakan label animasi ini, selain hemat tempat, label ini juga dapat mempercantik tampilan Blognya, karna tulisan lebelnya bisa bergerak/berputar ketika mouse di arahkan ke label tersebut.

Label ini karya RoyTrank & Amanda Fazani

Cara Pembuatanya :

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. KLik tab Edit HTML.
4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.
5. Cari kode yang mirip dengan kode di bawah ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Copy kode di bawah ini kemudian taruh kode tersebut
(paste) dibawah kode di atas.


<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'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://tutorial-triktips.blogspot.com/'>Tutorial-TrikTips</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&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>


7. Klik tombol SIMPAN TEMPLATE

Note :
Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal:

Merubah lebar, tinggi dan warna background.
Variable untuk lebar dan tinggi ada pada baris script berikut,

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");


240 menunjukkan lebar widget.
300 menunjukkan tinggi widget.
#ffffff menjukkan warna background.
100 menunjukkan kecepatan putaran.

Merubah warna text.
Variable untuk lebar dan tinggi ada pada baris script berikut,

so.addVariable("tcolor", "0x333333");

"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja.

Merubah ukuran font.
Variable untuk lebar dan tinggi ada pada baris script berikut,

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

12 menujukan ukuran font yang digunakan.


Trim's . . .

Kembali Ke Beranda Blog

10 komentar:

RAVE67-GIGIH on 27 November 2010 12.19 mengatakan...

oke gan. gue pasang... makasih ya.. nie ue like fb pages blogmu sob...

planet football on 14 Desember 2010 15.05 mengatakan...

gan kok di expland template kga ada kode b:section class='sidebar' id='sidebar' preferred='yes'> kenapa tuh mohon di bls thanks :)

Dwi Banet on 1 Februari 2011 13.03 mengatakan...

gan kok yg muncul seperti ini "Blogumulus by Roy Tanck and Amanda Fazani Posted by Tutorial-TrikTips" apa harus ditambahin url saya ya ? tks.

laugh in every single day on 8 Februari 2011 11.36 mengatakan...

kok nggak ada yg berubah..
piye jan jan..

Nikmaya John on 7 Maret 2011 23.57 mengatakan...

Tips yang bagus gan, ane coba dulu..

komputer & Network on 23 Maret 2011 12.51 mengatakan...

ndk bisa gan

{S.E.L.O.N} on 30 Desember 2011 22.56 mengatakan...

ko gak ketemu ya kode

Rudy Hartono on 5 April 2012 20.58 mengatakan...

layak untuk dicoba

Augustinus Kasmarandanu on 7 Oktober 2012 15.04 mengatakan...

Gane ga ada
adanya navbar ga ada sidebar gmn tuh?
bales amahardhikaa@gmail.com

Faiz Hakim on 26 Oktober 2015 14.39 mengatakan...

Cara membuat tampilan label atau tags seperti yang ada di web ini dibawah gimana ya ?


Posting Komentar

 
Terima kasih atas kunjungannya

Pengunjung Blog

Pengikut