0 Horizontal Navigasi Plus Search Box Simple And Cool

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image, kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background.

Lihat Demo

Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat.
Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini :

<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Galery</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='Insert keyword here...'/><input class='submitbutton' type='submit' value='Search'/></form></div></div>

Silahkan ganti alamat url-nya dengan url atau link yang blogger inginkan.
selamat mencoba.

0 Horizontal Navigasi Dengan Tab Pointer No Image

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah.


Demo Navigasi

Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini.

Kode CSS (Cascading Style Sheet)

.menu {
padding:0; margin:0; list-style-type:none; white-space:nowrap; }
.menu li {
float:left; min-width:100px; }
.menu a {
position:relative; display:block; text-decoration:none; min-width:100px; float:left; }
* html .menu a { width:100px; }
.menu a span {
display:block; color:#fff; background:#7cbc0a; border:1px solid #fff;
border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; }
* html .menu a span { width:100px; cursor:hand; w\idth:66px; }
.menu a b { display:block; border-bottom:2px solid #06a; }
.menu a em { display:none; }
.menu a:hover { background:#fff; }
.menu a:hover span { color:#fff; background:#08c; }
.menu a:hover em {
display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff;
border-width:6px 6px 0 6px; position:absolute; left:50%; margin-left:-6px; }

Kode HTML

<ul class="menu">
<li><a href="#"><b><span>Menu Satu</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu kedua</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu ketiga</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Empat</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Lima</span></b><em></em></a></li>
</ul>

0 Buat Animasi 3D Berbasis Flash Dengan 3D Flash Animator

Kayanya sudah lama blog ini tidak buat postingan seputan animasi Flash, sudah hampir satu bulan kurang lebih label flash tidak di buatkan postingan hehehe. Pada postingan kali ini saya tidak membuat tutorial cara pembuatan animasi di flash, ataupun maen Action script dengan flash, tapi untuk sekarang saya akan share program untuk membuat animasi 3D berbasis Flash nama programnya yaitu 3D Flash Animator.



3D Flash Animator ini merupakan program untuk membuat animasi 3D berbasis Flash, 3D Flash Animator memiliki semua alat yang diperlukan untuk membuat animasi yang menakjubkan, serta komponen interaktif dan kekuasaan pemrograman untuk membangun interface website canggih dan permainan arcade-style. Semua ini dapat dilakukan dengan menggunakan program yang dirancang sederhana dan mudah digunakan.

Beberapa pitur yang terdapat dalam program 3D Flash Animator ini diantaranya.

• Painting
• Animation
• 3D Animation
• Scripting
• Game development
• Database support dll.

DOWNLOAD 3D FLASH ANIMATOR

Buat anda yang tertarik membuat animasi 3D yang simple dan mudah digunakan, bisa mencoba program 3D Flash Animator ini.

0 Mengenal Lebih Dalam Format File Video

Video adalah teknologi untuk menangkap, merekam, memproses, mentransmisikan dan menata ulang gambar bergerak. Biasanya menggunakan film seluloid, sinyal elektronik, atau media digital. Video juga bisa dikatakan sebagai gabungan gambar-gambar mati yang dibaca berurutan dalam suatu waktu dengan kecepatan tertentu.

Gambar-gambar yang digabung tersebut dinamakan frame, dan kecepatan pembacaan gambar disebut dengan frame rate, dengan satuan fps (frame per second). Karena dimainkan dalam kecepatan yang tinggi maka tercipta ilusi gerak yang halus, semakin besar nilai frame rate maka akan semakin halus pergerakan yang ditampilkan. (Source : http://www.total.or.id/info.php?kk=video)

Sama halnya dengan file suara dan gambar, teknik kompresi dari video menghasilkan banyak format file video yang bermunculan. di bawah ini ada sedikit penjelasan mengenai formati file video yang umum digunakan :

* ASF (Advanced System Format)
ASF Dibuat oleh Microsoft sebagai standar audio/video streaming yang merupakan format Bagian dari Windows Media framework. Format ASF ini tidak menspesifikasikan bagaimana video atau audio harus di encode, tetapi sebagai gantinya menspesifikasikan struktur video/audio stream. Jadi ASF dapat diencode dengan codec apapun.

ASF Dapat memainkan audio atau video dari streaming media server, HTTP server, maupun lokal. Beberapa contoh format ASF lain adalah WMA dan WMV dari Microsoft.

* MOV (Quick Time)
Mov atau lebih dikenal dengan Quick Time Dibuat oleh Apple, banyak digunakan untuk transmisi data di Internet. Memiliki beberapa track yang terdiri dari audio,video, images, dan text.

* MPEG (Motion Picture Expert Group)
MPEG Merupakan file terkompresi lossy.
MPEG-1 untuk format VCD dengan audio berformat MP3.
MPEG-1 beresoluasi 352×240.
MPEG-1 hanya mensupport progressive scan video.
MPEG-2 digunakan untuk broadcast, siaran untuk direct-satelit dan cable tv.
MPEG-2 support interlaced format.
MPEG-2 digunakan pada HDTV dan DVD video disc.
MPEG-4 digunakan untuk streaming, CD distribution, videophone dan broadcast.
MPEG-4 mendukung digital rights management.

* DivX
DivX Salah satu video codec yang diciptakan oleh DivX Inc yang terkenal dengan ukuran filenya yang kecil karena menggunakan MPEG4 Part 2 compression. Versi pertamanya yaitu versi 3.11 diberi nama "DivX". DivX bersifat closed source sedangkan untuk versi open sourcenya adalah XviD yang mampu berjalan juga di Linux.

* WMV (Windows Media Video)
Windows Media Video merupakan produk dari Microsoft yang berbasis pada MPEG4 part 2. WMV merupakan gabungan dari AVI dan WMA yang terkompres, dapat berekstensi wmv, avi, atau asf. Nama Softwarenya yaitu Windows Media Player, Mplayer, FFmpeg.

0 Membuat Jump Link Di Dalam Posting

Membuat Link yang meloncat pada link target atau jump link istilah populernya, sangat berguna ketika kita menulis postingan yang panjang dengan beberapa sub bab dengan memasang jump link bisa memudahkan pembaca yang ingin melihat bagian mana yang ingin di baca.

Pada prinsipnya jump link hampir sama dengan back to top walaupun kode yang di gunakan berbeda, tentunya ini bukan hal baru untuk blogger.

Jump link ini bisa di gunakan sebagai navigasi di awal postingan yang menuju pada target tulisan atau paragrap yang di inginkan ataupun sebaliknya.

Cara pembuatan jump link ini cukup mudah kita hanya memberikan link yang akan di jadikan target misalnya seperti ini :
Target untuk jump link yaitu paragrap pertama "Membuat Link"
Tulis linknya seperti dibawah ini pada kata "Membuat Link" paragrap pertama.

<A NAME="Membuat Link">Membuat Link</A>

Pasang pada kalimat yang di targetkan,
Selanjutnya kita memasang navigasi untuk jump link kodenya seperti ini :

<A href="#Membuat Link"> Paragrap Pertama</A>

Link ini akan meloncat pada link yang ditargetkan yaitu pada paragrap pertama "Membuat Link" . Jangan lupa menggunakan "#" di awal kalimat yang digunakan sebagai link navigasi seperti di atas.

Untuk contohnya seperti ini :Kembali ke Paragrap Pertama
Gimana cukup mudah bukan selamat mencoba.

0 Karacter Desain 3D Inspiration

Desain karakter telah menjadi komponen utama dari karya fiksi dalam dunia animasi, Desain karacter sangat mempengaruhi terhadap perkembangan animasi 3D yang sekarang ini sudah menjadi trend dalam dunia multimedia terlebih lagi sekarang sudah banyak film-film yang menggunakan animasi 3D yang sangat luar biasa dengan pembuatan karacter desain yang sangat mirip dengan aslinya.

Sebagai inspirasi untuk anda dan juga saya yang menyukai modeling karacter 3d dibawah ini ada beberapa Karacter desain 3D dari desainer ternama yang bisa anda jadinkan inspirasi.

IRONMAN

The Incredible Hulk

Title: The Incredible Hulk
Name: Jonas Thornqvist
Country: Sweden
Software: 3ds max, mental ray, Photoshop
Go here for my WIP thread:
http://forums.cgsociety.org/showthread.php?p=5062378#post5062378

WOLVERINE

Title :WPLVERIN
Link : http://www.cgarena.com/gallery/3d/description/wolverin.html

GOBLIN MECHANIC

Title: GOBLIN MECHANIC
Name : Intervain
Software: 3D
Link : http://intervain.deviantart.com/art/GOBLIN-MECHANIC-93728011

FRANKENSTEIN

Title: Frankenstein
Name: Anto Juričić
Country: Bosnia and Herzegovina
Software: Maya, mental ray, Silo, ZBrush
Link : http://forums.cgsociety.org/showthread.php?f=121&t=798563

Pixologic Superhero

Title: Pixologic Superhero
Name: jeff miller
Country: USA
Software: 3ds max, Photoshop, ZBrush
Link : http://www.thenewred.com/

TURTLE

Captain Jack Sparrow

Title : Captain Jack Sparrow
Name : JPRart
Sofwere : Digital Art, 3-Dimensional Art
Link : http://jprart.deviantart.com/art/Captain-Jack-Sparrow-37044292

Dino Monsters

Gangsta Game Character

Title: Gangsta game character
Name: Bernardo Barbi
Country: Brazil
Software: CINEMA 4D, Photoshop, ZBrush
Link : http://bernardobarbi.blogspot.com/

0 Mengatasi Background Image Blog Yang Tidak Muncul Di Internet Explorer "Hack Image IE"

Permasalahan yang sering terjadi pada browser Internet Explorer versi jadul biasanya tampilan gambar yang dijadikan sebagai background kadang tidak muncul, dan juga layout yang menjadi kacau posisinya. Dan kali ini saya akan memberikan solusi atau trik bagaimana mengatasi background image blog yang tidak muncul di Internet Explorer, Langsung saja pada triknya.

Tambahkan kode seperti dibawah ini pada bagian background image yang anda pasang :

_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lobGbaIOglmTygzIdzMvG-aGYrH2xqUvvnCfEuZpV7PAwPbfznCkMwSCBFxpqYL0Tc1XVzk2guOcjBacapbXuNiWwbaQOp2miiofr-LK0edy0en1ZX-YfB_FJ3fVkbaN909V40a-S_3t/s1600/body.jpg',sizingMethod='crop');

Sebagai contoh saya memasang backround pada bagian body blog, maka hasil keseluruhan code yang telah ditambahkan dengan kode di atas seperti ini :

body {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lobGbaIOglmTygzIdzMvG-aGYrH2xqUvvnCfEuZpV7PAwPbfznCkMwSCBFxpqYL0Tc1XVzk2guOcjBacapbXuNiWwbaQOp2miiofr-LK0edy0en1ZX-YfB_FJ3fVkbaN909V40a-S_3t/s1600/body.jpg)repeat-x center top;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lobGbaIOglmTygzIdzMvG-aGYrH2xqUvvnCfEuZpV7PAwPbfznCkMwSCBFxpqYL0Tc1XVzk2guOcjBacapbXuNiWwbaQOp2miiofr-LK0edy0en1ZX-YfB_FJ3fVkbaN909V40a-S_3t/s1600/body.jpg',sizingMethod='crop');
margin:0;
padding:0;
}

NB :: Warna hijau merupakan kode atau url dari image yang digunakan silahkan ganti dengan url image anda. Sekarang coba buka browser Internet Explorer anda dan lihat tampilan blog anda, Selamat mencoba.

0 Sejarah Dan Perkembangan Tipograpi "Typography"

Tipografi "Typography" merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

TYPOGRAPHY

• Sejarah Tipografi "Typography"

Sejarah perkembangan tipografi dimulai dari penggunaan pictograph. Bentuk bahasa ini antara lain dipergunakan oleh bangsa Viking Norwegia dan Indian Sioux. Di Mesir berkembang jenis huruf Hieratia, yang terkenal dengan nama Hieroglif pada sekitar abad 1300 SM. Bentuk tipografi ini merupakan akar dari bentuk Demotia, yang mulai ditulis dengan menggunakan pena khusus.

Puncak perkembangan tipografi, terjadi kurang lebih pada abad 8 SM di Roma saat orang Romawi mulai membentuk kekuasaannya. Karena bangsa Romawi tidak memiliki sistem tulisan sendiri, mereka mempelajari sistem tulisan Etruska yang merupakan penduduk asli Italia serta menyempurnakannya sehingga terbentuk huruf-huruf Romawi.

Saat ini tipografi mengalami perkembangan dari fase penciptaan dengan tangan hingga mengalami komputerisasi. Fase komputerisasi membuat penggunaan tipografi menjadi lebih mudah dan dalam waktu yang lebih cepat dengan jenis pilihan huruf yang ratusan jumlahnya.
(Sumber http://id.wikipedia.org/wiki/Tipografi)

0 Mengetahui Nilai Warna CMYK dan RGB Pada CorelDraw

Mengetahui nilai warna CMYK ataupun RGB sangat berguna sekali ketika anda membuat sebuah desain apalagi buat anda yang menggeluti dunia graphic desain tentunya pengetahuan warna yang digunakan sangat penting sekali sebagai konsep warna untuk desain yang di buat. Biasanya bila anda membuat desain pesanan dari klien tentunya anda harus menjelaskan secara rinci penggunaan warna pada desain yang anda buat.

Untuk sekarang saya akan memberikan tips bagaimana mengetahui nilai warna RGB dan CMYK yang anda gunakan khususnya pada Program grafis CorelDraw.

Untuk mengetahui nilai warna CMYK atau RGB pada Program Coreldraw caraya cukup mudah. langkah pertama klik warna pada objek yang anda buat.

• Sebagai contoh buat kotak persegi menggunakan Rectangle tool, dan kasih warna hijau muda.
• Setelah itu klik Fill tool disamping kiri, lanjutkan dengan mengklik Fiil color dialog. lihat gambar di bawah.

• Setelah itu maka akan muncul Box Uniform Fill yang menampilkan nilai CMYK dan RGB dari warna kotak persegi yang telah di buat.

Anda bisa lihat kode warna CMYK dan RGB seperti gambar diatas, gimana cukup mudah bukan selamat mencoba.

0 Slide Image Full CSS3 tanpa JS dan JQuery

Membuat slide image biasanya memerlukan script yang banyak dan rumit, kita juga tidak bisa menaruhnya langsung di blog kita karena akan menghambat akses blog yang lambat, jadi biasanya harus menggunakan pihak kedua untuk menyimpan file JS tersebut. Untuk kali ini saya coba membuat sebuah slide image dengan CSS3 tanpa java script dan JQuery .

Slide image CSS3 ini sangat simple dan mudah di gunakan, saya menambahkan sedikit shadow pada bagian background utamanya dan link slide mode page number untuk melihat gambar selanjutnya. sebenarnya slide image ini cara kerjanya hampir sama dengan pagination atau page number yang mengalihkan link ke page berikutnya. untuk lebih jelas silahkan lihat demo di link bawah ini.

Lihat DEMO

Untuk membuat slide image dengan css3 caranya cukup simple.
Lihat caranya di bawah ini.
Pertama tambah Widget > Pilih HTML/JavaScript di blog anda dan Copy kode di bawah ini.

<style>
#images {
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
width: 720px;
height: 400px;
overflow: hidden;
position: relative;}

#images img {
background:#ccc;
width: 720px;
height: 400px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;

transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;}

#images img:target {
left: 0;
z-index: 9;
opacity: 1;}

#images img:first-child {
left: 0;
opacity: 1;}

