Friday, 16 September 2011

Membuat tag cloud link bejalan cumulus di blogdetik


tagcloudcumulusTag Cloud Cumulus memang mempunyai daya tarik tersendiri yang acapkali membuat banyak blogger kepincut untuk memasangnya di blog. Bukan saja fungsinya yang menjadi daya tarik, namun tampilannya yang atraktif justru lebih banyak menjadi faktor dominan keinginan untuk memanfaatkan tag cloud spesial ini. Beberapa blogger mengengenal tag cloud cumulus hanya sebagai tag cloud animasi atau tag cloud dengan teks yang bisa bergerak. Ungkapan yang sangat masuk akal karena untuk sementara ini tag cloud dengan teks link beranimasi yang bisa bergerak dengan amat dinamis hanyalah tag cloud cumulus dan tag cloud jQuery.
Untuk membuat tag cloud cumulus tidaklah sulit, hanya diperlukan ketelitian ekstra ketika menyusun link demi link yang akan menampilkan teks dalam tag cloud. Link-link yang tersusun sebagai kode HTML harus dibuat sambung menyambung tanpa putus sama sekali. Jadi istilah lain adalah tanpa spasi. Sampeyan akan melihat secara lebih jelas dengan melihat bentuk susunan link yang tertulis di kode HTML tag cloud. Ketika tag cloud akan dipasang di blog sampeyan, link-link dan teks link inilah yang nantinya harus diganti sesuai dengan kebutuhan blog. Yang jelas, selain bisa digunakan untuk menampilkan beberapa kategori posting, link juga bisa kita manfaatkan untuk menampilkan link yang berbeda seperti blog atau situs lain. Yah … barangkali saja sampeyan punya 10 blog yang berbeda?! he … he … atau mungkin 100 buah blog?

xHTML dan javascriptTag Cloud Cumulus

<div style="margin:10px auto;float:none;text-align:center;padding:5px 0px;border:3px solid #777;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;background:#444;">
<script type="text/javascript" src="http://h1.ripway.com/santyeka/Javascript/bgsGR_cumulus.js"></script>
<div id="flashcontent" style="padding:0 10px;font-size;18px;font-weight:bold;background:#222;color:yellow;">gubhug reyot</div>
<script type="text/javascript">
var so = new SWFObject("http://www.swfcabin.com/swf-files/1275932799.swf", "tagcloud", "200", "200", "7", "#ddeefe");
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x0307bc");
so.addVariable("tcolor2", "0x138002");
so.addVariable("hicolor", "0xfb3f1a");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><a href='http://gubhugreyot.blogspot.com' style='22' color='0xf602ff' hicolor='0x0c03c9'>gubhug reyot</a><a href='http://gubhugreyot.blogdetik.com' style='16'>GR blogDETIK</a><a href='http://gubhugreyot.blogspot.com' style='16'>Modifikasi Template</a><a href='http://bloggerstuars.blogspot.com' style='14'>Menu Masakan</a><a href='http://tantytm.blogspot.com' style='20'>Free File Hosting</a><a href='http://gubhugreyot.blogspot.com/2010/07/tag-cloud-cumulus-full-color-buat-dan.html' style='18'>Tag Cloud Cumulus</a><a href='http://gubhugreyot.blogspot.com' style='9'>More than 400 Tutorial</a><a href='http://bgsgr.blogspot.com' style='14'>Full CSS3</a><a href='http://gubhugreyot.blogspot.com' style='20'>Tips Trik Blogger</a><a href='http://gubhugreyot.blogspot.com' style='12'>Javascrip-jQuery</a><a href='http://gubhugreyot.blogspot.com' style='18'>Animasi GIF</a></tags>");
so.write("flashcontent");
</script>
</div>

Keterangan:

  1. Perhatikan kode yang seperti ini:
    "tagcloud", "200", "200", "7", "#ddeefe");
    Angka 200 (merah) untuk mengatur lebar tag cloud, 200 (oranye) untuk mengatur/merubah tinggi tag cloud dan #ddeefe adalah warna background tag cloud (rubah kode untuk merubah warna background). Jika ingin warna tag cloud transparant, hapus tanda //pada kode so.addParam(”wmode”, “transparent”);
  2. tcolor dan tcolor2 (0x0307bc dan 0x138002) berfungsi untuk merubah warna teks link.
  3. hicolor ==> hicolor“, “0xfb3f1a“); untuk mengatur warna hover link.
  4. so.addVariable(”tspeed”, “100“); angka 100 merupakan nilai pengaturan kecepatan gerak teks link tag cloud.
  5. Penulisan dan penyusunan link sangat mempengaruhi keberhasilan pembuatan tag cloud. Link harus dibuat berdeeret tanpa putus di mulai dari kode pembuka <tags> hingga kode penutup </tags>seperti di bawah ini:
    <tags><a href=’http://gubhugreyot.blogspot.com‘ style=’22′ color=’0xf602ff’ hicolor=’0×0c03c9′>gubhug reyot</a><a href=’http://gubhugreyot.blogdetik.com‘ style=’16′>GR blogDETIK</a><a href=’http://gubhugreyot.blogspot.com‘ style=’16′>Modifikasi Template</a><a href=’http://bloggerstuars.blogspot.com‘ style=’14′>Menu Masakan</a><a href=’http://tantytm.blogspot.com‘ style=’20′>Free File Hosting</a><a href=’http://gubhugreyot.blogspot.com/2010/07/tag-cloud-cumulus-full-color-buat-dan.html‘ style=’18′>Tag Cloud Cumulus</a><a href=’http://gubhugreyot.blogspot.com‘ style=’9′>More than 400 Tutorial</a><a href=’http://bgsgr.blogspot.com‘ style=’14′>Full CSS3</a><a href=’http://gubhugreyot.blogspot.com‘ style=’20′>Tips Trik Blogger</a><a href=’http://gubhugreyot.blogspot.com/search/label/Tutorial%20Blogger‘ style=’12′>Tutorial Blogger</a><a href=’http://gubhugreyot.blogspot.com‘ style=’18′>Animasi GIF</a></tags>
    Perhatikan pada kode di atas:
    Warna hitam ==> link blog/web/situs lain.
    Warna Hijau ==> Teks Link
    Warna Merah ==> Link Posting
    Warna Oranye == > Link Kategori
  6. Simpan seluruh kode dalam template melalui Widgetize Any HTML yang dapat diakses melalui halaman Dasbor.
  7. Untuk mengikuti panduan cara memasang atau menyimpan kode HTML seperti halnya tag cloud di atas KLIK link panduan di bawah ini:
