Jumat, 27 April 2012

Cara Membuat Menu Horizontal

Cara Membuat Menu Atas Di Blogspot | Menu Horizontal

Bagi anda yang memiliki blog, anda dapat mempercantik blog anda dengan memasang menu cantik ini. Agar tampilan blog anda terlihat lebih menarik dibandingkan sebelumnya. Menu yang di letakkan dengan posisi mendatar yang pada umum nya terletak di bagian atas blog atau website ini adalah menu horizontal. Dengan menu ini kita dapat mengisikan alamat link tujuan atau menjadikan nya sebagai navigasi blog kita. Baik langsung saja kita lihat langkah langkah nya berikut ini :

anda akan mendapat tampilan menu seperti ini :

Cara pemasangan menu horizontal ini adalah sebagai berikut :

1. Copy Kode Berikut ini :

.menu-solid{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: #ebf225 ;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
}
.menu-solid {
display: inline;
}
.menu-solid a{
float: left;
color: #000;
padding: 9px 11px;
text-decoration: none;
}
.menu-solid a:visited{
color: #cc0000;
}

.menu-solid a:hover, .menu-solid .current{
color: #ffffff;
background: #800000;
text-decoration:none;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

2. Masuk ke edit HTML blog dan cari kode ]]></b:skin> dan copy kan kode tadi di atasnya.

3. Masuk ke tata letak / rancangan blog. Pilih Tambah Gadget dan pilihhtml/javascript

4. Copy kan kode berikut dan pastekan di dalamnya :

<div class='menu-solid'>
<a href='http://jss-triplernews.blogspot.com'target="_blank">Home</a>
<a href='http://jss-triplernews.blogspot.com/p/cara-daftar-jss-tripler.html'target="_blank">Cara Daftar</a>
<a href='http://jss-triplernews.blogspot.com/p/cara-membeli-posisi-jss-tripler.html'target="_blank">Beli Posisi</a>
<a href='http://sinma68.blogspot.com/2010/09/membuat-acoount-alertpay.html'target="_blank">Daftar AlertPay</a>
</div>

SELESAI.

Demikian lah artikel untuk membuat menu horizontal. Silahkan baca

Membuat Gambar Bergetar di Blogspot

Membuat Gambar Bergetar di Blogspot | Trik Blogspot

Agar gambar yang anda masukkan ke blogspot baik di postingan maupun di sisi kiri dan sisi kanan blog terlihat menarik, anda dapat membuat gambar anda bergetar. Baik :-) Nah. Mau tau gimana caranya??

Sebelumnya anda bisa melihat gambar yang bergetar berikut ini :

Nah. Berikut adalah kode serta penjelasan nya :

Penjelasan :

1. Tulisan tebal pertama adalah lebar area getar.

2. Tulisan tebal kedua adalah URL gambar. (Ganti url gambar tersebut dengan gambar anda).

3. Tulisan tebal ke tiga adalah ukuran lebar gambar. (ukuran lebar gambar harus lebih kecil 10px dari point no 1. Karena inilah yang akan membuat gambar bergetar.

Selamat Mencoba Trik ini. Semoga Berhasil.. :-)

Cara Membuat Menu Atas DI Blogspot

Cara Membuat Menu Atas Di Blogspot 2 | Menu Dropdown

Postingan berikut adalah lanjutan dari postingan sebelumnya yaitu cara membuat menu atas di blogspot / menu horizontal. Dan kemarin ada yang berkomentar tentang menu dropdown pada blogspot. Nah. Postingan ini merupakan pengembangan dari menu sebelumnya yang hanya berupa deretan menu. Dan ini yang bisa drop down seperti gambar berikut ini :

Nah. Untuk membuat menu drop down seperti yang terlihat pada gambar di atas, anda cukup mengikuti instruksi atau langkah langkah berikut ini :

1. Masuk ke EDIT HTML blog anda dan jangan lupa centrang Expand Widget Template nya.

2. Langkah kedua yaitu anda harus mencari kode <div id='content-wrapper'> dengan menekan ctrl + f agar pencarian cepat ditemukan.

3. Setelah menemukan kode tersebut. copy kodde di bawah ini dan pastekan di atasnya

<div id='Menumainwrapx'>
<b:section id='NavbarMenux'>
<b:widget id='HTML50' locked='false' title='MembuatMenu' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div> 
<div class='clear'/>

4. Copy juga kode berikut di atas kode ]]></b:skin>

