Pages

Free Website Hosting

CARA BIKIN SCROLL BERGAMBAR

Postingan akan lebih menarik dengan scroll bergambar sehingga dapat memperbaiki penampilan blog anda. S C R O L L Kami terapkan disini sehingga menjadi ciri khas pada blog ini, cara membuatnya mudah silahkan kopas kode html yang ada dibawah ini :
<div style="background-attachment: scroll; background- background-image: url(&quot;http://4.bp.blogspot.com/_kvgzAya3ppk/TJFVnwudzWI/AAAAAAAAAqc/2ZPXtFum0Cg/S220/Bedua.jpg&quot;); background-position: right bottom; background-repeat: no-repeat; border: 2px solid rgb(128, 255, 0); height: 177px; overflow: auto; padding: 5px; text-align: justify; width: 355px;"> Ganti dengan postingan gambar atau tulisan anda disini </div> </div>
Setelah dikopas dan anda masuk ke Rancangan pilih tambah gadget buat blogspot pilih gadget html atau teks kemudian simpan selesai . Ganti tulisan yang berwarna merah sesuai tema postingan dan isi postingan pada tulisan yang berwarna biru warna hijau mengatur lebar dan tinggi SCROLL sedangkan yang ungu ganti dengan gambar anda dapat anda ambil dari Picasa Maka hasilnya akan seperti ini :




CARA MEMPERCEPAT WINDOWS XP

CARA MEMPERCEPAT  WINDOWS XP


Buat pengguna Windows, kecepatan kinerja Windows memang sangat diharapkan namun dengan biaya yang murah. Windows telah dirancang mampu untuk melakukan tugasnya dengan optimal sesuai dengan kondisi PC yang ditempatinya.

Dalam postingan kali ini, kita akan membahas Cara mempercepat Windows anda yang sebelumnya dan memberikan beberapa tips untuk mengoptimalkan registry windows anda.

Baiklah adapun Cara mempercepat System Windows anda adalah :

1. Mungkin anda tidak perlu menyiapkan kocek  untuk membeli Software Windows Asli untuk mengurangi waktu booting dan meningkatkan permormance Windows. Karena ada yang menyediakan gratisan cukup download di Internet dan melakukan sedikit trik untuk melegalkannya software anda.
2. Buat yang punya RAM kurang dari 512 MB, belilah RAM lagi agar kecepatan systemdapat ditingkatkan. Buat yang ingin gratisan dapat  meminjam sohib karibnya.                                                                            
3. Pastikan bahwa XP Windows menggunakan sistem file NTFS. Jika kamu belum tahu system yang digunakan,perhatikan cara memeriksanya : Pertama, klik-ganda icon My Computer, klik-kanan di C:, kemudian pilih Properties. Berikutnya, lihat File System; jika ternyata FAT 32, backup data yang penting. Berikutnya, klik Start, klik Run,ketik CMD, dan kemudian klik OK. Di prompt, ketik CONVERT C:C: / FS:NTFS dan tekan Enter. Tunggulah Proses ini beberpa saat; dan yang paling penting bahwa usahakan komputer tidak mati pada saat proses .

4. Matikan Windows Indexing Service


Caranya : Pertama, klik-ganda Icon My Computer. Lalu Klik Kana pada C:, atau D: (drive mana yang akan dimatikan), kemudian pilih Properties. Lau Uncheck ” Allow Indexing Service to index this disk for fast file searching.” Kemudian, klik tombol Apply, trus pilih “Aplly Changes to C:\, subfolders and file,” dan klik OK. Jika ada peringatan seperti ” Access denied”, klik tombol Ignore All.

5. Upgrade Video Adapater atau Motherboard, atau ugrade “BIOS” dengan yang lebih baru.

6. Kosongkan Folder “C:/Windows/ Prefetch” tiap-tiap minimal 3 bulan. Windows XP memang dilengkapi dengan” Prefetch” untuk mengumpulkan informasi Program yang seringa digunakanagar proses pemanggilan tugas program tersebut lebih cepat. Namun lama kelamaan apabila tidak sering dibersihkan justeru akan memperlambat kinerja Windows karena penumpukan file yang berlebihan.

7. Jalankan disk cleanup paling tiadk sebulan sekali. Caranya klik Start, All Programs, Acessories, System Tool, klik Disk Cleanup. Klik OK, terus centang semua pilihan, klik OK.

8. Atur Device Manager, Klik doble pada IDE ATA/ATAPI Controllers, klik-double pada Primary IDE Channel. Kemudian klik Advanced Settings. Pilih jenis Transfer Mode pada “DMA if available” baik pada Device 1 maupun Device 0. Kemudian ulangi proses ini dengan Secondary IDE Channel.

