Memelihara Hamster Di Blog

Satu lagi widget unik berbasis flashplayer, dimana kita bisa punya hewan peliharaan hamster yang lucu di blog. Dan pastinya para pengunjung blog anda juga bisa berinteraksi dengan hamster anda. Dengan cara klik mouse pada kandang hamster maka si hamster akan menghampiri makanan yang kita klik tadi. Si hamster akan mengikuti arah pointer mouse kita, dan jika kita diamkan si hamster akan tertidur. Ok dibawah ini kode HTML untuk widget hamster.

<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object><br /> <br />

Read more »

Template Blog Dengan News Flash

Jika anda mampir di beberapa situs berita seperti di vivanews.com, pasti pandangan anda akan tertuju pada newsflash yang berada di halaman depan. Contohnya seperti yang ada di blog saya ini, jadi posting blog anda bisa di tampilkan di halaman depan dilengkapi dengan gambar, judul, dan artikelnya. Dan secara otomatis atau dengan click panah posting yang anda tampilkan pada newsflash akan berganti, Dengan menggunakan Newsflash, pasti pengunjung blog anda akan betah dan blog lebih terkesan profesional. 

Newsflash sangat berguna bagi anda yang ingin menonjolkan artikel unggulan blog anda , karena cukup menarik perhatian dan kita juga bisa memasukan beberapa kalimat didalamnya. Dan saat ini anda tidak perlu repot-repot untuk membuatnya, karena sekarang sudah banyak tersedia blog yang dilengkapi dengan newsflash. Untuk mendapatkan template ini anda bisa mengunjungi situs .http://btemplates.com, disini banyak tersedia beberapa templates dengan newsflash dari 1 kolom hingga 4 kolom. Dibawah ini ada beberapa templates yang dilengkapi dengan newsflash.

Untuk mengedit newsflash adalah sebagai berikut :

Setelah mengupload templates blog masuk ke bagian edit html dan cari kode di bawah ini 

<div class='imageElement'>

<h3>This is featured post 1 title</h3>

<p>Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.</p>

<a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/>

<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-A0vCAb1geMeBEwj75kU-m8cYI7TZ8fQ4IWUaNPCVLS5VcOh8j_zT_IRTK2RFPD4BNc_J57S-Fdhz3iVm1wgFlh-mZqZ4o5IXB6XV8WZPMW2POAQNhwDwcFldn4-ty6BjsXio0qDWDs9-/s0/1.jpg'/>

</div>

Keterangan :

Merah : Ganti dengan judul posting

Hijau  : Isi posting 

Biru : Link yang dituju ( link ke posting anda )

Ungu : Alamat url gambar 

Kode ini ada 5 buah, jadi anda bisa menampilkan 5 posting, dan pengaturannya juga sama. 

Read more »

Memasang widget SMS gratis di blog

Siapa sih yang gak mau sms gratis? seiring dengan maraknya iklan oleh para provider yang ngaku memberikan sms gratis, kita juga bisa menyediakan sms gratis di blog kita. Selain bisa sms gratis, dengan widget ini kita bisa lebih memanjakan para pengunjung dan pasti akan kembali ke blog kita lagi. Untuk memasang widget ini caranya mudah, sama dengan memasang widget seperti biasa.
 Anda tinggal memasukan kode html di bawah ini:

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget" style="border:0" scrolling="no" width="270" height="350"> not support </iframe>

Setealah memasang, cobalah untuk menirim sms ke nomor anda sendiri, untuk memastikan widget anda berhasil atau tidak. Dengan widget ini anda bisa mengirim sms gratis dan unlimited. Oke sekian tips dari saya selamat mencoba,

Read more »

Membuat Logo Status YM

 
Bagi kalian ingin menampilkan status YM di web dapatkan cara membuatnya disini. Kalian langsung aja mampir ke situs ini Ymgen. Di situs Ymgen kamu bisa membuat logo ym secara instan tanpa perlu repot ngatur kode segala. Tesedia berbagai jenis gambar status yang lucu dan keren.  Untuk cara membuatnya saya jelaskan caranya :

1. Pilih Logo Status YM yang kamu inginkan
2. Masukan User ID YM kamu pada form
3. Tekan submit bila sudah selesai


Nah nantinya jadi seperti di bawah ini

