Membuat Foto Vintage (Antik) pada foto Ayu Ting Ting hanya dengan Curves

Foto Vintages adalah foto yang kelihatan antik atau foto jadul.. dulu saya sudah pernah posting cara membuat foto jadul .. cara pembuatan foto vintage atau antik yang ini beda dan gampang banget..Hanya mengandalkan keajaiban CURVES foto vintage pun jadi.. mau bukti ?

Buka foto Ayu Ting Ting ( Neng Ayu Ting Ting ini siapa nya Malih Tong Tong yah ?? ) hehehe

saya ambil dari kapanlagi.com hehehe.. minta foto nya yaa ..

Duplikat layer background dengan menekan CTRL +  J ..

Sekarang Klik Add New Fill and Adjustment layer di Layer Palette.

Di Jendela Curves ada yang nama nya Channel.. dan ini fungsi nya untuk menyeting warna atau cahaya di sebuah foto..

Channel RGB = RED , Green , Blue..

nah kita setting deh si Channel tersebut..

Kita setting Channel Biru nya dulu ..

Sekarang kita setting Channel Green :

Sekarang Channel RED

Catatan : Kalo Kadung ke Klik OK , Klik aja 2x layer Curves di layer pallete nya ..

Pilih Layer Background Copy hasil Duplikat layer background tadi..

Klik Filter > Noise > Add Noise

Sekarang kita gunakan Efek Vignette atau membuat gelap di semua sisi foto.. kita gak perlu pake manual kalo udah pake CS 3 ke atas..

Kita pake Filter Lens Corrections..

Pilih Filter > Distort > Lens Corrections

Kalo sudah di setting Vignette nya  .. Klik OK

Hasilnya  :

Selamat Mencoba !!

Read more »

Cara Memisahkan Objek dan Background pada gambar dengan Plugin Azlect

Tutorial photoshop ini sama dengan tutorial yang pernah saya buat tentang pemisahan background dengan extract bedanya kali ini menggunakan Plugin .. hehe.. lebih gampang dan cepat!

Download dulu Plugin nya di Member Area..  atau yang belum jadi member silahkan cari di google.. ada kok kalo jeli. 

Cara install nya ada juga kok.. jadi download, Install trus pake 

Buka gambar yang mau diedit.. saya pake gambar Steven Gerrard .. Gelandang hebat liverpool itu loh ! hehehe

Duplikat layer background dengan menekan CTRL + J

Sekarang buka Plugin Ezlect nya di Filter > Ezlect > Ezlect extract

Ini Jendela Ezlect nya , toolnya cuman dikit kok jadi mudah dipelajari

Klik Di Object nya ( Steven Gerrard nya)  dengan Penanda Object dan Klik di background oleh penanda background.. penampakannya kayak gini nih

Penanda Objek ditandai dengan gambar kotak kecil kalo penanda background ditandai dengan tanda x

Klik Show mask Image untuk melihat hasilnya… kalo kurang bagus bisa dicoba .. klik lagi Show selection edge (letaknya disamping show mask image)

( tool lain nya di dalam ezlect silahkan di pelajari sendiri .. gampang banget kok)

Kalo sudah beres klik Ok ..

background di layer 1 sudah hilang…

Ini sebenernya sudah beres pekerjaan plugin Azlect..

Sekarang tinggal menggunakan gambar hasil pemisahan background tersebut.. terserah mau diapain.. hehehe

Saya beri background aja deh yaa sebagai contoh nya…

buat layer baru di bawah layer 1

terus warnai dengan warna merah

Sekarang klik 2x layer 1 untuk memunculkan Blending Options

Klik Ok…

Beri text atau gambar tambahan … jadinya seperti ini :

Selamat Mencoba !

Read more »

Membuat Slide Show dan Caption - JQuery

Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat slide show caption. Trik berikut ini dikembangkan oleh http://www.serie3.info/s3slider/ dengan menamakannya "s3Slider jQuery plugin". Slide show ini akan menampilkan gambar dan sebuah caption diatas gambar. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog anda dan biasanya digunakan untuk menampilkan foto-foto dokumentasi serta gambar template blog. Untuk demo klik disini - DEMO.