9. Perhatikan mutu kabel ATA yang digunakan untuk HDD atau CD/DVD. Usahakan untuk menggunakan 80-wire kabel Ultra-133 di semua conector IDE agar terhubung baik dengan Slot Master/Slave/Motherboard. Perhatikan juga Posisi Connectornya antara untuk HDD Primary atau HDD Secondary. Dan sekarang lebih bagus lagi apabila menggunakan SATA.

10. Buang semua spyware dari komputer. Bebaskan komputer dari program seperti AdAware.

11. Buang program yang tak perlu dari Startup Windows, yaitu dengan menggunakan layanan MSCONFIG. Caranya: Pertama, klik Start, klik Run, ketik MSCONFIG, dan klik OK. Klik StartUp, buang centang pada program-program yang tidak ingin dijalankan pada waktu pertama masuk Windows.

12. Buang program yang sudah tidak diperlukan dengan Add/Remove Programs dari Control Panel itu.

13. Matikan/Disable semua animasi yang tak perlu, dan matikan active desktop. Untuk mematikan animasi yang tidak diperlukan klik Start, Control Panel. Klik 2 x pada System kemudian klik Advance pada System Properties, Klik Setting di Kotak Performance, buang centang pada animasi yang tidak diperlukan (atau kalau bingung pilih/klik pada “Adjust best performance”), klik OK

14. Jika anda menguasai/dapat mengedit Registry atau semacam Tweak XP, edit beberapa registry yang dapat membantu mempercepat System, salah satu cara tweak registry disini

15. Lakukan Update Windows secara rutin dan install update tersebut, terutama yang “Critical Update”, atau kalu perlu juga yang “Optional Update” di www.update.windows.com

16. Lakukan Update rutin pada Antivirus yang digunakan. Usahakan hanya ada satu Antivirus yang dianggap paling handal untuk mengurangi erorr pada antivirus.

17. Gunakan hanya font-font yang dianggap perlu saja, jangan terlalu banyak Font yang digunakan, sebab semakin banyak Font yang iinstall pada komputer akan sangat membebani system Windows XP.

18. Jangan terlalu banyak membagi Partisi Hardisk. Sebab System NTFS lebih efektif bekerja pada ruang Hardisk yang besar.

19. Periksa Memory yang digunakan secara berkala, anda bisa mencoba Freeware “MemTest86” Download dan jadikan sebagai CD Bootable/Floppy Bootable,setlah itu jalankan program tersebut yang akan menjalankan 10 test di memori PC’s secara otomatis. Ijinkan semua test untuk diselesaikan. Jika program menemui kesalahan apapun,matikan komputer dan cabut Steker Listrik, Cabut Memory ( jika lebih dari satu memory yang terpasang, test satu-satu), Ingat, memori yang tidak baik tidak bisa diperbaiki, tetapi hanya menggantikan.

20. Jika PC anda dilengkapi dengan DVD atau CD, carilah firmware yang baru. Dalam beberapa hal kamu akan mampu meningkatkan mutu/kecepatan yang lebih baik.

21. Matikan “services” yang tak perlu. Untuk mempelajari “services” apa saja yang perlu dimatikan, coba kunjungi Black Viper (dlm Bahasa Inggris)

22. Jika tiba-tiba komputer Hang pada saat membuka Windows Explorer maka, Klik 2 x pada My Computer, Klik Tools, lalu Folder Options. Kemudian Klik View tab. Scroll down ke “Launch folder windows in a separate process,” dan enable opsi ini.

23. Sedikitnya sekali se tahun, bukalah Casing CPU dan bersihkan dari debu dan kotoran yang ada di dalamnya.

Itulah 23 Tips mempercepat Windows XP anda, semoga bermanfaat. Saran dan Komnetar sangat kami harapkan untuk artikel-artikel yang akan datang…….

Tutorial Adobe Photoshop Komplit

 




Saat ini Foto-foto artis Cewe yang banyak beredar di Internet dibuat dengan Adobe Phostoshop. Hasil gambar olahan Adobe Photoshop ini juga banyak dilihat di berbagai website, brosur, koran, majalah, dan media lainnya. Adobe Photoshop adalah software pengolah gambar yang sangat mengeluarkan Adobe Photoshop CS3 yang lebih powerfull. Versi sebelumnya, yaitu Adobe Photoshop CS2, Adobe Photoshop CS, dan Adobe Photoshop 7, masih sering dipakai untuk komputer lama (pentium 3 ke bawah). Tutorial Adobe Photoshop ini dibagi dalam 6 Bab.
BAB I - MENGENAL ADOBE PHOTOSHOP
BAB II - SELECTION & TOOL
BAB III - PERMAINAN WARNA
BAB IV - TEKS DAN VEKTOR
BAB V - LAYER, MASK, STYLE
BAB VI - EFEK KHUSUS PHOTOSHOP