Kamu tinggal copy kodenya dan bisa langsung di pasang di forum atau web. Yang mau buat silahkan langsung ke TKP

Read more »

Membuat Related Post Di Bawah Posting

Ingin membuat link terkait seperti gambar di atas? caranya mudah, seperti menambah widget blog biasanya.

Untuk menambah post terkait atau related post di setiap akhir posting, kita bisa menggunakan jasa dari situs LinkWithin.com. Cara pemasangannya gampang kita tinggal memasukan email, alamat url dan beberapa opsi. Panduannya cukup jelas dilengkapi dengan screenshoot cara pemasangannya. Selamat mencoba! 

Read more »

Cara Membuat iklan Pop UP (melayang)

 Kadang-kadang kita sering terganggu dengan adanya  pop up iklan yang selalu mengikuti dan sering pula menutup artikel yang sedang kita baca. Jadi terpaksa kita harus menutup iklan pup up tersebut. Tapi bagi kita publisher dengan adanya jendela pop up iklan ini, iklan kita bisa lebih efektif dan pastinya bisa menambah earning kita. Karena visitor pasti akan tertuju pada pop up iklan dan otomatis akan membaca dan jika tertarik pasti visitor juga akan meng klik iklan kita. Berikut ini kode untuk membuat jendela pop up :

<style type="text/css">
#topbar{
position:absolute;
top:600px;
left:600px;
border: 3px #00FF00;
padding: 2px;
background-color: black;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>
<script src="http://h1.ripway.com/icalcell/js_pop_up.js" type="text/javascript"></script>

<div align="center">
<div id="topbar">
<div align="right"><a style="color: gray; font-weight: bold; font-style: italic;" href="" onclick="closebar(); return false"><span><button>Close</button></span></a></div>
<p><a style="font-weight: bold; color: gray;">
</a><a style="font-weight: bold; color: gray;" title="cara mudah dapatkan uang dari internet">
</a></p><p><a style="font-weight: bold; color: gray;" title="cara mudah dapatkan uang dari internet">
</a></p><p><a style="font-weight: bold; color: red;" title="cara mudah dapatkan uang dari internet">Tes Keberuntungan kamu dengan klik 1 iklan saja</a>


</p><center>

 <script src="http://kumpulblogger.com/dam.php?b=51484" type="text/javascript"> </script>
</center>

<p></p><p>widget by <a href="http://biangblog.blogspot.com">ical</a></p></div></div>

Keterangan :

• Kode warna merah : anda ganti dengan kode html iklan anda
• Kode ( top:600px; dan left:600px; ) untuk mengatur posisi jendela pop up  

Read more »

Memasukan Kode HTML Di posting Blog Tanpa Encoding

Sekarang tidak perlu repot mengencoding kode html atau harus membuat textbox untuk memasukan kode HTML ke dalam artikel atau posting. Karena dari fitur blogger sendiri sudah ada setting untuk tidak menterjemahkan Kode HTML. Caranya sebagai berikut:

1. Setelah masuk ke menu create posting, klik link Post Options pada bagian bawah 

2. Pada Setelan Tulis pilih opsi Tunjukan HTML apa adanya Dengan mengubah setingan tersebut anda hanya tinggal memasukan kode html sesuai aslinya dan bisa diedit seperti merubah warna atau memberi keterangan

Read more »

Membuat Daftar Link Teman

Media ini sangat bermanfaat untuk memasang link teman dalam jumlah yang banyak. Selain bisa bergantian ada tombol drag down yang memudahkan untuk menampilkan semua link. Contohnya berikut ini:

Kode htmlnya berikut ini


<h2 class="title">Link Sahabat</h2>
<div class="widget-content">
<div style="border: 0px solid rgb; overflow: auto; width: 200px; height: 100px; text-align: center;">

<marquee onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="2" direction="up">

<div style="text-align: center;">
<a href="http://www.prafangga.com">Belajar Dan Berbagi</a></div>

<div style="text-align: center;">
<a href="http://nayarre-pata.blogspot.com/">Nayarre Blog</a></div>

<div style="text-align: center;">
<a href="http://www.ifandri.com/">Ifandri's Blog </a></div>

<div style="text-align: center;">
<a href="http://www.biangblog.blogspot.com/">Biang Blog </a></div>

