Buat Banner Animasi dengan Ulead GIF Animator

Membuat gambar bergerak dengan Ulead Gif Animator disini penulis menggunakan aplikasi bantu CorelDRAW (menggunakan aplikasi lain juga boleh seperti photoshop, illustrator, inkscape, dll). Aplikasi Ulead GIF Animator ini biasa di gunakan oleh para webmaster untuk membuat banner website profesinal. Disini ada beberapa bagian yang harus diketahui dalam membuat gambar dengan animasi bergerak. Langkahnya cukup mudah di pahami dan mudah di praktekkan.

Tampilan Gambar Aplikasi Window Ulead GIF Animator;

Keterangan gambar;

• Nomor 1. Open Image adalah icon untuk membuka gambar pertama dengan ukuran yang sudah ditentukan pada awal pembuatan gambar .
• Nomor 2. add Image adalah icon untuk menambah gambar kedua, ketiga dst. yang ingin dimasukkan.
• Nomor 3. Play Animation adalah untuk memulai atau menjalankan effect animasi.
• Nomor 4. add Frame adalah untuk menambah beberapa frame baru yang dibutuhkan
• Nomor 5. Frame Panel Commands --> Frame Properties dan pilih Delay adalah pengaturan kecepatan animasi
• Nomor 6. Preview adalah untuk melihat tampilan sebenarnya.

Langkah-langkah membuat Animasi :

• Kita buat dulu gambar di CorelDRAW, misal kita buat gambar seperti dibawah ini;

 

• Jika gambar sudah selesai dibuat save atau simpan 3 buah gambar tersebut sendiri-sendiri dengan format jpg, png , bmp (berarti ada tiga gambar yang telah kita buat) untuk coba-coba di copy aja ke tiga gambar diatas.
• Masuklah ke aplikasi "Ulead Gif Animator" dan jika ada jendela window kecil seperti ada pilihan : video wizard, open image, dll ditutup saja.
• Kemudian masukkan image atau gambar pertama yang kita buat tadi dengan klik menu File --> Open Image atau klik icon Open Image pada standart bar
• Buat dua frame untuk menambahkan dua gambar terakhir yang sudah kita buat tadi dengan perintah klik Menu Frame --> add Frame atau klik icon Add Frame pada standart bar (keterangan gambar nomor 4)
• Selanjutnya pilih frame kedua dan masukkan gambar kedua dengan klik menu File --> add Image atau klik icon add Image pada standart bar (keterangan gambar nomor 2)
• Untuk gambar ke tiga dst. sama dengan langkah diatas.
• Langkah terakhir klik menu File --> Save As --> GIF File…
• Hasilnya seperti dibawah ini

Mudah kan..?, ini hanya sekedar contoh, untuk selanjutnya kembangkan sendiri sesuai dengan kreatifitas dan imaginasi Anda,

Selamat mencoba...

Details »

Toolbox CorelDRAW x5

The toolbox contains a range of tools that you can use for specific drawing and editing tasks. Some tools let you draw shapes, and other tools let you apply colors, patterns, or other types of fills to objects. Some tools belong to flyouts, which are groups of related tools. A small arrow in the lowerright corner of a toolbox button indicates that the tool belongs to a flyout. The last-used tool in the flyout appears on the button. You can access the tools in a flyout by clicking the flyout arrow.

The following section summarizes the main categories of tools that are available in the toolbox.

Pick tool

The Pick tool lets you select, size, skew, and rotate objects.

Shape tools

Shape tools let you draw many different shapes, including rectangles, ellipses, stars, polygons, and spirals. Additional tools in this category (not shown here) let you draw shapes such as smileys, arrows, banners, and flowcharts.

Shape editing tools

Shape editing tools let you change the shape of an existing object.

Zoom tool

The Zoom tool lets you change the magnification level in the document window.

Curve tools

Curve tools let you draw lines and curves, such as freehand lines, straight lines, and Bézier curves. You can also use the Artistic media tool to spray images, draw calligraphic lines, or add brushstrokes.

Cropping and erasing tools

Cropping and erasing tools let you remove parts of a document.

Text tool

The Text tool lets you type words directly on-screen as artistic or paragraph text.

Table tool

The Table tool lets you draw and edit tables.

Dimension tools

Dimension tools let you draw slanted, straight, and angular dimension lines to measure parts of objects in a document.

Connector tools

Connector tools let you draw lines that connect objects in diagrams

and flowcharts.