1.1. Apa itu Adobe Photoshop ?
Adobe Photoshop adalah software pengolah gambar yang sangat powerfull dengan segala fasilitasnya. Hasil gambar olah dengan Adobe Photoshop ini banyak dilihat di berbagai website, brosur, koran, majalah, dan media lainnya. Untuk download Adobe Photoshop klik di sini.
1.2. Mengenal Area Kerja
Jalankan Adobe Photoshop kemudian pilih menu File -> Open. Kemudian pilih buka gambar apa saja. Sebagai contoh di buka gambar zhaow.jpg yang ada pada CD Tutorial bagian BAB I (lihat gambar 1.1).
Mengenal Area Kerja Adobe Photoshop
Seringkali letak tool-tool (palette) Adobe Photoshop sudah berubah dimodifikasi oleh pengguna sebelumnya. Untuk mengembalikan letak palette ini gunakan menu Windows -> Workspace -> Reset Palette Location.
Area kerja Adobe Photoshop dapat dilihat pada gambar 1.1, yaitu:
A : Menu Bar, berisi perintah utama untuk membuka file, save, mengubah ukuran gambar, filter dan lain-lain.
B : Option, berisi pilihan dari tool yang Anda pilih. Misalnya dipilih kuas/brush, maka ukuran/diameter brush ada di sini.
C : Gambar, menampilkan gambar yang sedang dibuat atau diedit.
D : Pallete Well, cara cepat untuk mengakses palet brushes, tool resets dan Layer Comps. Juga dapat digunakan untuk meletakkan palet yang sering digunakan.
E : Toolbox, berisi tool untuk menyeleksi dan memodifikasi gambar.
F : Palette, berisi jendela-jendela kecil yang di dalamnya terdapat perintah dan pilihan untuk dokumen/gambar yang sedang dikerjakan.
1.3. Praktek Bab 1 
1.3.1. Membuka dokumen dan membuat duplikat dokumen
Untuk membuka gambar gunakan menu File -> Open, sedangkan untuk membuat duplikat gambar gunakan menu Image -> Duplicate.
1.3.2. Mengubah ukuran gambar dan kanvas
Jika ukuran gambar diubah, maka gambar akan membesar atau mengecil, lakukan dengan menu Image -> Image Size. Jika ukuran kanvas diubah, maka ukuran gambar tetap, akan ada kertas putih di sekeliling gambar, lakukan dengan menu Image -> Canvas Size.
1.3.3. Mencoba ToolBox
Cobalah tool-tool pada ToolBox, satu persatu akan dibahas pada bab berikutnya. Coba klik kanan pada tool yang memiliki segitiga di bagian kanan bawah untuk memilih tool yang tersembunyi.
1.3.4. Mencerminkan dan Memutar Gambar
Cobalah menu Image -> Rotate Canvas -> Flip Canvas Vertikal, Image -> Rotate Canvas -> Flip Canvas Horisontal. Untuk memutar gambar, pilih menu Image -> Rotate Canvas -> pilih sudut yang dikehendaki.
1.3.5. Undo
Undo digunakan untuk membatalkan perintah terakhir, tekan Alt+Ctrl+Z, atau gunakan pallete history.
1.3.6. Memindahkan gambar ke dokumen lain
Untuk memindahkan gambar gunakan Move Tool.
1.3.7. Save for web
Gunakan menu File -> Save for Web untuk menghasilkan gambar dengan ukuran kecil yang biasa digunakan pada web site.



2.1. Menyeleksi Gambar
Menyeleksi berarti memilih bagian tertentu dari gambar. Dengan seleksi kita dapat mengcopy, mengubah, menggeser, atau menambahkan efek kepada bagian yang terseleksi tanpa mempengaruhi bagian lain.
Ada tiga cara menyeleksi yaitu:
  1. Marquee Tool, yaitu menyeleksi dalam bentuk kotak, elips, row, dan kolom
  2. Lasso Tool, untuk menyeleksi dalam bentuk bebas, poligonal atau kekontrasan gambar (Magnetic Lasso Tool).
  3. Magic Wand Tool, untuk menyeleksi berdasarkan persamaan warna.
Tipe seleksi ada dua (dapat dipilih pada Option Bar), yaitu:
  1. Normal, memiliki pinggiran yang tajam.
  2. Feather, memiliki pinggiran yang halus atau kabur.
2.2. Tool-tool yang lain
Tool pada Adobe Photoshop
2.3. Praktek Bab II
2.3.1. Rectangular Marquee Tool
Gunakan rectangular marquee tool untuk memotong gambar dalam bentuk kotak. Gunakan menu Select -> Transform Selection untuk mengubah seleksi dan menu Select -> Feather untuk mengatur ketajaman pinggiran potongan.
2.3.2. Elliptical Marquee Tool
Digunakan untuk membuat seleksi elips atau lingkaran. Anda dapat menggunakan Select -> Transform Selection (atau klik kanan) untuk mengubah bidang yang mau diseleksi. Gunakan menu Select -> Feather untuk mengatur ketajaman tepi gambar. Gunakan Select -> Inverse untuk membalik seleksi.
2.3.3. Lasso Tool
Seleksi ini digunakan untuk menyeleksi bentuk bebas dengan mouse.
2.3.4. Polygonal Lasso Tool
Polygonal Lasso Tool digunakan untuk menyeleksi gambar yang memiliki tepi garis lurus, misalnya piramida pada gambar 2.5. Jika tombol Alt ditekan maka Polygonal Lasso Tool akan berfungsi seperti Lasso Tool biasa. Contoh gambar hasil seleksi piramida diperkecil dan diletakkan pada sudut kanan bawah.
2.3.5. Magnetic Lasso Tool
Magnetic Lasso Tool penggunaanya cukup mudah, karena dengan tool ini seleksi gambar akan secara otomatis membuat garis seleksi pada gambar yang berwarna kontras.
2.3.6. Magic Wand Tool
Magic wand tool akan menyeleksi gambar yang memiliki warna sama.
Tutorial Adobe Photoshop - Magic Wand tool
2.3.3. Crop Tool
Crop tool digunakan untuk menghilangkan bagian yang tidak diseleksi. Contoh penggunaanya di sini digunakan untuk memperbaiki hasil scan yang miring.
2.3.3. Healing Brush Tool
Healing Brush Tool digunakan untuk memperbaiki gambar pada bagian tertentu. Aktifkan tool ini, kemudian tekan Alt + Klik pada objek pada bagian yang tidak berkeriput, kemudian klik pada bagian yang keriputnya ingin dihilangkan.
2.3.4. Spot Healing Brush Tool
Spot Healing Brush Tool digunakan untuk memperbaiki kerusakan gambar. Di sini Anda tidak perlu menentukan area yang akan digunakan sebagai patokan, karena akan secara otomatis terpilih dari area di sekitarnya. Misalnya digunakan untuk menghilangkan keretakan pada patung seperti pada gambar 2.10.
Tool ini merupakan tool baru pada Adobe Photoshop CS2 yang tidak ada pada versi sebelumnya.
2.3.5. Patch Tool
Patch Tool digunakan untuk memperbaiki gambar. Tool ini dibuat dengan cara membuat selection dengan mouse atau dengan menahan tombol ALT untuk menghasilkan bentuk poligonal. Selanjutnya drag ke daerah yang akan dijadikan patokan perbaikan.
2.3.6. Red Eye Tool
Red Eye Tool digunakan untuk memperbaiki warna merah pada mata.
2.3.7. Clone Stamp Tool
Clone Stamp Tool digunakan untuk membuat duplikat area pada gambar, atau yang disebut cloning. Tekan ALT pada objek yang akan dikloning, kemudian gunakan mouse pada area tempat objek baru mau diletakkan.
2.3.8. Background Eraser Tool
Tool ini digunakan untuk menghapus background yang memiliki kemiripan warna. Misalnya digunakan untuk menghapus background langit pada gambar kupu-kupu.
2.3.9. Magic Eraser Tool
Seperti Background Eraser Tool, tool ini akan menghapus area dengan warna sama, namun efeknya adalah ke seluruh gambar, bukan hanya area yang diklik.
2.3.10. Color Replacement Tool
Color Replacement Tool akan mengubah warna gambar tanpa mengubah bentuk dari gambar tersebut. Tool ini akan secara otomatis hanya mengubah area dengan warna sama menjadi warna lain yang dikehendaki.
2.3.11. Blur, Sharpen, dan Smugde Tool
Blur Tool digunakan untuk mengaburkan area. Misalnya digunakan untuk menghilangkan bintik-bintik pada wajah. Sharpen Tool merupakan kebalikan dari Blur Tool. Dengan Sharpen Tool, gambar akan menjadi lebih tajam. Smugde Tool digunakan untuk mengubah bentuk gambar dengan cara drag mouse.
2.3.12. Dogde, Burn, dan Sponge Tool
Dogde Tool digunakan untuk membuat area menjadi lebih terang. Burn Tool digunakan untuk mempergelap area. Spong Tool digunakan untuk mencerahkan (saturate) atau mengurangi warna (desaturate).



