Percantik Tampilan Label Cloudmu Dengan CSS

Permintaan sahabat blogger dalam bentuk komentar di salah satu  postingan OOM RIO untuk meminta dibuatkan tutorialnnya. Kelebihan dari modifikasi widget label cloud ini adalah disaat mouse di letakan di salah satu label (mouse over), kotak label akan berputar tidak lebih dari 30 derajat. Pada tahun 2008 ketika Blogger.com bergerak melalui tahap pembaruan beberapa pengembang pihak ketiga sering mengambil kesempatan untuk menciptakan widget untuk blogspot, beberapa widget resmi muncul dengan cepat dengan kinerja yang baik karena script yang dilayani oleh server Blogger. Widget Label Cloud didesain dengan menu yang dinamis.
Tapi ingat! sebelum sahabat blogger memasang tampilan ini, gunakan opsi pada widget label menjadi seperti ini.

Tag Cloud Animasi Cumulus Suka-Suka

Kode HTML dan Javascript untuk membuat Tag Cloud Cumulus Full Color

<center>
<div class="menuTitle" style="text-align:center;font:18px Droid Serif;font-weight:bold;color:blue;"><a href="http://gubhugreyot.blogdetik.com" style="text-decoration:none;">gubhugreyot-cumulus</a></div>
<div class="box4" style="background:#222; width:278px;border:8px solid #333;margin:20px 0 20px 16px;">
<div class="box3" style="background:transparent url(http://tagcloud-cumulus.googlecode.com/files/bg_cumulus-gubhugreyot-1.png) center repeat-x;border:3px solid #555;width:272px;">
<div class="box2" style="background:transparent;width:266px;border:3px solid #777;"> 
<div class="box1" style="background:#999; width:250px; background:transparent url(http://tagcloud-cumulus.googlecode.com/files/bg_cumulus-gubhugreyot-2.png) center no-repeat;border:3px solid #999;padding:0  5px">
<script type="text/javascript" src="http://tagcloud-cumulus.googlecode.com/files/bgsGR_cumulus.js"></script>
<div id="flashcontent"><a href="http://gubhugreyot.blogdetik.com" style="text-decoration:none;">gubhug-reyot</a></div>
<script type="text/javascript">
var so = new 
SWFObject("https://sites.google.com/site/gubhugreyotprojects/tagcloud-cumulus/GR_cumulus-gubhugreyot.swf", "tagcloud", 
"250", "250", "7", "#333333");
// uncomment next line to enable transparency
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x000000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "250");
so.addVariable("tagcloud", "<tags><a href='Link-1' style='16' color='0x69fd59' hicolor='0xfb3f20'>Nama Link-1</a><a href='Link-2' style='22' color='0xe3d002' hicolor='0xfbacac'>Nama Link-2</a><a href='Link-3' style='16' color='0x6dc6fe' hicolor='0xf978fb'>Nama Link-3</a><a href='Link-4' style='20' color='0x787bfb' hicolor='0xfd8ff1'>Nama Link-4</a><a href='Link-5' style='9'  color='0xdcdf00' hicolor='0xb4acfb'>Nama Link-5</a><a href='Link-6' style='16' color='0xdfa300'  hicolor='0x78fbf9'>Nama Link-6</a><a href='Link-7' style='16' color='0xdf1f00' hicolor='0x78fb7e'>Nama Link-7</a><a href='Link-8' style='12' color='0xfbf378' hicolor='0xb17501'>Nama Link-8</a><a href='Link-9' style='16' color='0xfcf9fd' hicolor='0xfbc878'>Nama Link-9</a> <a href='Link-10' style='16' color='0xfd332f' hicolor='0xfbd687'>Nama Link-10</a><a href='Link-11' style='27'  color='0xc7fcfd' hicolor='0xfb835e'>Nama Link-11</a><a href='Link-12' style='13' color='0x9497d7'  hicolor='0x14eefc'>Nama Link-12</a> <a href='Link-13' style='14' color='0x010bde' hicolor='0xfdc2b3'>Nama Link-13</a><a href='Link-14' style='16' color='0x01dbde' hicolor='0x8ba08b'>Nama Link-14</a><a href='Link-15' style='11' color='0xfe5003' hicolor='0x16de01'>Nama Link-15</a><a href='Link-16' style='16' color='0xfef2c4' hicolor='0xef0000'>Nama Link-16</a> <a href='Link-17' style='11'  color='0xc8fcca' hicolor='0xfa9cfb'>Nama Link-17</a><a href='Link-18' style='16' color='0xefdb00'  hicolor='0x12e102'>Nama Link-18</a><a href='Link-19' style='22' color='0x02e9fe' hicolor='0x9aaaf9'>Nama Link-19</a><a href='Link-20' style='27' color='0xef7000' hicolor='0xf9fc02'>Nama Link-20</a><a href='Link-21' style='9' color='0xfb5724' hicolor='0xffffff'>Nama Link-21</a><a href='Link-22' style='16' color='0x24fb2f' hicolor='0xfd8fa9'>Nama Link-22</a> <a href='Link-23' style='20' color='0xfe3324' hicolor='0xacabab'>Nama Link-23</a><a href='Link-24' style='9' color='0x37fbcf' hicolor='0xb4acfb'>Nama Link-24</a><a href='http://gubhugreyot.blogspot.com/2010/07/tag-cloud-cumulus-full-color-buat-dan.html' style='22'  color='0xaffb37' hicolor='0xffffff'>Tag Cloud Cumulus Full Color</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</div>
</div>
</div>
</center>

Langkah Pemasangan Label Tag Cloud Cumulus Full Color

1. Silahkan coba seluruh kode tanpa melakukan perubahan apapun.
2. Setelah percobaan berhasil dengan baik silahkan untuk mengganti beberapa kode untuk penyesuaian dengan kebutuhan yang ingin di tampilkan.
3. Akan lebih baik jika javascript dan file flash-nya diupload sendiri di file hosting agar tagcloud dapat selalu terloading dengan baik karena apabila javascript dan file flash ini nantinya digunakan banyak blogger maka bandwidth akan tersita habis!
4. Panduan upload javascript (http://tagcloud-cumulus.googlecode.com/files/bgsGR_cumulus.js) dan file flash/.swf (https://sites.google.com/site/gubhugreyotprojects/tagcloud-cumulus/GR_cumulus-gubhugreyot.swf) dapat sampeyan buka melalui link berikut:
   Panduan Upload dan simpan file di Google Sites
5. Khusus upload javascript, selain di Google Sites, sampeyan bisa upload di yourjavascript.com.
6. Panduan berikutnya untuk upload file .swf di swfCabin.
7. Setelah proses upload sekaligus penyimpanan javascript dan file cumulus.swf selesai, lanjutkan dengan Login ke BloGGeR
8. Dasboard (Dasbor) : KLIK link Layout/Tata Letak atau Design/Rancangan.
9. Setelah Elemen Laman (Page Element) terbuka, KLIK Add Gadget (Tambah Gadget) pada bagian sidebar.
10. KLIK HTML/Javascript.
Copy-Paste : Copy semua kode HTML dan Javascript, kemudian Pastekan di box widget yang tersedia.
11. KLIKSAVE/Simpan
12. Buka Blog (Open Blog) dan lihat hasilnya.

Keterangan/Catatan :

1. Lebar dan tinggi cumulus full color = 250px. Jika ingin merubah ukuran tinggi dan lebarnya, rubah pada :
   - var so = new
   SWFObject("https://sites.google.com/site/gubhugreyotprojects/tagcloud-cumulus/GR_cumulus-gubhugreyot.swf", "tagcloud",
   "250", "250", "7", "#333333");
2. Sesuaikan juga lebar box pada :
   - <div class="box4" style="background:#222; width:278px;
   - Rubah angka 278 sesuai selisih perubahan lebar yang sampeyan lakukan terhadap lebar tag cloud (selisih perubahan dengan perubahan terhadap width 250).
3. Rubah Link-1 s/d Link-24 dengan URL menu/label yang ditampilkan :
   - Misalnya Nama-link : Tagcloud
   - Link : http://rio-vizer4rt.blogspot.com/tagcloud.html
4. Rubah juga Nama Link-1 s/d Nama Link-24 sesuai kebutuhan blog.
5. Seluruh script mulai dari :
   - "<tags><a href='Link-1' style='16' color='0x69fd59' hicolor='0xfb3f20'>Nama Link-1</a> ........ hingga
   - <a href='http://gubhugreyot.blogspot.com/2010/07/tag-cloud-cumulus-full-color-buat-dan.html' style='22' color='0xaffb37' hicolor='0xffffff'>Tag Cloud Cumulus Full Color</a></tags>");
   so.addParam("allowScriptAccess", "always");
   
   Harus dibuat dalam bentuk rapat dan tidak terputus (link dan Nama link)

5. Save Template. Done!

Semoga tutorial diatas dapat dianggap terperinci dan detail yang dapat mempermudah dalam memahami tutorialnya. Speak your mind and happy blogging!

Judul: Percantik Tampilan Label Cloudmu Dengan CSS; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts