Cara Membuat Animasi Dengan Photoshop

Disela kesibukan dan mungkin saya sudah lama ga update, kali ini akan coba posting artikel Cara Membuat Animasi Huruf Dengan Photoshop. Mudah-mudahan saja ada manfa’atnya . . . Teman-teman ternyata software sebagai andalan agan-agan Digital Printing ini, atau yang lebih dikenal dengan nama Adobe Photoshop, bisa membuat sebuah animasi format .gif . . . yaaa lumayan susah-susah gampang sich membuatnya Animasi huruf yang saya contohkan adalah animasi huruf sederhana saja agar ga terlalu sulit dalam membuat artikelnya . . . dan mudah dimengerti oleh pemula . . . (alasan saja ). Selanjutnya saya serahkan sama agan-agan untuk lebih mengembangkannya lagi dalam hal design grafic’nya.

oke langsung kepermasalahan . . .

Langkah pertama buat File baru, klik File > New

Pada File Name beri nama Animasi. Untuk pengaturan Size Width 400 pixels, Height 100 pixels dan Resolution 72 pixels/inch

Klik OK dan hasilnya seperti yang terlihat pada gambar di bawah, sebuah file baru dengan nama Animasi

Buat Layers baru dengan cara, klik menu Layer > New > Layer

Beri nama Kotak

Klik OK, maka akan terbentuk sebuah layers baru dengan nama layers Kotak

Klik Rectangle Tool atau klik huruf U pada Keyboard

Dan pilih Fill Fixels dan Rounded Rectangle Tool

Buat kotak didalam file Animasi seperti yang terlihat pada gambar di bawah

Lalu klik Styles dan pilih Star Glow

Maka hasilnya akan seperti yang terlihat pada gambar di bawah

Buatlah huruf dengan cara klik Horizontal Type Tool atau tekan huruf T pada Keyboard

Untuk setting pakai jenis huruf Arial beri efek Bold ukuran 36 pt

Klik pada area kerja dan ketik DOWNLOADS NOW

Maka otomatis akan terbentuk sebuah Layers baru dengan nama DOWNLOADS NOW

Klik Styles dan efek Sun

Hasilnya akan seperti yang terlihat pada gambar di bawah

Selanjutnya Klik Menu Window > Animation

Hasilnya akan seperti yang terlihat pada gambar di bawah

Klik Selects frame delay time dan pilih 0.5

Duplicat Frames dengan cara klik Duplicates selected frames dan aktifkan Frames 2

Selanjutnya aktifkan juga Layers Kotak

Klik kanan pada Layers Kotak dan pilih Blending Options

Pada Layer Style hilangkan tanda centang/ceklist Color Overlay klik OK

Lakukan hal yang sama pada Layers DOWNLOADS NOW

Pada Layer Style hilangkan tanda centang/ceklist Stroke klik OK

Hasilnya akan seperti yang terlihat pada gambar di bawah

Sementara di coba apakah animasi sudah dapat berjalan dengan baik apa belum, dengan cara klik Plays animation

Jika sudah benar atau animasi sudah sesuai dengan yang diinginkan, selanjutnya simpan hasil karya Anda dengan cara klik Save for Web & Devices

Simpan dengan format GIF lalu klik Save

Selesai, selamat berkarya dan semoga bermanfaat . . .

by Facebook Comment

Read More

Membuat Widget melayang pada Blog

Cara membuat widget melayang pada blog. Terutama yg akan blogtegal bahas yakni membuat widget melayang pada pengguna blogspot, manfaat dari widget melayang itu sendiri banyak, biasanya di gunakan untuk ditempati iklan berbasis PPC atau iklan yg begitu penting yg sangat terbatas waktu promosinya yang di maksudkan agar pengunjung tahu bahwa ada bisnis yang penting sekarang ini.

Widget melayang ini bisa kita atur tata letaknya entah mau d letakan sebelah kiri, kanan, atas maupun bawah pada posisi blog, nanti akan awak terangkan di bawah, hokey :d
Untuk tampilan besar kecilnya ukuran widget melayang ini tergantung pada isi yang akan kita tempatkan.

Jika widget melayang ini kita tempati iklan berbasis PPC, maka ukuran-y akan menyesuaikan dg ukuran iklan, untuk contohnya bisa di lihat pada pojok kanan atas di blogtegal.com ini.
Bagaimana apakah kamu tertarik untuk membuatnya? Jika ya mari kita lakukan penelitiannya hehehehe. . . . . .

