Membuat LOGO UBUNTU

Membuat LOGO UBUNTU

klik new file

buat elipse tool atau tekan F7 ( buat lingkaran…)

lalu set dengan ukurannya H = 3.0 px dan W = 3.0px

klo bisa letakan  lingkaran di tengah, supaya kelihatan teratur

Gunakan interactive fill tool, set file type menjadi : linear, lalu set warna hitam dan putih

klik pada linkaran1 lalu tekan ctrl+c lalu ctrl+v (copy-paste) perkecil ukuran nya       dari pojok jangan dari bawah, atas, atau samping, supaya pengecilan nya teratur (jgn terlalu kecil atau besar)

atur linkaran2 tepat di tengah-tengah lingkaran1 dan warnai dengan warna selain warna linkaran1 supaya telihat seperti donat lubang
Nb : kuncu lingkaran1 atau yg terbesar caranya klik kanan pada lingkaran terbesar itu lalu klik Lock object

copy-paste linkaran2 untuk membentuk linkaran3 beri warna putih

buat bangun persegi panjang yg menyerupai garis (ingat jangan terlalu besar hasilnya akan jelek klo boleh saya usul ukurannya lebarnya 0.11 px untuk panjang terserah anda) untuk membagi lingkaran menjadi 3 potong sama besar( seperti di gambar

Saya menggunakan titik hitam dengan linkaran
Untuk membuat suatu titik pusat agar lebih mudah
Caranya… untuk rotasi supaya sempurna saya gunakan rumus matematika 360/3
jadi 120 jadi saya ketik supaya berputar kekiri sebanyak 120 derajat :
persegi panjang 1  , Persegi panjang 2 
Lalu saya Move, supaya menjadi seperti gambar di atas…

Setelah langkah ke 8 selesai tekan ctrl + A setelah terseleksi semua kecuali linkaran1 jadikan simplify caranya : arrange – shaping – simplify

Setelah anda simplify, klik 3 persegi panjang itu (satu-satu yach) delete satu persatu juga lingkarang 3 dan linkaran pusat

……jreeeenng….. apa yg terjadi…. Bagian tadi terpotong bukan…

setelah terhapus klik linkaran ke 2 yg berwarna orange (warna linkaran punya saya ) truz klik break apart / ctrl + K (break apart berguna untuk memisah bagian yg tadi 1 bangun tapi terpisah menjaadi beberapa bangun)

Setelah menjadi bagian sendiri sendiri warnai seperti punya saya, sudah tahu kan bagaimana cara mewarna melalui interactive fill tool…. Seperti berikut ini

langkah selanjutnya buat lubang seperti gigitan dengan cara berikut
- buat lingkaran kecil dengan ukuran sama (0.6 x 0.6 px)
- lalu letakan seperti gambar ini


- setelah itu gunakan methode simplify lagi: tekan shift + klik bangun a & b dan delete bangun a, hingga jadi seperti :

Lakukan hal yang  sama terhadap bangun yg laen…

setelah itu di celah gigitan tadi selipkan lingkaran yg lebi kecil diameter nya dari gigitan tersebut…dan beri warna seperti ini 

Lambang ubuntu sudah jadi tinggal anda beri efek saja…..

Ya, logo Ubuntu 

Selesai, Semoga bermanfaat

Desain Logo Wordpress

Desain Logo Wordpress

Tutorial Kali ini saya akan membagi cara membuat logo wordpress dengan Program Coreldraw yang merupakan program favorit saya...

Pertama
buka lembar kerja kosong. Lalu buat lingkaran simetris. Kemudian paste lingkaran itu tapi dikecilkan sebanyak 3 lingkaran. Lihat gambar bawah :


Potong lingkaran terbesar dengan lingkaran yang ditengah dengan tool “trim”. Lihat gambar bawah :


Lalu klik lingkaran di tengah dan delete. Kemudian buat huruf w. Tapi usahakan yang mirip dong dengan huruf w pada wordpress. Akan tetapi bila anda tidak mempunyai fontnya, saya anjurkan untuk menjiplak saja dengan logo wordpress yang telah anda siapkan ( di sini saya menggunakan “freehand tool” untuk membuat pola w ). lihat gambar:



Selanjutnya "w" tersebut letakkan pas di tengah lingkaran paling kecil. Lalu potongkan pada lingkaran kecil itu. Dan sesudahnya delete huruf w. Hasil akan terlihat pada gambar dibawah :


Tapi kita belum selesai sampai disini. Untuk membuat gradasi warna supaya gambar tampak seperti 3D. Saya akan menggunakan “fountain fill”. Akan tetapi saya akan membuat terlebih dahulu garis bantu. lihat bawah:


Lalu gunakan tool “intersect” untuk membuat bangun yang sama persis pada logo. Lihat bawah :


Dalam gambar diatas menjelaskan bahwa ada garis putis yang membatasi antara bawah dan atas. Kemudian saya klik bagian atas dan saya degradasi dengan menggunakan tool “fountain fill”. Lihat bawah :


Kalau anda klik, akan keluar menu seperti dibawah :


Nah, dari sini kita tinggal mengatur kontras yang anda inginkan pada gambar. Lalu putar pada bagian yang berwarna biru keatas, dan “mid point pada bawah menu juga geser ke kiri supaya gradasi warna tidak terlalu mencolok.  lihat bawah :


Hasil akan tempak seperti dibawah :

Logo Wordpress
Ayo Ngeblok eh NgebloG... See my (Amin ilmugrafis) blog at http://gudanghumor.wordpress.com

Terima kasih telah belajar Coreldraw bersama saya... Salam hangat Amin ilmugrafis
Semoga Bermanfaat

Membuat Drop Down Menu Sederhana di Website

Membuat Drop Down Menu Sederhana di Website

Publish: 7 Juni 2012 | Author & Copyright: Johan | Status: FREE tutorial

Sedikit penjelasan,Dropdown Menu merupakan menu yang bila kita sorot dengan mouse maka menu tersebut akan memunculkan menu yang lain (sub menu). Saat ini banyak sekali yang sudah menggunakan Drop Down menu karena alasan terlihat lebih modern dan canggih, menambah keindahan website sampai menghemat space/ruang di websitenya karena dengan drop down kita bisa memberikan sub menu tersembunyi pada menu di website kita.

Ok, mari kita mencoba membuatnya:

1. Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver 
(start >> all program >> Dreamweaver) 

2. buat CSS file, caranya. Klik File >> New >> Tab General >> Basic Page >> Css


tulis Kode CSS di bawah ini 

/* CSS untuk drop down menu dimulai */ ul { list-style:none; padding:0px; margin:0px } ul li { display:inline; float:left; } ul li a { color:#ffffff; background:#990E00; margin-right:5px; font-weight:bold; font-size:12px; font-family:verdana; text-decoration:none; display:block; width:100px; height:25px; line-height:25px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid #560E00; } ul li a:hover { color:#cccccc; background:#560E00; font-weight:bold; text-decoration:none; display:block; width:100px; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border: 1px solid #000000; } ul li.sublinks a { color:#000000; background:#f6f6f6; border-bottom:1px solid #cccccc; font-weight:normal; text-decoration:none; display:block; width:100px; text-align:center; margin-top:2px; } ul li.sublinks a:hover { color:#000000; background:#FFEFC6; font-weight:normal; text-decoration:none; display:block; width:100px; text-align:center; } ul li.sublinks { display:none; } /* CSS drop down menu sederhana end */

wow banyak bener, tenang copy dan paste saja CSS ini ke CSS yang baru anda buat dengan dreamweaver,

save dan beri nama "dropdown.css"

3. Sekarang buat halaman web, pakai saja HTML agar lebih simple, karena jika memilih format PHP butuh bantuan Sever untuk mengoprasikannya 
caranya mirip css tadi, cuma urutannya File >> New >> Basic Page >> Html >> Ok 
sekarang panggil css yang kita buat, caranya:

klik browse, lalu ambil "dropdown.css", OK 
Nah setelah langkah di atas benar maka akan ada code seperti ini di halaman html kita.

itu artinya style (CSS) yang kita buat telah masuk ke halaman html 

4. Masukkan kode ini ke code html kita. pilih code

<!-- Menu Pertama Dimulai --> <ul> <li><a href="#" class="dropdown">Menu One</a></li> <li class="sublinks"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </li> </ul> <!-- Menu Pertama Selesai --> <!-- Menu Kedua Dimulai --> <ul> <li><a href="#" class="dropdown">Menu Two</a></li> <li class="sublinks"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </li> </ul> <!-- Menu Kedua Selesai --> <!-- dan seterusnya -->

copy dan paste code di atas di bagian antara <body> .... </body> , bagi yang belum mengerti tag seperti ini lihat tutorial BELAJAR WEBSITE HTML

4. Tambahkan JQuery Script, wow apa lagi ini ya? tenang... lebih jelasnya klik Pengenalan JQuery Website 

tulis codenya, Letakkan di bawah tag Title 

setelah itu tambahkan code Javascript ini, 
letakkan di bawah tag JQuery

<script type="text/javascript"> $(function(){ $('.dropdown').mouseenter(function(){ $('.sublinks').stop(false, true).hide(); var submenu = $(this).parent().next(); submenu.css({ position:'absolute', top: $(this).offset().top + $(this).height() + 'px', left: $(this).offset().left + 'px', zIndex:1000 }); submenu.stop().slideDown(300); submenu.mouseleave(function(){ $(this).slideUp(300); }); }); }); </script>

ini gambarnya

Selesai, dan hasilnya kira - kira seperti ini 

Gambar: Drop down menu sederhana

Drop down menu telah selesai dibuat, Lihat Demo Drop Down menu ini Disinis. Anda bisa mengganti menu - menu sesuai keinginan anda dengan mengedit teks "Menu One" atau "Menu Two" dan Sub menu "Link 1" sampai dengan "Link 5" pada halaman coding HTML, silahkan dikembangkan sesuai keinginan. Sampai ketemu di tutorial website lainnya. Source code Drop Down menu ini bisa anda download disini. Terima kasih, semoga bermanfaat. Jika ada Saran maupun pertanyaan silahkan kontak saya. Terima kasih, semoga bermanfaat

Membuat Slideshow Foto Auto dengan jQuery

Membuat Slideshow Foto Auto dengan jQuery

Sewaktu membaca inbox di gmail ternyata ada seorang yang menanyakan kepada saya bagaimana cara untuk membuat Automatic Animasi Slideshow atau Slide Foto Auto dengan menggunakan jQuery. Biasanya fitur ini dipakai untuk membuat animasi pada headline berita pada sebuah halaman utama website. Sehingga berita akan tampil bergantian sesuai dengan pengaturan waktu (timer) yang anda inginkan.

Download dulu bahan - bahan (support file) pembuatan animasiSlideshow foto otomatis autoplay :

Download Now

Isi Support Files :
A. jquery-1.8.0.min
B. head.css
C. headline.js
D. headnews.html
E. bahan foto slideshow

Tanpa bertele - tele dan panjang lebar maka berikut ini tutorial cara membuat animasi Slideshow Foto Otomatis yang akan saya jelaskan secara singkat jelas dan padat.

1. Langkah pertama adalah bersabar & fokus... hehehe...
ok, mari kita pelajari kode yang ada di dalam headnews.html. (Klik kanan "headnews.html" lalu pilih open with notepad / dreamweaver ) untuk mengetahui kode di dalamnya.

coba perhatikan kodenya :

<link rel="stylesheet" type="text/css" href="head.css"> <script src="jquery-1.8.0.min.js"></script> <script src="headline.js"></script> <script type="text/javascript"> $(document).ready(function(){ // untuk permulaan, tampilkan content nomor 1 '#slideAwal' bukaContent($('#slideAwal'),'div1'); }); </script>

Script diatas fungsinya untuk menghubungkan ketiga bahan : jquery-1.8.0.min + head.css + headline.js

Sedangkan kode diantara <script type="text/javascript"> ... </script> adalah untuk memanggil fungsi jquery. Bingung? ok silahkan anda baca lagi apa itu jQuery di Tentang jQuery

2. Sekarang masuk ke tahap input / memanggil gambar, perhatikan kode berikut ini :

Kode ini terletak diantara tag <body> ... </body>

<div id="divTrigger"> <a href="javascript:;" onClick="bukaContent(this,'div1')" id="slideAwal">1</a> <a href="javascript:;" onClick="bukaContent(this,'div2')">2</a> <a href="javascript:;" onClick="bukaContent(this,'div3')">3</a> <a href="javascript:;" onClick="bukaContent(this,'div4')">4</a> </div> <div id="divContent"> <div id="div1"> <span class="title">Slide 1</span> <img src="images/1-slide.jpg" align="left" /> Slide show pertama! wow! </div> <div id="div2"> <span class="title">Slide 2</span> <img src="images/2-slide.jpg" align="left" /> Slide show kedua! awesome! </div> <div id="div3"> <span class="title">Slide 3</span> <img src="images/3-slide.jpg" align="left" /> Slide show ketiga! cute! </div> <div id="div4"> <span class="title">Slide 4</span> <img src="images/4-slide.jpg" align="left" /> Slide show keempat, Finish! hehehe ayo - ayo jangan bengong aja gan! Kembali fokus...! </div> </div>

Anda tinggal mengganti input dari Title (judul foto slideshow), img src (ini untuk menghubungkan image / foto yang akan kita slideshow), dan teks (berfungsi sebagai deskripsi / tambahan keterangan)

Mudah bukan, nantinya anda tinggal mengutak - atik inputnya

3. Untuk merubah ukuran border maka kita bisa mengutak - atiknya di head.css, jadi buka head.css di aplikasi notepad atau dreamweaver

Sesuaikan dengan ukuran gambar. Disini gambar saya resolusinya adalah 700 x 350

Jadi usahakan ukurannya tidak lebih kecil gambar slideshow kita.

Hasilnya Lihat Disini :

Animasi Foto Slide Automatis dengan jQuery Slideshow telah saya tes di browser mozilla firefox, google chrome, android browser, opera browser maupun opera mini dan semuanya berjalan baik dan lancar (all work). Terima kasih, semoga bermanfaat

Cara Copy Semua Artikel Blog Orang Lain

Cara Copy Semua Artikel Blog Orang Lain - Copas atau copy paste artikel merupakan sebuah tindakan yang tidak perlu dilakukan, karena hal ini akan sangat merugikan dan tidak ada manfaatnya, karena google sudah pintar mereka memiliki algoritma yang sangat canggih, sebagian besar artikel hasil copas tidak akan terindex atau muncul di google oleh sebab itu hal ini tidak perlu Anda lakukan. Namun, saya berbagi disini hanyalah untuk menambah wawasan Anda, cara ini memang digunakan untuk memindahkan artikel di blog lama kepada blog baru, sehingga Anda tidak perlu lama-lama membutuhkan waktu untuk memindahkan artikel dari blog lama ke blog baru, dengan cara copy artikelnya lalu Anda posting ulang di blog baru.

Disini saya akan menjelaskan cara lebih efektif dan cepat untuk copy semua artikel blog lama dan memindahkan artikel tersebut kepada blog baru, saya sarankan agar tidak digunakan untuk mencopy semua artikel blog orang lain dan dipindahkan pada blog Anda. Untuk lebih jelasnya mengenai cara copy semua artikel blog orang lain silahkan baca tutorialnya dibawah ini :

1. Copy link blog yang akan di copy semua artikelnya
contoh : http://superseofaster.blogspot.com
2. Masuk ke http://ctrlq.org/blogger
3. Paste link blog yang akan di copy semua artikelnya, lalu klik Generate Sitemap
4. Lalu akan muncul sitemapnya, silahkan copy link sitemap tersebut

5. Silahkan buka link sitemap tersebut
6. Lihat, apakah postingannya full, atau hanya setengah, jika setengah lewatkan saja cari blog lain, jika artikelnya full sampai akhir maka lanjut ke langkah berikutnya
7. Tekan tombol Ctrl + S lalu pastikan file tersebut formatnya .xml dan beri nama file tersebut

8. Setelah di save, silahkan buat blog baru atau buka blog milik Anda
jika artikelnya ingin di posting di blog baru silahkan buat blog baru terlebih dahulu caranya disini Cara Membuat Blog Baru Gratis
9. Setelah itu masuk ke blog baru atau blog Anda
10. Lalu klik Setelan => Lainnya
11. Klik Impor Blog

12. Lalu klik Pilih File => masukkan kode captcha => klik Impor Blog

13. Selesai

Cara Membuat Widget Multi Tab View di Blog

Cara Membuat Widget Multi Tab View di Blog - Widget multi tab adalah gabungan dari beberapa widget yang terdiri dari 3 kolom atau lebih. Multi tab widget ini sangat berguna dan bermanfaat bagi blog Anda yang terlalu banyak memiliki widget blog, sehingga terlihat lebih berantakan. Dengan menggunakan multi tab di blog maka Anda bisa memasukkan beberapa widget sehingga menjadi satu dalam widget multi tab.

Selain itu, banyak fungsi dari widget multi tab view ini, Anda tidak perlu banyak menyediakan kolom untuk widget-widget yang Anda pasang pada blog Anda, dengan widget multi tab view Anda hanya perlu 1 area kosong untuk membuat widget multi tab view. Sebuah desain Template blog memang harus di buat semenarik mungkin, namun tidak harus ramai dengan widget-widget karena itu bisa Memperlambat Loading Blog Anda, maka dari itu manfaat widget multi tab view untuk meminimalisirkan widget-widget yang terlalu banyak di blog hanya dalam satu kotak saja. Bagi Anda yang ingin membuat atau memasang widget multi tab view di blog silahkan baca tutorialnya dibawah ini :


1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode </head> atau </header> atau /head
4. Copy kode JavaScript dibawah ini, lalu Paste diatas kode </head> atau </header> atau /head

<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
  var Tabtampil = document.getElementById(TPID);
  var TTs = Tabtampil.firstChild;
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
  var TT = TTs.firstChild;
  var i   = 0;
  do
  {
    if (TT.tagName == "A")
    {
      i++;
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
      TT.className = (i == id) ? "Active" : "";
      TT.blur();
    }
  }
  while (TT = TT.nextSibling);
  var Halamans = Tabtampil.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
document.write('');}
//]]>
</script>

5. Klik Simpan Template
6. Klik Tata Letak => Tambahkan Gadget => HTML/JavaScript
7. Masukkan kode berikut

<style type="text/css"> div.TabTampil div.TTs {height:24px; overflow:hidden} div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active {background-color:#eee} div.TabTampil div.Halamans {clear:both; border:1px solid #bbb; overflow:hidden; background-color:#fff} div.TabTampil div.Halamans div.Halaman {height:100%; padding: 0px; overflow:hidden} div.TabTampil div.Halamans div.Halaman div.Alas {padding:3px 5px} div.TabTampil div.TTs a {border-left:1px solid #bbb; border-right:1px solid #bbb; border-top:1px solid #bbb; border-bottom:1px solid #bbb; float:left; display:block; width:98px; text-align:center; vertical-align: middle; height: 25px; padding-top:5px; text-decoration:none; font-family:sans-serif; font-size:11px; font-weight:900; color: #000} </style> <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width:300px" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div> <div style="width:298px; height:300px" class="Halamans"> <div class="Halaman"> <div class="Alas"> <br/>
Masukkan Kode Widget Tab 1</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
Masukkan Kode Widget Tab 2</div> </div> <div class="Halaman"> <div class="Alas"> <br/>
Masukkan Kode Widget Tab 3</div> </div> </div> </div> </form> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

8. Klik Simpan

Catatan :
- Silahkan ganti tulisan Masukkan Kode Widget Tab 1, 2, dan 3 dengan kode widget yang ingin Anda masukkan.
- Setelah menambahkan widget baru harap untuk menghapus kode quickedit pada bagian Edit HTML atau Anda bisa membacanya disini Cara Membuat Blog Valid HTML5.

Sekian artikel mengenai Cara Membuat Widget Multi Tab View di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...