Rabu, Agustus 12, 2009

cara buat tag cloud (membuat tag berputar / label berputar di blogspot )

Mungkin ada diantara teman yang masih pemula yang senang menghias blog dengan membuat label berputar atau menambah tag berputar ketika pointer mouse diarahkan ke tag atau label tersebut maka tag akan berputar, jika mengklik salahsatu tag akan membuka sebuah halaman sesuai tag bersangkutan. . Biasanya tag cloud ditempatkan di sidebar blog. Anda bisa menambahkan script ke template blogger untuk  menampilkan tag (label) cloud tersebut di sidebar.

Untuk membuat tag cloud berputar
Contohnya bisa dilihat di bawah ini

Untuk memasang tag cloud ke sidebar blog, lakukan prosedur berikut
1. Login ke dashboard
Pilih Tata Letak -> Edit Html


2. Cari kode berikut


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


Jika menggunakan template blogger designer coba cari kode seperti di bawah ini :


<b:section-contents id='sidebar-right-1'>


Setelah kode di atas masukkan kode berikut


<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://sites.google.com/site/bloggerustemplatus/code/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></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/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>


3. Simpan template

Jika sukses maka hasilnya akan terlihat seperti berikut label berputar

Catatan,
Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud




Jika ingin mengubah warnanya anda bisa coba ganti beberapa variabelnya
tagcloud", "240", "300", "7", "#ffffff" ->
a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa anda ganti sesuai lebar widget anda agar lebih rapi),
b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain , bisa dilihat disini daftar warna html
3. so.addVariable("tcolor", "0x333333"); dimana , 0x333333 warna teks hitam. warna teks lain yang bisa anda gunakan:

0xffffff : warna putih
0xFF0000FFF : warna merah
0x00FF00: Warna Hijau
0x0FFFF0: warna Kuning
0x00FF0000 : warna biru
0xFFF000 : warna biru muda
0xFFFFFFF : Warna Hitam
0x0FF0FF0 : warna pink

Contoh di bawah ini adalah blog yang menggunakan script tag berputar :

Contoh tag berputar bisa dilihat disini tag cloud berputar 

Beberapa posting lain terkait panduan membuat blog di blogspot bisa dilihat disini cara menggunakan blogger





Artikel Terkait :



50 komentar:

archan mengatakan...

top markotob

eL-SYABIL mengatakan...

assalamualaikum.
mas yang saya hormati...saya sudah mencoba membuat tag cloud tapi ng bisa-bisa...bagaimana caranya?tolong kirim jawabanya ke elsyabil@gmail.com
Trimakasih

dinwahyoe mengatakan...

hay mas. .. !!
mas yang ini kan aku udah di pasang di blog aku
tapi kok kenapa yang tampilnya cuma satu, kan kalo di contoh di atas banyak tuh yang tampilnya, emang sih blog aku tuh baru pemula, jadi postingnya jg masih sedikit, tapi emang gak tampil semuanya yah??
tlng penjelasannya mas
thanks tas aplikasinya, bagus banget loh, aku jadi suka nih ng-Blog!!

Artikel Komputerku mengatakan...

@eL-SYABIL
Waalikum salam wr,wb.
@dinwahyoe
Ada beberapa kasus tag cloud berputar ini tidak berfungsi dengan normal,
a. template yang anda gunakan tidak kompatible dengan script tag
b. Script tag ini umumnya dapat berfungsi dengan normal jika menggunakan template blogger standar, atau template gratisan yang belum mengalami modifikasi di script widget labelnya.

dinwahyoe mengatakan...

thanks yah mas, yaudahlah gak apa apa
ohya sekalian aja nih aku mau nanya
mas kan kalo di posting suka ada untuk download klik di sini
nah suka ada warnanya itu mas dalam kata 'klik di sini" itu bagaimana sih mas?

dr. oetjoepz mengatakan...

halo mas..thanks banget buat artikel cara buat cloud tags-nya..sya udah coba di blog saya..
dan berhasil..

emang bener ada sdikit perbedaan pada template yang udah di modifikasi seperti template yang saya gunakan di blog saya..tapi setlah di coba2 bbrpa kali ternyata berhasil juga kog..

makasih ya mas..

Coretan Tinta mengatakan...

OK sob infona...
back link y...

..Karena Dunia Begitu Sangat Berarti.. mengatakan...

thanks infox
dah coba buat tagnya sesuai petunjuk..
alhamdulillah jadi..

Kang Gozie mengatakan...

Siap di coba.... tar tolong liat hasilnya ya mas... ;)

ARMAN PAIMA mengatakan...

saya pernah mencoba mas...dan muncul bagus jalannya manun akhir2 ini tidak muncul sama sekali...pusing aku....tolong ya mas....

Hidayatullah mengatakan...

Mas, saya sudah coba cari kode di HTML saya, kok tidak ada yah..Apa karena templatenya beda?
mohon solusinya. Trima kasih sebelumnya :)

Ary_Putra mengatakan...

Mantap bro

Moch Arief Rahman Saleh mengatakan...

mas tag cloudny koq gx jalan diblog saya.....
coba buka deh www.kumaha-anjeun.blogspot.com
tolong bantuin donk....

Jihad Permada mengatakan...

MAS, Ko taq cloud di blog saya hnya bertuliskan ini... Blogumulus by Roy Tanck and Amanda Fazani

mohon pencerahan mas..

Artikel Komputer mengatakan...

@ARMAN PAIMA, ARMAN PAIMA
Mungkin templetenya beda
@Moch Arief Rahman Saleh
@Jihad Permada
Saya sudah cek, ternyata dari pihak hosting yang tidak mengijinkan script dan object flashnya di akses
Solusi:
harus punya hosting sendiri yang bisa uplaod sript dan flash object, kemudian upload script dan flash object (di blogger tidak bisa lagi menggunakan script ini karena blogspot tidak bisa upload javacript script (external)dan object flash )
Referensinya bisa dilhat disini
http://blog.deconcept.com/swfobject/
http://code.google.com/p/swfobject/

dic mengatakan...

sip buanet pokoke bro

bowo mengatakan...

mkakasih bozz
tak coba dulu ya

Irwansyah Psa mengatakan...

aku udah coba membuat text terkait di blog ku udah puluhan kali. tapi belum berhasil nech, dimana ya salahnya?...
bingung..

Lucy mengatakan...

Misi Om :( Salam kenal,Saya udah ikuti petunjuknya tp kok Kode ini saya cari2 gak ada ya?? :

Saya cari gk ada?? Trims sblumnya :(:(

Artikel Komputer mengatakan...

@dig , bowo , irwansyah psa , lucy
Script tag berputarnya sudah saya perbaiki dan berfungsi dengan baik di blog saya, silahkan dicoba mudah-mudahan bisa berfungsi di blog anda.

Imtikhan mengatakan...

Salam Sahabat
Berkunjung untuk silaturrahim sekalian Mengucapkan Hari Raya Idul Adha

Aryanto mengatakan...

kalau di word press gimana caranya tg cloud nya udah ada tapi ko tak berputar ya

Artikel Komputer mengatakan...

@Imtikhan
Salam balik, Selamat Hari Raya Idul Adha , mohon maaf lahir batin
@Aryanto
Untuk wordpress belum pernah coba.

Voe kalimantan mengatakan...

mantap gan..
terus cara kasih bordernya gimana tuh

khairul anas mengatakan...

wah, mantab, thank you bro,

nurul mengatakan...

wah bisa !! makasi infonya !! ^^

GOLLUM mengatakan...

waaaaaaaah sukses bozz !!,
;)

fawaz rifqi mengatakan...

agan makasih banyak ya infonya

gembelnista mengatakan...

buseett dah... keren abis. langsung ku coba nih. BERHASIL!! thanks banget gan!!
memang blog keren!

agilpogila mengatakan...

hehehehehee..... Makasihhh Bozzzz,....Dah lama ane pengen buat label berputar , tapi g. bsa2,..
tpi stelah bca panduan dr blog nichh ,...ane coba ,.ehh Lansung Berhasill ....wkekekeke...
MAKASIH BOZzzz.....

cumplunk and dunk-dunk mengatakan...

keerrrreeeeeeeennnnnnnnnnnnn gan ! thank

sanggar bunga padi mengatakan...

terima kasih infonya....sebagai pemula perlu banyak belajar dr para senior, nih....

mas eko mengatakan...

Klo pasang di wordpress gimana ya mas...saya dah coba tp nggak bisa

muhaziz97 mengatakan...

Terima kasih gan.. Mantab udah saya coba di blog saya dengan alamat http://muhaziz97.blogspot.com/ dan bisa 100%..
Thanks :)

Junaid mengatakan...

Tutorialnya sangat membantu saya

Agen xamthone plus bandung mengatakan...

sip terimakasih buat tips bloggernya...

Ahmat Susanto mengatakan...

Tanks atas infonya Gan..visit my blog ya!

Arman mengatakan...

di coba gan,,
di tunggu kunjung baliknyaa

kimzaqi mengatakan...

Wah,,trima kasih gan..berhasil nih..

Anonim mengatakan...

http://www.setiawanfarlin.com/2012/02/tag-cloud-pada-website-anda.html

Djangkaru Bumi mengatakan...

terimakasih aku telah mencobanya

Punggawa mengatakan...

Keren bang... Kita coba dulu deh!!

dahliawhite mengatakan...

thanks ya gan,,, ane mau coba dulu ;)

Asuransi Jiwa Terbaik Indonesia mengatakan...

saya masih rada bingung sob dalam menerapkan scriptnya.ada yang lebih mudah gak?

Obat Kuat Alami mengatakan...

nice blog dan good info gan...

onehend mengatakan...

Thanks gan infonya...

onehend mengatakan...

thanks gan infonya...

onehend mengatakan...

thanks gan infonya...

blogger gresik mengatakan...

100% WORK THANKS :)

Pusat Skin Care mengatakan...

Tutorialnya simple dan sangat bermanfaat.. thanks gan sudah share ;).. lumayan dapat ilmu baru