#slider {
widht:720px;
float:left;
text-decoration: none;
background: ;
padding: 8px 10px;
color: #222;}

#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 8px 10px;
color: #222;}

#slider a:hover {
background: #C6E4F2;}

</style>


<div id="images">
<a href="http://wallpaper4xp.blogspot.com/2010/07/3d-graphics-graffiti.html"> <img id="image1" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEl41-OaS4I/AAAAAAAAB_Y/5vUu7hu43g0/s400/3D+graphics+Graffiti.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/07/girls-field-on-bicycle.html"> <img id="image2" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEP0seDCLoI/AAAAAAAAB7Q/gL_03zLKXyM/s400/Girl+field+bicycle.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/music-box.html"> <img id="image3" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIxELRCiAZI/AAAAAAAACPI/AoL6c1jJMNk/s400/music+Box.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/glamor-rock-sensation.html"> <img id="image4" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIXotYo5PGI/AAAAAAAACM4/vJUlKZmQvfY/s400/VAIN+Glam+rock+Wallpaper.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/06/fire-custom-chopper-motorcycle.html"><img id="image5" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TCljHSoRohI/AAAAAAAAByU/qwSeFjGd8sg/s400/Black+Fire+Custom.jpg" /></a></div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
</div>

Ganti kode warna biru dengan alamat link yang ditargetkan sesuai gambar anda, ganti juga kode warna hijau dengan kode gambar milik anda.

Anda juga bisa mengcustom ukuran lebar dan tinggi yang diinginkan pada kode css diatas. cukup mudah bukan selamat mencoba.