Interactive tools

Interactive tools let you apply special effects to objects, such as drop shadows, extrusions, contours, and transparencies.

Fill tools

Fill tools let you apply various fills to objects, such as uniform, interactive, and mesh fills.

Details »

CorelDRAW Basics

This chapter introduces you to the CorelDRAW workspace and provides an overview of basic tasks, such as starting and viewing documents, modifying and organizing objects, and creating page layouts. Additional topics include sharing work and setting preferences. As you learn to use CorelDRAW, this chapter can help identify tasks and features that you may want to explore further in the Help. Workspace overview The CorelDRAW workspace provides a wide range of tools and commands for creating unique graphic designs. This section describes the application window and the toolbox.

Application window

The following list describes the main components of the CorelDRAW application window.

• The toolbox contains tools for creating, filling, and modifying objects in a document.
• The standard toolbar contains shortcuts to basic menus and commands, such as opening, saving, and printing documents. Additional toolbars contain shortcuts for more specific tasks.
• The menu bar contains drop-down menus of related commands.
• The title bar displays the title of the current document.
• The property bar contains controls that change according to the active tool. For example, when you use the Text tool, the property bar changes to display controls for creating and editing text.
• A docker lets you access commands and settings that are associated with a specific tool or task.
• The horizontal and vertical rulers let you determine the size and position of objects in a document.
• The document navigator lets you add pages to a document, or move from page to page within a document.
• The document window is the workspace area that is bordered by scroll bars and other controls. It includes the document page and surrounding area.
• The document page is the rectangle that represents the printable section of the document window.
• The Document palette lets you keep track of the colors that are used in a
• document.
• The color palette is a dockable bar that contains color swatches.
• The status bar displays information about the properties of an object, such as type, size, color, and fill. Color proofing status, color profiles, and other information about document colors are also displayed.

Details »

Trick Cepat Kerja Dengan CorelDRAW

Menghapal beberapa Shortcut di CorelDRAW, merupakan langkah tepat untuk mempercepat kerja dengan menggunakan CorelDRAW. Maksudnya yaitu dengan membiasakan diri untuk lebih memfungsikan perintah shortcut standard yang menempel pada fungsi-fungsi control di corelDRAW. Nah, untuk menghemat waktu kerja alangkah baiknya alternatif shortcut lebih sering dipakai. Kenapa begitu? Misal, jika kita melakukan perintah untuk membuka file, klik file open dengan cukup menekan Ctrl+O, atau jika kita ingin meng-copy objek, klik edit, copy, paste cukup dengan menekan tombol + (plus, yang ada di pojok kanan keyboard). Nah… jelas membantu mempercepat bukan? :

Berikut beberapa fungsi shorcut dasar yang sudah ada di corelDRAW:

• New File = Ctrl+N
• Open FIle = Ctrl+O
• Save = Ctrl+S
• Save As = Ctrl+Shift+S
• Import = Ctrl+I
• Export = Ctrl+E
• Exit (Keluar dari corel) = Alt+F4
• Undo = Ctrl+Z (satu kali artinya mundur 1 perintah, 2 kali mundur 2 perintah, dst…)
• Redo = Ctrl+Shift+Z (maju langkah perintah sebelumnya)
• Properties = Alt + Enter
• Option = Ctrl+J
• Fullscreen Preview/tampilan full = Ctrl+F9
• Snap to Gird = Ctrl + Y
• Group = Ctrl+G
• Ungroup = Ctrl+U
• Transformation Position = Alt+F7
• Rotate = Alt+F8
• Scale=Alt+F9
• Size = Alt+F10
• Object rata kiri = L
• Object rata kanan = R
• Object rata atas = T
• Object rata bawah = B
• Object rata tengah horisontal = E
• Object rata tengah vertikal = C
• Object rata di tengah halaman = P
• Combine = Ctrl+L
• Break Apart = Ctrl+K
• Convert To Curves = Ctrl+Q
• Gambar didepan Layer = Shift+PgUp
• Gambar dibelakang Layer = Shift+PgDn
• Forwad one = Ctrl+PgUp
• Back one = Ctrl+PgDn
• Format Karakter teks = Ctrl+T
• Edit Teks = Ctrl+Shift+T
• Masukan Karakter Simbol = Ctrl+F11
• Convert Teks = Ctrl + F8
• Spell Chek = Ctrl + F12
• Simbol manager = Ctrl+F3
• Refresh Windows = Ctrl+W

 Untuk lebih lengkapnya silahkan download fungsi shorcut corelDRAW disini !