Untuk membuatnya pertama yaitu
1. Log in ke blogger
2. Klik Tata Letak dan klik pada edit HTML
3. Expand template
4. Masukan script berikut sebelum </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Masukan script jquery ini dibawah script tadi:

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

6. Masukan kode berikut ini pada template, atau menaruhnya pada gadjet anda:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Keterangan: Ubahlah alamat gambar dan keterangannya sesuai kebutuhan anda.
7. Masukan kode berikut sesudah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Keterangan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.

Read more »

Membuat Back To Top dengan Efek JQuery

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Masukan kode javascript ini setelah script jquery tadi:

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scro

5. Cari kode <body> dan ubah menjadi <body id='top'>
6. Masukkan kode html berikut sebelum </body>

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>

7. Simpan template anda dan lihat hasilnya.

Read more »

Cara Merubah Setting Permalink WordPress agar SEO Friendly dan Bebas Masalah

Edisi Tips dan Trik WordPress pada serial Tutorial WordPress kali ini akan membahas tentang bagaimana cara merubah setting/struktur permalink blog wordpress agar lebih SEO friendly dan bebas dari masalah. Pada blog wordpress, setting permalink default adalah /?p=123, sehingga url yg ditampilkan adalah  http://www.namablog.com/?p=123. tentu hal ini kurang SEO friendly karena judul posting tidak ditampilkan pada url. Seperti belajar on-page SEO,  kita tahu bahwa tampilnya judul posting pada permalink akan sangat membantu hasil SERPs ( Search engine Result Pages). Sebaiknya struktur permalink diganti menjadi /%category%/%postname% atau bahkan hanya /%postname% saja. sehingga pada url posting blog akan tampil http://www.namablog.com/kategori/judulposting atauhttp://www.namablog.com/judulposting saja

Pada Blog WordPress baru tentu saja hal ini tidak masalah. perubahan bisa dilakukan secara mudah dan tidak beresiko. Tapi bagaimana dengan blog yg sudah berisi banyak konten? hal ini menyisakan masalah karena blog tersebut akan kehilangan backlink yang sudah dibangun dengan susah payah akibat perubahan struktur permalink tersebut. Nah pada tutorial wordpress kali ini saya akan memberikan tips dan trik wordpress sederhana untuk mengatasi masalah tersebut dengan menggunakan trik redirect file .htaccess, yuk kita mulaii..

Pertama yg harus anda lakukan adalah login ke wordpress admin panel. Pada dashboard wordpress anda, klik Settings > Permalinks. Kemudian pilih custom lalu isi dengan/%category%/%postname% atau /%postname% saja, seperti gambar dibawah ini (klik untuk memperbesar):

setelah itu, struktur permalink anda akan tampak seperti ini

http://www.namablog.com/judulposting

Sekarang kita harus me-redirect seluruh backlink yang menggunakan struktur permalink lama ke struktur permalink baru. Untuk melakukan ini anda harus meng-edit file .htaccess yang berlokasi di root directory pada hosting wordpress anda, Berhati-hatilah jika akan meng-edit file .htaccess ini, pastikan anda backup file ini terlebih dahulu.

Download dan buka file .htaccess dengan file editor semacam notepad atau wordpad,  kemudian tambahkan baris dibawah ini :

RedirectMatch 301 /([0-9]+)/([0-9]+)/([0-9]+)/(.*)$ http://www.domain.com/$4

Kemudian simpan perubahan tersebut dan upload lagi pada root directory wordpress anda. Selesai, anda baru saja merubah setting struktur permalink wordpress anda tanpa harus kehilangan backlink

Read more »

Cara Menghilangkan Widget Attribution Blogger

Pada episode yang lalu saya sudah menerangkantentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

pertama masuk pada "Design" Lalu "Edit HTML"

masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {height:0px; 
visibility:hidden;
display:none
}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Read more »

Jquery Multi Level Menu Horizontal

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Read more »

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note : 

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat. 

Read more »