<div style="text-align: center;">
<a href="http://www.aero-models.blogspot.com/">Aero Models</a></div>

</marquee></div></div>

Opsinya sebagai berikut :

• Link Sahabat : judul widget , bisa diganti sesuai keinginan anda
• width: 200px : angka 200 adalah ukuran lebar kotak widget
• height: 100px : untuk mengubah tinggi kotak widget
• <a href="http://www.ifandri.com/">Ifandri's Blog </a></div> : warna pink alamat url, warna oranye Judul blog
• Untuk menambah beberapa link anda tinggal copy kode berikut 

<div style="text-align: center;">

<a href="http://www.aero-models.blogspot.com/">Aero Models</a></div>

dan paste di atas kode </marquee></div></div>

Read more »

Membuat Twitter Follower Counter Di Blog

Pada artikel kali ini kita akan membuat chicklet atau badge penghitung follower account twitter.
Chicklet ini hampir sama dengan feedburner yang menghitung jumlah reader, sedangkan Twitter Counter ini gunanya untuk menghitung Twitter Followers anda.

Default button :



Kodenya sebagai berikut :

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=username"></script>

Ganti tulisan merah username dengan id twitter anda

Tersedia 4 warna anda bisa lihat disini.

Untuk add di blogger caranya sebagai berikut
Sign ke Blogger » Layout » Add a gadget » html/javascript
paste the code and save it.

Untuk Wordpress :
Sign ke Wordpress > Widgets > Text
paste code kemudian save.

Read more »

Cek Broken Link Di Blog

Untuk menambah performa blog anda tidak ada salahnya kita mengecek ada tidaknya broken link, dan kita tidak bisa menganggap remeh tentang adanya broken link di web kita. Karena banyak hal yang akan di timbulkan denagan adanya broken link tersebut. Di akhir posting ada situs yang bisa digunakan untuk cek adanya broken link atau tidak.

Sebenarnya Broken link bisa disebabkan oleh beberpa hal antara lain :

• Terjadi perpindahan server
• Kesalahan scipt html atau java
• Salah ketik alamat URL

Beberapa efek negatif dari broken link alias broken link effect antara lain:

1. Popularitas Backlink Menurun.
2. SEO Hancur.
3. Penurunan Traffic secara drastis. Karena loadnya terlalu lama kebanyakan para pengunjung akan langsung menutub web anda. Dan yang lebih parah mungkin pengunjung akan kapok datang ke situs anda lagi. Hingga akhirnya anda akan kehilangan pengunjung setia anda.
4. Tidak Disukai Oleh Google. Google sebagai mesin pencari yang terbaik pasti tidak akan mengecewakan para penggunnya dengan adanya situs yang not found atau ngeload kelamaan. Maka untuk situs yang bermasalah akan diturunkan rangkingnya.
5. Pencabutan pagerank oleh mesin pencari. Karena situs anda bermasalah dengan adanya broken link maka otomatis pagerank anda akan dicabut dan mungkin kembali ke nol lagi.

Untuk mengecek broken link silahkan kunjungi alamat ini : http://www.iwebtool.com/backlink_checker

Read more »

Menampilkan Status Twitter Di Blog

Cara menampilkan update status twitter di blog atau website:

1. Login ke twitter.com
2. Klik bagian Setting
3. Lihat ke bawah pada more info URL kemudian klik link (You can also add Twitter to your site here)
4. Pada list widget for... pilih My Website > Profile Widget
   
5. Maka akan muncul halaman Customize Your Profile Widget anda dapat mengatur widget anda disini, antara lain:
   

• Setting : mengedit username anda
• Preferences : menampilkan atau menyembunyikan poll dan memberikan scroll bar dan jumlah tweets yang akan ditampilkan
• Apperance : mengatur warna widget
• Dimension : merubah ukuran widget dapat manual atau dapat menyesuaikan secara otomatis dengan memberi tanda centang pada auto width
  Setelah selesai klik "Finish & Grab Code"
  

Read more »

Mengubah Lebar Template blogger

Buka blog anda, Masuk menu Tata Letak > Edit HTML > Centang Expand Widget, Demi keamanan Back Up dulu data template anda..! ( copy –paste ke notepad atau word ).