3.1. Sekilas mengenai warna
Warna apapun dapat dinyatakan dalam tiga warna dasar (RGB) yaitu merah, hijau, dan biru. Cara menyatakan warna yang lain adalah dengan mode HSL yaitu Hue, Saturation, dan Lightness. Mode lain adalah CMYK (Cyan, Magenta, Yellow, Black).
Pada bab ini akan dibahas mengenai permainan warna, mulai dari mengatur latar belakang gambar, membuat gradient, mengatur brightness & contrast, dan masih banyak lagi tool-tool yang menarik. Pada subbab selanjutnya Anda dapat langsung praktek dengan didampingi instruktur.
3.2. Paint Bucket Tool
Paint Bucket Tool digunakan untuk mengganti background yang memiliki warna sama atau mirip. Background dapat diganti dengan pattern.
3.3. Gradient Tool
Gradient tool digunakan untuk menghasilkan warna gradasi. Jangan lupa lakukan seleksi terlebih dahulu bagian mana yang akan diisi warna gradasi. Jika tidak, maka seluruh kanvas terisi dengan gradasi.
3.4. Brush Tool
Brush Tool digunakan sebagai kuas dalam mengambar dengan mouse. Atur besar kecilnya brush, hardness, opacity, dan flow. Bush Tool dapat juga bekerja pada mode Air Brush.
3.5. Brightness/Contrast
Brightness digunakan untuk mengatur kecerahan gambar. Contrast digunakan untuk mengatur ketajaman gambar. Gunakan menu Image -> Adjustment -> Brightness/Contrast.
3.6. Level
Level berfungsi mirip dengan Brightness/Contrast namun lebih fleksible karena warna dapat diatur warna gelap, warna menengah, dan warna terang. Level dapat bekerja pada selection atau seluruh kanvas. Gunakan menu Image -> Adjustment -> Level.
3.7. Curves
Curves bekerja seperti level, namun Anda mengatur warna RGB dalam bentuk curva. Gunakan menu Image -> Adjustment -> Curves. Curva dapat diatur otomatis, mode RGB atau diatur sendiri-sendiri untuk tiap-tiap warna.
3.8. Color Balance
Melalui menu Image -> Adjustment -> Color Balance kita dapat mengatur keseimbangan warna.
3.9. Photo Filter
Photo filter digunakan untuk memberikan filter pada gambar. Mirip seperti filter yang diletakkan di depan lensa kamera. Gunakan menu Image -> Adjustment -> Photofilter.
3.10. Replace Color
Replace Color digunakan untuk mengganti warna tertentu dalam gambar, sedangkan warna yang lain tidak ikut berubah. Misalnya untuk mengganti warna apel dengan tanpa mengubah warna background. Gunakan menu Image -> Adjusments -> Replace Color.
3.11. Hue/Saturation
Hue/Saturation digunakan untuk mengganti warna pada keseluruhan gambar/seleksi. Hue adalah warna, sedangkan Saturation adalah tebal/tipisnya warna. Gunakan tool ini melalui Image -> Adjustment -> Hue/Saturation. Perubahan warna dapat diatur pada chanel master, atau tiap-tiap warna.
3.12. Match Color
Match Color akan menyamakan warna gambar source kepada gambar yang akan diubah. Misalnya di sini akan diubah gambar danau3.jpg, menjadi suasana matahati terbit seperti gambar acuan. Gunakan tool ini melalui menu Image -> Adjustment -> Match Color.
Tutorial Adobe Photoshop - Match Color
Tutorial Adobe Photoshop - Match Color



4.1. Horisontal Type Tool
Horisontal Type Tool digunakan untuk membuat teks secar horisontal. Hasil teks dapat dipindahkan dengan Move Tool.
Tutorial Adobe Photoshop - Horisontal Type Tool
4.2. Horisontal Type Mask Tool
Horisontal Type Mask Tool digunakan untuk menyeleksi dalam bentuk teks.
4.3. Pen Tool
Peen Tool digunakan untuk membuat garis lurus dan garis lengkung dalam bentuk vektor. Klik sekali untuk membuat anchor point, kemudian jika kurva telah terbentuk, drag anchor point untuk membuat direction point. Path yang dibuat oleh Pen Tool dapat diubah menjadi selection.
4.4. Rectangle, Ellipse, Poligon, dan Custom Shape Tool
Tool ini berguna untuk menghasilkan bentuk kotak (rectangle), ellips, poligon, dan berbagai macam bentuk lain yang telah disediakan oleh Adobne Photoshop. Bentuk-bentuk tersebut misalnya hati, lampu, not balok, dan lain sebagainya.