#Menumainwrapx {
background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;
border-bottom:1px solid #CCCCCC;
height:42px;
margin:0;
padding:0;
}
#NavbarMenux {
width: 950px;
height: 41px;
font-size: 13px;
color:#333333;
margin: 0px;
padding: 0;
font-weight:bold;
font-family:arial;
margin: 0 auto;
}
#NavbarMenuleftx {
width: 950px;
margin: 0;float:left;}
#navx { margin: 0;
padding: 0; }
#navx ul {
float: left;
list-style: none;
margin: 0;
padding: 0; }
#navx li {
list-style: none;
margin: 0px;
padding: 0; }
#navx li a,
#navx li a:link,
#navx li a:visited {
height: 22px;
color: #333333;
display: block;
font-size: 13px;
text-decoration: none;
margin: 0;
padding:10px 13px 9px 13px;
border-right: 1px solid #CFCFCF; }
#navx li a:hover,
#navx li a:active {
color: #333;
margin: 0;
text-decoration: none;
background:#F0F0F0;
}
#navx li li a, #nav li li a:link,
#navx li li a:visited {
background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;
min-width: 150px;
color: #333333;
font-size: 14px;
font-weight: normal;
float: none; margin: 0;
padding: 5px 10px;
font-weight:bold;
font-family:arial;
box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
text-align:left;}
#navx li li a:hover,
#navx li li a:active {
background: #F5F5F5;
color: #333;
}
#navx li {
float: left;
padding: 0; }
#navx li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin:0;
padding: 0;
border-top:1px solid #242424;
}
#navx li ul a {
width: 140px; }
#navx li ul ul {
margin: -41.5px 0 0 176px;
border:none;}
#navx li:hover ul ul,
#navx li:hover ul ul ul, #navx li.sfhover ul ul,
#navx li.sfhover ul ul ul {
left: -999em; }
#navx li:hover ul,
#navx li li:hover ul,
#navx li li li:hover ul,
#navx li.sfhover ul,
#navx li li.sfhover ul,
#navx li li li.sfhover ul {
left: auto; }
#navx li:hover,
#navx li.sfhover {
position: static; }

5. Klik SIMPAN. Lalu tambah kan gadget html/javascript pada tata letak blog anda di bagian atas. Sesuaikan dengan template anda. Isikan gadget tersebut dengan kode berikut :

<div id='navbarmenuleftx'>
<ul id='navx'>

<li><a href='/'>Home</a></li>
<li><a href='#yourlink'>Menu 1</a>
<ul>
<li><a href='#yourlink'>Menu 1.1</a>
<ul>
<li><a href='#yourlink'>Menu 1.1.1</a></li>
<li><a href='#yourlink'>Menu 1.1.2</a></li>
<li><a href='#yourlink'>Menu 1.1.3</a></li>
<li><a href='#yourlink'>Menu 1.1.4</a></li>
</ul>
</li>

<li><a href='#yourlink'>Menu 1.2</a>
<ul>
<li><a href='#yourlink'>Menu 1.2.1</a></li>
<li><a href='#yourlink'>Menu 1.2.2</a></li>
<li><a href='#yourlink'>Menu 1.2.3</a></li>
<li><a href='#yourlink'>Menu 1.2.4</a></li>
</ul>
</li>

<li><a href='#yourlink'>Menu 1.3</a>
<ul>
<li><a href='#yourlink'>Menu 1.3.1</a></li>
<li><a href='#yourlink'>Menu 1.3.2</a></li>
<li><a href='#yourlink'>Menu 1.3.3</a></li>
<li><a href='#yourlink'>Menu 1.3.4</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</div>

Kamis, 26 April 2012

Membuat text area

membuat text area

Text area berfungsi untuk menyimpan kode kode html.contohnya seperti ini:

didalam kolom tersebut kamu bisa menyimpan kode kode HTML yang bisa di copy oleh pengunjung blog.sekarang akan saya ajarkan cara membuatnya.

anda cukup copy code berikut :

1.Text area biasa

<p align="center"><textarea name="code" rows="6" cols="20"> test cara membuat text area...anda bisa menuliskan kode kode HTML di dalam kolom ini</textarea></p>

catatan:
1.kamu bisa mengganti tulisan yang di cetak tebal dengan kode kode yang ingin anda letakkan dalam kolom tersebut.anda bisa meletakkan dalam postingan atau bisa juga diletakkan di dalam page element

2.row="6" ini menunjukkan tinggi dari kolom tersebut.jika ingin kotaknya lebih tinggi,silahkan ganti dengan angka yang lebih besar

3.cols="20" ini menunjukkan lebar kolom

2.Text area Highlightdengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all
maka semua text yang ada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.

contohnya seperti ini

cara membuatnya..copy code dibawah ini:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all maka semua text yan gada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.</textarea></p></div></form>

catatan:
1.ganti tulisan yang dicetak tebal dengan tulisan yang anda inginkan
2.<div align="center"> --> itu menunjukkan tombol highligh akan berada di tengah,jika ingin tombol itu berada di kanan atau kiri,tinggal ganti dengan left atau right
3.Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
4.<p align="center"> menunjukkan bahwa text area berada ditengah,jika ingin berada di kanan atau kiri tinggal ganti dengan right atau left
5.<text style="WIDTH: 300px"> menunjukkan lebar kolom
6.HEIGHT: 144px menunjukkan tinggi kolom