Silahkan copi paste script di bawah ini pada widget HTML/Javascript.
Jika bingung apa itu widget HTML/Javascript silahkan ikuti petunjuknya:

• masuk ke dasboard blog kamu.
  
• pilih Rancangan
  
• pada elemen halaman klik ''Tambah widget''
  
• Dan pilih Widget HTML/Javascript
  
• kemudian paste-kan script di bawah ini.
  
• dan Simpan

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> silahkan tempatkan kode iklan atau banner atau teks atau apalah terserah kamu disini yah</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Perhatikan pada tulisan yang berwarna ungu pada script di atas, di situ berisi tentang pengaturan tentang posisi, background,border widget melayang tersebut. Atur sesuai dg keinginan kamu apakah ingin di tempatkan di bagian kiri atau kanan. Oh ya, jika kamu ingin menempatkan widget melayang tersebut pada halaman yg ingin kamu tentukan baca artikel blogtegal tentang menampilkan widget pada halaman tertentu yg kita inginkan

Bagaimana apakah sudah bisa membuat widget melayang atau membuat iklan melayang? Semoga bermanfaat.

by Facebook Comment

Read More

Cara membuat Menu Multi Kolom

Cara membuat menu multi kolom pada blog Pada blog tutorial blogtegal kali ini akan membahas tentang membuat menu multi kolom, yang mana walaupun trik ini sudah lama dan sudah banyak bertebaran di maya internet, namun tak ada salahnya kalau blog tutorial blogtegal akan menulisnya kembali. Mungkin saja para newbie belum ada yang tahu dan kebetulan nemu di blogtegal ini.
Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.
Biasanya menu ini di ěsi dengan daftar link blog, recent comment, dll sesuai kehendak si pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar.
Contoh tampilan dari Menu Multi Kolom atau Menu Multi Tab seperti gambar di bawah ini:


Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya Ikuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan

• Login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
  
• tandai pada Expand widget template.
  
• kemudian tempatkan script berikut sebelum kode ]]></b:skin>
  

  div.TabView div.Tabs { height:24px; overflow:hidden;}
  div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}
  div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}
  div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}
  div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

  
  Sesuaikan kode warnanya dg blog kamu, untuk melihat kode warna bisa di lihat pada postingan tentang Kode-kode warna HTML
  
• masukan script pemanggil berikut sebelum kode </head>
  

  <script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>

• Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan masukan kode berikut kedalamnya:

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Terakhir klik SIMPAN.Selamat berexperimen untuk membuat menu multi kolom atau menu multi tab

by Facebook Comment

Read More

Membuat sub-menu Link blogspot

Membuat sub-menu link blogspot atau yang blogtegal sebut sebagai menu navigasi blogspot contohnya seperti yang terlihat pada blogtegal ini pada bagian atas yang bertuliskan

HOME | WEBHOSTING | TEMPLATE PREMIUM | PPC

Gak ada screenshot lagi mahal Gak usah panjang lebar kita langsung ke permasalahan utama.

• Login ke dashboard blogspot
  
• pilih Rancangan »» Edit HTML
  
• Tempatkan kode CSS berikut diatas kode ]]></b:skin>
  #sub-menu {background:#0000AA; font-size:13px; font-family:verdana,sans-serif; color:#ffffff; overflow:hidden; padding:8px; border:1px solid #BB0000;} #sub-menu a:link {color:#fff;} #sub-menu a:visited {color:#fff;} #sub-menu a:hover {color:#BB0000; text-decoration:none;} #sub-menu ul {margin:0px; padding:0px; text-align:center;} #sub-menu li {display:inline; list-style-type:none; margin:0px; padding:0px;} #sub-menu ul li a, #sub-menu ul li a:hover {font-size:13px; color:#fff; margin:0px; padding:px; text-decoration:none; text-transform:uppercase;} #sub-menu ul li a:hover {color:#BB0000; text-decoration:none;}
  
• kemudian tempatkan kode HTML berikut diatas kode <div id='content-wrapper'> atau biasanya bertuliskan <div id='wrapper-content'>
  

  <div id='sub-menu'>
  <ul>
  <li><a expr:href='data:blog.homepageUrl'/>HOME</li>
  <li class='page_item page-item-2'>
  <a href='http://samsulgeudong.blogspot.com/2012/03/memasang-tanggal-pada-blog-pada-hari.html

  '>LINK 1</a></li>
  <li class='page_item page-item-2'>
  <a href='http://samsulgeudong.blogspot.com/2012/03/mengganti-cursor-pada-blog.html'>LINK 2</a></li>

  <li class='page_item page-item-2'>
  <a href='http://samsulgeudong.blogspot.com/2012/03/bagaimana-cara-memposting-artikel-pada.html'>LINK 2</a></li>

  <li class='page_item page-item-2'>
  <a href=''>LINK 2</a></li>
  </ul>
  </div>
  