5.1. Memahami Layer
Layer adalah lapisan tembus pandang. Bagian yang tidak bergambar pada sebuah layer bersifat transparan. Layer dapat ditumpuk dan diatur susunannya. Dengan menggunakan layer, efek-efek akan berlaku dalam layer tertentu saja, tanpa mengganggu layer yang lain.
5.2. Quick Mask Mode
Quick Mask Mode digunakan untuk menyeleksi dengan menggunakan Brush Tool. Aktifkan tool ini dengan menekan tombol Q pada keyboard atau memilih tool Quick Mask Mode.
Tutorial Adobe Photoshop - Quick Mask Mode
Pada contoh ini, gambar beruang di seleksi dengan menggunakan Brush Tool pada mode quick mask. Setelah gambar beruang terseleksi, kembalikan ke mode normal untuk menghasilkan seleksi gambar beruang.
5.3. Layer Mask
Layer Mask digunakan untuk menyembunyikan bagian tertentu pada layer. Gunakan warna hitam untuk menyembunyikan gambar dan warna putih untuk menampilkan gambar.
Tutorial Adobe Photoshop - Layer Mask
5.4. Layer Style
Layer Style merupakan teknik memberikan efek tertentu pada suatu layer. Pilih tool Add Layer Style yang ada pada sudut kanan bawah pallete.
Tutorial Adobe Photoshop - Layer Style



6.1. Filter Liquify
Filter Liquify dapat mengubah gambar secara langsung dengan menggunakan mouse. Misalnya memperbesar/memperkecil mata, menggeser alis, dan sebagainya. Filter ini dapat digunakan melalui menu Filter -> Liquify.
Tutorial Adobe Photoshop - Filter Liquify
6.2. Filter Vanishing Point
Filter Vanishing Point digunakan untuk meng-klone gambar dalam bentuk perspektif. Filter ini dapat digunakan melalui menu Filter -> Vanishing Point. Area sumber kloning ditentukan dengan menekan Alt + Click. Fitur merupakan fitur baru dalam Adobe Photoshop CS2.
Tutorial Adobe Photoshop - Filter Vanishing Point
6.3. Filter Blur
Filter Blur digunakan untuk mengaburkan gambar. Yang menarik dalam filter ini adalah mengaburnya gambar dapat dibuat secara radial. Gunakan filter ini melalui menu Filter -> Blur.
Tutorial Adobe Photoshop - Filter Blur

Cara Membuat Tab Menu Dengan Banyak Style

New

 
http://cariuanglagi.blogspot.com