SELAMAT MENCOBA

Cara Membuat Search Engine di Blog

cara membuat search engine di blog

Search engine adalah mesin pencari yang bisa anda gunakan untuk mencari apapun.alangkah praktisnya kalo di blog kita tersedia fasilitas search engine...maka jika ada pengunjung yang datang,mereka tinggal mengetikkan judul artikel yang ingin mereka baca di search engine yang telah kita sediakan blog.dalam sekejap judul tulisan yang mereka ketik akan muncul.hal ini akan sangat menghemat waktu ketimbang harus mencari satu persatu didalam arcieve blog.pengunjung akan senang dan mereka pasti akan datang lagi lain waktu.hal ini akan menjadi nilai plus untuk menaikkan traffic blog anda.
masalahnya sekarang..gimana cara memasang fasilitas pintar itu?tenang saja dalam artikel ini saya akan menunjukkan cara membuat search engine di blog.
1.login ke blogger.com

2.PIlih Desain,lalu pilih tat letak

3.didalam menu page element pilih add a gadget

4.setelah itu muncul layar baru...klik HTML/Javascript

5.copy kode tersebut

<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
ganti tulisan "nama-blogmu.blogspot.com" dengan alamat blog anda.
untuk memeperkecil ukuran panjang kotak search engine..tinggal ganti angka 30 nya

Minggu, 15 April 2012

REALISTIC PHOTO OBJECT

Realistic Photo Object

Tadi ada message di Facebook saya, dan saya disuruh ngasih saran hasil editan dia (id facebooknya Razyid Crenz Di Atas Bimbang). Setelah saya liat.. wihh.. keren juga.. Ide nya cemerlang.. mungkin beliau dapet ide dari tutorial 3D Realistic yang saya buat beberapa waktu lalu. Kalo ada yang penasaran mau liat Hasil editan foto dari RAzyid Crenz

Kalo ada yang mau tau cara bikinnya.. simak aja tutorial ini.. oia.. sebelumya saya ucapin makasih buat Razyid Crenz (gak tau nama asli nya) hehehe..
Pertama buka foto yang mau diedit. ( saya pake Jepretan saya waktu maen ke Bandung – Anak-anak bandung udah pada jago maen Skateboard hehehe.. keren )

Tekan Ctrl + J untuk menduplikat gambar. Klik di background lalu tekan CTRL+backspace untuk mengubah gambar menjadi putih. Oia lupa.. si Foreground color sama background color nya diubah DEFAULT ( background putih , foreground hitam) terlebih dulu dengan menekan tombol D.

Klik layer 1. Kecilin gambarnya dengan MOVE TOOl, Klik kotak di pojok lalu drag sambil tekan tombol SHIFT (supaya dimensi nya tetep sama). Untuk menampilkan kotak dipojok gambar ( transform control) contreng Show transform control (CS3 ke atas) atau Show bouncing box ( CS2 kebawah).

Bawa gambar ke tengah. Buat kotak dengan Rectangle Marquee tool . tekan CTRL C (untuk copy hasil seleksi ) dan tekan CTRL +V untuk paste. Maka terbentuk layer baru dengan gambar baru hasil seleksi tadi.

CTRL+klik layer 2 untuk membuat seleksi. Buat layer baru dan simpan di bawah layer 2. Warnai dengan warna putih menggunakan paint bucket tool.

Pilih layer 2 lagi. Klik Select > Modify > Contract.

lalu klik Select > inverse untuk menyeleksi kebalikan nya.

Lalu tekan Delete. hasilnya gini

Sekarang matikan layer 2 dan layer 3 ( dengan mengklik gambar Mata di layer palette). sehingga yang tampil sekarang hanya layer 1.

Seleksi objek gambar diluar layer 2 tadi.

Klik Select > modify > feather (CS3 ke atas) atau Select > feather ( CS2 kebawah). Supaya hasil crop nya bagus dan tidak kaku.

Tekan CTRL + C (copy) terus tekan CTRL+ V (paste) sehingga muncul layer baru (layer 4) secara otomatis. Simpan layer 4 di paling atas.

Munculin lagi layer 2 dan layer 3 , dan Lenyapkan layer 1 !! hehehe. ( ada gambar mata = muncul , tidak ada gambar mata = lenyap)

Klik layer 2. lalu tekan CTRL+E , supaya Layer 2 Ber Koalisi dengan layer di bawahnya dalam hal ini layer 3. Mumpung rame-rame nya pemilu nih.hehehe,. terbentuk layer 3.