Details »

Meta Tag Otomatis di Setiap Postingan

Teknik meta tag di blogspot secara otomatis ini sangat berguna untuk optimasi onpage karena setiap postingan kita akan memiliki meta deskripsi yang berbeda antara satu postingan dengan postingan lainnya tanpa perlu repot-repot menambah pada setiap postingan secara manual. Dengan kata lain, meta deskripsi dan keyword pada setiap posting akan ter-generate secara otomatis. Hal ini tentu menjadi solusi bagi Anda yang mengalami duplikasi meta deskripsi.

Cara memasang meta tag deskripsi dan keyword setiap postingan secara otomatis ini kita bagi dalam 2 bagian :

1. Bagi yang belum pernah memasang meta tag deskripsi sebelumnya;

Login ke blogger terus ke tata letak/design > edit html.
Cari kode berikut (gunakan ctrl + f):

<title><data:blog.pageTitle/></title>

Setelah ketemu kode diatas hapus lalu ganti dengan kode berikut :

<b:if cond='data:blog.url == &quot;http://alamat blog Anda.blogspot.com/&quot;'><title> <data:blog.pageTitle/></title><meta name='description' content='isi dengan deskripsi  homepage blog Anda'/><meta name='keywords' content='isi dengan kata kunci untuk homepage'/> </b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> - <data:blog.title/></title> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='description'/> <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='keywords'/> </b:if>

Selesai dan save template Anda.

2. Bagi yang sudah pernah memasang meta tag deskripsi sebelumnya;

Di halaman edit html, cari kode ini :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>

Lebih jelasnya  Anda cari kode deskripsi yang lama (yang sudah pernah Anda pasang sebelumnya), kemudian dihapus semua kode deskripsi yang lama.

Setelah kode meta tag deskripsi dan keyword yang lama dihapus diganti dengan kode berikut yang tentunya lebih oke! :

<b:if cond='data:blog.url == &quot;http://alamat blog Anda.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='description' content='isi dengan deskripsi untuk homepage blog Anda'/>
<meta name='keywords' content='isi dengan kata kunci untuk homepage'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='keywords'/>
</b:if>

Save/simpan template.

Demikian cara buat meta tag di setiap postingan secara otomatis. Semoga Anda  tidak direpotkan lagi dengan harus memasang meta tag deskripsi secara manual di setiap postingan.

Selesai.

Details »

Read More Otomatis dengan Thumbnail

Pemenggalan kalimat atau read more langsung bekerja secara otomatis tanpa harus menekan icon readmore pada menu bar. Fungsi read more ini mampu menampilkan image (gambar) thubnail pertama dengan ukuran yang sudah ditentukan dalam postingan di awal paragraf pertama, meskipun gambar yang kita letakan berada di tengah atau akhir postingan dan berapaun ukuran gambar dalam postingan tetap akan sama besar pada tampilan di homepage atau tampilan labels/kategory, dalam read more ini kita juga dapat mengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter, yang pertama, jumlah karakter yang ditampilkan jika ada image (gambar) yang disertakan pada postingan dan yang kedua jumlah karakter tanpa image (gambar) pada postingan. Untuk lebih jelasnya lihat gambar dibawah ini!

Langkah Pertama;
Masuk tab EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalau sudah, simpan terlebih dahulu.

<script type='text/javascript'>
summary_noimg = 600;
summary_img = 440;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
}
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+' [....]'; 
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Langkah kedua;
Tetap pada tab Edit HTML, beri tanda centang pada "Expand widget template" temukan kode seperti dibawah

<data:post.body/>

dan ganti kode <data:post.body/> dengan semua kode dibawah ini;

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read more &#187;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

Keterangan:

summary_noimg = 600; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar)

summary_img = 440; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar)
img_thumb_height = 125; (Thumbnail tinggi dalam satuan px)
img_thumb_width = 125; (Thumbnail lebar dalam satuan px)

Selesai.

Details »

Free RGB Color Chart Code