• Terakhir simpan tempalate dan lihat hasilnya.

Dari kode diatas akan terlihat seperti tampilan pada blogtegal ini, silahkan sesuaikan kode warna sesuai kehendak kamu pada kode CSS-nya dan Ganti tulisan yang berwarna hijau sesuai kehendak kamu dan ganti alamat blog dengan alamat kamu. Biasanya link yang di pasang pada sub-menu berisi link kategori atau link label. Tapi semuanya terserah kamu mau di beri link apa.
Jika ada yang kurang paham bisa di tanyakan pada kotak komentar, key

by Facebook Comment

Read More

Memasang tanggal/kalender pada Blog

Memasang tanggal pada blog, pada hari ini blogtegal akan berbagi informasi sederhana untuk aksesoris pada blog untuk mempercantik tampilan blog. Bagi yang mau memasang kalender pada blog ya sukur, bagi yang gak memasang kalender yang ku share ini juga gak apa, apa aja boleh!!!
OK kita langsung aja ke tutorialnya, ada 2 macam tampilan kalender yang di share disini yakni tampilan dalam bentuk indonesia dan dalam bentuk inggris, tinggal pilih mana yang kamu suka.
Berikut adalah tampilan kalender dalam bentuk indonesia version.

<script type='text/javascript'>
var mydate=new Date() var year=mydate.getYear() if (year &lt; 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym&lt;10) daym=&quot;0&quot;+daym var dayarray=new Array(&quot;Minggu&quot;,&quot;Senin&quot;,&quot;Selasa&quot;,&quot;Rabu&quot;,&quot;Kamis&quot;,&quot;Jum'at&quot;,&quot;Sabtu&quot;) var montharray=new Array(&quot;Januari&quot;,&quot;Februari&quot;,&quot;Maret&quot;,&quot;April&quot;,&quot;Mei&quot;,&quot;Juni&quot;,&quot;Juli&quot;,&quot;Agustus&quot;,&quot;September&quot;,&quot;Oktober&quot;,&quot;November&quot;,&quot;Desember&quot;) document.write(&quot;&lt;p&gt;&quot;+dayarray[day]+&quot;, &quot;+daym+&quot; &quot;+montharray[month]+&quot;, &quot;+year+&quot;&lt;/p&gt;&quot;)
</script>

Dan berikut tampilan kalender dalam bentuk english version.

<script type='text/javascript'>
var mydate=new Date() var year=mydate.getYear() if (year &lt; 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym&lt;10) daym=&quot;0&quot;+daym var dayarray=new Array(&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Thursday&quot;,&quot;Wednesday&quot;,&quot;Tuesday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;) var montharray=new Array(&quot;January&quot;,&quot;February&quot;,&quot;Mart&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;,&quot;August&quot;,&quot;September&quot;,&quot;October&quot;,&quot;November&quot;,&quot;December&quot;) document.write(&quot;&lt;p&gt;&quot;+dayarray[day]+&quot;, &quot;+montharray[month]+&quot; &quot;+daym+&quot;, &quot;+year+&quot;&lt;/p&gt;&quot;)
</script>

Untuk masalah penempatannya bebas terserah dimana aja yang penting syarat utamanya di tempatkan di bawah kode <body>, namun yang paling umum adalah di bagian page.
Coba saja cari kode <div id='page'> dan tempatkan script kalendernya dibawah kode tersebut. Untuk blogtegal sendiri di tempatkan di atasnya kode breadcrumbs yakni tepat diatas kode <div id='similiar>
Silahkan explorasikan dirimu disini, karna pengalaman adalah guru yang paling berharga.

by Facebook Comment

Read More

Membuat tombol like Facebook

Membuat tombol like facebook pada blog blogspot. Tentunya sudah pada tahu mengapa kamu mencari information tentang membuat dan memasang tombol like facebook pada blog dan kode yang akan di share kali bisa di tempatkan pada blog manapun baik blogspot,wordpress,drupal,joomla dan yang lainnya. Sudahlah blogtegal isin terlalu banyak cingc0ng tentang hal ini.
Berikut kode tombol like facebook untuk homepage saja, jadi jika ada yang nge-like maka yg di like hanya homepage saja.

<iframe src="http://www.facebook.com/plugins/like.php?href=http://samsulgeudong.blogspot.com/&layout=button_count&show_faces=true&width=100&action=like&font=lucida%2Bgrande&colorscheme=light&height=21"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:100px; height:21px;"
allowTransparency="true">
</iframe>

Ganti text yang berwarna ungu dg alamat homepage blog kamu.Berikut kode tombol like facebook untuk setiap postingan dan homepage juga, jadi jika ada yang nge-like maka hanya halaman yang di lihat yg di like, atau mudah singkatnya kode tombol like facebook otomatis.

<script type="text/javascript">
document.write ('<iframe src="http://www.facebook.com/plugins/like.php?href=' + escape (location.href) + '&action=like&layout=standard&show_faces=true&width=100%&font=arial&colorscheme=light"
allowTransparency="true"
frameborder="0"
scrolling="no"
style="border:none; overflow:hidden; width:100%; height:25px;">
</iframe>'); </script>

Tempatkan salah satu script diatas pada widget HTML/javascript agar bekerja secara maximal, pilih script mana yang kamu suka. Oh ya jika kamu menginginkan tombol share facebook dan twitter dg counter / penghitung, kamu bisa membaca artikelnya pada membuat tombol share facebook dan twitter dg penghitung

by Facebook Comment

Read More

Membuat EFEK daun berguguran pada blog

Membuat EFEK daun berguguran pada blog, lagi-lagi kali ini blogtegal blog tutorial akan berbagi informasi untuk mempercantik tampilan blog dg memberi efek daun berguguran. Svdahlah langsung aja lagi males nyrocos
Yang pertama mesti kamu lakukan yakni:

• login ke dashbord blog kamu
  
• pilih 'Rancangan / Design'
  
• klik 'Tambah gadget / Add gadget'
  
• pilih widget 'HTML/javascript'
  
• kemudian copy yang warna pink dan pastekan script dibawah ini.
  

  <script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>

• terakhir klik Simpan

Untuk tampilannya seperti apa liat aja ndiri, kalo gak suka tinggal hapus aja mudah kan, atau mungkin kamu ingin mempercantik tampilan blog dg yang lainnya,berikut artikel terkait untuk mempercantik tampilan blog kamu:

by Facebook Comment

Read More

Cara mempercantik tampilan Title Bar

Membuat TITLE BAR berjalan pada blog. Kali ini blogtegal akan sharing tentang cara mempercantik tampilan TITLE BAR berjalan. Ya ini digunakan untuk variasi aja gak terlalu penting sebenernya, lagi pula TITLE BAR juga gak terlalu terlihat karna berada dibagian paling atas. Untuk melihat contohnya silahkan lihat pada demo disini , Okelah langsung mawon.
Langkah membuat TITLE BAR berjalan.

• login ke dashbord blog kamu.
  
• pilih ''RANCANGAN / DESIGN''
  
• pada halaman ''Element laman'' klik 'Tambah Gadget'
  
• pilih widget ''HTML/Javascript'' dan tempatkan script berikut didalamnya.
  
• terakhir klik SIMPAN

Script yang di copy:

<script> function tb8_makeArray(n){ this.length = n; return this.length; } tb8_messages = new tb8_makeArray(3); tb8_messages[0] = "WELCOME TO OUR WEBSITE"; tb8_messages[1] = "INFORMATION ABOUT INTERNET"; tb8_messages[2] = "AND THANKS FOR VISITING"; tb8_rptType = 'infinite'; tb8_rptNbr = 5; tb8_speed = 125; tb8_delay = 1000; var tb8_counter=1; var tb8_currMsg=0; var tb8_tekst =""; var tb8_i=0; var tb8_TID = null; function tb8_pisi(){ tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1); document.title = tb8_tekst; tb8_sp=tb8_speed; tb8_i++; if (tb8_i==tb8_messages[tb8_currMsg].length){ tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay; } if (tb8_currMsg == tb8_messages.length){ if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){ clearTimeout(tb8_TID); return; } tb8_counter++; tb8_currMsg = 0; } tb8_TID = setTimeout("tb8_pisi()", tb8_sp); } tb8_pisi() </script>

Keterangan:

" pada tulisan yang berwarna ungu adalah tampilan teks, ganti sesuai keinginan kamu.

" pada tulisan yang berwarna hijau tb8_speed = 125 adalah kecepatan teks berjalan pada TITLE BAR, silahkan expresikan sesuai keinginan kamu.

iseng-iseng posting menulis tentang membuat title bar berjalan hehehe. . .

by Facebook Comment

Read More