K
ali ini kita akan membahas cara membuat tab menu pada website khususnya pada Blogspot. Hal ini cukup menarik karena Blogspot tidak menyediakan menu-menu pada halaman blog sehingga kita harus membuatnya secara manual baik dengan menggunakan CSS maupun dengan Javascript. Berikut langkah-langkah membuat tab menu pada website:
  1. Copy paste kode CSS berikut pada website Anda. Jika pada Blogspot, copy paste sebelum kode ]]> pada template Anda. Jangan lupa membackup terlebih dahulu template Anda supaya bisa dikembalikan jika terjadi kesalahan.

    /* ######### CSS untuk Shade Tabs ######### */

    .shadetabs{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }

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

    .shadetabs li a{
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background: white url(shade.gif) top left repeat-x;
    }

    .shadetabs li a:visited{
    color: #2d2b2b;
    }

    .shadetabs li a:hover{
    text-decoration: underline;
    color: #2d2b2b;
    }

    .shadetabs li a.selected{ /*selected main tab style */
    position: relative;
    top: 1px;
    }

    .shadetabs li a.selected{ /*selected main tab style */
    background-image: url(shadeactive.gif);
    border-bottom-color: white;
    }

    .shadetabs li a.selected:hover{ /*selected main tab style */
    text-decoration: none;
    }

    .tabcontent{
    display:none;
    }

    @media print {
    .tabcontent {
    display:block !important;
    }
    }

    /* ######### CSS untuk Inverted Modern Bricks II Tabs ######### */

    .modernbricksmenu2{
    padding: 0;
    width: 362px;
    border-top: 5px solid #D25A0B; /*Brown color theme*/
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }

    .modernbricksmenu2 ul{
    margin:0;
    margin-left: 10px; /*margin between first menu item and left browser edge*/
    padding: 0;
    list-style: none;
    }

    .modernbricksmenu2 li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform:uppercase;
    }

    .modernbricksmenu2 a{
    float: left;
    display: block;
    font: bold 11px Arial;
    color: white;
    text-decoration: none;
    margin: 0 1px 0 0; /*Margin between each menu item*/
    padding: 5px 10px;
    background-color: black; /*Brown color theme*/
    border-top: 1px solid white;
    }

    .modernbricksmenu2 a:hover{
    background-color: #D25A0B; /*Brown color theme*/
    color: white;
    }

    .modernbricksmenu2 a.selected{ /*currently selected tab*/
    background-color: #D25A0B; /*Brown color theme*/
    color: white;
    border-color: #D25A0B; /*Brown color theme*/
    }

    .tabcontent{
    display:none;
    }

    @media print {
    .tabcontent {
    display:block !important;
    }
    }

    /* ######### CSS untuk Indented CSS Tabs ######### */


    .indentmenu{
    font: bold 11px Arial;
    width: 100%; /*leave this value as is in most cases*/
    }

    .indentmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    /* width: 80%; width of menu*/
    border-top: 0px solid navy; /*navy border*/
    background: #e0e0e0 url(htp://h1.ripway.com/sinaga/gambar/indentbg.gif) center center repeat-x;
    }

    .indentmenu ul li{
    display: inline;
    }

    .indentmenu ul li a{
    float: left;
    color: #000000; /*text color*/
    padding: 5px 11px;
    text-decoration: none;
    border-right: 0px solid navy; /*navy divider between menu items*/
    }

    .indentmenu ul li a:visited{
    color: #000000;
    }

    .indentmenu ul li a:hover{
    color: #66B5FF;
    }

    .indentmenu ul li a.selected{
    color: #66B5FF !important;
    padding-top: 6px; /*shift text down 1px*/
    padding-bottom: 4px;
    background: #e0e0e0 url(http://h1.ripway.com/sinaga/gambar/menutabbg.gif) center center repeat-x;
    }


    .tabcontentstyle{ /*style of tab content oontainer*/
    border: none;
    width: 450px;
    margin-bottom: 1em;
    padding: 10px;
    font: normal 11px Arial;
    }

    .tabcontent{
    display:none;
    }

    @media print {
    .tabcontent {
    display:block !important;
    }
    }
                                                   http://cariuanglagi.blogspot.com
  2. Selanjutnya copy paste struktur berikut pada website atau blog Anda sebelum kode :




  • Silahkan ganti tulisan "Tab 1", "Tab 2", dst dengan nama-nama tab menu yang Anda inginkan.








  • Coba perhatikan struktur Tab 1:








  • Tab 1






  • class="selected", artinya adalah tab tersebut menjadi tab yang terbuka pertama kali.
    rel="dog1", artinya tab tersebut dihubungankan dengan "dog1".
    Adapun "dog1" didefenisikan sebagai isi dari Tab 1. Perhatikan struktur yang berwarna orange. Kita memberi atribut ID pada struktur div (kotak) sebagai "dog1". Artinya, isi dari div (kotak) tersebutlah yang akan dihubungkan dengan "Tab 1" dan menjadi isi dari tab tersebut.



  • Begitu pula dengan "Tab 2". Tab tersebut mempunyai rel="dog2". Sedangkan "dog2" merupakan struktur yang berwarna merah.








  • Jika kita ingin menambah tab baru, cukup buat struktur yang mirip dengan struktur "Tab 1" atau "Tab 2". Jadi, yang Anda lakukan adalah menambah tab bernama (misalnya) "Tab 3" sehingga stukturnnya menjadi:
    .......
    Kemudian mendefenisikan "dog3" sebagai is "Tab 3", sehingga struktur lengkapnya menjadi:


    dog1" style="font-size:11px; padding:5px;" class="tabcontent">
    http://cariuanglagi.blogspot.comITS diisukan menjadi kampus BHP. Siapkah mahasiswa ITS menghadapinya?Menolak atau menerima?
    Klik untuk memilih tab akhir


    dog2" style="font-size:11px; padding:5px;" class="tabcontent">
    Isi Tab 2


    dog3" style="font-size:11px; padding:5px;" class="tabcontent">
    Isi Tab 3










  • Coba perhatikan kembali kode CSS yang ada pada langkah 1. Kode tersebut terdiri dari beberapa bagian, yaitu Shade Tabs, Inverted Modern Bricks II Tabs, dan Indented CSS Tabs. Bagian-bagian tersebutlah yang menjadi style atau tipe dari Tab Menu yang bisa Anda ganti-ganti. Untuk menggunakannya cukup ganti bagian yang berwarna merah seperti di bawah ini pada struktur yang Anda copy paste pada langkah 3:
    • Tab 1
    • ...... Misalkan ingin membuat Tab Menu bergaya Indented, maka ganti menjad:
      • Tab 1
      • ...... Sesuaikan dengan nama atribut class pada CSS tersebut.
      • Silahkan lihat contohnya disini.
    Bookmark and Share





  • Pentingnya PageRank Buat Blogger

    Pagerank itu apasih ?       
    http://cariuanglagi.blogspot.com

    dengan pertanyaan diatas, saya mengartikan pagerank seperti ranking kita waktu sekolah. Dapet rangking 1 berarti bagus, rangking 2 lumayan, 3 dst... Tapi pagerang hanya memiliki tingkatan dari 1 - 10. Bedanya semakin besar angkanya semakin baik rangking-nya. Pagerank diupdate oleh mbah Google setiap 3 bulan sekali. Kesimpulan pagerank adalah ukuran angka yang menunjukan tingkat atau pentingnya suatu website/blog di dunia maya.
    Cara Dapet Pagerank gimana ?                 
    http://cariuanglagi.blogspot.com

    Sebenarnya belum ada cara yang pasti untuk meningkatkan pagerank. Web kami ini juga masih ber-pagerank 0 karena baru menetas awal tahun 2010.
    • mendapat backlink yang berkualitas terutama dari website yang mempunyai pagerank tinggi
    • Content dan keyword yang berkualitas di mata Google. Hal ini penting karena Google akan memblokir situs anda mempunyai kontent xxx, SARA, spam, copas.
    • Keyword harus sesuai atau berhubungan dengan isi content
    • Update website secara berkala juga bagus untuk penilaian pagerank. hint : blog ber-artikel banyak disukai oleh Google
    • Validasi web/blog anda : http://validator.w3.org/
    http://cariuanglagi.blogspot.com
    Jika menurut saya pagerank buat pemula belum cukup penting, walaupun penting bagi terkenalnya web.blog tersebut. Mendingan kita naikin trafik pengunjung di Alexa. Setalah trafik naik barulah kita memikirkan hal yang lebuh sulit, yaitu menuliskan angka di pagerank Google.
    Alexa apaan lagi tuh ?
    AlexaRank adalah ukuran kepopuleran suatu Website dengan membandingkan suatu situs dengan semua situs yang berada di jaringan Internet. Perhitungan Alexa rank ini dengan cara mengkombinasikan rata – rata visitor suatu situs perhari dan jumlah jumlah halaman suatu website yang dibuka oleh visitor. semakin tinggi trafiknya semakin, semakin kecil angkanya, semakin banyak pengunjungnya, semakin laris kontenya, semakin mantab lah...
    Kesimpulan dari saya bagi para pemula. Naikin dulu trafik sitenya. jika sudah dikira bagus, baru berpikir yang lebih jauh lagi. Ngincer pagerank-nya mbah Google.
    kapan ya google update pagerank lagi ?
    pakah aku dapat rangking dari google ?
    tunggu kisah selanjutnya.



    Sebenarnya belum ada cara yang pasti untuk meningkatkan pagerank. Web kami ini juga masih ber-pagerank 0 karena baru menetas awal tahun 2010.
    • mendapat backlink yang berkualitas terutama dari website yang mempunyai pagerank tinggi
    • Content dan keyword yang berkualitas di mata Google. Hal ini penting karena Google akan memblokir situs anda mempunyai kontent xxx, SARA, spam, copas.
    • Keyword harus sesuai atau berhubungan dengan isi content
    • Update website secara berkala juga bagus untuk penilaian pagerank. hint : blog ber-artikel banyak disukai oleh Google
    • Validasi web/blog anda : http://validator.w3.org/
    Penting ga sih pagerank buat pemula ?

    Jika menurut saya pagerank buat pemula belum cukup penting, walaupun penting bagi terkenalnya web.blog tersebut. Mendingan kita naikin trafik pengunjung di Alexa. Setalah trafik naik barulah kita memikirkan hal yang lebuh sulit, yaitu menuliskan angka di pagerank Google.
    Alexa apaan lagi tuh ?
    AlexaRank adalah ukuran kepopuleran suatu Website dengan membandingkan suatu situs dengan semua situs yang berada di jaringan Internet. Perhitungan Alexa rank ini dengan cara mengkombinasikan rata – rata visitor suatu situs perhari dan jumlah jumlah halaman suatu website yang dibuka oleh visitor. semakin tinggi trafiknya semakin, semakin kecil angkanya, semakin banyak pengunjungnya, semakin laris kontenya, semakin mantab lah...
    Kesimpulan dari saya bagi para pemula. Naikin dulu trafik sitenya. jika sudah dikira bagus, baru berpikir yang lebih jauh lagi. Ngincer pagerank-nya mbah Google.
    kapan ya google update pagerank lagi ?
    pakah aku dapat rangking dari google ?
    tunggu kisah selanjutnya.