The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.
The main purpose of the RGB color model is for the sensing, representation, and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography. Before the electronic age, the RGB color model already had a solid theory behind it, based in human perception of colors.
RGB is a device-dependent color model: different devices detect or reproduce a given RGB value differently, since the color elements (such as phosphors or dyes) and their response to the individual R, G, and B levels vary from manufacturer to manufacturer, or even in the same device over time. Thus an RGB value does not define the same color across devices without some kind of color management.
Typical RGB input devices are color TV and video cameras, image scanners, and digital cameras. Typical RGB output devices are TV sets of various technologies (CRT, LCD, plasma, etc.), computer and mobile phone displays, video projectors, multicolor LED displays, and large screens as JumboTron, etc. Color printers, on the other hand, are not RGB devices, but subtractive color devices (typically CMYK color model).
RGB color chart for web site color codes. Match your websites color scheme with the RGB number or corresponding hexidecimal number. RGB Color Chart This color chart shows hexidecimal numbers with corresponding RGB values of the 216 browser safe colors.

#FFFFFF R=255 G=255 B=255	#FFFFCC R=255 G=255 B=204	#FFFF99 R=255 G=255 B=153	#FFFF66 R=255 G=255 B=102	#FFFF33 R=255 G=255 B=51	#FFFF00 R=255 G=255 B=0
#FFCCFF R=255 G=204 B=255	#FFCCCC R=255 G=204 B=204	#FFCC99 R=255 G=204 B=153	#FFCC66 R=255 G=204 B=102	#FFCC33 R=255 G=204 B=51	#FFCC00 R=255 G=204 B=0
#FF99FF R=255 G=153 B=255	#FF99CC R=255 G=153 B=204	#FF9999 R=255 G=153 B=153	#FF9966 R=255 G=153 B=102	#FF9933 R=255 G=153 B=51	#FF9900 R=255 G=153 B=0
#FF66FF R=255 G=102 B=255	#FF66CC R=255 G=102 B=204	#FF6699 R=255 G=102 B=153	#FF6666 R=255 G=102 B=102	#FF6633 R=255 G=102 B=51	#FF6600 R=255 G=102 B=0
#FF33FF R=255 G=51 B=255	#FF33CC R=255 G=51 B=204	#FF3399 R=255 G=51 B=153	#FF3366 R=255 G=51 B=102	#FF3333 R=255 G=51 B=51	#FF3300 R=255 G=51 B=0
#FF00FF R=255 G=0 B=255	#FF00CC R=255 G=0 B=204	#FF0099 R=255 G=0 B=153	#FF0066 R=255 G=0 B=102	#FF0033 R=255 G=0 B=51	#FF0000 R=255 G=0 B=0
#CCFFFF R=204 G=255 B=255	#CCFFCC R=204 G=255 B=204	#CCFF99 R=204 G=255 B=153	#CCFF66 R=204 G=255 B=102	#CCFF33 R=204 G=255 B=51	#CCFF00 R=204 G=255 B=0
#CCCCFF R=204 G=204 B=255	#CCCCCC R=204 G=204 B=204	#CCCC99 R=204 G=204 B=153	#CCCC66 R=204 G=204 B=102	#CCCC33 R=204 G=204 B=51	#CCCC00 R=204 G=204 B=0
#CC99FF R=204 G=153 B=255	#CC99CC R=204 G=153 B=204	#CC9999 R=204 G=153 B=153	#CC9966 R=204 G=153 B=102	#CC9933 R=204 G=153 B=51	#CC9900 R=204 G=153 B=0
#CC66FF R=204 G=102 B=255	#CC66CC R=204 G=102 B=204	#CC6699 R=204 G=102 B=153	#CC6666 R=204 G=102 B=102	#CC6633 R=204 G=102 B=51	#CC6600 R=204 G=102 B=0
#CC33FF R=204 G=51 B=255	#CC33CC R=204 G=51 B=204	#CC3399 R=204 G=51 B=153	#CC3366 R=204 G=51 B=102	#CC3333 R=204 G=51 B=51	#CC3300 R=204 G=51 B=0
#CC00FF R=204 G=0 B=255	#CC00CC R=204 G=0 B=204	#CC0099 R=204 G=0 B=153	#CC0066 R=204 G=0 B=102	#CC0033 R=204 G=0 B=51	#CC0000 R=204 G=0 B=0
#99FFFF R=153 G=255 B=255	#99FFCC R=153 G=255 B=204	#99FF99 R=153 G=255 B=153	#99FF66 R=153 G=255 B=102	#99FF33 R=153 G=255 B=51	#99FF00 R=153 G=255 B=0
#99CCFF R=153 G=204 B=255	#99CCCC R=153 G=204 B=204	#99CC99 R=153 G=204 B=153	#99CC66 R=153 G=204 B=102	#99CC33 R=153 G=204 B=51	#99CC00 R=153 G=204 B=0
#9999FF R=153 G=153 B=255	#9999CC R=153 G=153 B=204	#999999 R=153 G=153 B=153	#999966 R=153 G=153 B=102	#999933 R=153 G=153 B=51	#999900 R=153 G=153 B=0
#9966FF R=153 G=102 B=255	#9966CC R=153 G=102 B=204	#996699 R=153 G=102 B=153	#996666 R=153 G=102 B=102	#996633 R=153 G=102 B=51	#996600 R=153 G=102 B=0
#9933FF R=153 G=51 B=255	#9933CC R=153 G=51 B=204	#993399 R=153 G=51 B=153	#993366 R=153 G=51 B=102	#993333 R=153 G=51 B=51	#993300 R=153 G=51 B=0
#9900FF R=153 G=0 B=255	#9900CC R=153 G=0 B=204	#990099 R=153 G=0 B=153	#990066 R=153 G=0 B=102	#990033 R=153 G=0 B=51	#990000 R=153 G=0 B=0
#66FFFF R=102 G=255 B=255	#66FFCC R=102 G=255 B=204	#66FF99 R=102 G=255 B=153	#66FF66 R=102 G=255 B=102	#66FF33 R=102 G=255 B=51	#66FF00 R=102 G=255 B=0
#66CCFF R=102 G=204 B=255	#66CCCC R=102 G=204 B=204	#66CC99 R=102 G=204 B=153	#66CC66 R=102 G=204 B=102	#66CC33 R=102 G=204 B=51	#66CC00 R=102 G=204 B=0
#6699FF R=102 G=153 B=255	#6699CC R=102 G=153 B=204	#669999 R=102 G=153 B=153	#669966 R=102 G=153 B=102	#669933 R=102 G=153 B=51	#669900 R=102 G=153 B=0
#6666FF R=102 G=102 B=255	#6666CC R=102 G=102 B=204	#666699 R=102 G=102 B=153	#666666 R=102 G=102 B=102	#666633 R=102 G=102 B=51	#666600 R=102 G=102 B=0
#6633FF R=102 G=51 B=255	#6633CC R=102 G=51 B=204	#663399 R=102 G=51 B=153	#663366 R=102 G=51 B=102	#663333 R=102 G=51 B=51	#663300 R=102 G=51 B=0
#6600FF R=102 G=0 B=255	#6600CC R=102 G=0 B=204	#660099 R=102 G=0 B=153	#660066 R=102 G=0 B=102	#660033 R=102 G=0 B=51	#660000 R=102 G=0 B=0
#33FFFF R=51 G=255 B=255	#33FFCC R=51 G=255 B=204	#33FF99 R=51 G=255 B=153	#33FF66 R=51 G=255 B=102	#33FF33 R=51 G=255 B=51	#33FF00 R=51 G=255 B=0
#33CCFF R=51 G=204 B=255	#33CCCC R=51 G=204 B=204	#33CC99 R=51 G=204 B=153	#33CC66 R=51 G=204 B=102	#33CC33 R=51 G=204 B=51	#33CC00 R=51 G=204 B=0
#3399FF R=51 G=153 B=255	#3399CC R=51 G=153 B=204	#339999 R=51 G=153 B=153	#339966 R=51 G=153 B=102	#339933 R=51 G=153 B=51	#339900 R=51 G=153 B=0
#3366FF R=51 G=102 B=255	#3366CC R=51 G=102 B=204	#336699 R=51 G=102 B=153	#336666 R=51 G=102 B=102	#336633 R=51 G=102 B=51	#336600 R=51 G=102 B=0
#3333FF R=51 G=51 B=255	#3333CC R=51 G=51 B=204	#333399 R=51 G=51 B=153	#333366 R=51 G=51 B=102	#333333 R=51 G=51 B=51	#333300 R=51 G=51 B=0
#3300FF R=51 G=0 B=255	#3300CC R=51 G=0 B=204	#330099 R=51 G=0 B=153	#330066 R=51 G=0 B=102	#330033 R=51 G=0 B=51	#330000 R=51 G=0 B=0
#00FFFF R=0 G=255 B=255	#00FFCC R=0 G=255 B=204	#00FF99 R=0 G=255 B=153	#00FF66 R=0 G=255 B=102	#00FF33 R=0 G=255 B=51	#00FF00 R=0 G=255 B=0
#00CCFF R=0 G=204 B=255	#00CCCC R=0 G=204 B=204	#00CC99 R=0 G=204 B=153	#00CC66 R=0 G=204 B=102	#00CC33 R=0 G=204 B=51	#00CC00 R=0 G=204 B=0
#0099FF R=0 G=153 B=255	#0099CC R=0 G=153 B=204	#009999 R=0 G=153 B=153	#009966 R=0 G=153 B=102	#009933 R=0 G=153 B=51	#009900 R=0 G=153 B=0
#0066FF R=0 G=102 B=255	#0066CC R=0 G=102 B=204	#006699 R=0 G=102 B=153	#006666 R=0 G=102 B=102	#006633 R=0 G=102 B=51	#006600 R=0 G=102 B=0
#0033FF R=0 G=51 B=255	#0033CC R=0 G=51 B=204	#003399 R=0 G=51 B=153	#003366 R=0 G=51 B=102	#003333 R=0 G=51 B=51	#003300 R=0 G=51 B=0
#0000FF R=0 G=0 B=255	#0000CC R=0 G=0 B=204	#000099 R=0 G=0 B=153	#000066 R=0 G=0 B=102	#000033 R=0 G=0 B=51	#000000 R=0 G=0 B=0