Temukan angka width dari #header-wrapper, #outer-wrapper, dan #footer, #main-wrapper ,#sidebar-wrapper, yang merupakan patokan dari lebar halaman. untuk memudahkan pencarian tekan ctrl+f kemudian paste ke kota find. Angka yang saya blok merupakan ukuran width :

Untuk nilai width : #header-wrapper, #outer-wrapper dan #footer adalah sama, anda bisa rubah ke 750 px semua.

Dan untuk nilai width : #main-wrapper ,#sidebar-wrapper, bisa anda atur sesuai keinginan anda, main wrapper merupakan kolom posting anda dan sidebar adalah tampilan sebelah dari posting anda. Dan diantara kolom posting dan sidebar ada jarak beberapa pixel, agar antara kolom posting dan sidebar tidak terlalu dempet.

Jadi seperti ini ( contoh ) anda bisa ganti width dari masing-masing ukurannya :

#header-wrapper, #outer-wrapper, dan #footer,

750 px, 750 px, 750 px

#main-wrapper ,#sidebar-wrapper

470 px + 30 px ( jarak antara, anda bisa atur sendiri ), 250 px.

Untuk melihat hasilnya klik Preview

Apabila sudah selesai klik Save

Read more »

Membuat Recent Comment

Wah biasanya kita sampai kesulitan mengecek komentar terbaru yang ada pada blog kita, soalnya komentar di lontarkan di postingan kita yang berbeda-beda, jadi kita akan merasa kesulitan untuk mengetahui siapa saja yang memberi komentar dan dimana dia melontarkan komentarnya juga isi komentarnya bagaimana.
Tapi jangan kawatir saya akan beri tips jadul tapi manjur yaitu cara membuat recent comments dengan JavaScript.
Dulu anas udah posting cara menampilkan postingan terbaru yang saya tulis sebelumnya, kali ini anas tulis juga membuat recent comments dehhh... ikuti yukkk

1. Pastikan dulu sudah Log In di blogger yah!

2. lalu beranjak ke menu Layout Kemudian Page elements

3. Kalau sudah! hoi sudah belom! sudah- sudah yaa jangan nangis... Lo kok malah mbulet-mbulet. Ahh serius nihhh Pilih tempat yang mau dipasangi terus Add a Gadget

4. Lalu pilih Menu HTML/JavaScript

5. Taruh Code Dibawah ini Kedalam HTML/JavaScript

Taruh Code Dibawah ini Kedalam HTML/JavaScript

<script style="" src="http://anas.ku93.googlepages.com/comments.js"></script><script style="">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

5. Keterangan:

• Tulisan NamaBlogKamu yang tercetak tebal dan merah diatas harus kamu ganti dengan alamat blog kamu
• Angka 5 yang tercetak tebal dan biru itu menunjukkan Komentar terakhir yang ditampilkan di blog, kamu bisa mengubah sesuai selera kamu

6. Kalau sudah Simpan dehhhh

Aduhhh gampang kannnnn cuma itu aja gak ada yang ribet kok.
ohh yaa jangan sampai lupa isi komentar kamu dibawah yaaaa thx lo sebelumnya.... ihhh gemes dechhhhh

Read more »

Membuat Recent Post Dan Thumbnail

 Widget yang satu ini fungsinya untuk menampilkan postingan terakhir kita (Recent Post), gambar, dan jumlah komentar.
Contoh tampilannya seperti dibawah ini :



Buat cara bikinnya simple aja, kamu tinggal "Add Gadget" ---- > "HTML/JavaScript" lalu copy paste code di bawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 300;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NAMABLOGKAMU.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Setelah itu, ada beberapa yang harus dan bisa kamu edit, diantaranya :

boxwidth --> Ukuran dari kotak Widget
cellspacing --> Spasi diantara cells
thumbwidth dan thumbheight --> Ukuran lebar dan tinggi kotak gambar
numposts --> Jumlah recent post yang akan kamu tampilkan..
home_page --> http://NAMABLOGKAMU.com/ ( ganti alamat blog kamu )

Selamat mencoba ! Semoga Bermanfaat

Read more »

Cara Mengaktifkan U Comment I Follow