sekarang Putar kanvas nya. Klik Image > Rotate canvas > 90 CW ( CW=searah jarum Jam)

Pilih layer 3 . Klik Filter > Distort > Shear . Lengkungkan sedikit.

Sekarang pilih layer 5 . sama Klik Filter > Distort> Shear. Lengkungan musti sama persis ( biasanya udah otomatis sama dengan yang sebelumnya)

Sekarang Putar lagi canvas nya. Klik Image > Rotate canvas > 90 CCW ( CCW= berlawanan arah jarum jam).
Buat layer baru , bikin Kotak sesuai gambar lalu warnai dengan warna hitam ( ini buat bikin bayangan nya). Layer baru ini disimpan dibawah gambar.

Klik Filter>Blur> Gaussian Blur

geser dikit-dikit supaya bayangan keliatan realistis dengan menggunakan panak di Keyboard.
hasilnya :

Yang lain

Selamat Mencoba

Minggu, 08 April 2012

Photoshop tutorial : Foto Choki Sitohang dengan Efek Avatar

sekarang saya mau posting efek film Avatar di Foto Choki Sitohang si Presenter Take Me Out dan Happy Song itu loh.. seperti biasa Sebelumnya saya minta maaf dulu ke Bang Choki Sitohang karena fotonya dipake buat belajar.. gak apa-apa kan bang.? Meski fotonya dibikin efek Avatar.. tapi bang Choki tetep ganteng kok..

.. buset cowo ngerayu cowo.. apa kata dunia?? hehehe..
gak kok .. ini sekedar permintaan izin aja, jangan sampe nanti ada masalah di kemudian hari.. bener gak ? kan gak lucu nanti tiba-tiba Choki Sitohang nuntut saya gara-gara fotonya dibikin Avatar.. terus tiba-tiba saya muncul di Infotainment.. beuh.. gak kebayang deh.. :p.
Tapi efek ini sekedar efek enhancement aja.. gak ngerubah bentuk foto asli nya.. seperti telinga di lebarin, hidung di gedein.. gak sama sekali…
Buka foto choki sitohang yang saya dapet dari google image..

kalo mau image ukuran asli nya klik gambar dibawah nanti save..

kalo udah dibuka foto nya tekan CTRL + SHIFT + U supaya warna nya jadi hitam putih.. atau desaturate.. atau klik image> adjustment > desaturate

buat layer baru ( klik layer > new > layer ) dan warnai dengan warna Biru ( kode warna ada di gambar ) .. anggap foto di layer background udah hitam putih.. tadi saya kelewat hehehe..

ubah layer effect nya menjadi color dan opacity jadi 50%

sekarang gabungkan kedua layer tersebut dalam satu layer baru dengan menekan CTRL + SHIFT + ALT + E.. ubah mode layer menjadi color burn

Klik Image> adjustment > exposure

duplikat layer 2 dengan menekan CTRL + J .. lalu beri efek Blur.. Klik filter > blur > gaussian blur

buat layer baru ( klik layer > new > layer ) , warnai dengan warna hitam , Layer Mode jadi Soft light dan opacity sekitar 75%

Duplikat lagi layer 3 dengan menekan CTRL + J .. ubah layer Mode menjadi Normal dan opacity jadi 90%.

Klik Add vector mask untuk masking daerah yang diperlukan dalam hal ini daerah muka.

klik brush tool .. klik kanan di gambar lalu setting brush nya

warnai daerah muka dan leher di Vector mask yang tadi dibuat.

Sekarang kita buat highlight di daerah muka dan leher .. Buat layer baru .. gunakan brush tool lagi.. warna foreground putih.. kecilin ukuran brush nya.. ( kira- kira aja ya ).. brush seperti contoh dibawah.

klik Filter > blur > gaussian blur

ubah layer mode menjadi soft light.

Klik add New Fill or Adjustment layer dibawah Layer palette. lalu setting seperti gambar

Cukup sudah settingan muka nya nya..
Sekarang kita lalukan pencerahan dan pewarnaan di daerah mata..
Duplikat layer Background ( foto Choki Sitohang tadi ) .. pindahkan layer duplikatan tadi ke paling atas..

Klik Layer > Layer mask > HIDE ALL
Warnai bagian bola mata dengan warna putih.

sekarang duplikat layer background copy .. klik kanan > duplikat layer
Klik Image > Adjustment > Hue/saturation

warna jadi Ijo kan mata nya.. sekarang hapus yang putih nya aja.. klik di layer mask.. lalu warnai dengan warna hitam.. ( putihnya saja)

sekarang kita buat titik-titik di bagian jidat, hidung dan pipi..
buat layer baru.. gunakan brush tool ukuran kecil .. warna putih .. klik di setiap bagian yang mau di kasih bintik.