Details »

Buat Labels/Tag Cloud 3D untuk Blogger

Yang dimaksud Label Melayang / Tag Cloud 3D adalah Label atau kategori yang bisa berputar dengan kata lain animasi, biasanya Tag Cloud ini cuma ada di Wordpress tapi script ini bisa kita pakai pada blogger, kalau biasa mempercantik blog, Tag Cloud 3D ini cocok dipasang pada blog Anda,

Langka membuatnya sebagai berikut :

1. Login di blogger dengan ID Anda
2. Pilih Rancangan
3. Pastikan Elemen tabel blog Anda pada posisi tampilan Cloud
4. Tambah Gadget pada elemen Laman, pilih HTML/JavaScript
5. Masukkan script dibawah ini, trus klik Simpan,

 

<left><h2 class="title">Labels</h2>
<div class="widget-content">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="wpcumuluscontent5733682">Flash tag cloud requires
<script type="text/javascript">
var flashvars = {
tcolor: "0x000000",
tcolor2: "0x000000",
hicolor: "0x000000",
tspeed: "80",
distr: "true",
mode: "tags"
};
var params = {
allowScriptAccess: "always"
};
params.wmode = "transparent";
x = document.getElementById("Label1").getElementsByTagName("a");
trans = document.getElementById("Label1").style.display="none";
var tagcloud;
var url = "http://" + document.domain + "/search/label/";
for (var i = 0; i < x.length - 1; i++)
{
tagcloud = tagcloud + "<a href='"+encodeURIComponent(url + encodeURIComponent(x[i].innerHTML))+"' class='tag-link-24' title='15 topics' style='font-size: 20pt;'>"+x[i].innerHTML+"</a>";
}
flashvars.tagcloud = "<tags>"+tagcloud+"</tags>";
swfobject.embedSWF("http://www.taiphanmem.org/wp-content/plugins/wp-cumulus/tagcloud.swf?r=2520752", "wpcumuluscontent5733682", "210", "100", "9", "expressInstall.swf", flashvars, params);</script></div></div></left>
 

 

Warna hijau adalah untuk pengaturan besarnya teks, lebar dan tinggi elemen

Selanjutnya letakkan elemen tersebut persis di bawah elemen Tabel.

Simpan perubahan

Lihat blog

Selesai, Kalau anda tertarik? silahkan dicoba.

 

Details »

Test percobaan

Details »

Link Graphic Design

Desain Grafis Indonesia

All Graphic Design

Dexigner Directory

Graphic Design Directory

Graphic Design Theory

Graphic Design Resource

fonts World by redsun

Free Fonts by font face Face

Free Fonts By font frame

Color Table

Color World

Color Theory By Worqx

Pantone Color

Color Harmony By SmartPixel

Color Mixing

Adobe Corporation

Corel Corporation

Water Color Painting

Graphic Design Resource

Images, Clip Art, Photo, Fonts

Kamus Online Indonesia-Inggris

Dunia Desain Indonesia

Design Manipulation

Kertas Grafis

BlueVertigo

Slamet Rianto, Desain Grafis

Logo Resource Indonesia

Computer Articles

Fun Pic

Details »