Pertama : Cek dulu blog anda, apakah jangan - jangan tanpa di sadari udah Do Follow, emang sulapan :D . Cara ngeceknya begini, coba aja lihat di postingan yg sudah ada commentnya. Kemudian select satu comment aja dari nama sampai isi posting trus klik kanan - pilih View Selection Source (Untuk FireFox). Dan lihat apakah di dalam html tsb ada rel=”nofollow” kalau masih ada text "no follow" artinya blog masih belum do follow.
Kedua : Cara mengubahnya, seperti biasa masuk ke blog anda (menu tata letak - HTML), jangan lupa "biar nongol semua scriptnya, dan cari script berikut :
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/></a>Ganti menjadi :

<a expr:href='data:comment.authorUrl' rel='external'>
<data:comment.author/></a>

Ketiga : Cari script berikut :

<a expr:href='data:backlink.url' rel='nofollow'>
<data:backlink.title/></a>

Ganti menjadi :

<a expr:href='data:backlink.url' rel='external'>
<data:backlink.title/></a>

Ok selesai! Selamat berbagi backlink!

Read more »

Aquarium di blog

Gadget yang satu ini memang keren abis, kita bisa bikin aquarium di blog kita. Selain bisa ngasih makan ikan2 kecil itu bisa ngikutin gerakan mouse pointer kita! Ini salah satu produk dari google gadget yang saya suka coz lucu banget. Kalau pengen masang gadget ini di blog anda dapatkan kodenya disini!

Read more »

Cara Membuat Marque (Running text)

Marquee atau sering disebut text berjalan yang biasanya sering kita lihat pada acara berita di televisi saat ini bisa kita buat di blog kita, selain itu objek marquee bisa juga seperti link ataupun gambar berjalan, contohnya seperti ini:

Contoh text:

MARQUEE TEXTContoh link:

BloggigContoh gambar:




Kodenya berikut ini :

<span style="color: rgb(255, 0, 0);"><marquee onmouseout="this.start()" direction="left" align="center" scrollamount="2" height="100px" onmouseover="this.stop()"><br /><span style="color: rgb(255, 0, 0);"><span style="color: rgb(51, 51, 255);">Text atau Link URL anda<br /></a></span></span></marquee></span><br /><span class="fullpost"></span>

Agar mudah dimengerti dan memodifikasinya, keterangannya seperti ini:

onmouseout="this.start()" ---> text akan bergerak jika pointer tidak diarahkan ke text
direction="left" ---> text akan bergerak ke kiri. Bisa diganti dengan down, up, atau right
align="center" ---> text rata tengah
scroolamount="2" ---> kecepatan berjalan, semakin besar angkanya semakin cepat
height="100px" ---> batas vertikal marquee
onmouseover="this.stop()" ---> marquee akan berhenti ketika mouse masuk ke area marquee
widht="200px"---> batas horisontal marquee
Text atau Link atau URL gambar ---> diganti saja menurut keinginanmu.

Read more »

Addthis.com tombol ajaib untuk share artikel

Addthis button dapat digunakan untuk mensharingkan atau mengirim artikel blog mu ke situs lainnya seperti facebook, multiply, redit, twitter, myspace dll. Hanya dengan mengklik icon situs yang anda tuju dan kemudian akan muncul window untuk login ke situs yang anda pilih tadi.
Sedangkan Bookmark digunakan untuk para pembaca untuk berlangganan artikel blog atau sering disebut feed.

Read more »

Wp-Cumulus Untuk Blogger (Standart)

Cara memasang Wp cumulus pada blogger

Cara membuatnya cukup mudah, Hanya tinggal copas kode scrip html aja.

Ikuti saja langkah-langkahnya berikut ini :

1. Log in ke blogger
2. Dari dashboard, klik Lay out, kemudian edit HTML, jangan lupa klik tanda expand widget
3. Cari kode di bawah ini (untuk memudahkan, tekan ctrl+F untuk memunculkan menu Find, kemudian masukkan kode yang dicari).

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

4. Setelah ketemu, copy kode di bawah ini, kemudian tempelkan (paste) dibawah kode yang tadi. Biar lebih cepat klik Copy all aja. Jika tidak ada berarti template anda menggunakan code CSS untuk yang kode CSS, untuk tutorial kode css klik disini

Immediatly after this line, paste the following section of code:

<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.biangblog.blogspot.com'>Biang blog</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>

5. Klik Save.

Selanjutnya kita bisa mengubah warna, ukuran, dan mengatur letaknya.

Setting secara default adalah sebagai berikut :