Keterangan/Catatan:
  1. Dalam link di atas akan dijumpai cara pemasangan Javascript Energy Saving Mode.
  2. Cara penyimpanan kode tak berbeda antara Kode CSS, javascript ataupun xHTML, oleh karena itu ikuti panduan tersebut dengan seksama.
  3. Pada langkah Nomor 6 diperlihatkan contoh penempatan javascript dalam box Widgetize Any HTML. Lakukan cara yang sama akan tetapi yang dimasukkan dalam box dan disimpan adalah kode HTML Tag Cloud Cumulus (xHTML dan javascript).
  4. Jika ada sebuah box Widgetize Any HTML yang sebelumnya telah digunakan untuk menyimpan kode CSS, javascript ataupun xHTML seperti misalnya Energy Saving Mode, Kode CSS Favicon Address Bar ataupun yang lain, maka silahkan simpan xHTML dan Javascriptdi atas atau di bawah kode kode yang telah tersimpan di dalamnya.Jadi pada dasarnya dalam satu box Widgetize Any HTML dapat digunakan secara berulang-ulang dengan berbagai macam dan fungsi kode.
  5. Jika Tag Cloud akan dipasang di sidebar yang lain, buat terlebih dahulu 1 buah Widgetize Any HTML baru pada sidebar dimaksud. Cara membuat sama dengan langkah pada pembuatan Widgetize Any HTML saat pembuatan Energy Saving Mode.
  6. Pasang link dan teks link-nya sebanyak anda suka. He … he … rumah sampeyan mo di masukkan juga? Hiii … hiii boleh … boleh … Biar tidurnya di blogdetik sekalian, he …

Tag Cloud Cumulus dengan Background-image

Setelah sukses dengan tag cloud di atas, sampeyan boleh juga untuk mencoba yang di bawah ini. Tidak banyak perbedaan, hanya tag cloud ini dilengkapi background image yang cukup cantik!
<div style="height:172px;width:222px;margin:0px auto;overflow:hidden !important;float:none;text-align:center;background:#fff url(bg-image_Cumulus.gif) center no-repeat;">
<script type="text/javascript" src="http://h1.ripway.com/santyeka/Javascript/bgsGR_cumulus.js"></script>
<div id="flashcontent" style="font-size;18px;font-weight:bold;color:yellow;">gubhug reyot</div>
<script type="text/javascript">
var so = new SWFObject("http://www.swfcabin.com/swf-files/1275932799.swf", "tagcloud", "200", "176", "7", "#666666");
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x01fefb");
so.addVariable("tcolor2", "0xfcc283");
so.addVariable("hicolor", "0xe7fc03");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><a href='http://gubhugreyot.blogspot.com' style='22' color='0xffffff' hicolor='0x00cc00'>WordPress</a><a href='http://gubhugreyot.blogdetik.com' style='16'>Flash</a><a href='http://gubhugreyot.blogspot.com' style='16'>Plugin</a><a href='http://bloggerstuars.blogspot.com' style='14'>WP-Cumulus</a><a href='http://tantytm.blogspot.com' style='20'>3D</a><a href='http://gubhugreyot.blogspot.com' style='18'>Tag cloud</a><a href='http://gubhugreyot.blogspot.com' style='9'>Roy Tanck</a><a href='http://bgsgr.blogspot.com' style='14'>SWFObject</a><a href='http://gubhugreyot.blogspot.com' style='20'>Example</a><a href='http://gubhugreyot.blogspot.com' style='12'>Click</a><a href='http://gubhugreyot.blogspot.com' style='18'>Animation</a></tags>");
so.write("flashcontent");
</script>
</div>
Ganti terlebih dahulu bg-image_Cumulus.gif, dengan :

==>http://i964.photobucket.com/albums/ae124/gubhugreyot/imageloading/BgsGR-bgLoader.gif

0 comments:

Post a Comment