Breaking News
Saturday 22 May 2010

Membuat "Tag Cloud" Widget

Halo para sobat blogger!! Aku ada kabar gembira lagi nie buat para sobat khususnya yang pencinta blog INI hehe PD amat ya?????.

Yeah! Tadi malam sedang mencari animasi "Tag & Clouds" widget. Aku menemukan situs menarik oleh Roy Tanck's. Penulis telah menulis sebuah skrip yang sangat baik untuk menampilkan tag, kategori yang berputar dalam 3D animasi. Tapi Roy Tanck's telah menulis skrip ini hanya untuk Wordpress yang disebut "WP-Cumulus": tetapi para blogger jangan bersedih hati, Kami sudah atur alias dsain lagi supaya bisa dipasang di Blogspot dan akhirnya Alhamdulillah bisa buat Blogspot juga hehe. dan baru pada Sore ini Aku bisa terbitkan (bagi-bagi) pada kawan/sobat.

O.K Para sobat semua tiba saatnya kita ke tahap pemasangan karena waktu semakin petang aja.

Seperti Biasa

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan "Tag Clud".
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget
Kemudian paste script berikut : tapi ada baiknya para sobat paste dulu di Notepad untuk merubah dulu


PERHATIAN!!!
Cari kode seperti ini :
<a href="http://link sobat disini.com/" style="">JUDUL LINK SOBAT DISINI</a>
Kemudian ganti kode yang berwarna Kuning dengan Link tujuan sobat lalu teks yang berwarna Merah ganti dengan Judul Link sobat yang akan ditampilkan.

Jika Tag Cloud Widget ini akan sobat sesuaikan baik itu warna Background, Warna Teks dan Width serta Hight nya sobat cari kode seperti dibawah ini :

1. Untuk warna Background cari kode bgcolor="#000000" kemudian ganti dengan kode warna yang diinginkan
2. Untuk warna teks cari kode tcolor="ffffff" emudian ganti dengan kode warna yang diinginkan
3. Untuk Lebar dan Tinggi cari kode height="300" dan width="300" ganti sesuai dengan keadaan template sobat,

Yaaa pokoknya atur aja deech O.K mungkin para sobat juga dah pada ngerti ya khan???

Setelah langkah demi langkah selesai klik Simpan dan lihat blog!!

Selamat mencoba!! semoga berhasil dan bermanfaat.
di copas dari SINI

Tag Cloud Animasi Pada Sidebar Blog

 

Pada dua tulisan sebelumnya saya memaparkan bagaimana cara untuk menambahkan Tag Cloud Non-animasi, baik yang menggunakan gadget blogger maupun javascript. Nah, pada tulisan kali ini saya akan mengupas cara membuat Tag Cloud Animasi. Cara ini saya dapatkan dari situs Bloggerbuster.com. Setelah melakukan sedikit perubahan pada script-nya dan memberikan keterangan tambahan yang agak berbeda dari tulisan aslinya, maka tulisan ini saya persembahkan buat sobat blogger semua.

Untuk membuat Tag Cloud Animasi ini kamu bisa mengikuti langkah-langkah berikut (contoh pada sidebar dapat dilihat pada blog ini):
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
  • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  • Kopikan script berikut: 
<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/ruangsc/enes/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> Distributed by <a href='http://tewesell70.blogspot.com'>CAKIMAM</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
  • Pada script di atas disetting sebagai berikut (lihat yang dicetak tebal):
    » Lebar widget : 240px
    » Tinggi widget : 300px
    » Warna latar (background) : putih atau #ffffff
    » Warna huruf : abu gelap atau 0x333333
    » Ukuran huruf : 12
    Kamu dapat mengubah settingan tersebut disesuaikan dengan latar template dan lebar sidebar blog kamu. Misalnya mengubah warna latar menjadi hitam ditulis #000000 dan mengubah warna huruf menjadi putih ditulis 0xffffff (mengenai kode warna silahkan baca artikel ini).
  • Letakkan script tersebut di bawah kode:

<b:section class='sidebar' id='sidebar' preferred='yes'>
  • Untuk memudahkan pencarian, tekan Control F atau F3.
    Jika tidak ditemukan, cari kode id='sidebar' atau id='sidebars'.
  • Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....

Dibanding script Tag Cloud Non-animasi, Tag Cloud Animasi ini lebih simple. Hanya saja mengenai background dan warna huruf sebaiknya kamu sesuaikan dengan background template kamu agar kelihatan lebih matching, juga untuk ukuran lebarnya diatur sedemikian sehingga tidak melebihi ukuran lebar sidebar blog kamu.

Ok coy, selamat mencoba..


sumber:DARI SINI

Artikel Terkait:

Silahkan Kunjungi Blog Kami Yang Lainnya

Klik Gambar di bawah ini

0 comments:

Post a Comment

 
Klik Info Lainnya