• Lebar 240px
• Tinggi 300px;
• Warna Backgrund : Putih
• Warna teks : abu-abu
• Ukuran Font "12"

Mengubah ukuran Tinggi dan Lebar :

Cari kode ini :

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

• Yang warna merah adalah lebar
• Yang biru adalah tinggi

Angka-angka itu adalah dalam satuan pixel. Kita bisa mengubahnya sesuai kebutuhan, menyesuaikan sidebar di blog kita.

Mengubah warna background :

Masih menggunakan kode di atas, background berwarna putih ditunjukkan dengan kode #ffffff

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

Kita bisa mengubahnya dengan warna lain misalnya warna merah muda. Ganti kodenya #ffffff dengan #ff0000. Cobalah ganti dengan kode-kode warna lainnya.


Mengubah warna text

Secara default, text berwarna abu-abu ( hex value #333333). Kita bisa menggantinya dengan mengubah kode di bawah ini.

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

Misalnya mau kita ubah menjadi hitam, ganti 333333 menjadi 000000 (Ingat, Ubah kode angkanya saja, tidak perlu menuliskan # )


Mengatur ukuran font

cari kode berikut ini :

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>");

Ukuran font saat ini adalah 12. Kita bisa mengubahnya lebih besar atau lebih kecil sesuai kebutuhan.

Selesai... Mudah bukan?

Untuk menampilkan blogumus diperlukan Flash Player . Kita bisa mendapatkannya dengan mengunduhnya di Adobe.

Read more »

Tag Cumulus untuk blogger Versi CSS

Apa sih Tag Cumulus itu? Tag Cumulus adalah sebuah fitur/widget yang fungsinya sama dengan Label, Categories, dan Tag.

Kelebihan Widget ini adalah bahwa dia bisa berputar-putar sehingga terlihat sangat menarik. Dan mungkin, dia bisa menjadikan-efisien (baca: menghemat) tinggi area sidebar blog kita.

Cara Memasang di blogger:

1. Cari kode HTML yang menunjuk pada 'id' atau 'class' dari area Sidebar Blog anda...

kode HTML sidebar tergantung dari jenis template anda. Ini bisa bervariasi. Misalnya: pada blog saya adalah id=sidebar-wrapper.

Tapi, dalam blog anda mungkin bisa lain. Misalnya: Mungkin juga, id='sidebar' ; id='column02' ; dan sebagainya.

2. Kemudian, copy kode dibawah ini:

<b:section id="'sidebar9'" preferred="'yes'" showaddelement="'no'"><br /> <b:widget id="'Label9'" locked="'false'" title="'Label'" type="'Label'"><br /> <b:includable id="'main'"><br /> <div id="'xsnazzy'"><br /> <b class="'xtop'"><b class="'xb1'/"><b class="'xb2'/"><b class="'xb3'/"><b class="'xb4'/"></b><div class="'xboxcontent'"><br /> <b:if cond="'data:title'"><br /> <h2 style="'font-family:arial'">Article Categories</h2><br /> </b:if><br /> <div class="'widget-content'"><center><br /> <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'">Iyandri</a>Distributed by <a href="'http://tiluk.blogspot.com'">Cahaya Biru</a></div> <script type="'text/javascript'"> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "330", "200", "9", "#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 href="'data:label.url'" style="'12'"><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script><br /> <b:include name="'quickedit'/"><br /> </center></div><br /> </div><!--xboxcontent--><br /> <b class="'xbottom'"><b class="'xb4'/"><b class="'xb3'/"><b class="'xb2'/"><b class="'xb1'/"></b><br /> </div><!--end of xsnazzy--><br /> </b:includable><br /> </b:widget><br /> </b:section>

Keterangan:
a. Tulisan 'Article Categories' adalah title dari Widget. Anda bisa merubah sekehendak anda. Misalnya: kategori artikel, Grup Artikel, dan sebagainya.


Angka 330 (tanpa px) = lebar pixel widget
Angka 200 (tanpa px) = tinggi pixel widget
333333 (tanpa #) = kode warna dari Tulisan
#ffffff = kode warna dari Background Widget
Angka 12 = ukuran font dari widget


6. Taruh kode tersebut, di manapun anda suka. (saya sarankan dalam area sidebar yaa...)

7.Save Template-mu

Read more »